1

Following the example below I try to add an external GeoJSON to my Leaflet map, but its markers don't appear on the map. I use this file GeoJson. Any explanation?

https://maptimeboston.github.io/leaflet-intro/

<html>
<head>
  <title>A Cyprus map!</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script src="jquery-2.2.4.min.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

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

  <script>

  // initialize the map
  var map = L.map('map').setView([35.170582481889134, 33.42520000000002],9);

  // load a tile layer
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
      attribution: 'by <a href="http://www.acgoldman.com/">Goldman solutions & services</a>, Data by <a href="http://www.opencartography.com">Open Cartography</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

  // loading GeoJSON file - Here my html and PicnicSites.geojson file resides in same folder
  $.getJSON("PicnicSites.geojson",function(data){
    // L.geoJson function is used to parse geojson file and load on to map
    L.geoJson(data).addTo(map);
  });

  </script>
</body>
</html>

Error from console of Chrome:

enter image description here

$ is not defined

EDIT: The problem was the link of jquery and I didn't download any locally to.

  • 1
    What does the console output tell you? Every browser ships with developer tools. In Firefox you'd press F12, I'm not sure about Chrome, possibly Ctrl + Shift + i. – Stefan Dec 18 '18 at 11:09
  • 1
    A jsfiddle would be helpful. PS.: Keep in mind that maptimeboston.github.io/leaflet-intro refers to Leaflet 1.0.3, but there is a small possibility that Leaflet 1.3.4 has a slightly different API. Always refer to the latest documentation. – Stefan Dec 18 '18 at 11:18
  • 3
    It looks like jquery isn't loading so the geojson can't be fetched. Try switching to a hosted version. – Marc Pfister Dec 18 '18 at 15:42
  • @MarcPfister you should post this as answer ;) I'm pretty sure this will solve his issue. – MrXsquared Dec 18 '18 at 17:30
5

As the console log shows, jquery is not loading. This means either your path is wrong, or you don't have it installed locally at all. Without jquery your code won't load the geojson file.

Easiest solution would be to just use a hosted version:

<script src="https://unpkg.com/jquery@2.2.4/dist/jquery.min.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.