Webflow CMS + Leaflet

Hello everyone,

Curious if I can get some advice, I’m attempting to build a system where blog posts are automatically added to a leaflet map. I’ve rigged a manual system that works… but the code isn’t pretty and it’s a pain to update.

I created a collection with three text fields: item-number, latitude, and longitude. I’m manually entering a number for each blog post, then adding the latitude/longitude coordinates.

On my page I have a Dynamic List, and each item has custom embedded HTML:

var lat(item-number) = latitude;
var long(item-number)= longitude;

Then, in my page header I’m running this:

var map = L.mapbox.map(‘map’, ‘mapbox.streets’).setView([0, 0], 2);

L.marker([lat1,long1], {icon: cssIcon}).addTo(map);
L.marker([lat2,long2], {icon: cssIcon}).addTo(map);
L.marker([lat3,long3], {icon: cssIcon}).addTo(map);

Whenever I would need to add a blog post I would have to copy another line of the L.Marker code in the header and manually enter a blog post number. Is there another way I can call the number of a dynamic item? How could I create an event that builds a L.marker automatically whenever a blogpost is published?

Thanks for listening!
Hunter


http://hunters-sublime-site.webflow.io/sf-test

https://preview.webflow.com/preview/hunters-sublime-site?preview=0ce2c287edf0b322069838b4c0780658

Insert this in Page Settings > Header Code:

<script>var latlng = [];</script>

Change the script in the dynamic list from

<script>
var lat6 = 20;
var long6 = 90;
</script>

to

<script>latlng.push([20,90]);</script>

Change this block of code

L.marker([lat1,long1], {icon: cssIcon}).addTo(map);
L.marker([lat2,long2], {icon: cssIcon}).addTo(map);
L.marker([lat3,long3], {icon: cssIcon}).addTo(map);
L.marker([lat4,long4], {icon: cssIcon}).addTo(map);
L.marker([lat5,long5], {icon: cssIcon}).addTo(map);
L.marker([lat6,long6], {icon: cssIcon}).addTo(map);

to this

for(i=0;i<latlng.length;i++) L.marker([latlng[i][0],latlng[i][1]], {icon: cssIcon}).addTo(map);

Sam,

Really appreciate you taking the time to help. I’m eager to learn more about how this system works, so I’ve been attempting to Frankenstein your code together and solve a second challenge. I’ve been working to link URL’s, Titles, and Description text inside a Leaflet marker popup.

I used the .push command inside the dynamic list to pull title data from the blog post - this part works - but I’ve been struggling to add the content into the L.marker. I’ve been getting this error message: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.

I think it might have to do with the content not being read as a string? How should I define the content variable?

Thanks again for your help, I appreciate you taking some time to help educate a newcomer.

Here’s what I have so far,

<script>
latlng.push([0,0]);
content.push(["name"]);
</script>
<script>var content = [];</script>
<script>var latlng = [];</script>
for(i=0;i<latlng.length;i++)
L.marker([latlng[i][0],latlng[i][1]], {icon: cssIcon}).addTo(map).bindPopup(content).openPopup();

You need to use [i] after content to reference the current item.

Gotcha, ended up making it work after adding quotations.

L.marker([latlng[i][0],latlng[i][1]], {icon: cssIcon}).addTo(map).bindPopup("'" + content[i] + "'").openPopup();

Thanks!