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

mailto:[email protected]

http://pacioos.org/map/

http://pacioos.org/outreach/gis_workshop/gmap.html

http://code.google.com/apis/maps/



http://www.gdal.org/

http://www.gdal.org/ogr/

But first, some philosophy. Any technical project has:

Some big “IFFS”…


interoperable


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…


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

http://hawaii.gov/dbedt/gis/hill.htm

http://oos.soest.hawaii.edu/thredds/idd/bathymetry.html?dataset=hmrg_bathy_50m_mhi

http://hawaii.gov/dbedt/gis/fad.htm

http://hawaii.gov/dbedt/gis/sanctuary.htm

http://hawaii.gov/dbedt/gis/cables.htm

Command Center:


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…

http://en.wikipedia.org/wiki/Start_menu

Command Center:


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

http://hawaii.gov/dbedt/gis/data/hilloah.tif.zip

Command Center:


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:


• function toggleDemTiled // implement GCopyright, GTileLayer, and GTileLayerOverlay

• function getTMSTiledUrl // converts TMS tile order to Google Maps tile order…


http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GGroundOverlay

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GCopyright

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GTileLayer

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GTileLayerOverlay

Command Center:


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

http://pacioos.org/outreach/gis_workshop/hmrg_bathy_50m.png

Command Center:


UH/SOEST/HMRG Hawaii bathymetry:


Add untiled imagery to Google Maps:


• function toggleBathyColor // implement GGroundOverlay

Add tiled imagery to Google Maps:


• 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:


• gmap_wms.js

• function toggleBathyColorWMS // implement createWMSTileLayer from gmap_wms.js


http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GGroundOverlay

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GCopyright

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GTileLayer

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GTileLayerOverlay

Command Center:


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

http://hawaii.gov/dbedt/gis/data/fads_nmfs.shp.zip

Command Center:


fish aggregating devices (FADs):


Add KML to Google Maps:


• function toggleFads // implement GGeoXml

Add GeoJSON to Google Maps:


• function toggleFadsGeoJson // implement MarkerManager

• function createFadMarker // implement GMarker, ELabel, GEvent.addListener

Add tiled WMS to Google Maps:


• gmap_wms.js

• function toggleFadsWMS // implement createWMSTileLayer from gmap_wms.js


http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GGeoXml

http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/1.1/

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMarker

http://econym.org.uk/gmap/elabel.htm

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GEvent.addListener

Command Center:


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

http://hawaii.gov/dbedt/gis/data/sanctuary.shp.zip

Command Center:


humpback whale national marine sanctuary:




• function toggleWhale // implement GGeoXml



• function toggleWhaleGeoJson

• function createWhalePolygon // implement PolylineEncoder, ELabel, GEvent.addListener



• gmap_wms.js

• function toggleWhaleWMS // implement createWMSTileLayer from gmap_wms.js


http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GGeoXml

http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/PolylineEncoder.js

http://econym.org.uk/gmap/elabel.htm

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GEvent.addListener

Command Center:


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

http://hawaii.gov/dbedt/gis/data/cables.zip

Command Center:


underwater cables:




• function toggleCable // implement GGeoXml



• function toggleCableGeoJson

• function createCablePolyline // implement PolylineEncoder, ELabel, GEvent.addListener



• gmap_wms.js

• function toggleCableWMS // implement createWMSTileLayer from gmap_wms.js


Synopsis:Here are the sweet spots when applying Goggle Maps for…


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

John Maurer [email protected] PacIOOS Hawaii Data Explorer: Workshop Google Maps API Examples:...

Documents

Transcript of John Maurer [email protected] PacIOOS Hawaii Data Explorer: Workshop Google Maps API Examples:...