Chapter 20: Local Mapping

From Mapping in the Cloud by Peterson

Assignments from (put your name and device here)


  1. These examples use the W3C Geolocation API and Google Maps GeoLocation API. The ability to use these GeoLocation APIs to identify your location from non-HTTPS sites was removed from browsers in 2016. The reason this was done was that while you share your location with a server, the location might be intercepted by another party. The Geolocation API call must now be served in a secure context (HTTPS), like that used for credit card transactions.
  2. provides a free https server.
  3. Use the Chrome browser, not Firefox, on a desktop computer.


These examples are designed for a browser on your mobile device. If you are using a secure server (https), modify the information that is presented in the infowindow. Then, for each example, capture the screen after the dialog for the marker has been activated.

Capture locations off-campus, both inside and outside of buildings.

Make sure that Location Services (under Privacy in iOS) is enabled on your device. Readings will vary based on whether wi-fi or cellular data connections is enabled. In urban areas, deactivating wi-fi (in Settings) will significantly reduce accuracy. Since these examples are based on web pages, either wi-fi or cellular data needs to be activated to load the pages on a mobile device.

GPS is used as a last resort, and only outside when there is a clear view of the sky. An accuracy of five meters or less generally indicates a GPS measurement.

To capture the screen on Apple iOS devices, follow this procedure:

Screen capture for Android devices varies by operating system and manufacturer.

Email each picture to yourself as capture1.jpg to capture9.jpg. Upload the screen captures into your code20 folder and replace the existing files. If the filenames are named capture1.png, capture2.png, etc ... they will display and link automatically.

  1. 20_4_W3C_GeolocationAPI - Center the message on the screen.

  2. 20_5_W3C_GeolocationAPI_Marker_LatLong - Click on the marker and center.

  3. 20_8_Nearby_Street_Address - Make sure wi-fi is enabled.

  4. 20_9_Accuracy+Address - Disable wi-fi and compare results to previous.

  5. 20_10_Time+position - Enable wi-fi. Click on the marker and center.

  6. 20_11_Leaflet_example - Make two screen shots - one with wi-fi enabled and one with wi-fi disabled.
    Wifi enabled Wifi disabled

  7. Google Maps GeoLocation API

Assignment Page