Display maps with Canvas and static maps (level 1)
Durée estimée: 45 minutes
Presentation :
What we will do :
What we will learn :
Foreword :
We have seen the "Webviewer" solution for mapping. It hands control to a web service and behaves like a browser. Users can interact with the map. Screen map events are transmitted to the Web server that returns an updated map. Your App Inventor code itself does not see these events. Your blocks can call for an update, but cannot see what the user is doing : zoom, pan, click ... It's a One way dialogue from the App to the Webviewer which then talks directly with the web service. The App has no feedback.
We will now see a second solution with a different API that returns maps as image files called "static maps". We will use these image files as the background picture of a canvas, exactly as if they were in your phone.
What's nice with the "canvas", is that the App keeps full control, with events that are known to the App, with an event handler block for each event.
(Check how many event handlers there is in the webviewer ? NONE).
Besides, the Canvas has drawing functions and has animation components with sprites and balls.
That was the good part!
What happens if you drag the map in the canvas ? NOTHING!
... unless you have written a script to handle this event ...
It's your job to handle interactions that you need. No service is going to do it for you.
We keep "control", but we have lost "service"
Start from low, but go higher, with high speed interactions as we need for pokemons or other games.
Input Resources :
None : start with creating a new project.Development :
Simple App 1 : Display map with a moving sprite or ball
Let’s start with a simple case : we want a map around the Eiffel tower and a ball bouncing around on the map :
- Create a new App Inventor project
- On the Design side :
- Set Screen orientation in "portrait mode" and "Fixed" sizing.
- Add a canvas (from "Drawing and animation" drawer) and name it "canvasMap"
- Set canvas width and height to " fill parent" .
- Add a "ball" component.
- On the blocks side :
- When screen.initialize,
- Set the canvas background image to
https://maps.googleapis.com/maps/api/staticmap?center=Eiffel+tower&zoom=16&size=320x320 - Set the ball heading to a random value between 1 and 360, and set ist speed to 10
- When the ball reaches the end, make it rebound,
- and when user touches the canvas, head the ball towards the point that has been touched.
Notes :
- Google does not currently require an API key when using this API from a browser or app Inventor.
- see API documentation at Google Static Maps Developer Guide
- If you are not familiar with URLs and URL encoding, please check corresponding lesson earlier.
Run the program, touch the canvas, …
- What are differences between this and mapping with a Web Viewer ?
- The map does not move when dragged, ...
- But the balls heads towards point that user clicks,
- event control is close to real time :
That means you can build Apps or games that behave according to window events (like clicks, collisions, edges reached, …). This is a key point for games, including geospatial games like Pokemons.
From this first basic example we will head in two different directions :
- Managing map content dollowing the "Static maps API" documentation
- Managing the map content and get it alive with :
- drag to pan
- zoom, unzoom,
- select map contents : roadmap, satellite, hybrid
- draw markers and lines on the map
- switch to streetview and 3D view inside buildings
- ...
Point 2 may not be very difficult but requires to clarify how we go from screen coordinates (pixels) to map geographic coordinates (in degrees of latitude and longitude), and to distance coordinates (meters). This will require a separate lesson.
We will now look at managing the contents of the map, and we will do it with Geolocation (GPS). (Geolocation is a subject on its own witha separate chapter. You may have to refer to the adequate lessons to fully understand the Geolocation aprt of this App)