Integrating GINA Tile Services - WisconsinVie · 2012. 2. 16. · Overview 1.Introduction to GINA...
13
Integrating GINA Tile Services GIS JAM
Transcript of Integrating GINA Tile Services - WisconsinVie · 2012. 2. 16. · Overview 1.Introduction to GINA...
Integrating GINA Tile Services
GIS JAM
Welcome
Will Fisher Developer/Systems Analyst [email protected] University of Alaska, FairbanksGeographic Information Network of Alaska (GINA)
http://gisjam.zoom.gina.alaska.edu
Overview
1. Introduction to GINA 2. Google Map API3. Bing Map API4. OpenLayers Map API5. Questions?
Introduction to GINA
Our website http://www.gina.alaska.edu
Browse our archive of data http://browse.alaskamapped.org
See the examples in action http://mashup.gina.alaska.edu
Available Map LayersLayers available in Google/Bing/Openlayers Map APIs
SDMI_BDL - GINA's Best Data Layer with no line art or labelsSDMI_TOPO - Topographic Maps.SDMI_CHART - Nautical Charts (NOT FOR NAVIGATION).SDMI_SRNED - Shaded Relief similar to the Google physical map layer.SDMI_LSPAN - Landsat Pan imageryAOOS_BATH - Shaded Relief with the AOOS Bathymetry layer added for sea floor depths.
Google Maps V2 only layer
SDMI_BDL_HYBRID - Same as SDMI_BDL but with the google line art and labels on top
Basic Google Map Example<html><head><script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key=ENTER_API_KEY" type="text/javascript"></script> <script type="text/javascript">function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(64.856, -147.849), 13); map.setUIToDefault();
}}</script></head><body onload="initialize()" onunload="GUnload()"><div id="map_canvas" style="width: 100%; height: 100%"></div></body></html>
GINA Imagery in Google Maps V2<html><head><script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key=ENTER_API_KEY" type="text/javascript"></script><script src="http://glink.gina.alaska.edu/cdn/3.5/javascripts/maps/bdl_gmapv2.js" type="text/javascript"></script><script type="text/javascript">function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(64.856, -147.849), 13); map.setUIToDefault(); map.addMapType(GINA.layers.SDMI_BDL); }}</script></head><body onload="initialize()" onunload="GUnload()"><div id="map_canvas" style="width: 100%; height: 100%"></div></body></html>
GINA Imagery in Google Maps V3<html><head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://glink.gina.alaska.edu/cdn/3.5/javascripts/maps/bdl_gmapv3.js"></script> <script type="text/javascript"> function initialize() { var map = new google.maps.Map(document.getElementById("map_canvas"), { zoom: 13, center: new google.maps.LatLng(64.856, -147.849), mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, GINA.layers.SDMI_BDL] // Add the BDL to the layer selection dropdown }, mapTypeId: google.maps.MapTypeId.ROADMAP }); GINA.registerLayers(map); // Register GINA Map layers with the Map api map.setMapTypeId(GINA.layers.SDMI_BDL); } // Make the BDL the active map layer } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%;"></div></body></html>
ArcGIS JavaScript Map API<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>GINA Tile Serverice</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script> <script src="http://glink.gina.alaska.edu/cdn/3.5/javascripts/maps/bdl_arcgis.js" type="text/javascript"></script> <script type="text/javascript"> var map; dojo.require("esri.map");
function init() { map = new esri.Map("map"); map.addLayer(GINA.layers.SDMI_BDL); } dojo.addOnLoad(init); </script> </head> <body> <div id="map" class="tundra" style="width:768px; height:512px;></div> </body></html>
BING Maps API<html><head><script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script><script src="http://glink.gina.alaska.edu/cdn/3.5/javascripts/maps/bdl_bing.js" type="text/javascript"></script><script> var map;
function OnPageLoad() { map = new VEMap('myMap'); map.LoadMap(new VELatLong(64.856, -147.849), 13, 'r', false); map.HideBaseTileLayer(); map.AddTileLayer(GINA.layers.SDMI_BDL, true); }</script><body onload="OnPageLoad();" style="padding:0px; margin:0px;"> <div id="myMap" style="position:relative;padding:0;margin: 0;width:100%;height:100%;"></div></body></html>
OpenLayers Map API<html> <head> <title>Openlayers GINA Services Example</title> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script src="http://glink.gina.alaska.edu/cdn/3.5/javascripts/maps/bdl_openlayers.js" type="text/javascript"></script> <script type="text/javascript"> var map;
function onPageLoad() { map = new OpenLayers.Map("map", GINA.OpenLayers.google_projection); map.addLayer(GINA.layers.SDMI_BDL);
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); map.addControl(new OpenLayers.Control.MouseDefaults()); map.addControl(new OpenLayers.Control.PanZoomBar());
var center = new OpenLayers.LonLat(-147.849, 64.856); center.transform(map.displayProjection, map.getProjectionObject()); map.setCenter(center, 13); } </script></head><body onload="onPageLoad();"> <div style="width:100%; height:100%" id="map"></div></body></html>
OpenLayers Map API (Alaska Albers)<html> <head> <title>Openlayers GINA Services Example</title> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script src="http://glink.gina.alaska.edu/cdn/3.5/javascripts/maps/bdl_openlayers.js" type="text/javascript"></script> <script type="text/javascript"> var map;
function onPageLoad() { map = new OpenLayers.Map("map", GINA.OpenLayers.alaska_albers_projection); map.addLayer(GINA.layers.SDMI_BDL_AA);
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); map.addControl(new OpenLayers.Control.MouseDefaults()); map.addControl(new OpenLayers.Control.PanZoomBar());
var center = new OpenLayers.LonLat(-147.849, 64.856); center.transform(map.displayProjection, map.getProjectionObject()); map.setCenter(center, 13); } </script></head><body onload="onPageLoad();"> <div style="width:100%; height:100%" id="map"></div></body></html>
