Chapter 10: Map Mashups

From Mapping in the Cloud by Michael Peterson

In these examples, the size of the map is usually changed in the div statement in the body part of the file. To determine a new location for a map in latitude/longitude, use the right-mouse click in Google Maps (Mac: control/click) on the desired point. Select "What's here?" from the pop-up menu, click on the specified location in the the pop-up window and copy the latitude and longitude coordinates from the Google Maps address bar.

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. Google Maps API - Reference
   • Basic Google Map: Change the center of the map, the MapTypeID to TERRAIN, and the map size.
     
   • Marker: Change the center of the map, the MapTypeID to SATELLITE, and the map size.
     
   • Clickable Marker: Change the center of the map, the text in the infowindow, and the map size.
   • Clickable Marker with picture: Change the center of the map and the picture in the infowindow.
   • Default Zoom User-Interface: Increase height to see the default zoom user-interface
   • Individual User-Interface Elements: Hide some user-interface elements
   • Zoom Positioning: Move the zoom control
   • Map Styling: Change the color of the land and water
   • Snazzy Maps: Change the location of the map, and the marker.
   • Language: Change the language and size of the map.
   • Elevation: Change the location and size of the map.
   • Max Imagery Scale: Change size of map center within a country in Africa.
   
   
2. Bing Maps API - Reference (Updated to Version 8, June 2017)
• Basic Bing Map: Change the center of the map and the map size.
  
• Bing Maps_Marker: Change the center of the map, and the map size and the marker info.
• Bing Maps_Infobox: Change the center of the map, and the map size and the infobox info.
• Bing Maps Pushpin InfoWindow: I changed the size and location of the map, and the contents of the infowindow.
• BingMaps SVG: Change the size of the map, the style of the SVG symbol, and the location of the map. .
  
• BingMaps Polygon: I changed the size of the map, the style of the triangle and the location of the map.
  


3. Nokia Maps API - Reference
• Basic Nokia Map: Change the map's location and size.
  
• Marker: Change the center of the map, map size, and the position of the markers.
  
• Styled Markers: Change the center of the map, map size, and the style of the markers.
  
• Info Windows: Change the size and location of the map, and the text and style of the two pop-up windows.
• Polygon: I changed the size and location of the map, and the style of the polygon.


4. MapQuest API - Reference
   • MapQuest1_Basic: Change the center of the map and the map size.
     
   • MapQuest2_wControls: Change the center of the map, the map size and the position of the controls.
     
   • MapQuest3_Marker: Change the center of the map, the map size and map type. MapQuest map types are: map, sat, hyb
     
   • MapQuest4_Line.: Change the center of the map, the line, the map size, and map type.
   
   
5. OpenStreetMap (OSM) OpenLayers API - Reference
• Basic: Change the center of the map and map size.
  
• Controls: Change the center of the map and map size.
• Marker: Change the center of the map, map size, and the position of the marker.
• Markers: Change the center of the map, map size, and the position of the markers.
• Hover: Change the center of the map, map size, and the position of the marker
• Projection: Change back to Web Mercator
• SPC projection: Change center and zoom level


6. Leaflet Maps API - Reference || Examples of layers that can be used with Leaflet
• Leaflet1_Basic: Change the map size, position of the markers, polygons, and the size of the circle.
  
• Leaflet2_Custom Icons: Change the map size, the position of the icons and their size.
  
• Leaflet3_Using Layers: Change the map size and the position of the icons.
  
• Leaflet4_Choropleth: Change the colors used for the states or the associated data.
• Leaflet5_Controls: Change the center and scale.
• Leaflet6_Reading_GeoJSON: Change a shape in the "leaflet_geojson1.js" file.
• Leaflet7_Alternative_Map_Tiles: Change the center and size of the map.
• Leaflet8_Google_Map_Tiles: Change the center and size of the map.


7. China Mapping APIs - Baidu Reference || AutoNavi Reference | Tencent Reference
   • Baidu1 Basic: Change the center of the map and map size.
   • Baidu2 Marker: Change the center of the map, map size, and the position of the marker.
   • AutoNavi1 Basic: Change the center of the map and map size.
   • AutoNavi2 Marker: Change the center of the map, map size, and the position of the marker.
   • AutoNavi3 3D Building: Change the center of the map and map size to highlight a 3D building.
   • Tencent1_Basic: Change the center of the map and map size.
   • Tencent2_Marker: Change the center of the map, map size, and the position of the marker.
     
     
8. ESRI API -
• Basic_Map: Change the basemap, the center of the map and the map size.
  
• Basic_Map_Point: Change the basemap, the center of the map and the map size.
  
• Info_Window_Map_Point: Change the basemap, the center of the map, the text in the infowindow, and the map size.
  
• Detailed_Info_Map_Point: Change the basemap, the center of the map, the text in the infowindow, and the map size.
• Detailed_Info_Map_Point_HYBRID: Change the center of the map, the text in the infowindow, and the map size.
• Virtual_Globe: Change the center of the map, the text in the infowindow, and the map size.
  
  
9. Pair-wise Map Comparisons - These examples present two maps side-by-side from two different mapping services. The scale and location for each pair-wise comparison is identical and randomly determined. US examples limit the random locations to the 48 states. EU examples are for Europe. EXTRA CREDIT: Add a comparison between two other map providers, or change the bounding box to another continent.
• Google-OSM_US
• Google-OSM_EU
  
• Google-Bing_US
• Google-Bing_EU
  
• Bing-OSM_US
  
• Bing-OSM_EU
  

Extra credit

