1

I'm new to Leaflet and I'm trying bring in data from a GeoJSON and change from the default icon.

So far I have this [I shortened the GeoJSON (less entries) for brevity]:

<!DOCTYPE html>
<html>
<head>
<title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

<style>
  #map {position: absolute; top: 0; bottom: 0; left: 0; right: 0}
</style>
</header>
<body>
  <div id = "map"></div>
  <script>
  var map = L.map('map').setView( [55.94919982336744, -3.18328857421875], 9);

    L.tileLayer('https://nls.tileserver.com/nls/{z}/{x}/{y}.jpg', {
  attribution: '<a href="http://maps.nls.uk/projects/api/">NLS Historic Maps API</a>'
    }).addTo(map);

var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "ministerLabel": "John Cranstoun",
        "partLabel": "Presbytery of Edinburgh",
        "PlaceLabel": "Edinburgh, Liberton Parish Church",
        "EndYear": 1627,
        "StartYear": 1624,
        "Tenure": 3,
        "AlmaLabel": "",
        "DeathYear": 1629
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -3.16124,
          55.9133
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ministerLabel": "James Waugh",
        "partLabel": "Presbytery of Edinburgh",
        "PlaceLabel": "Kirknewton",
        "EndYear": 1682,
        "StartYear": 1673,
        "Tenure": 9,
        "AlmaLabel": "",
        "DeathYear": 1691
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -3.419166666,
          55.88777778
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ministerLabel": "John Greig",
        "partLabel": "Presbytery of Biggar",
        "PlaceLabel": "Skirling",
        "EndYear": 1662,
        "StartYear": 1655,
        "Tenure": 7,
        "AlmaLabel": "",
        "DeathYear": ""
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -3.46882,
          55.63664
        ]
      }
    }
  ]
};

var bible = L.Icon({
  options: {
    iconSize: [45,25],
    iconAnchor: [22,45],
    popupAnchor: [1, -24],
    iconURL: 'big-yin.png'
});
return L.marker(latlng, {icon: bible});

function createPopup(feature, layer) {
  layer.bindPopup('<b>'+feature.properties.ministerLabel +'</b><br>'+ feature.properties.PlaceLabel +', '+feature.properties.partLabel +'<br>Education: '+feature.properties.AlmaLabel +'<br>Appointed: '+feature.properties.StartYear +'<br>End: '+feature.properties.EndYear +'<br>Death: '+feature.properties.DeathYear);
};

 L.geoJSON(geojson, {
    onEachFeature: createPopup
  }).addTo(map);


  </script>

  </body>
  </html>

When I remove the lines related to icons (var bible), the map and popups work, but appear with the default blue pin icon. When I add var bible in, the map won't show at all.


var bible = L.Icon({
  options: {
    iconSize: [45,25],
    iconAnchor: [22,45],
    popupAnchor: [1, -24],
    iconURL: 'big-yin.png'
});
return L.marker(latlng, {icon: bible});

Am I right in thinking these lines are the problem?

I was making decent progress, but I've hit a bit of a wall on this one. None of the online tutorials on this have been able to solve it.

1
0

When developing JS web pages, the first thing you have to learn is how to use browser debugger (press F12 in browser). If you would look in the console of browser debugger, you would see there is an synatx error in icon definition.

If you look at the official Leaflet example for custom icons at https://leafletjs.com/examples/custom-icons/, you'll see that correct way of defining icon is:

var bible = L.Icon({
  iconSize: [45,25],
  iconAnchor: [22,45],
  popupAnchor: [1, -24],
  iconURL: 'big-yin.png'
});

When you would correct that, you would see new syntax error in debugger console because of return L.marker(latlng, {icon: bible}); statement, which should be within some function, not standalone.

If you look at the official Leaflet example for GeoJSON laxer at https://leafletjs.com/examples/geojson/, you'll see that you assign custom marker to layer points with pointToLayer option. In your case this would be:

function createMarker(feature, latlng) {
  return L.marker(latlng, {icon: bible});
}

L.geoJSON(geojson, {
  poinToLayer: createMarker,
  onEachFeature: createPopup
}).addTo(map);
1
  • Thank you! Having sat a course in this, your advice now makes more sense to me! – Chris L Sep 11 '20 at 8:37

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.