2

I have a geojson file with the location of some universities. This is the map. The logos are stored in a folder named img Here are the logos. Now I want to replace the default markers with logo for each point.

I could do it one by one but that's not what I'm looking for.

3

Instead of adding the entire GeoJSON to your map you could add each marker individually, using an individual icon for each marker instead of the default blue marker icon.

What you need to do:

  • create a marker style
  • create an instance of that style
  • add the marker which then uses that style as an icon

    var layerGroup = L.geoJson(univs, {
        onEachFeature: function(feature){
    
                    // create a marker style
                    var logoMarkerStyle = L.Icon.extend({
                                                    options: {
                                                    iconSize: [85, 90],
                                                    iconAnchor: [38, 86],
                                                    popupAnchor: [0, -80]
                                                }
                                            });
    
                    var logoMarker = new logoMarkerStyle({iconUrl: 'http://magicemi.byethost10.com/img/vub.png'});
    
                    // read the coordinates from your marker
                    var lat = feature.geometry.coordinates[1];
                    var lon = feature.geometry.coordinates[0];
    
                    // create a new marker using the icon style
                    L.marker([lat,lon],{icon: logoMarker}).addTo(partnersmap);  
                }
            });
    

Please not that I have used a predefined size for iconSize, iconAnchor, popupAnchor. This would have to be individually adjusted if you want your logos to have slightly different sizes.

I also use the same link for iconUrl, but you would have to use the correct link to each image.

I suggest adding, all of that info to the GeoJSON, so you can read it in the onEachFeature function. Here is an example for Brussels:

{  
    "type":"Feature",
    "properties":{  
    "Name":"BRUSSEL",
    "iconSize": [85, 90],
    "iconAnchor": [38, 86],
    "popupAnchor": [0, -80],
    "iconUrl": 'http://magicemi.byethost10.com/img/vub.png'
},
    "geometry":{  
        "type":"Point",
        "coordinates":[  
           4.36431884765625,
           50.835432306955276
        ]
    }
}

in the onEachFeature function you would then access the data like this:

  • feature.properties.iconSize
  • feature.properties.iconAnchor
  • feature.properties.popupAnchor
  • feature.properties.iconUrl

And here is the code:

var logoMarkerStyle = L.Icon.extend({
                        options: {
                        iconSize: feature.properties.iconSize,
                        iconAnchor: feature.properties.iconAnchor,
                        popupAnchor: feature.properties.popupAnchor
                    }
                });

var logoMarker = new logoMarkerStyle({iconUrl: feature.properties.iconUrl});

PS: in your code I saw that you used L.geoJSON, you should use L.geoJson instead.

  • Thank a lot for your answer and the time that you gave for it. As i mentionned in my question i can do it individually but what if there are(in another project) hundred points, is there a method to give just an icon property and get automaticlly the URL for the icon, something like : iconUrl: 'img/' + feature.properties.Name + '.png' – Nordinator Jul 5 '17 at 14:48
  • I lost the popup any idea how to fix it : magicemi.byethost10.com/test.html – Nordinator Jul 5 '17 at 15:32
  • Yes, if your URL is consistent and only the name of the image changes then you can do: "magicemi.byethost10.com/img" + nameVariable + '.png' ... So you would define var nameVariable = feature.properties.Name; In that case you only have to save the name in the GeoJSON and not the entire URL. – BritishSteel Jul 5 '17 at 16:47
  • There should NOT be a semicolon (;) after img/' ... I am not sure why it is automatically inserted. – BritishSteel Jul 5 '17 at 16:49
  • Oh, and you can add a popup by adding the bindPopup method: L.marker([lat,lon],{icon: logoMarker}).bindPopup('CONTENT HERE').addTo(meineKarte); – BritishSteel Jul 5 '17 at 17:00
0

Just to resume the answer provided kindly by BritishSteel, here is the final result:

var univs = {"type":"FeatureCollection","features":[
    {  
        "type":"Feature",
        "properties":{  
            "Name":"vub",

        },
        "geometry":{  
            "type":"Point",
            "coordinates":[  
                4.36431884765625,
                50.835432306955276
            ]
        }
    }
]}

//L.geoJson(univs).addTo(partnersmap);

var layerGroup = L.geoJson(univs, {
    onEachFeature: function (feature) {

        // create a marker style
            var logoMarkerStyle = L.Icon.extend({
                                            options: {
                                            iconSize: [85, 90],
                                            iconAnchor: [38, 86],
                                            popupAnchor: [0, -80]
                                        }
                                    });

            var logoMarker = new logoMarkerStyle({iconUrl: 'img/' + feature.properties.Name + '.png'});

            // read the coordinates from your marker
            var lat = feature.geometry.coordinates[1];
            var lon = feature.geometry.coordinates[0];

            // create a new marker using the icon style
            L.marker([lat,lon],{icon: logoMarker}).bindPopup('<p>'+feature.properties.Name+'</p>').addTo(partnersmap);
    }

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.