Make the Marker Appear For each Point

Question

How can I make marker Icon appear for each point. I added the geoJSON with 65 points and have all been validated. However the icons appeared as a broken png. I proceeded to add a png I called in an icon from the img folder : "img/marker.png" I passed the icon function L.geoJson: //this is where the icon does not appear for every single point but only one big icon appeared.

Can you guys check the code for why the marker does not appear for all the points but for just one

Find here all the files. https://github.com/saviour123/malariaRes

//JS and Leaflet Stuff
//creating the map with div
var map = L.map('map', {
    center: [5,28],
    zoom: 3,
    minZoom: 2,
    maxZoom: 18
});

//add tiles
L.tileLayer('http://{s}.tiles.mapbox.com/v3/ianmule.bg2v5cdi/{z}/{x}/{y}.png',{attribution: "Mapbox"}).addTo(map);


//create map icon
var marker = new L.Icon({
    iconUrl: 'img/marker.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76]
});

//the function that binds the icon to the layer
function myIcon(feature, layer) {
    layer.setIcon(marker);
};

L.geoJson(fielddata,{
    onEachFeature: myIcon
}).addTo(map);

Answer 1

inside the L.geoJson() function you can use the function pointToLayer like this :

 L.geoJson(data, {
        pointToLayer: function(feature, latlng) {
            var icon = new L.Icon({
                 iconUrl: 'img/marker.png',
                 iconSize: [38, 95],
                 iconAnchor: [22, 94],
                 popupAnchor: [-3, -76]
            });
            return L.marker(latlng, {icon: smallIcon});
        },
 //.... here you can add the onEachFeature function if you want

in your code you were setting an icon the the whole layer, while you have to set it to each point as a marker