Last Updated On 2021-07-16
Version 6MinSDK 8Tutorial Video
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.
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.
You can set the below blocks properties in the blocks section of the builder.
Bounding box for the map stored as [[North, West], [South, East]].
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,
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.
Enable two-finger panning of the Map
Enable rotating the map based on the user's orientation.
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.
The list of features placed on this Map. This list also includes any features created by calls to FeatureFromDescription
Specifies the vertical height of the Map, measured in pixels.
Specifies the vertical height of the Map as a percentage of the height of the Screen.
The latitude of the center of the map.
Uses the provided LocationSensor for user location data rather than the built-in location provider.
The longitude of the center of the map.
Set the type of map tile used for the base tile layer. Valid values are: 1. Roads 2. Aerial 3. Terrain
Property for MarginBottom
Property for MarginLeft
Property for MarginRight
Property for MarginTop
Property for PaddingBottom
Property for PaddingLeft
Property for PaddingRight
Property for PaddingTop
Sets or gets the rotation of the map in decimal degrees if any
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).
Show a compass on the map. If the device provides a digital compass, orientation changes will be used to rotate the compass icon.
Shows or hides a scale overlay on the
Shows or hides an icon indicating the user's current location on the
Shows or hides an icon indicating the user's current location on the
Returns the user's latitude if ShowUser is enabled.
Returns the user's longitude if ShowUser is enabled.
Specifies whether the Map should be visible on the screen. Value is true if the Map is showing and false if hidden.
Specifies the horizontal width of the Map, measured in pixels.
Specifies the horizontal width of the Map as a percentage of the width of the Screen.
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.
You can set the below method blocks in the blocks section of the builder.
Create a new marker with default properties at the specified latitude and longitude.
Converts a feature description into an App Inventor map feature. Points are converted into
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.
Pans the map center to the given latitude and longitude and adjust the zoom level to the specified zoom.
Save the contents of the Map to the specified path.
You can set the below event blocks in the blocks section of the builder.
User has changed the map bounds by panning or zooming the map.
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.
The user clicked on a map feature.
The user dragged a map feature.
The user long-pressed on a map feature.
The user started dragging a map feature.
The user stopped dragging a map feature.
A GeoJSON document was successfully read from url. The features specified in the document are provided as a list in features.
An invalid coordinate was supplied during a maps operation. The message parameter will have more details about the issue.
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.
The user long-pressed at a point on the map.
Map has been initialized and is ready for user interaction.
The user tapped at a point on the map.
User has changed the zoom level of the map.