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

Improve this question
5
  • Which browser did you use to view the html file?
    – ahmadhanb
    Mar 12, 2018 at 7:10
  • @ahmadhanb I used google chrome
    – user9461345
    Mar 12, 2018 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, 2018 at 8:01
  • I saved the geojson file as a javascript fileand assigned a variable now its working
    – user9461345
    Mar 12, 2018 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, 2018 at 8:21

1 Answer 1

Reset to default
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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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