2

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/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/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.

Improve this question
1

1 Answer 1

Reset to default
1

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);
Improve this answer
1
  • Thank you! Having sat a course in this, your advice now makes more sense to me!
    – Chris L
    Commented Sep 11, 2020 at 8:37

Your Answer

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

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