CODEWITHSUNDEEP
javascriptmapsgeojsonmapbox
stursby
stursby

Reputation: 879

loading GeoJSON markers into MapBox

I'm trying to figure out how to load GeoJSON list on lon/lat coordinates into a MapBox map. I think I'm close, I just can't seem to get it actually working.

I have a demo page set up here: http://sandbox.charliehield.com/mapbox/

Here's the GeoJSON file:

{
  "type": "MultiPoint",
  "coordinates": [
    [
      "-105.277803",
      "40.006977"
    ],
    [
      "-93.304988",
      "44.947198"
    ],
    [
      "151.206990",
      "-33.867487"
    ]
  ]
}

The HTML is simply:

<div id="map"></div>

And the JS:

var map = mapbox.map('map');
map.addLayer(mapbox.layer().id('examples.map-zr0njcqy'));
map.ui.zoomer.add();

// example.geojson is a well-formed GeoJSON document. For this
// style, the file must be on the same domain name as the map,
// or loading will not work due to cross-domain request restrictions

var markers = mapbox.markers.layer().url('markers.geojson');
mapbox.markers.interaction(markers);
map.addLayer(markers);

// Zoom and center the map
map.zoom(2).center({ lat: 39.74739, lon: -105 });

Upvotes: 2

Views: 6298

Answers (2)

he_wolf
he_wolf

Reputation: 21

I had the same issue loading geojson to my mapbox map. The comments in the JS actually pointed out the reason: there are cross-domain request restrictions.

You could check the same origin policy and you would want to run the application somewhere else.

Upvotes: 0

tristen
tristen

Reputation: 4735

Looks like you need to format your geojson a little more explicitly with a geometry object and key value pairings. See http://mapbox.com/mapbox.js/example/custom-marker-tooltip as an example.

Upvotes: 2

Related Questions