How can both custom icons and geojson properties be implemented with external geojson in Leaflet?
Using methods described in answers to two other questions, both using inline geoJSON:
Using custom icons for Leaflet Layer groups?
and
Displaying properties of GeoJSON in popup on Leaflet?
I think I have determined that option onEachFeature has to appear before pointToLayer in the L.geoJSON() constructor.
var myceliumTweets = L.layerGroup(); var myLayer = L.geoJSON(); var geojsonFeature1 = 'stream_mycelium.json'; function loadData(data) { let xhr = new XMLHttpRequest(); xhr.open('GET', data); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.responseType = 'json'; xhr.onload = function() { if (xhr.status !== 200) return myLayer = L.geoJSON(xhr.response, { onEachFeature: function (feature, layer) { layer.bindPopup('<b>'+ feature.properties.text +'</b>' + '<br/>' + '<hr />'+ feature.properties.carmen.latitude + ', ' + feature.properties.carmen.longitude + '<br/>' + feature.properties.profile + '<br/>' + '<hr />'+ '<b>'+'<a href="https://github.com/mdredze/carmen-python" target="blank">Carmen</a>' +'</b>' + '<br/>' + 'Country: ' + feature.properties.carmen.country + '<br/>' + 'State: ' + feature.properties.carmen.state + '<br/>' + 'County: ' + feature.properties.carmen.county + '<br/>' + 'City: ' + feature.properties.carmen.city + '<br/>' + 'Resolution Method: ' + feature.properties.carmen.resolution_method + '<br/>'); }, pointToLayer: function (feature, latlng){ return L.marker(latlng, {icon:fungi}); } }).addTo(myceliumTweets); }; xhr.send(); }; loadData(geojsonFeature1); See it working here.
