Search code examples
javascriptflaskmapboxgeojson

GeoJson in mapbox GL JS won't accept it trough URL, format seems fine

https://jsfiddle.net/317jdwqt/

After a couple hours I have to give up, I am trying to create a route line on an mapbox JS map. A flask instance is creating the geoJson,on https://riekus.bike/route, and also have a static geojson file to test on https://riekus.bike/static/tester.json.

www.geojson.io accepts my raw json as valid, when i copy the json and hardcode it in my file it works, but can't seem to make it work trough a json URL.

In the jsfiddle I have the hardcoded example commented out, and the not working URL example.

code: 

mapboxgl.accessToken =
  "pk.eyJ1Ijoicmlla3VzIiwiYSI6ImNrNWphOWt5dTAxOHEzbm1zNjltMHJ6b3QifQ.6AaxHGmQTpk--s75pH-IrQ";
var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
  center: [172.677874,-34.427676 ],
  zoom: 6
});

map.on("load", function() {
     map.addSource('routedata', {
    type: 'geojson',
    data: 'https://riekus.bike/static/tester.json'
    });
  map.addLayer({
    id: "route",
    type: "line",
    source: "routedata",

    layout: {
      "line-join": "round",
      "line-cap": "round"
    },
    paint: {
      "line-color": "#ff652f",
      "line-width": 18
    }
  });
});
Solution

  • That seems that there might be some problem with your server setup. I've just downloaded your tester.json and tried to reproduce this issue, but everything works fine.

    enter image description here

    <!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Add a WMS source</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>

  <div id='map'></div>
  <script>
  mapboxgl.accessToken =
    "pk.eyJ1Ijoicmlla3VzIiwiYSI6ImNrNWphOWt5dTAxOHEzbm1zNjltMHJ6b3QifQ.6AaxHGmQTpk--s75pH-IrQ";
  var map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/streets-v11",
    center: [172.677874, -34.427676],
    zoom: 6
  });

  map.on("load", function () {
    map.addSource('routedata', {
      type: 'geojson',
      data: '/tester.json'
    });

    map.addLayer({
      id: "route",
      type: "line",
      source: "routedata",

      layout: {
        "line-join": "round",
        "line-cap": "round"
      },
      paint: {
        "line-color": "#ff652f",
        "line-width": 18
      }
    });
  });
  </script>
</body>
</html>