1. Make a display with two maps at the identical location and zoom level using two different APIs.
2. Style a Google map so that it depicts only oceans and the outlines of countries.
3. Use Leaflet to display a Bing map.
4. Make a Google Map that automatically cycles between the map and satellite views.

Return to my assignments page

• Basic Nokia Map: Change the map's location and size.
  
• Marker: Change the center of the map, map size, and the position of the markers.
  
• Styled Markers: Change the center of the map, map size, and the style of the markers.
  
• Info Windows: Change the size and location of the map, and the text and style of the two pop-up windows.
• Polygon: I changed the size and location of the map, and the style of the polygon.

• Basic: Change the center of the map and map size.
  
• Controls: Change the center of the map and map size.
• Marker: Change the center of the map, map size, and the position of the marker.
• Markers: Change the center of the map, map size, and the position of the markers.
• Hover: Change the center of the map, map size, and the position of the marker
• Projection: Change back to Web Mercator
• SPC projection: Change center and zoom level

• Leaflet1_Basic: Change the map size, position of the markers, polygons, and the size of the circle.
  
• Leaflet2_Custom Icons: Change the map size, the position of the icons and their size.
  
• Leaflet3_Using Layers: Change the map size and the position of the icons.
  
• Leaflet4_Choropleth: Change the colors used for the states or the associated data.
• Leaflet5_Controls: Change the center and scale.
• Leaflet6_Reading_GeoJSON: Change a shape in the "leaflet_geojson1.js" file.
• Leaflet7_Alternative_Map_Tiles: Change the center and size of the map.
• Leaflet8_Google_Map_Tiles: Change the center and size of the map.

• Basic_Map: Change the basemap, the center of the map and the map size.
  
• Basic_Map_Point: Change the basemap, the center of the map and the map size.
  
• Info_Window_Map_Point: Change the basemap, the center of the map, the text in the infowindow, and the map size.
  
• Detailed_Info_Map_Point: Change the basemap, the center of the map, the text in the infowindow, and the map size.
• Detailed_Info_Map_Point_HYBRID: Change the center of the map, the text in the infowindow, and the map size.
• Virtual_Globe: Change the center of the map, the text in the infowindow, and the map size.
  
  

• Google-OSM_US
• Google-OSM_EU
  
• Google-Bing_US
• Google-Bing_EU
  
• Bing-OSM_US
  
• Bing-OSM_EU
  

1. Make a display with two maps at the identical location and zoom level using two different APIs.
2. Style a Google map so that it depicts only oceans and the outlines of countries.
3. Use Leaflet to display a Bing map.
4. Make a Google Map that automatically cycles between the map and satellite views.

Return to my assignments page

• Basic Bing Map: Change the center of the map and the map size.
  
• Bing Maps_Marker: Change the center of the map, and the map size and the marker info.
• Bing Maps_Infobox: Change the center of the map, and the map size and the infobox info.
• Bing Maps Pushpin InfoWindow: I changed the size and location of the map, and the contents of the infowindow.
• BingMaps SVG: Change the size of the map, the style of the SVG symbol, and the location of the map. .
  
• BingMaps Polygon: I changed the size of the map, the style of the triangle and the location of the map.
  

• Basic Nokia Map: Change the map's location and size.
  
• Marker: Change the center of the map, map size, and the position of the markers.
  
• Styled Markers: Change the center of the map, map size, and the style of the markers.
  
• Info Windows: Change the size and location of the map, and the text and style of the two pop-up windows.
• Polygon: I changed the size and location of the map, and the style of the polygon.

• Basic: Change the center of the map and map size.
  
• Controls: Change the center of the map and map size.
• Marker: Change the center of the map, map size, and the position of the marker.
• Markers: Change the center of the map, map size, and the position of the markers.
• Hover: Change the center of the map, map size, and the position of the marker
• Projection: Change back to Web Mercator
• SPC projection: Change center and zoom level

• Leaflet1_Basic: Change the map size, position of the markers, polygons, and the size of the circle.
  
• Leaflet2_Custom Icons: Change the map size, the position of the icons and their size.
  
• Leaflet3_Using Layers: Change the map size and the position of the icons.
  
• Leaflet4_Choropleth: Change the colors used for the states or the associated data.
• Leaflet5_Controls: Change the center and scale.
• Leaflet6_Reading_GeoJSON: Change a shape in the "leaflet_geojson1.js" file.
• Leaflet7_Alternative_Map_Tiles: Change the center and size of the map.
• Leaflet8_Google_Map_Tiles: Change the center and size of the map.

• Basic_Map: Change the basemap, the center of the map and the map size.
  
• Basic_Map_Point: Change the basemap, the center of the map and the map size.
  
• Info_Window_Map_Point: Change the basemap, the center of the map, the text in the infowindow, and the map size.
  
• Detailed_Info_Map_Point: Change the basemap, the center of the map, the text in the infowindow, and the map size.
• Detailed_Info_Map_Point_HYBRID: Change the center of the map, the text in the infowindow, and the map size.
• Virtual_Globe: Change the center of the map, the text in the infowindow, and the map size.
  
  

• Google-OSM_US
• Google-OSM_EU
  
• Google-Bing_US
• Google-Bing_EU
  
• Bing-OSM_US
  
• Bing-OSM_EU
  

1. Make a display with two maps at the identical location and zoom level using two different APIs.
2. Style a Google map so that it depicts only oceans and the outlines of countries.
3. Use Leaflet to display a Bing map.
4. Make a Google Map that automatically cycles between the map and satellite views.

Return to my assignments page