[FREE] Maps with leaflet and multiples layers

Mario1 · February 22, 2026, 11:14am

`🧩 Maps`

An extension for MIT App Inventor 2.
Developed by mariosoft using Fast.

Version 1.4

Fixed bugs related to deleting elements and button visibility

Route navigation has been added to adapt it to the extension. For this, you need a free API key from https://openrouteservice.org/

The blocks for this are as follows:

13. onCalculating

Event in calculating Navigation

Parameter	Type
Km	text
Time	text
Points	list
Json	text
LatStart	number
LonStart	number
LatEnd	number
LonEnd	number

14. NavigationCompleted

Event that is triggered when the user reaches the final destination.

31. StartNavigation

Start Navigation

32. Navigation

Navigation

Parameter	Type
latitud	number
longitud	number
speed	number
Transportation	text

34. RequestNavigation

Request Navigation

Parameter	Type
Lat1	text
Lon1	text
Lat2	text
Lon2	text

35. keepsScreen

It keeps the screen on so that the GPS doesn't stop during navigation.

Parameter	Type
Active	boolean

2. NavigatorApiKey

Api Key Navigator

Input type: text

3. Transportation

Type Transportation (foot-walking, driving-car, cycling-regular)

Input type: text

2. NavigatorApiKey

Api Key Navigator

Return type: text

3. Transportation

Type Transportation (foot-walking, driving-car, cycling-regular)

Return type: text

4. KmRemaining

Km remaining

Return type: text

5. SpeedRoute

Speed Route

Return type: text

6. InsRoute

Instruction Route

Return type: text

7. TimeRemaining

Time Remaining

Return type: text

Access to Google Street View has been added with the following blocks:

2. OpenStreetView

Load Street View in the current viewer using coordinates.

Parameter	Type
lat	number
lng	number

3. CloseStreetView

Close Street View

Map rotation and zoom functionality have been added.

27. ActiveRotationFingers

Define whether the two fingers zoom (false) or rotate (true).

Parameter	Type
OnlyRotate	boolean

A compass and scale have been added, which can be visible or hidden at the user's discretion.

4. ShowCompass

See or hide the compass

Parameter	Type
visible	boolean

5. ShowScale

Show or hide the scale and configure the measurement type (imperial or decimal)

Parameter	Type
visible	boolean
useImperial	boolean

Other included features

33. Language

Language

Return type: text

28. Providers

List of Provider

Return type: list

Two AIAs are now included: one for an overview of the extension and another for navigating an OpenStreamRoute route. In the general AIA, actions are performed via the map button, and in the navigation AIA, you must include its API key for it to work.

Version 1.3

Errors have been corrected regarding hiding the map button and the information displayed on elements when clicked.

Specifications

Package: es.mariosoft.maps
Size: 44,38 KB
Version: 1.4
Minimum API Level: 14
Updated On: 2026-03-03T23:00:00Z
Built & documented using: FAST v5.5.0

`Events:`

Maps has total 14 events.

1. ButtonClick

It is triggered when the user touches the floating circular button on the map.

2. ReceiveMeasure

Event that returns the requested measurement (meters or square meters).

Parameter	Type
id	text
tipo	text
valor	number

3. ReceiveCoordinates

Event received when requesting the coordinates of a marker

Parameter	Type
id	text
lat	number
lng	number

4. Rotate

Event that is triggered when a touch zoom/rotate gesture is completed.

Parameter	Type
angle	number

5. ZoomChange

Event received when Zoom Change

Parameter	Type
nivel	number

6. MapClick

Event received when Click Map

Parameter	Type
lat	number
lng	number

7. MapLongClick

Event received when LongClick Map

Parameter	Type
lat	number
lng	number

8. ElementClick

Event received when Click Element

Parameter	Type
id	text
lat	number
lon	number
info	text
type	text

9. MarkDoubleClick

Event received when DoubleClick Mark

Parameter	Type
id	text
lat	number
lon	number
info	text
type	text

10. CircleClick

Event received when Click Circle

