I am trying to make a map for school with unique icons for each point which I have stored in my geoJSON under "iconURL" as .png. I don't exactly know how to add them to my map. The following code returns default markers with working popups.

I am new to JavaScript & Leaflet (read: I don't know what I'm doing). I can add each point individually with it's own logo and information, but because that's not a real world way to do things, I would like to call everything from a geoJSON database.

var group = L.featureGroup().addTo(map);

//icon definition
var schoolIconStyle = L.Icon.extend({
   options: {
   shadowUrl:
    "https://dl.dropboxusercontent.com/s/6mlhoque8s8daoj/marker-shadow.png",
   iconSize: [40, 20],
   shadowSize: [51, 37],
   iconAnchor: [16, 33],
   shadowAnchor: [17, 37],
   popupAnchor: [0, -40]
 }
});


    var geoJsonData = "https://gist.githubusercontent.com/bwolfens/8b9a2886f1a2539b96414069e745c10a/raw/a5f23184eae900c941036059429bfe4011e86a84/schools.geojson";

$.getJSON(geoJsonData ,function(data){
  L.geoJson(data  ,{
     onEachFeature: function(feature, layer) {    
layer.bindPopup("<h3>" + feature.properties.Name + ' ' + feature.properties.Nickname + "</h3>" + "<p>" + feature.properties.City +"</p>" + 
                "<p>" + feature.properties.Conference +
                "<p>" + feature.properties.Stadium + ': ' + 
 feature.properties.Capacity);
},
pointToLayer: function(feature,latlng) {
  var schoolIcon = new schoolIconStyle({iconURL: '<img/>' + 
  feature.properties.iconURL + '<.png>'});
  return L.marker(latlng, {iconURL: schoolIcon});
  }
  }  ).addTo(group);
});

Any suggestions or tips on structure would be extremely helpful!

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.