Durée estimée: 45 minutes

Presentation :

This app will query a map from a web server and display it with a Webviewer component.
The App will select the geographic area, zoom factor and map type (map or satallite image).

What we will do :

• Review a few web map servers including OSM (Open Street Map), USGS, IGN or Google maps. They return html web pages that can be used with App Inventor’s web viewer component.
• Test map servers with our web browser, and play with query parameters : longitude, latitude, map scale, map type,
• Copy/paste a sample URL in a new App Inventor project with a webviewer,
• Update this project to control the location, zoom and other map display parameters

What we will learn :

• read and decode URL addresses on our web browser,
• manual edit the query part of an URL,
• check formats and use of URL encoding,
• copy/paste a URL to display map with a webviewer component,
• Change parameters to control the location, zoom and other map display parameters,
• See that the App has no control on events on the web viewer window.

Input Resources :

None : Start with a new project (no canvas necessary).

Development :

Review web map servers and test with browser

There are many map servers on the web including OSM (Open Street Map), USGS, IGN or Google maps. They return html web pages that can be used with App Inventor’s web viewer component. (They cannot be used with the Canvas component that handles image files only.)

A simple (and fun) thing to do is to test these servers on your web browser :

1. Go to Open Street Maps (https://www.openstreetmap.org) drag and zoom to your area of interest and look at the URL adresses to identify the zoom, latitude and longitude in URL.
   https://www.openstreetmap.org/#map=18/48.85302/2.34973&layers=C
   Change zoom, latitude and longitude values by hand, and check what works.
   
   
2. Try the same with Google maps, look at the URL addresses as you move around or select options
   https://www.google.com/maps/     or     https://www.google.com/maps/@48.8589163,2.3277139,13z
   https://www.google.com/maps/@48.8531755,2.3498957,18z/data=!3m1!1e3
   https://www.google.com/maps/place/eiffel+tower
   https://www.google.com/maps/dir/Eiffel+tower/Notre+Dame+de+Paris/

• Check URL encoding : that blank spaces are replaced by + when address is displayed back (you browser allows non compliant URL addresses, which will not be the case with you program).
• Note : Google adds more information to your URL when you send it, but the short version works and is easier to code. When editing URLs, Remember about reserved characters, replace spaces by +

Code App Inventor display project

• Open App Inventor and create a new project.
• Add a Webviewer component.
• Select Fillparent for width and height and Check the "usesLocation" property.
  
  
• Set Webviewer Home URL to an addres surch as https://www.google.com/maps/ or other working URL if you prefer.
  Note : Google’s basic URL with no location will use your location as default if your smartphone has location enabled and if your browser allows location sharing (disable it if you worry about privacy). (Uncheck the Scrollable property of the Screen1 component, and check the responsive sizing property for maps with higher resolution).
• Download program to your smartphone and check that it works (there is no need for blocks for this initial display).
• Check interaction with the web window (ex : zoom-unzoom with 2 fingers).
  
  
• Add a "ButtonUpdate" button and a text box "TextBoxMapURL" which will hold the next Map URL to display.
• Check the multiline property and set text to another URL such as : https://www.google.com/maps/@48.8589163,2.3277139,13z
• On the blocks side, in the button click event handler, set the Webviewer URL to the Textbox text .
  
• Run your app. Click update and check that map switches to second map URL (textbox).
• Change zoom factor or latitude or longitude in the text box and click update, …
  You can update map display from your App, however window events are not seen by the App (this is a one way dataflow).
  
  
• Now create variables such as zoom,latitude, longitude or even MapServer create a "MapURL" procedure that returns the URL from these variables and set it to the WebViewer URL on the buttonUpdate click handler. Also display it in textbox for checking.
  
  Example below shows how to use either to Open Street Map or Google according to a "MapServer" variable. When called, the MapURL procedure computes the URL by calling "mapURLOSM" for open street map or "MapURLGoogle" for Google map server, according to the MapServer variable. we see that the URL is different according to the Web server and its API.
  
  
  
  
• run and test your program.
  
  
  

Note that zoom factors are not the same for all servers.

If you wish, you can then add buttons to zoom/unzoom or pan left/right/up/down from your app :
But it is slow and much less practical than interacting with the Web window directly. (We will come back to this type of interactions when using the canvas component).