Display maps with Canvas and static maps (level 1)

Estimated duration : 45 minutes

Presentation :

What we will do :

  • Start with a simple App and compare with the webviewer solution,
  • Check that the App keeps control on map window events, but loses interactions which were available with earlier webviewer solution,
  • Discuss event handler and static maps capabilities (that we will see later in part 2 of canvas mapping),
  • Make a second App that shows your location and an other one, that you tell.

What we will learn :

  • Use maps in image or bitmap format,
  • Use the Sttatic maps API
  • Compare solutions with different architectures : keep event control within App, or delegate event control to a web service.

Foreword :

We have seen the "Webviewer" solution for mapping. It behaves like a browser with control handed to a web server. Users can interact with the map through the webserver, that returns map updates. Your App Inventor code itself does not see these events. The only thing your blocks can do is change the URL to call the server for an update. Your code does not see if user clicks, zdrags to pan,etc. The Web viewer solution uses a One way dialogue from the App to the Webviewer . Your App code has no feedback.

We will now see a different solution with an API that returns maps as image files, called "static maps". We will use these image files as the background picture of a canvas, as if they were a file in your phone.

image065.png

What's nice with "canvas mapping", is that the App keeps full control on events, with through Canvas event handler blocks. It can also use drawing and animation components (sprites and balls).
(Compare with webviewer component that has NO event handlers, nor drawing, nor sprites).

That's the good part with canvas mapping!

Now, what happens if you drag a canvas map ? NOTHING!
... unless you have written a script to handle this drag event ...
It's your job to handle interactions. No Web service is going to do it for you.

With Canvas mapping blocks keep "control" on events, but we have lost "web services"
It starts lower but goes higher, with high speed interactions needed for pokemon or other games.

Development of a simple app : Map and Sprite

Input Resources :

Starter App : None, start with creating a new project.
API documentation : see API for Google static maps.

Simple App 1 : Display a 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 :

  • Create a new App Inventor project mappingWithCanvas1Design.png
  • 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 " automatic" .
    • Add a "ball" component.
  • On the blocks side :
    • When screen.initialize :
    • When the ball reaches the edge, make it rebound,
    • and when user touches the canvas, head the ball towards the point that has been touched.
    mmappingWithCanvas1Blocks.png

  • Run the program, touch the canvas, …

Preliminary analysis and conclusions :

What did we see?

  • App has kept control on window (canvas) events => the ball heads towards clicked point.
  • But map does not move when dragged : if we want it to move, we have to code the "When dragged" event handler. We get started with a "dead map".
  • We gained control but lost pan and zoom interactions which were built in mapping with the Webviewer component and a "dynamic maps" server.

We will see later (in canvas maps, part 2) how to code these interactions and build geospatial games like Pokemons, moving ennemies and hidden treasures around the city to be searched at multiple map scales or 3D views, multiple players,etc. But with much more work.
What you should begin to have in mind for your projects is :
  • does the webviewer solution match my needs ? if yes this will be quick.
  • or do I need to handle quick and high level interactions ? if yes I will choose Canvas mapping, but this will be a much longer development ...

Key points in the "static maps" API :

“The Google Static Maps API lets you embed a Google Maps image on your web page without requiring JavaScript or any dynamic page loading. The Google Static Maps API service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page"

Documentation for the staticmaps API can be found here :

What is useful for us is :

  • The base address (scheme and host) for static maps :
    • https://maps.googleapis.com/maps/api/staticmap?
    • or http://maps.google.com/maps/api/staticmap?
  • The static maps query fields (separated by ‘&’):
    centerdefines latitude and longitude of map center (e.g. "40.714728,-73.998672").
    It may also be an address (replace space by +)
    sizerectangular dimensions of the map image (e.g. canvas size) with a string of the form {horizontal_value}x{vertical_value}.
    Note : be careful that the size is not too big to avoid delay times with low bandwidth.
    maptypedefines the type of map to construct. We will use and switch between roadmap and satellite (also available in API: hybrid and terrain).
    zoomdefines the display scale from : 0 for world, 10 for cities and 21 for street level. Adding 1 to zoom level will divide pixel size by 2.
    markersdefines markers overlaid on the map (the ‘|’or %7C separates multiple values)

    We will see streetview query fields later.

Geolocation App 2 : Map your own location and an other address

For now we will look at a simple map case with connection to Geolocation (GPS). We will handle other map interactions and 3D in later lessons. (Geolocation is a subject on its own with a separate chapter.)

Current version of the video is in french (with english/french subtitles available).

Go further : Next steps

In later lessons we will go into more control on map contents and bring the map "alive" i.e. handle map/canvas events :

  1. drag to pan
  2. zoom, unzoom,
  3. select map contents : roadmap, satellite, hybrid,
  4. draw markers and lines on the map,
  5. switch to streetview and 360° views inside buildings,
  6. Measure and draw on the map,
  7. ...

For this, we will need to clarify how we go from screen coordinates (pixels) to map geographic coordinates (in degrees of latitude and longitude), and to distance coordinates (meters), and thiswill require a separate lesson.