Leaflet - Markers not showing

javascript leaflet

13,294

Your markers are shown, but not at the position you expect.

In Leaflet, the coordinates order is [lat, lng], whereas in your code you have set:

L.marker([data.long, data.lat])

Live demo: https://plnkr.co/edit/UC6io0jPh9HJVoDAgJS1?p=preview

13,294

Author by

Admin

Updated on June 07, 2022

Comments

Admin almost 2 years

I am new to leaflet and am having an issue placing markers on a US map. Below is my snippet of my JSON file:

[
 {
   "site_name": "Chemical & Minerals Reclamation",
   "city": "Cleveland",
   "epa_id": "OHD980614549",
   "npl": "Deleted",
   "monitored": "No",
   "type_of_company": "Waste Disposal",
   "human_exposure": "Under Control",
   "groundwater_status": "Not a Groundwater Site",
   "lat": 41.49036,
   "long": -81.72503,
   "icon": "img/deleted.png"
 },
 {
   "site_name": "Krysowaty Farm",
   "city": "Hillborough Township",
   "epa_id": "NJD980529838",
   "npl": "Deleted",
   "monitored": "No",
   "type_of_company": "Waste Disposal",
   "human_exposure": "Under Control",
   "groundwater_status": "Under Control",
   "lat": 40.50028,
   "long": -74.78,
   "icon": "img/deleted.png"
 },
 {
   "site_name": "Enterprise Avenue",
   "city": "Philadelphia",
   "epa_id": "PAD980552913",
   "npl": "Deleted",
   "monitored": "Yes",
   "type_of_company": "Waste Disposal",
   "human_exposure": "Under Control",
   "groundwater_status": "Under Control",
   "lat": 39.885,
   "long": -75.2125,
   "icon": "img/deleted.png"
 }
]

My JS file:

function industrialDumping() {

  // create variable named map, set viewpoint and default zoom level
  var map = L.map('map').setView([37.8, -96], 4);

  L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3VicmFtaCIsImEiOiJjajV1NTk4dG4wM2V0MzJub2VoemV5YWVwIn0.4dweARrZX3iEWtXVjkp75w', {
    maxZoom: 16,
    id: 'mapbox.light'
  }).addTo(map);

  // add a minimal zoom to prevent users from zooming out too far
  map._layersMinZoom=5;

  // // load json file
  $(document).ready(function(){
    $.ajax({
      type: "GET",
      url: "data/sfdataviz.json",
      dataType: "json",
      mimeType: "application/json",
      success: function(data) {processData(data);}
    });
  });

  function processData(allText) {

    for (var i in allText) {
      data = allText[i];
      var customicon = L.icon({
        iconUrl: data.icon,
        iconSize: [15, 15],
        iconAnchor: [20, 40],
        popupAnchor: [0, -60]
      });
      console.log(customicon);
      // add the marker to the map
      L.marker([data.long, data.lat], {icon: customicon})
      .addTo(map)
      .bindPopup("Site name: <strong>" + data.site_name + "</strong><br />Type of Company: <strong>" + data.type_of_company + "</strong><br>Location: <strong>" + data.city + "</strong><br />Monitored: <strong>" + data.monitored + "</strong><br>Human exposure: <strong>" + data.human_exposure + "</strong><br />Groundwater Status: <strong>" + data.groundwater_status + "</strong>")
    }
  }
}

My HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>Industrial Dumping</title>
  <meta charset="utf-8">
  <link href="//fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/leaflet.js"></script>
  <link rel="stylesheet" type="text/css" href="css/leaflet.css">

  <!-- additional css and js -->
  <style type="text/css">


    #map {
  height: 650px;
}
.leaflet-popup-content {
/* change size of margin */
    margin: 14px 14px;
/* make the line height smaller */
  line-height: 1.4;
  }

/*.leaflet-map-pane {
    z-index: 100;
}*/
/* change color when the cursor hovers over the popup close button */
  .leaflet-container a.leaflet-popup-close-button:hover {
    color: #9d132a;
    }

/* change color of an unvisited link and the zoom symbols */
    a:link {
        color: #9d132a;
    }

/* change color of a visited link */
    a:visited {
        color: #84b819;
    }

/* change color when the cursor hovers over a link */
    a:hover {
        color: #e11b3c;
    }
  <script type="text/javascript" src="js/industrial-dumping.js"></script>
</head>
<body onload="industrialDumping()">
  <div id="map"></div>
</body>
</html>

None of the markers are showing on the map. Developers console in Chrome or FF show no JS errors. It seem like my JSON file is being read without any issues, but just that the markers don't show on the map. I've looked at other solutions suggested here, but none seem to work for me. Thanks in advance.