Embedded Files
π Please help us complete a 5 minute survey!
Published on February 24, 2022
In the last guide we learned how to detect the current latitude and longitude using the LocationSensor component, in this guide we will use that to make a map that shows the current location of the user.
π·οΈ Tags: #tutorials-and-guides, #maps
Step 1. Setting Up Your Project.
Open the project you used in the last guide.
From the Maps drawer, drag out a Map component. It is used to show maps. In most conditions, you want to show the map as big as possible, so set the Height and the Width of the Map to Fill parent.
Unlike the Slider component, the Map component is interactive in the Designer, which means that you can zoom in and out with the map.
The LocationSensor property specifies what LocationSensor the map uses. We set this to the LocationSensor we created in the last guide.
As you can see, the initial location the map is panned is in Cambridge, Massachusetts, U.S. If you would like to change the initial result, use the CenterFromString property to specify the latitude and longitude.
In the properties of the map, you see some properties to customize your map.
EnablePan: whether to allow the user to move the map or not. Leave this checked.
EnableRotation: whether to allow user to do the two-finger rotation action or not. Leave this checked.
EnableZoom: whether to allow user to do the two-finger pinch action or not. Leave this checked.
ShowCompass: whether to show the compass of the map.
ShowScale: whether to show the scale reference of the map.
ShowUser: whether to show a small icon to indicate the user's current location.
ShowZoom: whether to show the zoom controls on the map.
If you come from a country that uses imperial units, e.g. US, you can actually do it with the ScaleUnit property. You can also specify the map type (e.g. Aerial, Terrain, Roads by default) with the MapType property.
Before we head to the Blocks editor, you need to understand the following.
A zoom level is a level used to adjust the zooming of the map. For example, if the zoom level is 11, the map will zoom the map so that it is about the size of a city. To learn more about zoom levels, go to https://wiki.openstreetmap.org/wiki/Zoom_levels.
Step 2. Editing App Inventor Blocks.
Add the PanTo block in the LocationSensor.LocationChanged event.
Note: it is recommended that in the blocks, you use the PanTo block instead of setting the CenterFromString.
Β© Gordon Lu π§ E-mail π¬ Message π Phone call
Google Sites
Report abuse