0

I have found a Github repository which contain sample data set to include a external geojson file and showing a popup when click on an feature.

BUt I dont know what I am doing wrong.

I have found similar questions regarding this issue in gis.stackexchange but I couldn't find a solution for my problem in those answers. https://stackoverflow.com/questions/34751488/openlayers-3-popup-with-external-geojson

Load external geojson file into leaflet map

This is the code I have used(Which included in github repository). I only changed the mapbox token.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=1024, user-scalable=no">
    <style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0;}
      #map{ height: 100% }
    </style>
    <link rel="stylesheet" href="leaflet.css" />

<script src="leaflet-src.js"></script>
<script type="text/javascript" src="../dist/leaflet.ajax.js"></script>
<script src="spin.js"></script>
<script src="leaflet.spin.js"></script>




    <title>Leaflet AJAX</title>
    </head>
    <body>
    <div id="map"></div>
      <script type="text/javascript">var m= L.map('map').setView([42.2, -71], 8);
var osmDataAttr = 'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
      var mopt = {
          url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=MY_TOKEN',
          options: {attribution:'© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
        };
      var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:osmDataAttr});
      var mq=L.tileLayer(mopt.url,mopt.options);

      mq.addTo(m);

      var baseMaps = {
          "Mapbox Streets": mq,
          "Open Street Map":osm
      };




function popUp(f,l){
    var out = [];
    if (f.properties){
        for(key in f.properties){
            out.push(key+": "+f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
    }
}
var jsonTest = new L.GeoJSON.AJAX("colleges.geojson",{onEachFeature:popUp});
var jsonpTest = L.geoJson.ajax("counties.jsonp",{onEachFeature:popUp,dataType:"jsonp"});

jsonTest.addTo(m);
var overlays={
"json":jsonTest,
"jsonp":jsonpTest
}

var lc=L.control.layers(baseMaps,overlays);
lc.addTo(m);
</script>


    </body>
</html>

When I open the index.html It shows only the basemaps (No any other map layers)

Base in the code output should be like this

  • Which browser did you use to view the html file? – ahmadhanb Mar 12 '18 at 7:10
  • @ahmadhanb I used google chrome – user9461345 Mar 12 '18 at 7:58
  • Try to load the html in FireFox or Edge and see if the GeoJson file is loaded or not. If it is loaded then it is a chrome issue because Chrome blocks external GeoJson file and JQuery in general. If it is not loaded then there is something wrong in your code. – ahmadhanb Mar 12 '18 at 8:01
  • I saved the geojson file as a javascript fileand assigned a variable now its working – user9461345 Mar 12 '18 at 8:19
  • In fact this is what I usually do to overcome calling GeoJson using JQuery. Now I think it is better to post your solution as an answer. You can answer your own question if you don't know. – ahmadhanb Mar 12 '18 at 8:21
3

In order to overcome this issue just save the colleges.geojson file as colleges.js and assigned the whole colleges.js file to a variable called colleges

var colleges ={"type":"FeatureCollection","features":[{"geometry": {"type": "Point", "coordinates": [-71.123723098996251, 42.379003083976961]}, .....

Now link the colleges.js as a javascript file to the html page

<script src='YOUR/PATH/TO/stations.js'></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.