{"id":6622,"date":"2025-09-14T16:27:11","date_gmt":"2025-09-14T16:27:11","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=6622"},"modified":"2025-12-11T19:20:38","modified_gmt":"2025-12-11T19:20:38","slug":"mit-app-inventor-maps-tutorial","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/mit-app-inventor-maps-tutorial\/","title":{"rendered":"Place Finder App in MIT App Inventor | Maps & OpenStreetMap Tutorial"},"content":{"rendered":"\n

<\/p>\n\n\n\n

Hello friends, and welcome to Obsidian Soft<\/p>\n\n\n\n

In today\u2019s tutorial, I will teach you how to use the maps component in MIT App Inventor. We will build a place finder app.<\/p>\n\n\n\n

So, let\u2019s begin:<\/p>\n\n\n\n

Open up MIT App Inventor and start a new project. Name it placeFinderApp and keep the toolkit default. This is very important. For screen 1, make align horizontal center, align vertical center, and set the screen orientation to portrait.<\/p>\n\n\n\n

Drag and drop a ListPicker <\/strong>from the User Interface<\/strong> palette onto the viewer. Make background color orange, font bold, font size 18, and change text to \u201cChoose Place<\/strong>\u201d. In elements from string, type in hospital, restaurant, atm, school. You can add other amenities too, but be careful with the spellings. Check out the following link for the list of amenities. https:\/\/wiki.openstreetmap.org\/wiki\/Category:Amenities<\/p>\n\n\n\n

Now, add a Map <\/strong>component from the Maps <\/strong>palette. Make height 75% and width fill parent.<\/p>\n\n\n\n

Add a Location <\/strong>sensor from the Sensors <\/strong>palette.<\/p>\n\n\n\n

Add Web <\/strong>and Activity Starter<\/strong> from the Connectivity <\/strong>palette and a Notifier <\/strong>from the User Interface<\/strong> palette.<\/p>\n\n\n\n

Our screen design is done, so let\u2019s go to the blocks section.<\/p>\n\n\n\n

We need a few global variables:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

First, we will work on putting a green marker at our home location.<\/p>\n\n\n\n

Make an empty procedure called goToHome.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Next, get the LocationChanged event of the location sensor. Check if the map doesn\u2019t already have markers, as this means the home was already set. If the list of markers is empty, then set global variables for home latitude and longitude to the latitude and longitude detected by the location sensor, and then call goToHome procedure.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now, let\u2019s work on the goToHome procedure. First, we center themap around our home\u2019s latitude and longitude. Then, we empty our markers list. This goToHome will be called at two points: when our location is determined for the first time, and when we choose some other amenity in the places list picker.<\/p>\n\n\n\n

Then, we create our homeMarker at our location\u2019s latitude and longitude. We set the homeMarker\u2019s properties, such as title and color, and also enable the info box. This means that the title will show when the user taps on a marker.<\/p>\n\n\n\n

Next, we will add this homeMarker to our list of markers.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

When the user chooses an amenity or place, the list picker\u2019s AfterPicking event is triggered.First, we check if the location sensor\u2019s latitude isn\u2019t 0. This means that the user hasn\u2019t turned on their location. So, use the notifier to show a relevant message in the else. In If, set the web component\u2019s URL to a call to the Overpass API, which is a way of accessing OpenStreetMap data.<\/p>\n\n\n\n

So, the URL is a join of 7 things.<\/p>\n\n\n\n

    \n
  1. https:\/\/overpass-api.de\/api\/interpreter?data=[out:json];node[amenity=<\/strong><\/a><\/li>\n\n\n\n
  2. ListPicker.selection<\/strong><\/li>\n\n\n\n
  3. ](around:2000,<\/strong><\/li>\n\n\n\n
  4. LocationSensor.Latitude<\/strong><\/li>\n\n\n\n
  5. ,<\/strong><\/li>\n\n\n\n
  6. LocationSensor.Longitude<\/strong><\/li>\n\n\n\n
  7. );out;<\/strong><\/li>\n<\/ol>\n\n\n\n

    Copy and paste the text parts very carefully.<\/p>\n\n\n\n

    Then, call web1. Get. Verify the blocks in ListPicker.AfterPicking event super carefully as a small spelling mistake can lead to the API call failing. Your block structure should look like the following:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The call to Web1.Get will trigger Web1.GotText event.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The responseContent looks like this when we call the Overpass API. So, we need to decode it.<\/p>\n\n\n\n

    {<\/p>\n\n\n\n

      “version”: 0.6,<\/p>\n\n\n\n

      “generator”: “Overpass API 0.7.62.5 1bd436f1”,<\/p>\n\n\n\n

      “osm3s”: {<\/p>\n\n\n\n

        “timestamp_osm_base”: “2025-05-19T08:50:42Z”,<\/p>\n\n\n\n

        “copyright”: “The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.”<\/p>\n\n\n\n

     },<\/p>\n\n\n\n

      “elements”: [<\/p>\n\n\n\n

    {<\/p>\n\n\n\n

      “type”: “node”,<\/p>\n\n\n\n

      “id”: 458106054,<\/p>\n\n\n\n

      “lat”: 41.8098280,<\/p>\n\n\n\n

      “lon”: -87.9657834,<\/p>\n\n\n\n

      “tags”: {<\/p>\n\n\n\n

        “amenity”: “restaurant”,<\/p>\n\n\n\n

        “name”: “ZaZa’s”<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

    },<\/p>\n\n\n\n

    {<\/p>\n\n\n\n

      “type”: “node”,<\/p>\n\n\n\n

      “id”: 4619166089,<\/p>\n\n\n\n

      “lat”: 41.7786793,<\/p>\n\n\n\n

      “lon”: -87.9756891,<\/p>\n\n\n\n

      “tags”: {<\/p>\n\n\n\n

        “amenity”: “restaurant”,<\/p>\n\n\n\n

        “cuisine”: “mexican”,<\/p>\n\n\n\n

        “name”: “Marmelly”<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

    },<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    And we need the list of places inside this responseDict against the key: \u201celements\u201d. Spelling is very important when getting data from dictionaries. We will put all places inside a local list of placesData. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Next, we are going to reset our global places names and map\u2019s features. This is to remove existing markers from the map. We also call the goHome procedure, as we want to get the map back to the original state with a green marker for our home.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Now comes the main part of creating markers on our map. We go through each item in our placesData, the local list containing all the places. We make a local variable name for containing the name of our place, which is basically inside our dictionary against the key \u201ctags\u201d and within this dictionary, a value against the key \u201cname\u201d. We add the local variable name to our placesNames list. Then, we get the latitude and longitude. Create a marker at that point. Set its properties. And then, add the marker to the markers list. Outside the for loop, we set the map\u2019s features to this markers list.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Since we have so many markers, here, any component blocks are super helpful in coding. We get the any Marker click event. We check that the marker\u2019s title isn\u2019t Home. And then, we store this marker in the global clickedMarker variable. And we show a dialog user Notifier\u2019s ShowChooseDialog asking whether the user wants to open Google Maps to show directions.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    When the user chooses something on the dialog: yes or no button, Notifier\u2019s After Choosing event is triggered. If their choice is yes, we will open up Google Maps using the activity starter; otherwise, we will dismiss the dialog.<\/p>\n\n\n\n

    The way to set the activity starter is as follows:<\/p>\n\n\n\n

    Action = android.intent.action.VIEW<\/p>\n\n\n\n

    DataUri is a join of<\/p>\n\n\n\n

      \n
    1. https:\/\/www.google.com\/maps\/search\/?api=1&query=<\/a><\/li>\n\n\n\n
    2. The clicked marker\u2019s latitude<\/li>\n\n\n\n
    3. ,<\/li>\n\n\n\n
    4. The clicked marker\u2019s longitude<\/li>\n<\/ol>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      So, our app is done, in which we have marked our own location. We can look at different types of amenities within 2 km of our own location. I hoped you liked this tutorial.<\/p>\n\n\n\n

      You can also get the AIA project file<\/p>\n\n\n\n

      Place Finder AIA File<\/a><\/strong><\/p>\n\n\n\n

      You can also have a look at the video tutorial here:<\/p>\n\n\n\n

      \n