Leaflet

[Sicar2]

hi there,

i wonder if it is possible to add Leaflet to Wappler.
I use it a lot and i think Wappler can really benefit from adding it to its features.

Leaflet — an open-source JavaScript library for interactive maps

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity , performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

[transcoderm]

I just recently discovered leaflet and found it to be easier
to integrate and more versatile than Google map. Yes I also wish for it to be integrated into AppConnect.

[Cheese]

BUMPING as a replacement option for Google Maps!

[Max_Saravia]

@George

Add Leaflet with OpenStreetMap as Google Maps alternative [Q3’22, 70% complete]

It is on the Wappler roadmap

[Chackmool]

Bump !!! Any idea when this is implemented?

[Cheese]

I think for the moment it is on the back burner as the Team bring the Beta side in to Stable. However if you follow Heather’s brief and concise tutorial you can implement Leaflet in to your application quite easily. Heather’s code is commented so BE SURE to read them (I missed one and looped around for a while scratching my head but if I had been more observant it would have only taken twenty minutes or less to get it all up and running).

You can find the tutorial below:

A Quick Leaflet Tutorial

I thought as I have Leaflet working well I would share some code to get people started if you want to use Leaflet in Wappler. Hopefully it will be integrated at some point, but it’s not too complicated to code. I did a quick db so don’t judge me if I don’t have field types/indexes set up properly First the tables. I have two for this example. One for the markers and one for the map icons (I’m using https://mapmarker.io/editor to create the icons - a fantastic free resource). You’l…

[Teodor]

Leaflet maps are now available in Wappler:

Using Leaflet Maps

Intro Leaflet Maps is a lightweight, open-source JavaScript library for creating interactive maps on the web. It offers simplicity and versatility, making it easy to integrate dynamic maps with custom markers into your Wappler projects. Inserting Leaflet Maps First we will start by adding a Leaflet map on our page. We have a simple layout - a container with a row and column. Click the add new component button inside the column and under Components select Leaflet Map: [Screenshot_1] You can…