Leaflet/OSM newbie in trouble: custom icon / popup not working.

IneffableKoD · 2020-03-29T15:04:59.000Z

Hi everyone,

I am experimenting with Leaflet and OSM for the first time myself and created a small challenge to learn to use both.

Two things are frustrating because I searched just about every source I could find and I still don’t understand why it won’t work:

My custom icon won’t work:


function createCustomIcon (feature, latlng) {
    let myIcon = L.icon({
      iconUrl: 'img/facilityIcon.png',


      
      //shadowUrl: 'my-icon.png',
      iconSize:     [16, 16], // width and height of the image in pixels
      //shadowSize:   [35, 20], // width, height of optional shadow image
      //iconAnchor:   [12, 12], // point of the icon which will correspond to marker's location
      //shadowAnchor: [12, 6],  // anchor point of the shadow. should be offset
      //popupAnchor:  [0, 0] // point from which the popup should open relative to the iconAnchor
    

     
    })
    return L.marker(latlng, { icon: myIcon })
  }

I can’t get the info-popup to work:



functionn infoPopup (feature, layer) {
    layer.bindPopup("<h1 class='infoHeader'>Testing Facility Info</h1>
    <p class='infoHeader'>" + feature.properties.adress +"</p>"); //pull info from the data stored in GeoJSON
    layer.setIcon(testFacilityIcon);

};

I hope my info is sufficient for help, otherwise, let me know.

Help highly appreciated!

Kind regards
Ineff

escada · 2020-03-30T03:28:44.000Z

There has been a similar question for icons: https://forum.openstreetmap.org/viewtopic.php?id=68147 Does this help you?
As for the pop-up, is functionn with 2 n’s a typo here or in your code?

IneffableKoD · 2020-03-30T17:35:21.000Z

escada:

There has been a similar question for icons: https://forum.openstreetmap.org/viewtopic.php?id=68147 Does this help you?
As for the pop-up, is functionn with 2 n’s a typo here or in your code?

Thank you very much - I snooped around a bit more and found a solution.