मानचित्र बॉक्स जीएल जे एस में डेटा के लिए एक यूआरएल को कैसे जोड़ें

वोट
0

मैं एक मानचित्र पर मार्कर जोड़ने के लिए MapBox js का उपयोग करता है एक रेल एप्लिकेशन है। यह MapBox जे एस के साथ पूरी तरह से काम करता है। हालांकि, मैं समझ नहीं है कि यह कैसे MapBox जीएल जे एस के साथ काम करने के लिए। यहाँ मेरी नियंत्रक सूचकांक कार्रवाई है:

def index
   @locations = Location.all

   @geojson = Array.new

   @locations.each do |location|
     @geojson << {
       type: 'Feature',
       geometry: {
         type: 'Point',
         coordinates: [location.longitude, location.latitude]
       },
       properties: {
         title: location.name,
         description: [location.elevation, location.locatable_type ],
         :'marker-color' => #3ca0d3,
         :'marker-symbol' => rocket,
         :'marker-size' => 'medium'
       }
     }
  end

  respond_to do |format|
    format.html
    format.json { render json: @geojson }   
  end

end

मेरे विचार में, मैं MapBox जे एस के साथ नक्शे पर अंक प्राप्त करने के लिए इस स्क्रिप्ट का उपयोग:

  L.mapbox.accessToken = 'pk.mylongaccesskeygoeshere';

  var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([13.770391, -88.866245], 8);
  map.scrollWheelZoom.disable();    

  var featureLayer = L.mapbox.featureLayer()
  .loadURL('/maps/index.json')
  .addTo(map);

मेरा प्रश्न है: मैं MapBox जीएल जे एस के साथ यह पूरा कैसे करूँ? यहाँ कोड मैं पृष्ठ पर नक्शा प्राप्त करने के लिए इस्तेमाल करते हैं।

   mapboxgl.accessToken = 'pk.mylongaccesskeygoeshere';

   var map = new mapboxgl.Map({
   container: 'map', // container id
   style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
   center: [-88.866245, 13.770391], // starting position
   zoom: 7.2 // starting zoom
   });

मैं डाटा के लिए मेरे यूआरएल पारित करने के लिए है कि यह MapBox जीएल जे एस दस्तावेज में कहते हैं अलग अलग तरीकों का एक बहुत कोशिश की है। उदाहरण के लिए, मैंने कोशिश की

 mapboxgl.accessToken = 'pk.mylongaccesskeygoeshere';

  var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
    center: [-88.866245, 13.770391], // starting position
    zoom: 7.2 // starting zoom
  });

  var url = '/maps/index.json';
    var source = new mapboxgl.GeoJSONSource({
    data: url
  });

  map.on('load', function () {
    map.addSource('location', source);
    map.addLayer({
        id: location,
        type: symbol,
        source: location,
        layout: {
          icon-image: rocket-15,
        }
    });
  });

मैं अपने कंसोल में इस त्रुटि मिलती है:

map.js:929 Error: Input data is not a valid GeoJSON
object.util.extend.onError        @ map.js:929
Evented.fire                      @ evented.js:90
util.extend._forwardSourceEvent   @ map.js:943
Evented.fire                      @ evented.js:90
util.inherit._forwardSourceEvent  @ style.js:680
Evented.fire                      @ evented.js:90
(anonymous function)              @ geojson_source.js:162
Actor.receive                     @ actor.js:31

जब मैं नक्शे के लिए जाना / पृष्ठ पर json के उत्पादन index.json इस तरह दिखता है:

[
  {
    type: Feature,
    geometry: {
      type: Point,
      coordinates: [
        -89.12312324,
        13.686886
      ]
    },
    properties: {
      title: Random Location,
      description: [
        700.0,
        Individual
      ],
      marker-color: #3ca0d3,
      marker-symbol: rocket,
      marker-size: medium
    }
  },
  {
    type: Feature,
    geometry: {
      type: Point,
      coordinates: [
        -88.231293812398,
        13.087893
      ]
    },
    properties: {
      title: Some Place,
      description: [
        50.0,
        Organization
      ],
      marker-color: #3ca0d3,
      marker-symbol: rocket,
      marker-size: medium
    }
  },
  {
    type: Feature,
    geometry: {
      type: Point,
      coordinates: [
        -89.224564,
        13.700985
      ]
    },
    properties: {
      title: San Salvador,
      description: [
        550.0,
        Individual
      ],
      marker-color: #3ca0d3,
      marker-symbol: rocket,
      marker-size: medium
    }
  },
  {
    type: Feature,
    geometry: {
      type: Point,
      coordinates: [
        -89.0,
        13.0
      ]
    },
    properties: {
      title: Set Location Test,
      description: [
        100.0,
        Individual
      ],
      marker-color: #3ca0d3,
      marker-symbol: rocket,
      marker-size: medium
    }
  }
]
27/05/2016 को 16:45
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
1

आपको लगता है कि कहते हैं आपके कंसोल में एक त्रुटि दिखाई दे रही "इनपुट डेटा एक वैध GeoJSON नहीं है।" आप अगर अपने इनपुट डेटा मान्य GeoJSON है देखने के लिए जांच की है?

GeoJSON JSON के एक सबसेट है। JSON का समर्थन नहीं करता //टिप्पणी नहीं।

27/05/2016 को 16:56
का स्रोत उपयोगकर्ता

वोट
1

मैं समस्या को हल करने में सक्षम था।

मुद्दा json कि मेरे नियंत्रक में मेरी सूचकांक कार्रवाई पैदा किया गया है। मैं MapBox के उपकरण GeoJSON संकेत इस्तेमाल किया https://www.mapbox.com/geojsonhint/ मेरी json डिबग करने के लिए। परिणाम यह निकला:

[शुरुआत में और] अंत में समस्याएँ थीं

और मैं याद आ रही थी

"type": "FeatureCollection",
  "features": [

शुरू में।

तो, बजाय नियंत्रक का उपयोग करने का json उत्पन्न करने के लिए। मैं JBuilder इस्तेमाल किया।

मेरी नियंत्रक सूचकांक कार्रवाई इस तरह देखने के लिए बदल गया

def index
  @locations.Location.all
end

मैं विस्तार .json.jbuilder के साथ एक दृश्य निर्मित और कहा कि

json.type "FeatureCollection"
json.features @locations do |location|
  json.type "Feature"
  json.geometry do 
    json.type "Point"
    json.coordinates [location.longitude.to_f,location.latitude.to_f]
  end
  json.properties do
    json.title location.name
  end
end

जिसके परिणामस्वरूप json है

 {
 "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89,
          13
        ]
      },
      "properties": {
        "title": "Random Location"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -88,
          13
        ]
      },
      "properties": {
        "title": "Some Place"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89,
          13
        ]
      },
      "properties": {
        "title": "Fantacy Club Bar"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89,
          13
        ]
      },
      "properties": {
        "title": "Set Location Test"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89,
          14
        ]
      },
      "properties": {
        "title": "Some place else"
      }
    }
  ]
}

सूचना JBuilder कोड में to_f। यही कारण है कि सुनिश्चित करें कि आप एक नाव मिल बनाता है। महत्वपूर्ण बात यह है कि डेटा के नक्शे पर है।

27/05/2016 को 21:11
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more