Parameter	Type
id	text
lat	number
lng	number
type	text

11. ElementDragged

Event received when one element dragged

Parameter	Type
id	text
lat	number
lng	number

12. MapReady

It fires when the map has loaded and is ready to receive commands.

13. onCalculating

Event in calculating Navigation

Parameter	Type
Km	text
Time	text
Points	list
Json	text
LatStart	number
LonStart	number
LatEnd	number
LonEnd	number

14. NavigationCompleted

Event that is triggered when the user reaches the final destination.

`Methods:`

Maps has total 35 methods.

1. CrearWebView

Initialize a custom WebView in the chosen container

Parameter	Type
contenedor	component

2. OpenStreetView

Load Street View in the current viewer using coordinates.

Parameter	Type
lat	number
lng	number

3. CloseStreetView

Close Street View

4. ShowCompass

See or hide the compass

Parameter	Type
visible	boolean

5. ShowScale

Show or hide the scale and configure the measurement type (imperial or decimal)

Parameter	Type
visible	boolean
useImperial	boolean

6. InitMap

Initialize the map to an exact location and zoom level (always include this in MapReady())

Parameter	Type
lat	number
lng	number
zoom	number

7. Layers

Change the map layer, layersname = OSM Mapnik, OSM Humanitarian, ESRI World Street Map, ESRI World Imagery, ESRI World Topo Map, CartoDB Positron, CartoDB Dark Matter, OPNVKarte, OpenTopoMap, OSM Cycle, Top Plus Color, Top Plus Gray

Parameter	Type
layername	text

8. CrearMarca

Create a brand with position, pop-up window, color (grades 0 a 360, example red 140, green 260, blue 0 purpple 100..., try several values) and drag option.

Parameter	Type
id	text
lat	number
lng	number
info	text
color	number
drag	boolean

9. RotateMapa

Rotate the map to orient yourself according to the bearing or compass (it automatically reverses the rotation).

Parameter	Type
grados	number

10. IconMark

Replace a Mark icon with an image URL or an asset file. recomended max size 64

Parameter	Type
id	text
iconoUrl	text
size	number

11. AngleMark

Rotate a mark the indicated degrees, When using locationsensor, the icon must be facing north to function correctly.

Parameter	Type
id	text
grados	number

12. MoveMark

Move a marker to a specific latitude and longitude

Parameter	Type
id	text
lat	number
lng	number

13. DrawLine

Draw a Line on the map, json format [[lat,lon],[lat,lon]...], color 'blue', 'red'... or type '#3388ff'

Parameter	Type
id	text
json	text
color	text
thickness	number
info	text
discontinuous	boolean

14. DrawPolygon

Draw a polygon on the map, json format [[lat,lon],[lat,lon]...], color 'blue', 'red'... or type '#3388ff'

Parameter	Type
id	text
json	text
color	text
info	text
drag	boolean

15. DrawCircle

Draw a circle on the map, color 'blue', 'red'... or type '#3388ff'

Parameter	Type
id	text
lat	number
lng	number
rad	number
color	text
drag	boolean

16. MarkCoordinates

Request the coordinates of a marker

Parameter	Type
id	text

17. ClearMap

Clear map

18. SetView

Change position and zoom simultaneously with a flight effect.

Parameter	Type
lat	number
lng	number
zoom	number

19. SetZoom

Change the zoom without moving the coordinates.

Parameter	Type
nivel	number

20. CenterMap

Center Map

Parameter	Type
lat	number
lng	number

21. JSONAListoCoordeinates

Convert list JSON [[lat,lng],...] in one List of List App Inventor.

Return type: list

Parameter	Type
jsonTexto	text

22. ListCoordinatesAJSON

Convert ones list of coordinates App Inventor a JSON list coordinates.

Return type: text

Parameter	Type
lista	list

23. DeleteElement

Delete any element

Parameter	Type
id	text

24. BoundigBoxMap

Bounding box map on four points

Parameter	Type
n	number
s	number
e	number
w	number

