Chapter 16: Map Layers

From Mapping in the Cloud by Michael Peterson

All Google Maps API examples here use a key that is assigned to a specific server. You may need to acquire your own key. If the Google Map examples below don't work once you upload them to your server, you will need to get your own key from Google. As of July 2018, the Google key requires that you enter a credit card. The first $200 of usage is free. This equates to about 28,000 maps a month, more than most developers would need.

1. 16_01_Old_Map_Overlay - Overlay an old map for another city.
   
   
2. 16_01a_Webcam Overlay - Find a webcam image and indicate its location in a similar way. Make sure to keep the image in the proper proportion. Webcam images for weather observation is available through https://www.wunderground.com/webcams/
   
   
3. 16_01b_Webcam_Overlay_Zoom - Find another webcam image through OpenTopia and indicate its location. Make sure to display the image in the proper proportion.
   
   
4. 16.01c_Live_Webcam_Display - Replace the live webcam with another by searching YouTube for "live webcam". Copy and paste the address of the webcam in the appropriate location. Change the map in the associate Zoom_Map.html file to display the location of the webcam.
   
   
5. 16_02_QuadMap_Overlay - Overlay another USGS quadrangle map and change the size of the map. Choose one of the cropped versions in the "16_02-3_QuadMaps_cropped " folder. The latitude/longitude values of the SW and NE corners are embedded in each file.
   
   
6. 16_03_Toggle_QuadMap_Overlay - Implement the toggle option with the same overlay. Change the size of the map.
   
   
7. 16_04_Image_Overlay - Overlay a portion of a Landsat image.
   
   
8. 16_06_Traffic_Overlay - Change the size and location of the traffic map.
   
   
9. 16_06b_Blank_Tile_Layer - Change how the black tiles are displayed.
   
   
10. 16_06c_Moon_Tile_Layer - Show how StreetView is underneath the map of the moon.
    
    
11. 16_06d_Gall-Peters_Tile_Layer - Change the size and zoom level.
    
    
12. 16_06e_45degree_Imagery_Tile_Layer - Change the location and size.
    
    
13. 16_06f_45degree_Imagery_Tile_Layer_Rotate - Change the location and size.
    
    
14. 16_07_Bicycle_Layer - Make a display with two maps at different scales.
    
    
15. 16_08_KML_Great_Lakes_waves - Find another KML layer that displays a raster image under KML depot in the menu on the right.
    
    

These exercises require the use of a program called MapTiler. The program divides images into tiles. A free version is available for Windows, Macintosh and Linux.

16. 16_09_Kremer_Collection Michael Sweerts - Examine how paintings from an art collection are displayed using a tiled mapping service . 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 'dragging-and-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.
    
    
17. 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.
    
    
18. 16_11a_Displaying a DRG - A digital raster graphic (DRG) is a large digital image resulting from scanning a USGS topographic map. DRGs created by USGS are typically scanned at 250 dpi and saved as a TIFF. The advantage of TIFF is that the header of the file can incorporate latitude and longitude to locate the file. 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.
    
    
19. 16_10b_DRG Slider - Change this link to the index.html file in the folder of tiles and notice the slider and multitude of display and API options.
    
    
20. 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.