[FREE] DjMaps extension for OSM

Extensions
1

I made this extension to make things easier to use OSM Maps features.

  • add custom Marker (customize icon and size)
  • add Circle ( with UserExitsCircle feature)
  • add Polygon
  • add Track
  • add Maptiles (load .mbtiles for Offline Map use)
  • add Image (load and fit an Image, for example a Photo of a historical Map
    as an Overlay)
  • All features are clickable and this way easy to remove.
  • note: Currently, you still need to add the AppInventor OSM Map
    component and set it to invisible. Otherwise, the extension won't work.

Developed by Django 2025 using Fast.

:package: Package: com.django.djmaps
:floppy_disk: Size: 156,14 KB
:gear: Version: 1.11
:iphone: Minimum API Level: 26
:date: Updated On: 2025-03-18T23:00:00Z
:computer: Built & documented using: FAST-CLI v2.6.0

Demo Aia:

Screenshot_20250321-183954_MIT_AI2_Companion
Screenshot_20250321-183954_MIT_AI2_Companion720×1280 312 KB

Screenshot_20250321-184120_MIT_AI2_Companion
Screenshot_20250321-184120_MIT_AI2_Companion720×1280 108 KB

Screenshot_20250321-184250_MIT_AI2_Companion
Screenshot_20250321-184250_MIT_AI2_Companion720×1280 121 KB

Screenshot_20250321-184403_MIT_AI2_Companion
Screenshot_20250321-184403_MIT_AI2_Companion720×1280 125 KB

Events:

DjMaps has total 16 events.

MapReady_Event

Triggered when the map is ready.

MapTileClicked_Event

Triggered when a MapTile is clicked.

Parameter Type
maptileId number
title text

MarkerCreated_Event
Triggered when a marker is created.

Parameter Type
markerId number
latitude number
longitude number

MarkerLongClicked_Event

Triggered when a marker is long clicked.

Parameter Type
markerId number
title text
subtitle text
latitude number
longitude number
iconFileName text

MarkerClicked_Event

Triggered when a marker is clicked.

Parameter Type
markerId number
title text
subtitle text
latitude number
longitude number
iconFileName text

MarkerDragged_Event

Triggered when a marker is dragged.

Parameter Type
markerId number
latitude number
longitude number

PolygonClicked_Event

Triggered when a polygon is clicked.

Parameter Type
polygonId number
name text
latitude number
longitude number

PolygonLongClicked_Event

Triggered when a polygon is long clicked.

Parameter Type
polygonId number
name text
latitude number
longitude number

UserExitsCircle_Event

Triggered when user exits the tracked circle

Parameter Type
circleId number
latitude number
longitude number
name text
radius number

CircleClicked_Event

Triggered when a circle is clicked.

Parameter Type
circleId number
latitude number
longitude number
name text
radius number

CircleLongClicked_Event

Triggered when a circle is long clicked.

Parameter Type
circleId number
latitude number
longitude number
name text
radius number

TrackClicked_Event

Triggered when a track (polyline) is clicked.

Parameter Type
trackId number
name text
length number

TrackLongClicked_Event

Triggered when a track (polyline) is long clicked.

Parameter Type
trackId number
name text
length number

ImageClicked_Event

Event triggered when the image overlay is clicked.

Parameter Type
imageId number
title text
latitude number
longitude number
scale number
rotation number
filePath text

MapZoomed_Event

Triggered when the map zoom level changes

Parameter Type
oldZoomLevel number
newZoomLevel number

MapLongPressed_Event

Triggered when the map is long-pressed.

Parameter Type
latitude number
longitude number

Methods:

DjMaps has total 20 methods.

InitializeMap_Method

Initialize or reinitialize the map in the specified arrangement

Parameter Type
arrangement component

RequestPermissions_Method

Request necessary permissions.

LoadImageOverlay_Method

Load an image overlay at a specific latitude and longitude.

Parameter Type
imagePath text
latitude number
longitude number
title text

RemoveImage_Method

Remove an image overlay from the map by its unique ID.

Parameter Type
imageId number

SetMapType_Method

Set the map type for the map view.

Parameter Type
mapType number

ResetMapRotation_Method

Reset map rotation to north-up (0 degrees).

RemoveAllMapOverlays_Method

Remove all map overlays.

LoadMapTile_Method

Load a .mbtiles file and display its tiles on the map with a given title.

Parameter Type
title text
filePath text

RemoveMaptile_Method

Remove a specific MBTiles overlay from the map by its MaptileId.

Parameter Type
maptileId number

RemoveAllMaptiles_Method

Remove all MBTiles overlays from the map.

AddMarker_Method

Add a marker to the map with a unique index.

