Проблема с pointTolayer в моей карте листовки

Question

Я пытался применить pointTolayer в своей Leaflet Map, но он все равно выбрасывает классические иконки. В Коде есть ошибка.

$.getJSON("https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson",function(data){

    var baseline_person = L.icon({
          iconUrl: 'baseline_person.png',
          iconSize: [18,18]
    });

    // add GeoJSON layer to the map once the file is loaded
    L.geoJson(data, {
         pointTolayer: function(feture, latlng){
                    return L.marker(latlng,{icon: baseline_person});
         }
   }).addTo(map);
});

Answer 1

Ваш L.geoJson должен быть L.geoJSON, а pointTolayer должен быть pointToLayer соответственно.

А затем определить iconSize и iconAnchor как L.icon params

const customMarker = new L.icon({
  iconUrl: "marker.png",
  iconSize: [32, 32],
  iconAnchor: [10, 41],
});

axios
  .get(
    "https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson"
  )
  .then(response => {
    L.geoJSON(response.data, {
      pointToLayer: (feature, latlng) => {
        return L.marker(latlng, { icon: customMarker });
      }
    }).addTo(map);
  });

Demo