Map Component

Properties

boundingBox
  Sets or gets the current boundary for the map's drawn view. The value is a list of lists containing the northwest and southeast coordinates of the current view in the form [[North, West], [South, East]].
Data type: array
Designer Writable false
Code Writeable true mapName.boundingBox = []
Code Readable true let variable = mapName.boundingBox

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, -27.5083, 152.9281. In blocks code, it is recommended for performance reasons to use PanTo with numerical latitude and longitude rather than convert to the string representation for use with this property.
Data type: string
Designer Writable true <map name="mapName" centerFromString="-27.5083, 152.9281">
Code Writeable true mapName.centerFromString = "-27.5083, 152.9281"
Code Readable false

enablePan
  Enables or disables the ability of the user to move the Map.
Data type: boolean
Designer Writable true <map name="mapName" enablePan="true">
Code Writeable true mapName.enablePan = true
Code Readable true let variable = mapName.enablePan

enableRotation
  Enables or disables the two-finger rotation gesture to rotate the Map.
Data type: boolean
Designer Writable true <map name="mapName" enableRotation="true">
Code Writeable true mapName.enableRotation = true
Code Readable true let variable = mapName.enableRotation

enableZoom
  Enables or disables the two-finger pinch gesture to zoom the Map.
Data type: boolean
Designer Writable true <map name="mapName" enableZoom="true">
Code Writeable true mapName.enableZoom = true
Code Readable true let variable = mapName.enableZoom

