Chapter 16: Map Layers

From Mapping in the Cloud by Michael Peterson

All Google Maps API examples here do not use a key. Domains and related sub-domains that had used Google Maps API before June 22, 2016 should find that the maps still function without a key. That's why the keyless examples work from this page. If the Google Map examples below don't work once you upload them to your server, you need to get a free key from Google. Further details of this new requirement and other changes to the Google Maps API usage policy can be found here at this site. The key that Google provides to you for free would be added to the call to the API, like this:

<script src=""></script>

Exercises after 16_09-16_10c rely on a program called MapTiler. A free version is available for Windows, Macintosh and Linux.

  1. 16_01_Old_Map_Overlay - Overlay an old map for another city.
  2. 16_01a_Webcam Overlay - Find another webcam image and indicate it's location in a similar way. Make sure to keep the image in the proper proportion. Webcam images for weather observation is available through
  3. 16_02_QuadMap_Overlay - Overlay another USGS quadrangle map. Choose one of the cropped versions in the "16_02-3_QuadMaps_cropped " folder
  4. 16_03_Toggle_QuadMap_Overlay - Implement the toggle option. Choose one of the cropped versions in the "16_02-3_QuadMaps_cropped " folder
  5. 16_04_Image_Overlay - Overlay a portion of a Landsat image
  6. 16_06_Traffic_Overlay - Change the size and location of the traffic map
  7. 16_06b_Blank_Tile_Layer - Change how the black tiles are displayed
  8. 16_06c_Moon_Tile_Layer - Show how StreetView is underneath the map of the moon
  9. 16_06d_Gall-Peters_Tile_Layer - Change the size and zoom level
  10. 16_06e_45degree_Imagery_Tile_Layer - Change the location and size
  11. 16_06f_45degree_Imagery_Tile_Layer_Rotate - Change the location and size
  12. 16_07_Bicycle_Layer - Make a display with two maps at different scales.
  13. 16_08_KML_Great_Lakes_waves - Find another KML layer that displays a raster image under KML depot in the menu on the right.
  14. 16_09_Kremer_Collection Michael Sweerts - Examine how a tiled mapping service is used to display paintings from this art collection. Use a Google's Image Search Engine to find another another painting by a famous artist. Set the Search Tools to find images larger than 4 MP. Save the image locally. Open MapTiler and choose the "Raster Tiles Not georeferenced images" option and select the image by 'dropping' the raster file. Choose "Render" and save the output to a new folder. Put the folder in your code16 folder and make a link to a leaflet.html file like this to display the tiles.
  15. 16_10_Tiling a map - Tile a map from the "Images for MapTiler" folder using the MapTiler program. Select "Standard Tiles," then "Drop the raster file," choose Bounding Box and estimate the 'West, South, East, North' coordinates. Create a new folder for the tiles. Link to the "googlemaps.html" file that is created by MapTiler. This file must remain in the same folder with all of the tiles.
  16. 16_11a_Displaying a DRG - A digital raster graphic (DRG) is a digital image resulting from scanning a paper USGS topographic map. DRGs created by USGS are typically scanned at 250 dpi and saved as a TIFF. Find a DRG of another area and use MapTiler to tile the image. DRG files include locational information so you do not need to specify the corner coordinates. Select "Standard Tiles," then "Drop the raster file." Make a link to the "googlemaps.html" file in the folder of files created by MapTiler.
  17. 16_10b_DRG Slider - Make a link to the index.html file in the folder of tiles and notice the slider and multitude of display and API options.
  18. 16_10c_X marks the tile - Edit one of the PNG files in the folder of tiles by placing an "X" across it with Photoshop or similar graphics editor.

Assignment Page