How do I show custom map?

MIT App Inventor Help
1

My students and I want to create a 'You are here' app to help people find their way around our campus. The standard google maps does not show enough detail. We need to demarcate buildings a bit more clearly and want to have some text such as Canteen, Mathematics or Theatre. Is it possible to 'overlay' the google map with a more detailed map image? If it is, where can I find a tutorial on this, or any other materials (other app making platforms perhaps)? Thank you

2

You could use the AI2 map component and draw the buildings/features on the map using polygons and the feature collections. The map component also provides the "showUser" feature which displays the location of the device on the map.

1 Like
3

Welcome Adrienne.

Use either

  • Tim's suggestion

  • a home made FeatureCollection that will provide a map overlay. Post #6 here shows an example made using a tool to create a detailed FeatureCollection that can create and scale a map overlay using the geojson.io web site. I would use this tool to make the detail. There isn't a tutorial however the process is simple:
    1.Use the tool to locate your campus
    2. Draw the features you would like.
    2a. Save and download the overlay file (it's default name is map.geojson)
    3. Add a FeatureCollection object to the MIT Map component
    4. load the file that contains your campus feature overlay to Media
    5. On the Designer, set the FeatureCollection Source in the Properties to the map.geojson file.

  • a map made on a Canvas using your own background map. Flat map can work with an aerial photograph or a scaled image. This technique is not very precise but could work for your purposes.

You could then use the example of tutorial Map Tour to navigate. Map Tour uses a Google Map but the tutorial can be adapted to use the Map component.

1 Like
4

@Adrienne You could try this

2 Likes
5

Thanks so much Tim and Steve I'll give it go. Will let you know how it goes.