features
  Gets the list of features attached to the Map (without regard to the value of the feature's Visible property). This list also includes any features created on the Map by calls to FeatureFromDescription.
Data type: array
Designer Writable false
Code Writeable true mapName.features = []
Code Readable true let variable = mapName.features

height
  Specifies the Map's vertical height, measured in pixels.
Data type: number
Designer Writable true <map name="mapName" height="400">
Code Writeable true mapName.height = 400
Code Readable true let variable = mapName.height

heightPercent
  Specifies the Map's vertical height as a percentage of the Screen's Height.
Data type: number
Designer Writable false
Code Writeable true mapName.heightPercent = 50
Code Readable false

latitude
  Gets the latitude of the center of the Map. To change the latitude, use the PanTo method.
Data type: number
Designer Writable false
Code Writeable false
Code Readable true let variable = mapName.latitude

locationSensor
  Uses the provided LocationSensor for user location data rather than the built-in location provider.
Data type: string
Designer Writable true <map name="mapName" locationSensor="Test locationSensor">
Code Writeable true mapName.locationSensor = "Test locationSensor"
Code Readable true let variable = mapName.locationSensor

longitude
  Gets the longitude of the center of the Map. To change the longitude, use the PanTo method.
Data type: number
Designer Writable false
Code Writeable false
Code Readable true let variable = mapName.longitude

mapType
  Sets or gets the tile layer used to draw the Map background. Defaults to Road. Valid values are 'road', 'aerial' and 'terrain'. Note: Road layers are provided by OpenStreetMap and aerial and terrain layers are provided by the U.S. Geological Survey.
Data type: string
Designer Writable true <map name="mapName" mapType="road">
Code Writeable true mapName.mapType = "road"
Code Readable true let variable = mapName.mapType

rotation
  Specifies the rotation of the map in decimal degrees, if any.
Data type: number
Designer Writable true <map name="mapName" rotation="45">
Code Writeable true mapName.rotation = 45
Code Readable true let variable = mapName.rotation

scaleUnits
  Specifies the units used for the scale overlay. The (default) is 'metric' units (km, m) but 'imperial' units (mi, ft) can be also specified
Data type: string
Designer Writable true <map name="mapName" scaleUnits="metric">
Code Writeable true mapName.scaleUnits = "metric"
Code Readable true let variable = mapName.scaleUnits

showCompass
  Specifies whether to a compass overlay on the Map. The compass will be rotated based on the device's orientation if a digital compass is present in hardware.
Data type: boolean
Designer Writable true <map name="mapName" showCompass="true">
Code Writeable true mapName.showCompass = true
Code Readable true let variable = mapName.showCompass

showScale
  Shows a scale reference on the map.
Data type: boolean
Designer Writable true <map name="mapName" showScale="true">
Code Writeable true mapName.showScale = true
Code Readable true let variable = mapName.showScale

showUser
  Shows or hides an icon indicating the user's current location on the Map. The availability and accuracy of this feature will depend on whether the user has location services enabled and which location providers are available.
Data type: boolean
Designer Writable true <map name="mapName" showUser="true">
Code Writeable true mapName.showUser = true
Code Readable true let variable = mapName.showUser

showZoom
  Specifies whether to show zoom controls or not.
Data type: boolean
Designer Writable true <map name="mapName" showZoom="true">
Code Writeable true mapName.showZoom = true
Code Readable true let variable = mapName.showZoom

userLatitude
  Returns the user's latitude if ShowUser is enabled.
Data type: number
Designer Writable false
Code Writeable false
Code Readable true let variable = mapName.userLatitude

userLongitude
  Returns the user's longitude if ShowUser is enabled.
Data type: number
Designer Writable false
Code Writeable false
Code Readable true let variable = mapName.userLongitude

visible
  Specifies whether the Map should be visible on the screen. Value is true if the Map is showing and false if hidden.
Data type: boolean
Designer Writable true <map name="mapName" visible="true">
Code Writeable true mapName.visible = true
Code Readable true let variable = mapName.visible

width
  Specifies the horizontal width of the Map, measured in pixels.
Data type: number
Designer Writable true <map name="mapName" width="parent">
Code Writeable true mapName.width = "parent"
Code Readable true let variable = mapName.width

widthPercent
  Specifies the horizontal width of the Map as a percentage of the Screen's Width.
Data type: number
Designer Writable false
Code Writeable true mapName.widthPercent = 95
Code Readable false

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.
Data type: number
Designer Writable true <map name="mapName" zoomLevel="7">
Code Writeable true mapName.zoomLevel = 7
Code Readable true let variable = mapName.zoomLevel

class
  The styling class of the the component
Data type: string
Designer Writable true <map name="mapName" class="Test class">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <map name="mapName" id="Test id">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <map name="mapName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
createMarker Creates a new Marker on the Map at the specified latitude and longitude.
mapName.createMarker(latitude, longitude)
mapName.createMarker(-27.5083, 152.9281)
latitude number
longitude number
featureFromDescription Converts a feature description into an App Inventor map feature. Points are converted into Marker components, LineStrings are converted into LineString components, and Polygons (and MultiPolygons) are converted into Polygon components.
mapName.featureFromDescription(description)
mapName.featureFromDescription([])
description list
loadFromURL Loads 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 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.
mapName.loadFromURL(url)
mapName.loadFromURL("Test url")
url string
panTo Pans the map center to the given latitude and longitude and adjust the zoom level to the specified zoom.
mapName.panTo(latitude, longitude, zoom)
mapName.panTo(-27.5083, 152.9281, 8)
latitude number
longitude number
zoom number
save Saves the features on the Map as a GeoJSON file at the specified path.
mapName.save(path)
mapName.save("Test path")
path string
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
boundsChange The BoundsChange event runs when the user changes the map bounds, either by zooming, panning, or rotating the view.
mapName.addEventListener(
    "boundsChange",
    function () {
        //Your code here
    }
)
doubleTapAtPoint The DoubleTapAtPoint runs when the user double taps at a point on the map. The tapped location will be reported in map coordinates via the latitude and longitude parameters.
mapName.addEventListener(
    "doubleTapAtPoint",
    function (latitude, longitude) {
        //Your code here
    }
)
latitude number
longitude number
featureClick When a feature is clicked, the parent Map will also receive a FeatureClick event. The feature parameter indicates which child feature was clicked. This event is run after the Click event on the corresponding feature and after the when any ... Click event if one is provided.
mapName.addEventListener(
    "featureClick",
    function (feature) {
        //Your code here
    }
)
feature component
featureDrag When the user drags a feature, the parent Map will also receive a FeatureDrag event. The feature parameter indicates which child feature was dragged. This event is run after the Drag event on the corresponding feature and after the when any ... Drag event if one is provided.
mapName.addEventListener(
    "featureDrag",
    function (feature) {
        //Your code here
    }
)
feature component
featureLongClick When a feature is long-clicked, the parent Map will also receive a FeatureLongClick event. The feature parameter indicates which child feature was long-clicked. This event is run after the LongClick event on the corresponding feature and after the when any ... LongClick event if one is provided.
mapName.addEventListener(
    "featureLongClick",
    function (feature) {
        //Your code here
    }
)
feature component
featureStartDrag When the user starts dragging a feature, the parent Map will also receive a FeatureStartDrag event. The feature parameter indicates which child feature was dragged. This event is run after the StartDrag event on the corresponding feature and after the when any ... StartDrag event if one is provided.
mapName.addEventListener(
    "featureStartDrag",
    function (feature) {
        //Your code here
    }
)
feature component
featureStopDrag When the user stops dragging a feature, the parent Map will also receive a FeatureStopDrag event. The feature parameter indicates which child feature was dragged. This event is run after the StopDrag event on the corresponding feature and after the when any ... StopDrag event if one is provided.
mapName.addEventListener(
    "featureStopDrag",
    function (feature) {
        //Your code here
    }
)
feature component
gotFeatures The GotFeatures event is run when when a feature collection is successfully read from the given url. The features parameter will be a list of feature descriptions that can be converted into components using the FeatureFromDescription method.
mapName.addEventListener(
    "gotFeatures",
    function (url, features) {
        //Your code here
    }
)
url string
features list
invalidPoint The InvalidPoint event runs when the program encounters an invalid point while processing geographical data. Points are considered invalid when the latitude or longitude for the point is outside the acceptable range ([-90, 90] and [-180, 180], respectively). The message parameter will contain an explanation for the error.
mapName.addEventListener(
    "invalidPoint",
    function (message) {
        //Your code here
    }
)
message string
loadError The LoadError event is run when an error occurs while processing a feature collection document at the given url. The responseCode parameter will contain an HTTP status code and the errorMessage parameter will contain a detailed error message.
mapName.addEventListener(
    "loadError",
    function (url, responseCode, errorMessage) {
        //Your code here
    }
)
url string
responseCode number
errorMessage string
longPressAtPoint The LongPressAtPoint runs when the user long-presses at a point on the map without moving their finger (which would trigger a drag). The location of the long-press will be reported in map coordinates via the latitude and longitude parameters.
mapName.addEventListener(
    "longPressAtPoint",
    function (latitude, longitude) {
        //Your code here
    }
)
latitude number
longitude number
ready The Ready event runs once the Map has been initialized and is ready for user interaction.
mapName.addEventListener(
    "ready",
    function () {
        //Your code here
    }
)
tapAtPoint 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.
mapName.addEventListener(
    "tapAtPoint",
    function (latitude, longitude) {
        //Your code here
    }
)
latitude number
longitude number
zoomChange The ZoomChange event runs when the user has changed the zoom level of the map, such as by pinching or double-tapping to zoom.
mapName.addEventListener(
    "zoomChange",
    function () {
        //Your code here
    }
)