Download - John Maurer [email protected] PacIOOS Hawaii Data Explorer: Workshop Google Maps API Examples:
John Maurer [email protected]
PacIOOS Hawaii Data Explorer:http://pacioos.org/map/
Workshop Google Maps API Examples:http://pacioos.org/outreach/gis_workshop/gmap.html
Google Maps API Documentation:http://code.google.com/apis/maps/
http://code.google.com/apis/maps/documentation/javascript/v2/reference.html
GDAL/OGR Documentation: http://www.gdal.org/
http://www.gdal.org/ogr/
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
But first, some philosophy. Any technical project has:
Some big “IFFS”…
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
interoperable
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
fast
flexiblesimple
Aim for sweet spot (intersection/heart) but in reality you cannot achieve all IFFS equally…
Game Plan:Investigate the “IFFS” of using Google Maps for…
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
1. Imagery
• USGS DEM Oahu hillshade
• UH/SOEST/HMRG Hawaii bathymetry
2. Points
• fish aggregating devices (FADs)
3. Polygons
• humpback whale national marine sanctuary
4. Polylines
• underwater cables
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
Use GDAL and OGR command-line utilities that come with OSGeo4W:
Use DOS if you do not have a Unix terminal installed on your Windows machine:
open the “Start” window (more info)
type “cmd” (this opens the DOS “command” window)
cd c:\osgeo4w\bin (or wherever you installed OSGeo4W)
NOTE: You will need to specify the full data path to wherever you download files in
the examples that follow…
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
USGS DEM Oahu hillshade:
Get the data:
http://hawaii.gov/dbedt/gis/data/hilloah.tif.zip
Get data summary:
gdalinfo hilloah.tif
Reproject from UTM Zone 4 NAD83 to latlon WGS84:
gdalwarp -t_srs "epsg:4326" hilloah.tif hilloah.epsg4326.tif
Reformat from GeoTIFF to PNG (and make zero values transparent):
gdal_translate -of PNG -a_nodata 0 hilloah.epsg4326.tif hilloah.epsg4326.png
Produce image tiles (this will take a few minutes):
gdal2tiles.py --s_srs="+init=epsg:4326" --zoom=5-15 -a 0,0,0 hilloah.epsg4326.png
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
USGS DEM Oahu hillshade:
View page source of http://pacioos.org/outreach/gis_workshop/gmap.html
Add untiled imagery to Google Maps:
Look at JavaScript for:
• function toggleDem // implement GGroundOverlay
Add tiled imagery to Google Maps:
Look at JavaScript for:
• function toggleDemTiled // implement GCopyright, GTileLayer, and GTileLayerOverlay
• function getTMSTiledUrl // converts TMS tile order to Google Maps tile order…
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
UH/SOEST/HMRG Hawaii bathymetry:
Get the image:
http://pacioos.org/outreach/gis_workshop/hmrg_bathy_50m.png
Get data summary:
gdalinfo hmrg_bathy_50m.png
Expand indexed color to RGB values (needed for gdal2tiles.py below):
gdal_translate -of vrt -expand rgba hmrg_bathy_50m.png hmrg_bathy_50m.vrt
Produce image tiles (this will take a few hours):
gdal2tiles.py --s_srs="+init=epsg:4326" --zoom=0-14 hmrg_bathy_50m.vrt
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
UH/SOEST/HMRG Hawaii bathymetry:
View page source of http://pacioos.org/outreach/gis_workshop/gmap.html
Add untiled imagery to Google Maps:
Look at JavaScript for:
• function toggleBathyColor // implement GGroundOverlay
Add tiled imagery to Google Maps:
Look at JavaScript for:
• function toggleBathyColorTiled // implement GCopyright, GTileLayer, and GTileLayerOverlay
• function getTMSTiledUrl // converts TMS tile order to Google Maps tile order…
Add WMS tiled imagery to Google Maps:
Look at JavaScript for:
• gmap_wms.js
• function toggleBathyColorWMS // implement createWMSTileLayer from gmap_wms.js
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
fish aggregating devices (FADs):
Get the data:
http://hawaii.gov/dbedt/gis/data/fads_nmfs.shp.zip
Get data summary:
ogrinfo -so fads_nmfs.shp fads_nmfs
Produce KML:
ogr2ogr -f KML fads_nmfs.kml fads_nmfs.shp
Produce GeoJSON:
ogr2ogr -t_srs "EPSG:4326" -f GeoJSON fads_nmfs.json fads_nmfs.shp
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
fish aggregating devices (FADs):
View page source of http://pacioos.org/outreach/gis_workshop/gmap.html
Add KML to Google Maps:
Look at JavaScript for:
• function toggleFads // implement GGeoXml
Add GeoJSON to Google Maps:
Look at JavaScript for:
• function toggleFadsGeoJson // implement MarkerManager
• function createFadMarker // implement GMarker, ELabel, GEvent.addListener
Add tiled WMS to Google Maps:
Look at JavaScript for:
• gmap_wms.js
• function toggleFadsWMS // implement createWMSTileLayer from gmap_wms.js
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
humpback whale national marine sanctuary:
Get the data:
http://hawaii.gov/dbedt/gis/data/sanctuary.shp.zip
Get data summary:
ogrinfo –so hihwnms.shp hihwnms
Produce KML:
ogr2ogr -f KML hihwnms.kml hihwnms.shp
Produce GeoJSON:
ogr2ogr -t_srs "EPSG:4326" -f GeoJSON hihwnms.json hihwnms.shp
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
humpback whale national marine sanctuary:
View page source of http://pacioos.org/outreach/gis_workshop/gmap.html
Add KML to Google Maps:
Look at JavaScript for:
• function toggleWhale // implement GGeoXml
Add GeoJSON to Google Maps:
Look at JavaScript for:
• function toggleWhaleGeoJson
• function createWhalePolygon // implement PolylineEncoder, ELabel, GEvent.addListener
Add tiled WMS to Google Maps:
Look at JavaScript for:
• gmap_wms.js
• function toggleWhaleWMS // implement createWMSTileLayer from gmap_wms.js
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
underwater cables:
Get the data:
http://hawaii.gov/dbedt/gis/data/cables.zip
Get data summary:
ogrinfo -so Cables.shp Cables
Produce KML:
ogr2ogr -f KML Cables.kml Cables.shp
Produce GeoJSON:
ogr2ogr -t_srs "EPSG:4326" -f GeoJSON Cables.json Cables.shp
Command Center:
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
underwater cables:
View page source of http://pacioos.org/outreach/gis_workshop/gmap.html
Add KML to Google Maps:
Look at JavaScript for:
• function toggleCable // implement GGeoXml
Add GeoJSON to Google Maps:
Look at JavaScript for:
• function toggleCableGeoJson
• function createCablePolyline // implement PolylineEncoder, ELabel, GEvent.addListener
Add tiled WMS to Google Maps:
Look at JavaScript for:
• gmap_wms.js
• function toggleCableWMS // implement createWMSTileLayer from gmap_wms.js
Synopsis:Here are the sweet spots when applying Goggle Maps for…
Richard (Abe) Coughlin HAWAII PACIFIC GIS CONFERENCE 2012 WORKSHOP - Open Source applications in Web Mapping John Maurer
1. Imagery
• untiled imagery are sluggish (but simple)
• tiles are “good and plenty”: fastest in map but requires storage space
• can change opacity, specify stack order, and show copyright
• no time?, no space?: tiled WMS next best
• can use WMS GetFeatureInfo to query map click for data
2. Points
• KML: minimal support in Google Maps compared to Google Earth
• KML = , WMS = , GeoJSON =
• MarkerManager is your friend
3. Polygons/Polylines:
• KML = , WMS = , GeoJSON =
• PolylineEncoder is your friend