leaflet-color-markers | color variations of the standard leaflet marker | Map library

polyline is outside of the loop so i will only take the last value of locations2.length which is 2

Better use let inside for loops so you won't end up with local for loop variables being exposed outside the for loop block

Moreover if I understood correctly you want to add a polyline between the markers of each locations array, locations and locations2

So you need to have a data format of array of latlngs like so:

Add all markers to a featureGroup, so you have an easy access to it. Then add the origin icon to the options, so you can always go back to this icon. Now you can reset the icons on click before you append the new icon:

Instead of adding the label to the map, add it to a L.featureGroup:

Generally speaking, you need some way of integrating with your web app's build process if you want to get a list of hashed URLs for use within your service worker.

Given that you're using Next.js, a plugin like next-offline can help by doing two things:

• Integrating with your build process to get a list of your hashed URLs.
• Generating the entirety of your service worker for you, using workbox-precaching under the hood to ensure that your URLs are properly cached and kept up to date.

You can implement something similar yourself if you'd prefer not to use next-offline, but you'd need to use something like next-assets-manifest to obtain the list of hashed URLs, write your own service worker, and figure out how to inject those URLs into the service worker.

I assume it is rendering all the markers every time -> Have you tried to console.log markers to see how many items are inside ?

If you want to display on the map just the markers that are new to the markers array, what you could do is changing v-for="marker in markers" to v-for="marker in lastMarkers with lastMakers being a computed property returning only the last items, like so:

To change a specific element in an existing array with setMarkers you can do

Upgrading react-leaflet version worked. Thank you @DrewReese

And for Cannot read property 'getContainer' of undefined at PixiOverlay.jsx:154 at commitHookEffectListUnmount (react-dom.development.js:19710) this error, I passed props zoom to map and it worked

You need to access your user marker outside of the f1 function. You could do this by assigning the marker to a globally defined variable.

Define your marker variable in the global scope.