25. BoundigBoxElement

Adjust the camera to perfectly frame a specific item using its ID.

Parameter	Type
id	text

26. RequestMeasure

Request the measurement (area or length) of an item by its ID.

Parameter	Type
id	text

27. ActiveRotationFingers

Define whether the two fingers zoom (false) or rotate (true).

Parameter	Type
OnlyRotate	boolean

28. Providers

List of Provider

Return type: list

29. Distances

Returns the distance in meters between two coordinates

Return type: number

Parameter	Type
lat1	number
lon1	number
lat2	number
lon2	number

30. Heading

Calculate the angle (0-360) between two GPS coordinates.

Return type: number

Parameter	Type
lat1	number
lng1	number
lat2	number
lng2	number

31. StartNavigation

Start Navigation

32. Navigation

Navigation

Parameter	Type
latitud	number
longitud	number
speed	number
Transportation	text

33. Language

Language

Return type: text

34. RequestNavigation

Request Navigation

Parameter	Type
Lat1	text
Lon1	text
Lat2	text
Lon2	text

35. keepsScreen

It keeps the screen on so that the GPS doesn't stop during navigation.

Parameter	Type
Active	boolean

`Setters:`

Maps has total 3 setter properties.

1. ButtonVisible

Show or hide the circular button on the map.

Input type: boolean

2. NavigatorApiKey

Api Key Navigator

Input type: text

3. Transportation

Type Transportation (foot-walking, driving-car, cycling-regular)

Input type: text

`Getters:`

Maps has total 7 getter properties.

1. ButtonVisible

Show or hide the circular button on the map.

Return type: boolean

2. NavigatorApiKey

Api Key Navigator

Return type: text

3. Transportation

Type Transportation (foot-walking, driving-car, cycling-regular)

Return type: text

4. KmRemaining

Km remaining

Return type: text

5. SpeedRoute

Speed Route

Return type: text

6. InsRoute

Instruction Route

Return type: text

7. TimeRemaining

Time Remaining

Return type: text

After help from TIMAI2 and suggestions from curious_singh, Zaq_Qum, and David_B, significant modifications have been made to the extension:

The extension now ignores the App Inventor WebView and generates from the native Android WebView component. You will need to specify a container to include the map. This eliminates the zoom button and makes map interaction smoother.
The map now adapts 100% to the container size.
Mark icons now have a new "size" parameter where you specify the icon size up to infinity, although 64 is recommended. You must consider the size of the asset icon to avoid misalignment.
The extension now works with both the App Inventor Companion and Kodular Companions without asset permission issues.
In addition to the clean map, you can now delete elements individually. To do this, each element (Marks, Lines, Polygons, and Circles) must have an ID. (Unique)
The colors of the circle, line, and polygon can be in #3388ff format or with the color's own name.
In the case of watermarks, it's different; it allows a color change from 0 to 360 degrees depending on the hue filter of the CSS file. 8. Elements allow a click event, returning all element information, except for markers, which will be triggered by a double click, as a single click is reserved for popup information.
Two Bounding Boxes have been included: one over the map with the north, south, east, and west coordinate parameters, and another over each element.
The map rotation function has been included.
The map includes a button that can be deleted by the user, which would be very useful for, for example, centering my position and creating a marker at my location, or anything else I want to do.
Functions have been included that calculate the length of the line in meters and the areas of the polygon and circle in square meters.
Four new layers have been included.
Two new functions have been included: one that converts a JSON of coordinates into an App Inventor list of lists, and another that converts an App Inventor list of coordinates into a JSON coordinate string.

es.mariosoft.maps.aix (45,1 KB)

Mapas.aia (75,5 KB)

Navegar.aia (113,8 KB)

Un saludo

TIMAI2 · February 22, 2026, 5:24pm

How do you set the coordinates and zoom level for the initial map in your example aia ? There doesn't appear to be a method or property setter for this ?

Mario1 · February 22, 2026, 9:31pm

