5

I am having some issues with two things in a Leaflet map 1) custom marker 2) pulling attributes from a geoJSON file and putting it in the pop-up.

I should qualify things, I am really new to Leaflet and web development. I have looked at a number of different examples, but I cannot seem to make it work within my code. Here is a section of the code, which is filtering based on an attribute in the geoJSON, but I would also like to give it a custom icon and attributes in the pop-up.

 var soffParkingMarkerPopup = 'parking';
 var soffParking = L.geoJson(locations, {filter:soffParkingFilter
 }).addTo(map);
 onEachFeature: function soffParkingFilter(feature,layer) {
   if (feature.properties.type === "parking") return true
 };
 soffParking.bindPopup(soffParkingMarkerPopup).addTo(map);
8

To create a custom marker you can create a L.Icon object and for the popup you can use the onEachFeature option.

Here is an example code snippet for these functions:

var myIcon = L.icon({
  iconUrl: 'my-icon-url',
  iconSize: [32, 37],
  iconAnchor: [16, 37],
  popupAnchor: [0, -28]
});

function onEachFeature(feature, layer) {
  layer.bindPopup(feature.properties.name);
}

function soffParkingFilter(feature, layer) {
  if(feature.properties.type === "parking") return true;
}

L.geoJSON(locations, {
  pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: myIcon});
    },
  filter: soffParkingFilter,
  onEachFeature: onEachFeature
}).addTo(map);

For more informations see the tutorials for custom icons and geojson basics.

Also see this working jsfiddle with the above code.

  • I have tried variations of that and I tried the code you provided, and now none of the markers come into view. – Ryan Garnett Feb 5 '17 at 15:05
  • 1
    I added a jsfiddle to my answer, where you can play around with the code above. Another hint: In your local browser you can open the developer console (in Chrome with the shortcut ctrl+shift+j) to see emerging issues with your JS code, which can help you with debbuging your code. – tallistroan Feb 5 '17 at 16:02
  • Thanks for that, very helpful. I have looked at it and I do have a question. Your example has the latLng and hard coded values. My issue is to do that same thing, but from a local geoJSON file. This seems to be where my issue is. I have seen many examples, such as the one you provided, but none where the locations are stored in a geoJSON and custom markers. – Ryan Garnett Feb 6 '17 at 13:31
  • This answer gis.stackexchange.com/a/102125/68210 explains how to include an external geojson file into your map. – tallistroan Feb 6 '17 at 14:02

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.