š§© Maps
An extension for MIT App Inventor 2.Developed by mariosoft using Fast.
Version 1.5
Although Iāve always programmed my maps with Leaflet, due to its native map rotation issues, Iāve completely rewritten the code for MapsLibre, the free version of Mapbox. MapsLibre is much more stable and natively supports rotation, eliminating the problems with element placement when the map is rotated. Iāve also included many new features in the map:
Layers
Regarding the OSM blocking issues with tile requests from mobile apps, the German version of OSM, which doesnāt have this problem, is now used, although the option to choose the original OSM version remains.
Iāve included the 3D option that was already prepared but not compiled:
Enable3DBuildings() - tilts the camera to 45Ā°
Disable3DBuildings() - returns to top view (0Ā°)
SetPitchAngle(degrees) - custom angle (0-85Ā°)
Works best with vector layers like āESRI World Imageryā
A new ā3D Buildingsā layer
Elements
Now, by default, elements are not centered on the map when created. If you want them centered, you must use centermap.
A new type of marker, CircleMark, has been created, which gives you the option of border and interior color, radius, and interior text.
New events have been included, such as MoveMap, which fires when the user moves, rotates, or zooms the map. Events have also been created for boundingbox, such as me. They requested
And finally, an event for the panels, which I will discuss later.
Panels
Now there is complete integration of the map into the application through the panels, which allow us to create horizontal and vertical layouts, labels, buttons, EditText fields, and images, all embedded in the map. Interaction between the panels and the application is through the ClickPanel event.
Navigation
The isOffRoute function has been created, which detects if we are not following the route correctly.
New information about the next point, and the indication of the direction of the next turn in the form of a text icon.
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/
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.
Version 1.2
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.
Specifications
Package: es.mariosoft.maps
Size: 61,94 KB
Version: 1.5
Minimum API Level: 14
Updated On: 2026-03-18T23:00:00Z
Built & documented using: FAST v5.5.0
Events:
Maps has total 19 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. ReceiveGetBound
Return in format Json coordinates Boundig Box
| Parameter | Type |
|---|---|
| json | text |
4. BoundigBox
It is triggered when the Boundig Box
5. ClickPanel
Event triggered when a button is pressed on a modular panel.
| Parameter | Type |
|---|---|
| buttonId | text |
| dataInputs | text |
6. MoveMap
Event triggered when user move map.
7. ReceiveCoordinates
Event received when requesting the coordinates of a marker
| Parameter | Type |
|---|---|
| id | text |
| lat | number |
| lng | number |
8. Rotate
Event that is triggered when a touch zoom/rotate gesture is completed.
| Parameter | Type |
|---|---|
| angle | number |
9. HeadingChanged
Event triggered when device compass heading changes (0-360 degrees)
| Parameter | Type |
|---|---|
| heading | number |
10. ZoomChange
Event received when Zoom Change
| Parameter | Type |
|---|---|
| nivel | number |
11. MapClick
Event received when Click Map
| Parameter | Type |
|---|---|
| lat | number |
| lng | number |
12. MarkerClick
Event received when Click Marker
| Parameter | Type |
|---|---|
| id | text |
| lat | number |
| lng | number |
| info | text |
| type | text |
13. MapDobleClick
Event received when DoubleClick Map
| Parameter | Type |
|---|---|
| lat | number |
| lng | number |
14. ElementClick
Event received when Click Element
| Parameter | Type |
|---|---|
| id | text |
| lat | number |
| lon | number |
| info | text |
| type | text |
15. CircleClick
Event received when Click Circle
| Parameter | Type |
|---|---|
| id | text |
| lat | number |
| lng | number |
| info | text |
| type | text |
16. ElementDragged
Event received when one element dragged
| Parameter | Type |
|---|---|
| id | text |
| lat | number |
| lng | number |
17. MapReady
It fires when the map has loaded and is ready to receive commands.
18. onCalculating
Event in calculating Navigation
| Parameter | Type |
|---|---|
| Km | text |
| Time | text |
| Points | list |
| Json | text |
| LatStart | number |
| LonStart | number |
| LatEnd | number |
| LonEnd | number |
19. NavigationCompleted
Event that is triggered when the user reaches the final destination.
Methods:
Maps has total 53 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
| Parameter | Type |
|---|---|
| visible | boolean |
| useImperial | boolean |
6. InitMap
Initialize the map to an exact location and zoom level
| Parameter | Type |
|---|---|
| lat | number |
| lng | number |
| zoom | number |
7. Layers
Change the map layer
| Parameter | Type |
|---|---|
| layername | text |
8. CrearMarca
Create marker
| 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
| Parameter | Type |
|---|---|
| grados | number |
10. GetRotation
Get the current rotation angle of the map (returns event)
11. IconMark
Replace a Mark icon with an image URL or an asset file
| Parameter | Type |
|---|---|
| id | text |
| iconoUrl | text |
| size | number |
12. AngleMark
Rotate a mark the indicated degrees
| Parameter | Type |
|---|---|
| id | text |
| grados | number |
13. MoveMark
Move a marker to a specific latitude and longitude
| Parameter | Type |
|---|---|
| id | text |
| lat | number |
| lng | number |
14. DrawLine
Draw a Line on the map
| Parameter | Type |
|---|---|
| id | text |
| json | text |
| color | text |
| thickness | number |
| info | text |
| discontinuous | boolean |
15. DrawPolygon
Draw a polygon on the map
| Parameter | Type |
|---|---|
| id | text |
| json | text |
| color | text |
| info | text |
| drag | boolean |
16. DrawCircle
Draw a circle on the map
| Parameter | Type |
|---|---|
| id | text |
| lat | number |
| lng | number |
| rad | number |
| color | text |
| info | text |
| drag | boolean |
17. DrawCircleMark
Draw a circle marker with border
| Parameter | Type |
|---|---|
| id | text |
| lat | number |
| lng | number |
| rad | number |
| color | text |
| borderColor | text |
| text | text |
| info | text |
| drag | boolean |
18. MarkCoordinates
Request the coordinates of a marker
| Parameter | Type |
|---|---|
| id | text |
19. ClearMap
Clear map
20. SetView
Change position and zoom simultaneously with a flight effect.
| Parameter | Type |
|---|---|
| lat | number |
| lng | number |
| zoom | number |
21. SetZoom
Change the zoom without moving the coordinates.
| Parameter | Type |
|---|---|
| nivel | number |
22. CenterMap
Center Map
| Parameter | Type |
|---|---|
| lat | number |
| lng | number |
23. JSONAListoCoordeinates
Convert list JSON [[lat,lng],ā¦] in one List of List App Inventor.
- Return type:
list
| Parameter | Type |
|---|---|
| jsonTexto | text |
24. ListCoordinatesAJSON
Convert ones list of coordinates App Inventor a JSON list coordinates.
- Return type:
text
| Parameter | Type |
|---|---|
| lista | list |
25. DeleteElement
Delete any element
| Parameter | Type |
|---|---|
| id | text |
26. BoundigBoxMap
Bounding box map on four points
| Parameter | Type |
|---|---|
| n | number |
| s | number |
| e | number |
| w | number |
27. BoundigBoxElement
Adjust the camera to perfectly frame a specific item using its ID.
| Parameter | Type |
|---|---|
| id | text |
28. RequestMeasure
Request the measurement (area or length) of an item by its ID.
| Parameter | Type |
|---|---|
| id | text |
29. GetBoundigBox
Return in format Json coordinates Boundig Box in event ReceiveGetBound
30. Providers
List of Provider
- Return type:
list
31. Distances
Returns the distance in meters between two coordinates
- Return type:
number
| Parameter | Type |
|---|---|
| lat1 | number |
| lon1 | number |
| lat2 | number |
| lon2 | number |
32. Heading
Calculate the angle (0-360) between two GPS coordinates.
- Return type:
number
| Parameter | Type |
|---|---|
| lat1 | number |
| lng1 | number |
| lat2 | number |
| lng2 | number |
33. IsOffRoute
Detects route deviation during navigation
- Return type:
boolean
| Parameter | Type |
|---|---|
| latActual | number |
| lonActual | number |
| speed | number |
34. IconString
Extract Icon text a one instruction navegation (??, ?, ?, ??, ??, ??, ??, ??)
- Return type:
text
| Parameter | Type |
|---|---|
| ins | text |
35. StartNavigation
Start Navigation
36. Navigation
Navigation
| Parameter | Type |
|---|---|
| latitud | number |
| longitud | number |
| speed | number |
| Transportation | text |
37. Language
Language
- Return type:
text
38. RequestNavigation
Request Navigation
| Parameter | Type |
|---|---|
| Lat1 | text |
| Lon1 | text |
| Lat2 | text |
| Lon2 | text |
39. keepsScreen
It keeps the screen on so that the GPS doesnāt stop during navigation.
| Parameter | Type |
|---|---|
| Active | boolean |
40. CreateContainer
Create a layout
- Return type:
text
| Parameter | Type |
|---|---|
| type | number |
| elementsJson | text |
| weight | number |
41. CreateLabel
Create a text (Label)
- Return type:
text
| Parameter | Type |
|---|---|
| id | text |
| text | text |
| color | text |
| weight | number |
| textAlign | text |
| fontSize | number |
42. CreateTextEdit
Create a text input field
- Return type:
text
| Parameter | Type |
|---|---|
| id | text |
| hint | text |
| valor | text |
| weight | number |
| fontSize | number |
43. CreateButton
Create a button
- Return type:
text
| Parameter | Type |
|---|---|
| id | text |
| text | text |
| active | boolean |
| group | text |
| weight | number |
| fontSize | number |
44. SetTextEdit
Set the text of a TextEdit element
| Parameter | Type |
|---|---|
| id | text |
| text | text |
45. CreateImage
Create an image for the interface
- Return type:
text
| Parameter | Type |
|---|---|
| id | text |
| icon | text |
| weight | number |
46. GetInputData
Extract the value from a specific field
- Return type:
text
| Parameter | Type |
|---|---|
| dataInputs | text |
| idSearch | text |
47. UpdateImage
Change the source of an existing image
| Parameter | Type |
|---|---|
| idImage | text |
| newSrc | text |
48. UpdateText
Change the text of an element
| Parameter | Type |
|---|---|
| idElement | text |
| newText | text |
49. AlignPanel
Align the panels
| Parameter | Type |
|---|---|
| id | text |
| align | text |
50. StartPanel
The panel starts in the interface.
| Parameter | Type |
|---|---|
| id | text |
| position | text |
| background | text |
51. AddToPanel
Add an item to the interface list.
| Parameter | Type |
|---|---|
| elementJson | text |
52. FinishConstruction
Send the command to build the panel to the map.
53. SetVisibilityPanel
Show or hide a panel and its container
| Parameter | Type |
|---|---|
| id | text |
| visible | boolean |
Setters:
Maps has total 4 setter properties.
1. ButtonVisible
Show or hide the circular button on the map.
- Input type:
boolean
2. Mute
Mute voz notice
- Input type:
boolean
3. NavigatorApiKey
Api Key Navigator
- Input type:
text
4. Transportation
Type Transportation (foot-walking, driving-car, cycling-regular)
- Input type:
text
Getters:
Maps has total 10 getter properties.
1. ButtonVisible
Show or hide the circular button on the map.
- Return type:
boolean
2. Mute
Mute voz notice
- Return type:
boolean
3. NavigatorApiKey
Api Key Navigator
- Return type:
text
4. Transportation
Type Transportation (foot-walking, driving-car, cycling-regular)
- Return type:
text
5. KmRemaining
Km remaining
- Return type:
text
6. SpeedRoute
Speed Route
- Return type:
text
7. InsRoute
Instruction Route
- Return type:
text
8. TimeRemaining
Time Remaining
- Return type:
text
9. IconDirection
Icon Direction
- Return type:
text
10. NextPoint
Next Point Navigation
- Return type:
text
es.mariosoft.maps.aix (63.7 KB)
Mapas1.aia (89.0 KB)
Navegante.aia (154.0 KB)
Un saludo