0

Im new in using Mapbox and coding. So i tried these examples on mapbox .. There is a guide how to use GeoJSON in a map. When i copy the example everything works fine. When i tru to do it with my own Map ID and my own .geojson file it doesnt show the markers i made with the qeojson.

This is probably something with the Same Origin Policy but i have no clue how to solve this.

L.mapbox.accessToken = 'xxxxxxxxxxxxxxxxxxxxxxx';
var map = L.mapbox.map('arnojansens.m67ea8oe', 'mapbox.streets', {doubleClickZoom: false})
    .setView([50.93274, 4.21793], 17);
    map.on('dblclick', function(e) {
        alert(e.latlng);
    });
map.zoomControl.setPosition('topright');

var featureLayer = L.mapbox.featureLayer()
.loadURL('/data/map.geojson')
.addTo(map);

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": "marker-i9o53vrk1",
        "title": "'T Gouden Frietje",
        "description": "Frituur - Pol & Johan ",
        "marker-size": "large",
        "marker-color": "#f5c272",
        "marker-symbol": "fast-food"
      },
      "geometry": {
        "coordinates": [
          4.223376,
          50.933714
        ],
        "type": "Point"
      },
      "id": "ci9o5l91s03f8kwm4crz7akr4"
    },
    {
      "type": "Feature",
      "properties": {
        "id": "marker-i9o5cke12",
        "title": "Beenhouwerij",
        "description": "",
        "marker-size": "large",
        "marker-color": "#e7857f",
        "marker-symbol": "slaughterhouse"
      },
      "geometry": {
        "coordinates": [
          4.223685,
          50.933713
        ],
        "type": "Point"
      },
      "id": "ci9o5l91u03f9kwm4f0qapngb"
    },
    {
      "type": "Feature",
      "properties": {
        "id": "marker-i9o5f2gp3",
        "title": "Beenhouwerij",
        "description": "",
        "marker-size": "large",
        "marker-color": "#e7857f",
        "marker-symbol": "slaughterhouse"
      },
      "geometry": {
        "coordinates": [
          4.216918,
          50.933488
        ],
        "type": "Point"
      },
      "id": "ci9o5l91v03fakwm434twwv2l"
    },
    {
      "type": "Feature",
      "properties": {
        "id": "marker-i9o5g6ik4",
        "title": "Lagere school",
        "description": "",
        "marker-size": "large",
        "marker-color": "#3ca0d3",
        "marker-symbol": "college"
      },
      "geometry": {
        "coordinates": [
          4.225055,
          50.932756
        ],
        "type": "Point"
      },
      "id": "ci9o5l91x03fbkwm4wt0bb2e3"
    },
    {
      "type": "Feature",
      "properties": {
        "id": "marker-i9o5gtqc5",
        "title": "Scouts Mollem",
        "description": "",
        "marker-size": "large",
        "marker-color": "#7ec9b1",
        "marker-symbol": "pitch"
      },
      "geometry": {
        "coordinates": [
          4.225434,
          50.932496
        ],
        "type": "Point"
      },
      "id": "ci9o5l91y03fckwm405qiiy8h"
    },
    {
      "type": "Feature",
      "properties": {
        "id": "marker-i9o5hmw16",
        "title": "Basketbalveld",
        "description": "",
        "marker-size": "large",
        "marker-color": "#677da7",
        "marker-symbol": "basketball"
      },
      "geometry": {
        "coordinates": [
          4.224787,
          50.932234
        ],
        "type": "Point"
      },
      "id": "ci9o5l91z03fdkwm40nbu93kt"
    },
    {
      "type": "Feature",
      "properties": {
        "id": "marker-i9o5ilk57",
        "title": "Kerk Mollem",
        "description": "",
        "marker-size": "large",
        "marker-color": "#6c6c6c",
        "marker-symbol": "religious-christian"
      },
      "geometry": {
        "coordinates": [
          4.226949,
          50.930707
        ],
        "type": "Point"
      },
      "id": "ci9o5l92003fekwm4zfk58zsc"
    },
    {
      "type": "Feature",
      "properties": {
        "id": "marker-i9o5j7yl8",
        "title": "Trapkes op",
        "description": "",
        "marker-size": "large",
        "marker-color": "#f1f075",
        "marker-symbol": "beer"
      },
      "geometry": {
        "coordinates": [
          4.227024,
          50.93059
        ],
        "type": "Point"
      },
      "id": "ci9o5l92103ffkwm4bg2ygo9r"
    },
    {
      "type": "Feature",
      "properties": {
        "id": "marker-i9o5kmqz9",
        "title": "Voetbal Mollem",
        "description": "",
        "marker-size": "large",
        "marker-color": "#f86767",
        "marker-symbol": "soccer"
      },
      "geometry": {
        "coordinates": [
          4.223084,
          50.928709
        ],
        "type": "Point"
      },
      "id": "fff"
    }
  ],
  "id": "arnojansens.m67ea8oe"
}
Pixelsquare
  • 173
  • 2
  • 14
  • Are you loading it on file:/// protocol or an actual local server? Also, show us your geojson file. – snkashis May 26 '15 at 15:24
  • @snkashis I have a main folder with the index.html and a data folder in it. In the data folder is the geojson file. I updated so the geojson is also visible now. – Pixelsquare May 27 '15 at 13:47
  • okay, and how are opening index.html? As a file, or navigating to it on a local address like localhost/0.0.0.0? – snkashis May 27 '15 at 14:33
  • @snkashis I'm opening it as a file – Pixelsquare May 28 '15 at 10:40
  • Yeah, thats could be the problem.I'd suggest running it through a local web server.Look at node.js serve(https://www.npmjs.com/package/serve) or http://stackoverflow.com/questions/3108395/serve-current-directory-from-command-line – snkashis May 29 '15 at 13:58

0 Answers0