Parameter Type
latitude number
longitude number
title text
subtitle text
iconFileName text
color text
draggable boolean
iconSize number

RemoveMarker_Method

Remove a marker from the map by its unique index.

Parameter Type
markerId number

AddPolygon_Method

Add a polygon with nested coordinate lists.

Parameter Type
coordinates list
name text
fillColor number
opacity number
strokeColor number
strokeWidth number

RemovePolygon_Method

Remove a polygon from the map by its unique ID.

Parameter Type
polygonId number

AddCircle_Method

Add a circle to the map with configurable properties.

Parameter Type
latitude number
longitude number
name text
radius number
strokeColor number
fillColor number
opacity number

EnableCircleExitCheck_Method

Enable circle exit detection for a specific circle

Parameter Type
latitude number
longitude number
enable boolean
circleId number

RemoveCircle_Method

Remove a circle from the map by its unique ID.

Parameter Type
circleId number

AddTrack_Method

Add a track (polyline) with nested coordinate lists.

Parameter Type
coordinates list
name text
color number
opacity number
width number

RemoveTrack_Method

Remove a track from the map by its unique ID.

Parameter Type
trackId number

SetCenter_Method

Set the map's zoom level and center location.

Parameter Type
latitude number
longitude number
zoomLevel number

Setters:

DjMaps has total 9 setter properties.

SetImageOpacity_Set_Property

Set the opacity of the loaded image overlay.

  • Input type: number

RotateImage_Set_Property

Rotate the image overlay.

  • Input type: number

ScaleImage_Set_Property

Scale the image overlay.

  • Input type: number

EnableImageEdit_Set_Property

Enable or disable image editing mode.

  • Input type: boolean

EnableCompass_Set_Property

Enable or disable the compass overlay.

  • Input type: boolean

EnableScale_Set_Property

Enable or disable the scale bar overlay

  • Input type: boolean

EnableRotation_Set_Property

Enable or disable map rotation.

  • Input type: boolean

ShowUserPosition_Set_Property

Enable or disable showing the user's position on the map.

  • Input type: boolean

ZoomMap_Set_Property

Set the map's zoom level

  • Input type: number

Getters:

DjMaps has total 8 getter properties.

GetZoomLevel_Get_Property

Get current zoom level

  • Return type: number

GetImageScale_Get_Property

Get the current scale of the image overlay.

  • Return type: number

GetAllMaptileIDs_Get_Property

Get the list of all loaded Maptile IDs.

  • Return type: list

GetAllMarkerIDs_Get_Property

Get a list of all marker IDs currently on the map.

  • Return type: list

GetAllPolygonIDs_Get_Property

Get a list of all polygon IDs currently on the map.

  • Return type: list

GetAllCircleIDs_Get_Property

Get a list of all circle IDs currently on the map.

  • Return type: list

GetAllImageIDs_Get_Property

Get a list of all image overlay IDs currently on the map.

  • Return type: list

GetAllTrackIDs_Get_Property

Get a list of all track IDs currently on the map.

  • Return type: list

blocks (33)
blocks (33)1710×3690 736 KB

blocks (32)
blocks (32)1714×1852 406 KB

blocks (31)
blocks (31)1072×1436 200 KB

blocks (30)
blocks (30)1158×996 132 KB

credits go to @Jewel for his filepicker extension I used in this demo aia

com.django.DjMaps.aix (155.7 KB)
MapExtTest4.aia (362.0 KB)
Since I have been working on this extension for several weeks, I would appreciate a small donation!

7 Likes
2

Great to see that you used aixtools for docs! Am I right?

1 Like
3

Good job! :+1::sparkles:

need latlong on mapclicked :ok_hand::sparkles:

4

image

5

yes it already on maplongclicked but i mean mapclicked :ok_hand::sparkles:

6

yes it already on maplongclicked but i mean mapclicked :ok_hand::sparkles:

7

There isn't a MapClicked clicked event available in this extension The developer included 16 Event Blocks but not a MapClicked so you need to use the DjMaps.MapLongPressed

MapLongPressed_Event

Triggered when the map is long-pressed.

Parameter Type
latitude number
longitude number

Or you can use the native App Inventor Map control which has a TapAtPoint event.
TapAtPoint(latitude,longitude)
The TapAtPoint runs when the user taps at a point on the map. The tapped location will be reported in map coordinates via the latitude and longitude parameters.

The Map control is more flexible and easier to use for OpenStreetMap access than this extension in my opinion. :slight_smile:

8

native map component can load geoimages.mbtiles this ext can do this job

9

I think a longclick event is better, because otherwise you can easily set a marker by mistake when moving or zooming the map