Mash Up Your Maps
Download
Report
Transcript Mash Up Your Maps
Mash Up Your Maps
Web based maps made easy
Welcome
Mash Up Your Maps
Joel Bump
GIS Coordinator
Indiana Department of Transportation
Agenda
•
•
History
Current MS and Google Features
– Navigate
– Services
•
•
•
•
•
•
Search
Geocode
Routes
Traffic
Street Level
3D
– Layers/Shapes/Points
– Add Data
•
Legal
– Use of Maps and Data
– Use of API
•
API Review and Exercises
– Google Maps API
– MS Live API
History
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
1989 birth of WWW
1991 birth HTTP
1993 birth HTML
1994 first online Atlas – Canada
1995 JavaScript
1996 GeoMedia Web
1996 MapQuest & MapBlast
1997 UMN Map Server
1998 TerraServer
1998 MapObjects IMS
2000 ArcIMS 3.0
2003 NASA World Wind
2003 SVG
2005 Google Maps
2005 Google Earth & KML
2006 MS Live
Products
– Web mapping products with API
•
•
•
•
•
•
Google Maps – Street level, nice routing
Microsoft Live – 3D, Pictometry
Yahoo Maps – 3 api, older orthos
Map24 – java, slow, older orthos
MultiMap – dated data, slower
ESRI – New Rest API with 9.3 and
Server – worth a look for ESRI shops
– Main URL’s for our workshop
• http://maps.google.com
• http://maps.live.com
Current Features
• Navigation
– Zoom, Pan, Zoom Window, Center
Current Features
• Layers – Streets, Orthos, Terrain
Current Features
• Services - Search
•
•
•
Business
People
Travel/Recreation
Current Features
• Services – Geocode - Navteq
•
•
•
•
By Zip
By Town, State
By Address
By Major Landmark
Current Features
• Services - Route
•
•
Microsoft
– Routes based on traffic
– Mini Popup Maps
Google
– Edit Routes by
Dragging
– Add Destinations
– Mini Popup Maps
Current Features
• Services - Traffic
•
Microsoft
– Travel Time Thematic
(ITS) Indy
– Construction and
Accident feeds from
local data
•
Google
– Travel Time Thematic
Interstates (ITS)
– Major Accident Points
– Indy, Gary Jeffersonville
Current Features
• Services – Street Level - Google
•
•
•
•
Terabytes of data
Many parts of central Indiana
Rotate and zoom view
Reverse Geocoded views
Current Features
• Services – 3D – MS Live
–
–
–
–
3d terrain
Model building
Movie creation
Push pins
Current Features
• Layers
– Collection in VE
– Layer controls in VE’s API (visible, scale)
– Overlays in GMap
• Shapes
– Polygons – fill, color, border
– Polylines – color, thickness
• Points
–
–
–
–
–
Push Pins
Custom Icons
Popup info boxes
GMap – API can manage by sample size
VE – Manage by Zoom Scale of Layers
• Tiles/Custom
– Through API can add overlays
• Rasters
• WMS Services
Current Features
• Add Data
– GMap
•
•
•
•
KML/KMZ from URL
GeoRSS, KML from API
Load and parse XML from API
Setup Account and save
collections
– VE
• GeoRSS, KML from API
• Setup Account and save
collections
Legal
•
Use of Maps and Data
– VE
• Video – non-commercial/personal use
• May not:
– Copy, save, download, distribute, transmit, or in any way manipulate the
photographic imagery
– Print the bird’s eye imagery
– GMap
• Can’t use imagery for any business/commercial use
•
Use of API
– VE
• Don’t exceed 50,000 geocoding transactions in any 24 hour period
• Need agreement with MicroSoft for commercial or government web
applications
– GMap
• Limit of 15,000 gocodes in 24 hour period
• Need API Key for each site built
•
See websites for full details on the terms of use for the maps,
data and API (they do change over time).
Google Maps API
• http://code.google.com/apis/maps/
The Hello World
Point to Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Simple Map</title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_j
Vnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
Focus the map
Start code
Map holder
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Basics
• Browser compatibility
– GBrowserIsCompatible
– It checks but you must trap.
• API updates
– http://maps.google.com/maps?file=ap
i&v=2
• Memory Leaks
– <body onunload="GUnload()">
Map Controls
•
The Maps API comes with a handful of built-in controls you can use in your
maps:
–
–
–
–
–
–
–
•
GLargeMapControl - a large pan/zoom control used on Google Maps.
GSmallMapControl - a smaller pan/zoom control used on Google Maps.
GSmallZoomControl - a small zoom control (no panning controls) used in the small map
blowup windows used to display driving directions steps on Google Maps.
GScaleControl - a map scale
GMapTypeControl - buttons that let the user toggle between map types (such as Map
and Satellite)
GHierarchicalMapTypeControl - a selection of nested buttons and menu items for placing
many map type selectors.
GOverviewMapControl - a collapsible overview map in the corner of the screen
A list of currently supported map types appears below:
–
–
–
–
G_NORMAL_MAP – default road map
G_SATELLITE_MAP - displays ortho tiles
G_HYBRID_MAP - displays a mix of orthos tiles and roads, city names
G_PHYSICAL_MAP - displays road and terrain
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Map Events
•
Map works by waiting for events to fire code every time
someone interacts with the map.
Sample where Info box opens each time someone clicks the map.
GEvent.addListener(map, "click", function() {
alert("You clicked the map.");
});
Sample creating marker point and create info box that appears when user clicks
the marker
map.addOverlay(createMarker(point, i + 1,message));
function createMarker(point, number, theText) {
var marker = new GMarker(point);
marker.value = number;
GEvent.addListener(marker, "click", function() {
var myHtml = "<b>#" + number + "</b><br/>" + theText;
map.openInfoWindowHtml(point, myHtml);
});
return marker;
}
Overlays
•
•
•
•
•
Markers – Points with Icons
Polyline – Lines
Polygons – Closed area
Tile Overlays – tiled images
Info Window – pop up info boxes
Markers
• Default icon
var point = new GLatLng(123,123);
map.addOverlay(new GMarker(point));
• Custom Icon
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://www.url.com/blue-dot.png";
markerOptions = { icon:blueIcon };
var point = new GLatLng(123,123);
map.addOverlay(new GMarker(point, markerOptions));
• Other options
– Size, shadow, anchor points
– Marker Manager to manage maps with hundreds of
marker points.
Polyline
•
•
GPolyline objects use the vector drawing capabilities of the
browser. In Internet Explorer, Google Maps uses VML to draw
polylines; in other browsers SVG is used if available. In all
other circumstances, a request is made for the image of the
line from Google servers and overlay that image on the map,
refreshing the image as necessary as the map is zoomed and
dragged around.
Below is a simple 2 vertex line, red and width of 10.
var polyline = new GPolyline([ new GLatLng(37.4419, -122.1419), new
GLatLng(37.4519, -122.1519) ], "#ff0000", 10);
map.addOverlay(polyline);
•
•
Geodesic Polylines
– Option Flag to adjust for curve of earth
Encoded Polylines
– Optional way to pass complex lines to be rendered and
normalized at higher zooms.
Polygon
• Same rendering as Polylines
• Must close polygon coordinates
• Can define fillcolor, weight,
opacity,outline color & weight
var polygon = new GPolygon([
new GLatLng(123, 123),
new GLatLng(123, 1223),
new GLatLng(12323, 1423),
new GLatLng(123, 123),
], "#f33f00", 5, 1, "#ff0000", 0.2);
map.addOverlay(polygon);
Tile Overlay
• Zoom 0 = Whole Earth
• Zoom 19 = Building Scale
• Tiles, next zoom level down is 4 tiles in the
same area of the one above.
var myCopyright = new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
new GLatLngBounds(new GLatLng(-90,-180), new
GLatLng(90,180)),
0,'©2007 My County Data'));
var tilelayer = new GTileLayer(myCopyright);
tilelayer.getTileUrl = function() { return “http://url.com/tiles/"; };
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
map.addOverlay(myTileLayer);
Tile Overlay Continued
• Can create complete custom tile
service.
– Must mange tile maintenance
– Coordinate system management
– Must manage copyright info.
• Can tile in 3rd Party WMS Services
• Can use Map Cruncher to create
tiles of existing images.
Data Loading
• GeoRSS, XML or KML
XML Data Load
Download the data in data.xml and load it on the map.
<markers>
<marker lat="37.441" lng="-122.141"/>
<marker lat="37.322" lng="-121.213"/>
</markers>
GDownloadUrl("data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers =
xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new
GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point));
}
});
KML and GeoRSS
•
•
File can be .KML or .rss
Files must be publicly available.
geoXml = new GGeoXml("http://server.com/file.kml");
map.addOverlay(geoXml);
Services
• Routing
– Have another DIV on the page for the directions to be shown in.
– directionsPanel = document.getElementById("my_textual_div");
directions = new GDirections(map, directionsPanel);
directions.load("New York, NY to Chicago, IL");
• Traffic
–
Can hide or show traffic
–
var trafficInfo = new GTrafficOverlay();
map.addOverlay(trafficInfo);
Geocoding
• HTTP
– http://maps.google.com/maps/geo?
– Parameters
• q -- The address that you want to geocode.
• key -- Your API key.
• output – format, options: xml, kml, csv, or json.
– http://maps.google.com/maps/geo?q=100+
N+Senate+Ave,+46204&output=xml&key=1
d23sd5f3s1d
– JSON, XML & KML are xml structure data
response same format except header
– CVS is comma delimited
• HTTP Code, Accuracy code, Lat, Lon
Geocoding
• Point on map
• Function that takes the input address and puts it on the
map as a point.
var geocoder = new GClientGeocoder();
function showAddress(address) {
geocoder.getLatLng(address,function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
Exercise and Examples
•
•
•
•
C:\inetpub\wwwroot\MapTrain
Try some of the examples
http://code.google.com/apis/maps/
Available XML & KML:
– CountyXML
• http://www.in.gov/dot/gis/slo/wells.xml
– KML
• http://joshua.d.hopkins.googlepages.com
/Knobstone_Trail.kml
Virtual Earth API
• Main Development Page
– http://dev.live.com/virtualearth/
• SDK Examples
– http://dev.live.com/virtualearth/sdk/
• Map Cruncher
– http://dev.live.com/virtualearth/mapcruncher/
The Hello World
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Point to Source <script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript">
var map = null;
function GetMap() {
Focus the map
map = new VEMap('myMap');
map.LoadMap(new VELatLong(39.6, -83.33), 10 ,'h' ,false);
}
</script>
</head>
Start code
<body onload="GetMap();">
Map holder
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
Map Controls
•
The Maps API comes with a handful of built-in controls
you can use in your maps:
–
–
–
–
•
SetDashboardSize(Normal) – Default map control.
SetDashboardSize(Small) – Just zoom and map style selection
SetDashboardSize(Tiny) – Just Zoom controls
Zoom does work with wheel and window area in API.
A list of currently supported map types appears below:
–
–
–
–
–
Road – just road map
Shaded – terrain map
Aerial – just orthos
Hybrid – orthos with roads and labels
Birdseye – Birdseye view (only in selected areas)
VEMap.SetDashboardSize(dashboard);
VEMap.SetMapStyle(mapStyle);
Layers
•
Layer is a collection of shapes grouped together.
– You can make layers visible/invisible
– Add, remove or get shapes form a layer
– Set/get layer title, description and shape count
Shapes
•
•
•
•
PushPin – Points with Icons
Polyline – Lines
Polygons – Closed area
Shape Settings:
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
Altitude
Custom Icon
Description
Fill Color - polygon
Line Color – polyline/polygon
ID
LineToGround – polyline/polygon
Line Width – polyline/polygon
Min/Max Zoom level for shape to be visible
MoreInfoURL
PhotoURL
Point for pushpin, points for polyline/polygon
Title
Z Index
Show/Hide Methods
Show Icon – for Polygons/Polylines
Adding Shapes
map = new VEMap('myMap');
map.LoadMap();
var myShapeLayer = new VEShapeLayer();
map.AddShapeLayer(myShapeLayer);
var points = new Array( new VELatLong(45.01188,-111.06687), new
VELatLong(45.01534,-104.06324), new VELatLong(41.01929,-104.06), new
VELatLong(41.003,-111.05878) );
var myShape = new VEShape(VEShapeType.Polygon, points);
myShape.SetLineWidth(2);
myShape.SetLineColor(new VEColor(0,150,100,1.0));
myShape.SetFillColor(new VEColor(0,100,150,0.5));
myShape.SetTitle("Title for shape01");
myShape.SetDescription("This is the description of shape01.");
myShape.SetMoreInfoURL("http://www.microsoft.com");
myShape.SetPhotoURL("http://msdn2.microsoft.com/msdn/images/msdn_logo.gif");
myShape.ShowIcon();
myShapeLayer.AddShape(myShape);
Bird’s Eye
•
•
•
map.IsBirdseyeAvailable()
map.SetMapStyle(VEMapStyle.Birdseye)
map.SetBirdseyeScene(defaultLatLong, VEOrientation.North,
defaultZoom, myCallback);
–
–
–
–
•
LatLon – can be a lat/lon or null for center of map.
VEOrientation – View direction
defaultZoom – if blank then zoom level 1.
myCallback – a function to fire after the scene is loaded.
The VEBirdseyeScene Class object provides additional functionality
when you are working with bird's eye images. By using this object, you
can:
–
–
–
Determine whether a point on the globe (a VELatLong Class object) is within
the currently displayed bird's eye image by calling the
VEBirdseyeScene.ContainsLatLong Method.
Determine the orientation of the current image by calling the
VEBirdseyeScene.GetOrientation Method.
Display a thumbnail of the current image by calling the
VEBirdseyeScene.GetThumbnailFilename Method.
3D Maps
•
•
•
•
•
•
•
The three-dimensional map functionality is built in to the same map control as the
standard two-dimensional maps, you do not need to change how you build your
map-enabled Web site.
Use the VEMap.AttachEvent Method to attach the VEMap.onmodenotavailable
Event to your Map Class object. If the 3D software is not yet installed on the client
computer when the map mode is changed to 3D mode, this event fires. You can
then provide instructions on installing the software.
Custom controls or Web elements that you display on top of a 2D map will be
hidden behind the 3D map. You can prevent this by using an IFRAME "shim" for
each control. For more information, see the VEMap.AddControl help on MSDN.
The default find control is also hidden when the map mode is switched to 3D
mode. To prevent this call the VEMap.ShowFindControl Method when the map
mode is changed.
When the Virtual Earth 3D control has focus, it captures keyboard and mouse
events and handles them. Map Control events are passed from the Virtual Earth
3D control, so you can continue to use all of them except VEMap.onstartpan
Event.
Pushpins, custom pushpin, tile layers, polylines, and polygons work in both 2D
and 3D mode maps.
Because the additional requirements for displaying 3D maps, you may want to
prevent users from switching to 3D mode. You can do this by setting the
showSwitch parameter of the VEMap.LoadMap Method to false.
3D Maps Continued
map.LoadMap();
map.SetMapMode(VEMapMode.Mode3D);
var viewspec = new VEMapViewSpecification(new VELatLong(-25.48, -49.17),
null, 34000, -37, 50);
map.SetMapView(viewspec);
}
Center – center of view lat/lon
Zoom – zoom level for 2D map, not used for 3D.
Altitude – for 3D, the altitude of the view (meters above geoid).
Pitch – degrees of view pitch (0=level & -90 is straight down)
Heading – direction of view in degrees (0 or 360 is north)
Tile Overlay
• Create a new VETileSourceSpecification
• Also methods to hide and delete layer.
var bounds = [new VELatLongRectangle(new
VELatLong(49,-123),new VELatLong(47,-121))];
var tileSourceSpec = new
VETileSourceSpecification("lidar",
"http://dev.live.com/virtualearth/sdk/layers/lidar/%4.png");
tileSourceSpec.NumServers = 1;
tileSourceSpec.Bounds = bounds;
tileSourceSpec.MinZoomLevel = 10;
tileSourceSpec.MaxZoomLevel = 18;
tileSourceSpec.Opacity = opacity;
tileSourceSpec.ZIndex = 100;
map.AddTileLayer(tileSourceSpec, true);
Data Loading
The data source is a URL representing the GeoRSS feed or KML data, or a globallyunique identifier (GUID) representing the Live Maps collection. You can add
geometries with your MS account and save your collection. If you get a URL of
your collection you will see the GUID value.
http://maps.live.com/?v=2&cid=1023DDDFF90DF400!101&encType=1
Data Types: GeoRSS, VECollection and ImportXML which is really just KML.
The callback can be a function that runs after the data is loaded.
setBestView is true/false to pan and zoom map to fit the new layer in the map.
Var layer = new VEShapeLayer();
var shapeSource = new VEShapeSourceSpecification (dataType, dataSource, layer);
VEMap.ImportShapeLayerData(shapeSource, callback, setBestView);
Services - Find
VEMap.Find(what, where, findType, shapeLayer, startIndex, numberOfResults,
showResults, createResults, useDefaultDisambiguation, setBestMapView,
callback);
•
•
If you give a what & null where then you get businesses around your current map view.
If you give a null what & a valid where then you just get geocode point(s).
•
What - The business name, category, or other item for which the search is conducted. This parameter must be
supplied for a pushpin to be included in the results.
Where - The address or place name of the area for which the search is conducted. This parameter can be an
address or a VEPlace object.
Type - A VEFindType Enumeration value that specifies the type of search performed. The only currently supported
value is VEFindType.Businesses.
shapeLayer - A reference to the VEShapeLayer Class object that contain the pins that result from this search if a
what parameter is specified. Optional. If the shape layer is not specified, the pins are added to the base map layer.
startIndex - The beginning index of the results returned. Optional. Default is 0.
NumberOfResults - The number of results to be returned, starting at startIndex. The default is 10, the minimum is
1, and the maximum is 20.
showResults - A Boolean value that specifies whether the resulting pushpins are visible.
createResults - A Boolean value that specifies whether pushpins are created when a what parameter is supplied.
useDefaultDisambiguation - A Boolean value that specifies whether the map control displays a disambiguation box
when multiple location matches are possible. If true, the map control displays a disambiguation box. Optional.
Default is true.
setBestMapView - A Boolean value that specifies whether the map control moves the view to the first location
match. If true, the map control moves the view. Optional. Default is true.
Callback – function to fire after find function has completed.
•
•
•
•
•
•
•
•
•
•
–
–
–
–
–
A VEShapeLayer Class object. If shapeLayer was supplied, it should be the same object.
An array of VEFindResult Class objects. (Lat/Lon, Name, Phone, Desc..)
An array of VEPlace Class objects. (Lat/Lon, match type, precision, other results…)
A Boolean value indicating whether there are more results after the current set.
A String containing a possible error message.
Services - Routing
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
var options = new VERouteOptions();
options.RouteCallback = onGotRoute;
map.GetDirections(["Microsoft", "Everett WA", "Bellingham WA"], options);
}
function onGotRoute(route)
{
// Unroll route
var legs = route.RouteLegs;
var turns = "Total distance: " + route.Distance.toFixed(1) + " mi\n";
var numTurns = 0;
var leg = null;
// Get intermediate legs
for(var i = 0; i < legs.length; i++)
{
leg = legs[i];
var turn = null;
// The itinerary leg
for(var j = 0; j < leg.Itinerary.Items.length; j ++)
{
turn = leg.Itinerary.Items[j];
numTurns++;
turns += numTurns + ".\t" + turn.Text + " (" + turn.Distance.toFixed(1) + " mi)\n";
}
}
}
Exercise and Examples
• C:\inetpub\wwwroot\MapTrain
• Try some of the examples
– http://dev.live.com/virtualearth/sdk/
• Available GeoRSS & KML:
– Gruvr
• http://gruvr.com/feed/?geo=Indianapolis&
geok=1
– KML
• http://joshua.d.hopkins.googlepages.com
/Knobstone_Trail.kml
Other Tools
• Map Cruncher – Build your own
tiles from images.
• MapDotNet – Mashup Virtual Earth
with SDE and other sources
• Blogs, Blogs, Blogs – Many
developers building some way cool
tools and sample code.
• Arc2Earth – Extension to push out
tile content from ArcMap