1

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.

Carpintonto
  • 11
  • 2
  • @PolyGeo - I have submitted an edit. I don't have any versions of my attempts that didn't work. For what it's worth I very rarely even look at the code samples submitted with questions - I go straight to the green-checked answer. Cheers! – Carpintonto Feb 24 '19 at 22:53
  • If you have found answer to your own question, publish it as an answer. Now it's confusing when question contains the answer. – TomazicM Feb 25 '19 at 20:42

0 Answers0