Leafy Maps 🌿 (new free plugin)


Is there some magic I’m missing to get the Map clicked event to fire? I have added a Leaflet A Map clicked workflow but clicking on the map just doesn’t fire the workflow at all. Is there a special setting (activate map clicks?).

This on OSX, Chrome




Am wondering if the Load Polygon list could be extended to set polygon style features so that the default is as it is now (use component properties) unless the GeoJSON has per polygon values (in the JSON “properties” block (currently empty). This would allow you to load a lot of differently coloured polygons quickly which would be handy for mapping implementations.

You could also have your own names on the polygons from the GeoJSON if you wanted.

If my JS was better I’d propose the mods.


maybe something like… (apologies for lazy code)

let polygon = drawPolygon(coordinates, geoJSON.properties.colour);

function drawPolygon(coordinates, colour = styleOptions.color){
    let options = styleOptions;
    options.color = colour;
    let revertedCoordinates = revertCoodinates(coordinates);
    return DRAW.drawPolygon({coordinates: revertedCoordinates, showArea: 
   properties.show_footage, showLineDistance: properties.show_footage, showDistance : 
   properties.show_footage, style: options}).bringToBack();

Does anyone know of a way to get a polygons name when clicked?

If you can get it working (the map click just does not for for me at all - v strange) you should be able to use the “Check if point in polygon area” action on a mouse click on the map. This seems to return the first polygon it finds that the clicked point is inside.

I only wish that loading polygons was more efficient, detailed ones will take 30+ seconds to load onto the map.

  1. How do I update my location (marker) when using TRACK?
    I also tried this:

    but that did not work…

  2. When I open the app, I would like to show the users current location. I tried to use Leafmap X Users Latitude etc but I get an error when opening the app. It seems the SHOW MAND INITIAL VIEW can’t take dynamic data?

    Page load workflow:

  3. How do I upload a geojson file. (I have a google kml/kmz, how do I convert it to a geojson to read into my DB? Can I just open the geojson in notepad an copy and past into DB? (I did that and it did not work…)

1 Like

Someone have a tutorial for see how this plugin working?

On the CURRENT LOCATION issue. I played around with the workflow order and got it working.

Is it possible to implement this plugin https://github.com/calvinmetcalf/leaflet.shapefile with leafy maps? Loading shapefiles would be much better for performance than GeoJson.

1 Like

To update your location with the TRACK I ran the DO THIS EVERY 5 SEC workflow. Not sure if it is the correct way but it works.

But not only for a shapefile, KML/KMZ would be nice as well :+1:t2:

1 Like

I am loading 340 polygons (map areas quite complex) in 10 seconds or so using the load from geoJSON facility (Load polygons list) . Would be great to have that a bit smarter so we could pass in style attributes on the geoJSON. How many polygons are you loading? The other bulk load was not too bad either as I recall (v similar name).

I am loading 256 detailed polygons of country borders. It takes about 35 seconds to load them on desktop and about a minute on mobile.

@vini_brito same for me here : no event is triggered when i click on a marker or whatever …
Any hint ?

Can you please chenge Spider option on true?? i need this option

O mesmo problema do J805 está acontecendo comigo.

No meu caso aparece o texto “elemento ausente” onde deveria aparecer o mapa.

Hi @vini_brito, just installed your plugin and noticed that all the demo pages are broken. It looks like the plugin was uninstalled on your demo Bubble app. Do you mind add it back the plugin ? Thanks :wink:

1 Like

Hi Stefano! Yes, eventually I will get it done. No estimation as to when.

1 Like

I cannot make anything, it shows The plugin Leafy Maps / action Show map on a Leafy map threw the following error: Error: Map container not found.
at i._initContainer (https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:37896)
at initialize (https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:26377) (please report this to the plugin author)

When trying to show the map

TypeError: Cannot read properties of undefined (reading ‘addLayer’)
at i.addTo (https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:63657)
at eval (PLUGIN_1562697922620x934462587697889300/Leafy-Maps-element_action–Leafy-map-Add-marker-on-.js:76:216) (please report this to the plugin author)

And this when adding a marker. Nothing shows.

I tried different parameters and even setting them manually, but stills not working. Fields such as Unique name, map provider, etc are filled

Update: Looks like it doesn’t works just in popups

Update 2: Solved by adding a pause in the workflow before the popup shows. Important to add all the events related to the map, once the popup shows

Hi everyone,

The leafy map center latitude and longitude are not working. I am trying to save them but it returns always empty fields. I’ve read through the thread and it seems to be a recurring problem. Has anyone found a solution to this problem?

BTW, @vini_brito thanks for this plugin!

Hi @vini_brito,

I need the map to be at least 320 in width and at least 484 in height. The map is set up as follows:

My page is responsive and it is set up to have at least 320 in width and at least 548 in height. As you can see below, the map extends well over the whole width but not over the height.

Do you know how I can solve this problem?

I’m taking this opportunity to ask some other questions:

  • Is it possible to change the size of the map under certain conditions? This is something that is possible with the Google Maps plugin. For example:
    Capture d’écran 2022-05-06 à 19.54.51

  • Is it possible to move the Zoom-in/Zoom-out buttons from the left side to the right side of the map?

  • Is it possible to hide the Zoom-in/Zoom-out buttons under certain conditions?