Map

Last Updated On 2021-07-16

A two-dimensional container that renders map tiles in the background and allows for multiple Marker elements to identify points on the map. Map tiles are supplied by OpenStreetMap contributors and the United States Geological Survey.

The Map component provides three utilities for manipulating its boundaries within App Inventor. First, a locking mechanism is provided to allow the map to be moved relative to other components on the Screen. Second, when unlocked, the user can pan the Map to any location. At this new location, the "Set Initial Boundary" button can be pressed to save the current Map coordinates to its properties. Lastly, if the Map is moved to a different location, for example to add Markers off-screen, then the "Reset Map to Initial Bounds" button can be used to re-center the Map at the starting location.

Properties

You can set the below properties in the UI part of the builder.

CenterFromString - it's a geographic point value which is set to 42.359144, -71.093612 by default.
EnablePan - it's a boolean value which is set to true by default.
EnableRotation - it's a boolean value which is set to false by default.
EnableZoom - it's a boolean value which is set to true by default.
HeihMargin - it's a four value which is set to 0,0,0,0 by default.
HeihPadding - it's a four value which is set to 0,0,0,0 by default.
LocationSensor - it's a component:com.google.appinventor.components.runtime.LocationSensor value which is set to blank by default.
MapType - it's a map type value which is set to 1 by default.
MarginBottom - it's a non negative float value which is set to 0 by default.
MarginLeft - it's a non negative float value which is set to 0 by default.
MarginRight - it's a non negative float value which is set to 0 by default.
MarginTop - it's a non negative float value which is set to 0 by default.
PaddingBottom - it's a non negative float value which is set to 0 by default.
PaddingLeft - it's a non negative float value which is set to 0 by default.
PaddingRight - it's a non negative float value which is set to 0 by default.
PaddingTop - it's a non negative float value which is set to 0 by default.
Rotation - it's a float value which is set to 0.0 by default.
ScaleUnits - it's a map unit system value which is set to 1 by default.
ShowCompass - it's a boolean value which is set to false by default.
ShowScale - it's a boolean value which is set to false by default.
ShowUser - it's a boolean value which is set to false by default.
ShowZoom - it's a boolean value which is set to false by default.
Visible - it's a visibility value which is set to true by default.
ZoomLevel - it's a map zoom value which is set to 13 by default.

Block Properties

You can set the below blocks properties in the blocks section of the builder.

BoundingBox

Bounding box for the map stored as [[North, West], [South, East]].

CenterFromString

Set the initial center coordinate of the map. The value is specified as a comma-separated pair of decimal latitude and longitude coordinates, for example, 42.359144, -71.093612.

In blocks code, it is recommended for performance reasons to use SetCenter with numerical latitude and longitude rather than convert to the string representation for use with this property.

EnablePan

Enable two-finger panning of the Map

EnableRotation

Enable rotating the map based on the user's orientation.

EnableZoom

Set whether the user can zoom the map using touch gestures. This value does not affect whether the user can zoom using the zoom controls provided by ShowZoom.

Features

The list of features placed on this Map. This list also includes any features created by calls to FeatureFromDescription

Height

Specifies the vertical height of the Map, measured in pixels.

HeightPercent

Specifies the vertical height of the Map as a percentage of the height of the Screen.

Latitude

The latitude of the center of the map.

LocationSensor

Uses the provided LocationSensor for user location data rather than the built-in location provider.

Longitude

The longitude of the center of the map.

MapType

Set the type of map tile used for the base tile layer. Valid values are: 1. Roads 2. Aerial 3. Terrain

MarginBottom

Property for MarginBottom

MarginLeft

Property for MarginLeft

MarginRight

Property for MarginRight

MarginTop

Property for MarginTop

PaddingBottom

Property for PaddingBottom

PaddingLeft

Property for PaddingLeft

PaddingRight

Property for PaddingRight

PaddingTop

Property for PaddingTop

Rotation

Sets or gets the rotation of the map in decimal degrees if any

ScaleUnits

Specifies the units used for the scale overlay. 1 (the default) will give metric units (km, m) whereas 2 will give imperial units (mi, ft).

ShowCompass

Show a compass on the map. If the device provides a digital compass, orientation changes will be used to rotate the compass icon.

ShowScale

Shows or hides a scale overlay on the

ShowUser

Shows or hides an icon indicating the user's current location on the

ShowZoom

Shows or hides an icon indicating the user's current location on the

UserLatitude

Returns the user's latitude if ShowUser is enabled.

UserLongitude

Returns the user's longitude if ShowUser is enabled.

Visible

Specifies whether the Map should be visible on the screen. Value is true if the Map is showing and false if hidden.

Width

Specifies the horizontal width of the Map, measured in pixels.

WidthPercent

Specifies the horizontal width of the Map as a percentage of the width of the Screen.

ZoomLevel

Specifies the zoom level of the map. Valid values of ZoomLevel are dependent on the tile provider and the latitude and longitude of the map. For example, zoom levels are more constrained over oceans than dense city centers to conserve space for storing tiles, so valid values may be 1-7 over ocean and 1-20 over cities. Tile providers may send warning or error tiles if the zoom level is too great for the server to support.

Methods

You can set the below method blocks in the blocks section of the builder.

CreateMarker

Create a new marker with default properties at the specified latitude and longitude.

FeatureFromDescription

Converts a feature description into an App Inventor map feature. Points are converted into

LoadFromURL

Load a feature collection in GeoJSON format from the given url. On success, the event GotFeatures will be raised with the given url and a list of the features parsed from the GeoJSON as a list of (key, value) pairs. On failure, the LoadError event will be raised with any applicable HTTP response code and error message.

PanTo

Pans the map center to the given latitude and longitude and adjust the zoom level to the specified zoom.

Save

Save the contents of the Map to the specified path.

Events

You can set the below event blocks in the blocks section of the builder.

BoundsChange

User has changed the map bounds by panning or zooming the map.

DoubleTapAtPoint

The user double-tapped at a point on the map. This event will be followed by a ZoomChanged event if zooming gestures are enabled and the map is not at the highest possible zoom level.

FeatureClick

The user clicked on a map feature.

FeatureDrag

The user dragged a map feature.

FeatureLongClick

The user long-pressed on a map feature.

FeatureStartDrag

The user started dragging a map feature.

FeatureStopDrag

The user stopped dragging a map feature.

GotFeatures

A GeoJSON document was successfully read from url. The features specified in the document are provided as a list in features.

InvalidPoint

An invalid coordinate was supplied during a maps operation. The message parameter will have more details about the issue.

LoadError

An error was encountered while processing a GeoJSON document at the given url. The responseCode parameter will contain an HTTP status code and the errorMessage parameter will contain a detailed error message.

LongPressAtPoint

The user long-pressed at a point on the map.

Ready

Map has been initialized and is ready for user interaction.

TapAtPoint

The user tapped at a point on the map.

ZoomChange

User has changed the zoom level of the map.