Leaflet Maps questions

[Heather_Mann]

Awesome stuff!!!

Is there a way to make the map automatically include all the visible markers?

With my custom code for this I add the markers to the bounds and then use fitBounds.

bounds = L.latLngBounds();
var markers = dmx.parse('dv_tripbits.data');

if (Array.isArray(markers)) {
markers.forEach(function (marker) {
.... other code ...
var lat_lng = [marker.lat, marker.lng];
bounds.extend(lat_lng);
}}

map.fitBounds(bounds);

[Heather_Mann]

I'm getting errors trying to do an Icon URL for dynamic markers. It doesn't matter if I use a static address or dynamic I get the same error.

leaflet.min.js:11 Uncaught
TypeError: t.icon.createIcon is not a function
at e._initIcon (leaflet.min.js:11:76400)
at e.onAdd (leaflet.min.js:11:75330)
at e._layerAdd (leaflet.min.js:11:67662)
at e.whenReady (leaflet.min.js:11:43287)
at e.addLayer (leaflet.min.js:11:67885)
at e.addTo (leaflet.min.js:11:67005)
at s.addMarkerToMap (leafletMap.js:487:1)
at s.addMarker (leafletMap.js:520:1)
at leafletMap.js:450:1
at Array.forEach ()

[patrick]

The iconUrl is fixed but not very useful. We added our own marker variations with the upcoming update which allows you have color variations and markers with fontawesome/bootstrap icons.

I can add a fitMarkers method with your custom code to the component, it would then use the markers that are currently on the map.

[brad]

@patrick

markers with fontawesome/bootstrap icons.

This would be great!

[Heather_Mann]

Thanks! FYI - https://mapicons.mapsmarker.com/ is a great free resource for map markers.

fitMarkers would be great.

[George]

Well with the upcoming font awesome and bootstrap icons integration you will achieve similar design markers.

[Cheese]

You can use any markers you want by specifying the URL for them...

[Teodor]

this has been improved in Wappler 6.7.1
Now you can choose icons and colors for your markers.