These are coordinates given by the program, just like in the Map component of App Inventor, where the MIT appears at the beginning. Here, these coordinates appear. The zoom level is determined when you create any element; it bounds the given coordinates. You can change the zoom with your fingers or by pressing the zoom button in the upper left corner.

Mario1 · February 22, 2026, 9:40pm

In future versions, which will be released soon, it will be possible to initialize the map at given coordinates and determine its zoom level, although this could currently be done by creating a line in Scree1.initialize; the map will immediately adapt to this line and center itself, and in the same action, the line will be removed.

TIMAI2 · February 22, 2026, 11:15pm

Where ? I do not see these being set to display the initial map in your blocks (you don't have a Screen1.Initialise or feed the webviewer with anything), or in the Designer.

Could you please provide a simple example for just displaying an initial map?

TIMAI2 · February 23, 2026, 8:16am

I created a new project with a webviewer and the extension. On load, I get a map of Spain. Much as I like Spain, I would prefer the map to load with my chosen location.

Mario1 · February 23, 2026, 9:12am

I'm updating the extension, and I'll release it soon. It allows you to load a map with a specific location and zoom level, and also load the elements you specify at the beginning. When creating the map, you have to provide some coordinates and a basic zoom level. Once the map is created, an event will be triggered indicating that it's ready, and in that event, you can specify your coordinates and zoom level to start the view. I'll update it shortly; I'm adapting some parameters.

Mario1 · February 23, 2026, 12:26pm

In the first post, I've included the new version of the extension, which I believe fixes everything you mentioned.

If you have any questions or suggestions, please feel free to let me know.

otniel · February 23, 2026, 1:57pm

Thank you for this extension

TIMAI2 · February 23, 2026, 2:27pm

That's better

centres on the UK

Much to learn and test

SteveJG · February 23, 2026, 4:44pm

Use in conjunction with the LocationSensor

Mario1 · February 23, 2026, 5:07pm

In that case, it's better to create the marker in mapReady and use MoveMark in the location sensor; it would work more efficiently.

curious_singh · February 23, 2026, 6:03pm

This does not work with companion however load with APK. Any solution?

TIMAI2 · February 23, 2026, 6:37pm

Show that full url.

(Why is there even a url?)

curious_singh · February 23, 2026, 7:07pm

This comes by defaul, the URL field is empy for web component.

file://storage/emulated/0/android/data/io.makeroid.companion/files/asset/external_comps/es.mariosoft.maps/assets/map.html could not be loaded becuase: net:: ERR_ACCESS_DENIED

curious_singh · February 23, 2026, 7:12pm

like I already mentioned, it works in APK but not with companion. Companion might not have access to maps.html file.

Mario1 · February 23, 2026, 7:19pm

I compiled the application in App Inventor and it works perfectly. I see that using Kodular seems to have a problem with read permissions for asset files. I don't know how Kodular handles this; ask in the Kodular forum. Try adding a file component and giving it read permissions to see if that works.

Mario1 · February 23, 2026, 7:28pm

Sorry, I thought the problem was with compilation, but I see it's with the Kodular Companion. The answer I gave you earlier might also work for this: the app is looking for an HTML file in the asset, and it seems the companion is missing some permission to read asset files with extensions.

Zaq_Qum · February 24, 2026, 4:46am

Congratulations Mario, it's a very nice plugin!

I did some testing. Perhaps I missed or overlooked some things. However, with your permission, I'd like to share my thoughts on a few points.

*. "ClearMap" clears everything on the map. Only selected markers/lines should be deletable or invisibled.

*. The height and width of the markers should also be adjustable.

*. The colors available for Markers, Lines, Circle, etc. are very limited. Color blocks should be available. If desired, markers also could be able to be created transparently without assets.

*. singleClick Marker with ID needed

*. My suggestions for markers should be applicable to other features, lines - circles.

*. BoundingsChanged and values of boundingBox needed.

*. The map appears small in the webviewer. It would look better if the height and width were "fill parent".

David_B · February 25, 2026, 12:30pm

Any method to rotate the map?