Changing Leaflet Icon after GeoJSON import

376 views
Skip to first unread message

Chris Langley

unread,
Aug 21, 2020, 5:28:35 PM8/21/20
to Leaflet
Hi, 

Long time lurker, but first time poster. Please, go easy on me: I'm very early in my career with Leaflet.

I have just imported GeoJSON data into Leaflet. The points have come in perfectly and I have managed to change the popup labels with CSS.

Unfortunately, despite trying every tutorial I could find online, I'm really struggling to change the markers to anything other than the default blue pins. I think I am seriously misunderstanding something.

I would be most grateful if people could tell me where in my js I can insert the new icon info, and how I would apply it to the data imported on the GeoJSON. For the moment, I don't even care what the icon is: I just want to know where to insert the code to change it!

You can find the code here:


Any feedback would be much appreciated!

Cheers,


Chris

Mark Lawton

unread,
Aug 21, 2020, 5:36:55 PM8/21/20
to leafl...@googlegroups.com
Chris, does this help…



Mark Lawton

If I asked a question above, please respond.  Thank You!




--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/49dca656-890b-4472-aaf4-70f63964fde9n%40googlegroups.com.

Chris Langley

unread,
Aug 21, 2020, 5:50:40 PM8/21/20
to Leaflet
Dear Mark,

Thank you so much for getting back to me and so quickly, too. And thanks for being so understanding of such a basic question from a newbie.

I've tried the Leaflet 'leaf' icon tutorial and can understand how I might make an icon change for each marker. However, is there any way I can do it for all of the markers in my data set? 

The first lines of my code look like this:

<html>
<head>
      <title>Mapping the Scottish Reformation</title>
<link rel="stylesheet" href="https://unpkg.com/lea...@1.6.0/dist/leaflet.css" />
<style>
  #map {position: absolute; top: 0; bottom: 0; left: 0; right: 0}
</style>
</header>
<body>
  <div id = "map"></div>
  <script>
  var map = L.map('map').setView( [55.94919982336744, -3.18328857421875], 9);
  
  attribution: '<a href="http://maps.nls.uk/projects/api/">NLS Historic Maps API</a>',
}).addTo(map);

var greenIcon = L.icon({

    iconSize:     [38, 95], 
    shadowSize:   [50, 64], 
    iconAnchor:   [22, 94], 
    shadowAnchor: [4, 62], 
    popupAnchor:  [-3, -76]
});


var geojson = {

What follows is the geojson data. Would I have to add a line or two at the bottom of the code that tells Leaflet to change all of the icons to the green leaf?

Thank you for your patience!

Best,


Chris

Mark Lawton

unread,
Aug 21, 2020, 7:20:55 PM8/21/20
to leafl...@googlegroups.com
Chris,

Are you from Oregon?

Anyway, I’m not a major expert on leaflet but I have made some good progress.

I think that instead of binding a popup to each layer, you just create your own marker at each coordinate.  Then you have full control.  Here, for example, is how I create markers and modify them…

-the data is the array classics
-this is blue icon:
var blueIcon = new L.Icon({
iconUrl: blueIconURL,//this is a url to the icon that i use
shadowUrl: actualShadowURL, //the rest is all optional
iconSize: iconSize,
iconAnchor: icAnchor,
popupAnchor: popAnchor,
shadowSize: shadowSize

you can see the result of this approach at 



for (let k = 0; k < classics.length; k++) {
let aMarker = new L.Marker([classics[k].latitude, classics[k].longitude],
{
icon: blueIcon
}
);
aMarker.on('click', markerHit);
aMarker.desc = ‘text for the popup goes here'
}


Mark Lawton

If I asked a question above, please respond.  Thank You!




Chris Langley

unread,
Aug 22, 2020, 4:59:19 AM8/22/20
to Leaflet
Hi Mark,

This is really helpful, thank you! I think your point about getting control of each icon is key and that binding the popup isn't helping me!

I've tried adding the code to my file but can't get it to work straightaway. I'll spend the next few hours tweaking it to see if I can get it to work!

Love your good stories map, btw. Already shared it with a couple of friends! 

I'm in the UK.

All the best,


Chris




Mark Lawton

unread,
Aug 22, 2020, 7:32:26 AM8/22/20
to leafl...@googlegroups.com
Thanks Chris, Let me know if I can help further.  I’d be happy to look at your code again.  

So glad that you like the map of good news.  So many great stories from the UK.  I really liked the disco along the river and the rolling stones playing satisfaction during lockdown.


Mark Lawton

If I asked a question above, please respond.  Thank You!




Mark Lawton

unread,
Aug 24, 2020, 1:23:05 PM8/24/20
to leafl...@googlegroups.com
hi chris, did you get it working?

Mark Lawton

If I asked a question above, please respond.  Thank You!




On Aug 22, 2020, at 1:59 AM, Chris Langley <chris.r....@gmail.com> wrote:

Chris Langley

unread,
Aug 24, 2020, 1:26:51 PM8/24/20
to leafl...@googlegroups.com
Dear Mark,

Thank you for following up! Yes: after looking at your website and going through some more tutorials, I got lucky! I’ve attached the code. I can’t believe it was so obvious!

I’ve also added a few more things while I was there - -logo, scale etc. 

My next task is to learn more about Spiderfying the icons!

Thank you so much for your help!

Cheers,


Chris




You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/wGhn6TRKkyQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/B47E7F75-EE7F-4110-AF0D-23CF2C705C6C%40gmail.com.
All Ministers sans spiderfy, with logo.html

Mark Lawton

unread,
Aug 24, 2020, 1:31:19 PM8/24/20
to leafl...@googlegroups.com
glad to hear.

spiderfying is easy.  my map does it.

Here’s the code

var oms = new OverlappingMarkerSpiderfier(mainMap, {
keepSpiderfied: true,
spiralFootSeparation: 20,
spiralLengthStart: 11,
spiralLengthFactor: 3,
circleSpiralSwitchover: 5
});

oms.addListener('click', function (marker) {
var popup = new L.Popup({
autoClose: false,
closeOnClick: false
});
popup.setContent(marker.desc);
popup.setLatLng(marker.getLatLng());
mainMap.openPopup(popup);
});
oms.addListener('spiderfy', function (markers) {
//mainMap.closePopup();//do nothing
});


for (let k = 0; k < classics.length; k++) {
let aMarker = new L.Marker([classics[k].latitude, classics[k].longitude],
{
icon: blueIcon
}
);
aMarker.desc = buildStoryPopup(classics[k]);//text for marker
mainMap.addLayer(aMarker); //add the marker to map
oms.addMarker(aMarker)// make it spider-viable
}

mahendher ma

unread,
Sep 3, 2020, 1:52:10 PM9/3/20
to Leaflet
how can i apply Geotiff raster image on different map its in australia region need to apply in canada this same raster image https://github.com/stuartmatthews/leaflet-geotiff   

joao bosco

unread,
Oct 10, 2020, 2:45:29 PM10/10/20
to leafl...@googlegroups.com
Hello friends, may someone want to help how to make a control search on a leaflet map

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/fbaf9164-aec2-4259-adac-02b814635411n%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages