Chris Pendleton Virtual Earth Technical Evangelist Microsoft Corporation.
42
Developing Applications with Microsoft ® Virtual Earth TM Chris Pendleton Virtual Earth Technical Evangelist Microsoft Corporation
-
Upload
calvin-daniels -
Category
Documents
-
view
217 -
download
0
Transcript of Chris Pendleton Virtual Earth Technical Evangelist Microsoft Corporation.
Developing Applications with Microsoft® Virtual EarthTM
Chris PendletonVirtual Earth Technical EvangelistMicrosoft Corporation
First, Some Clarification
•Virtual Earth (AJAX API)•MapPoint Web Service (SOAP XML Web Service)•Live Search Maps (Consumer Web Site)•Map Cruncher (Raster Overlay Tool)
•More Info: Microsoft.com/VirtualEarth
Virtual Earth
Web Server
Virtual Earth ServiceThe Big Picture
Devices
Solutions
OnlineLocator
Portals/Yellow Pages
Fleet/Asset
tracking
Travel / Hospitalit
y Planning
Cartographic Data
Local Search
FEATURES Maps Driving Directions Find Address/PlaceOblique PhotographyOrthographic PhotographyBrowser-based 3D
JavaScript
Internet
Virtual Earth Service
CONTENT
Aerial Photography
AJAX/HTTP Requests
Geocoding
Client-Based Communication
Real Estate
Hunting
Routing
Virtual Earth
•AJAX Interface •Geocoding•Mapping•Driving Directions / Routing•3-D Environment•Data•Toolset
Let’s Code!
All Virtual Earth Apps must consist of AT LEAST 3 items:
1. Link to the map control2. Functions for calling the service3. DIV tags for containing the map
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>Hello World</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript">var map = null; function GetMap(){
map = new VEMap('myMap');map.LoadMap();
} </script></head><body onload="GetMap();"><div id='myMap' style="position:relative; width:800; height:600;"></div></body></html>
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>Hello World</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript">var map = null; function GetMap(){
map = new VEMap('myMap');map.LoadMap();
} </script></head><body onload="GetMap();"><div id='myMap' style="position:relative; width:800; height:600;"></div></body></html>
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>Hello World</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript">var map = null; function GetMap(){
map = new VEMap('myMap');map.LoadMap();
} </script></head><body onload="GetMap();"><div id='myMap' style="position:relative; width:800; height:600;"></div></body></html>
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>Hello World</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript">var map = null; function GetMap(){
map = new VEMap('myMap');map.LoadMap();
} </script></head><body onload="GetMap();"><div id='myMap' style="position:relative; width:800; height:600;"></div></body></html>
Importing KML…yes, KMLvar map = null;var layerid=1;
function GetMap(){
map = new VEMap('myMap');map.LoadMap();
}
function AddMyLayer(type){
map.DeleteAllShapes();var l = new VEShapeLayer();var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l);map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1);
}
function onFeedLoad(feed){
alert('KML File has been loaded. There are '+feed.GetShapeCount()+ ' items in this list.');
}
. . .
<body onload="GetMap();"> <div id='myMap' style="position:relative; width:800; height:600;"></div>
Importing KML…yes, KMLvar map = null;var layerid=1;
function GetMap(){
map = new VEMap('myMap');map.LoadMap();
}
Importing KML…yes, KMLvar map = null;var layerid=1;
function GetMap(){
map = new VEMap('myMap');map.LoadMap();
}
Importing KML…yes, KMLfunction AddMyLayer(type){
map.DeleteAllShapes();var l = new VEShapeLayer();var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l);map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1);
}
Importing KML…yes, KMLfunction AddMyLayer(type){
map.DeleteAllShapes();var l = new VEShapeLayer();var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l);map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1);
}
Importing KML…yes, KMLfunction AddMyLayer(type){
map.DeleteAllShapes();var l = new VEShapeLayer();var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l);map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1);
}
Importing KML…yes, KMLfunction AddMyLayer(type){
map.DeleteAllShapes();var l = new VEShapeLayer();var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l);map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1);
}
Importing KML…yes, KMLfunction AddMyLayer(type){
map.DeleteAllShapes();var l = new VEShapeLayer();var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l);map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1);
}
Importing KML…yes, KMLfunction onFeedLoad(feed){
alert('KML File has been loaded. There are '+feed.GetShapeCount()+ ' items in this list.');
}
Importing KML…yes, KML<body onload="GetMap();"><div id='myMap' style="position:relative; width:800;
height:600;"></div>
• DEMOS!
Rendering Vectors in 3Dvar map = null; function GetMap(){
map = new VEMap('myMap');map.LoadMap();
}
Rendering Vectors in 3Dvar shape = null;
var dblVertices1 = new VELatLong(36.31874,-115.16773);var dblVertices2 = new VELatLong(36.21565,-115.35949);var dblVertices3 = new VELatLong(35.98240,-115.25993);var dblVertices4 = new VELatLong(35.97261,-114.99517);var dblVertices5 = new VELatLong(36.17013,-114.98039);var dblVertices6 = new VELatLong(36.26305,-115.04402);
var vertices = new Array(dblVertices1, dblVertices2, dblVertices3, dblVertices4, dblVertices5, dblVertices6);
Rendering Vectors in 3Dfunction AddPolygon() {
shape = new VEShape(VEShapeType.Polygon, vertices);
shape.SetLineColor(new VEColor(255,255,0,1.0));shape.SetLineWidth(1); shape.SetFillColor(new VEColor(255,255,0,0.3))
try{
map.SetMapMode(VEMapMode.Mode3D); map.SetMapStyle(VEMapStyle.Hybrid); map.AddShape(shape);map.SetCenter(new VELatLong(36.17263, -
115.13841)); map.SetAltitude(30000);
}catch(e){
alert(e.message);}
}
Rendering Vectors in 3Dfunction AddPolygon() {
shape = new VEShape(VEShapeType.Polygon, vertices);
shape.SetLineColor(new VEColor(255,255,0,1.0));shape.SetLineWidth(1); shape.SetFillColor(new VEColor(255,255,0,0.3))
try{
map.SetMapMode(VEMapMode.Mode3D); map.SetMapStyle(VEMapStyle.Hybrid); map.AddShape(shape);map.SetCenter(new VELatLong(36.17263, -
115.13841)); map.SetAltitude(30000);
}catch(e){
alert(e.message);}
}
Rendering Vectors in 3Dfunction AddPolygon() {
shape = new VEShape(VEShapeType.Polygon, vertices);
shape.SetLineColor(new VEColor(255,255,0,1.0));shape.SetLineWidth(1); shape.SetFillColor(new VEColor(255,255,0,0.3))
try{
map.SetMapMode(VEMapMode.Mode3D); map.SetMapStyle(VEMapStyle.Hybrid); map.AddShape(shape);map.SetCenter(new VELatLong(36.17263, -
115.13841)); map.SetAltitude(30000);
}catch(e){
alert(e.message);}
}
Rendering Vectors in 3Dfunction AddPolygon() {
shape = new VEShape(VEShapeType.Polygon, vertices);
shape.SetLineColor(new VEColor(255,255,0,1.0));shape.SetLineWidth(1); shape.SetFillColor(new VEColor(255,255,0,0.3))
try{
map.SetMapMode(VEMapMode.Mode3D); map.SetMapStyle(VEMapStyle.Hybrid); map.AddShape(shape);map.SetCenter(new VELatLong(36.17263, -
115.13841)); map.SetAltitude(30000);
}catch(e){
alert(e.message);}
}
Rendering Vectors in 3Dfunction AddPolygon() {
shape = new VEShape(VEShapeType.Polygon, vertices);
shape.SetLineColor(new VEColor(255,255,0,1.0));shape.SetLineWidth(1); shape.SetFillColor(new VEColor(255,255,0,0.3))
try{
map.SetMapMode(VEMapMode.Mode3D); map.SetMapStyle(VEMapStyle.Hybrid); map.AddShape(shape);map.SetCenter(new VELatLong(36.17263, -
115.13841)); map.SetAltitude(30000);
}catch(e){
alert(e.message);}
}
Rendering Vectors in 3Dfunction AddPolygon() {
shape = new VEShape(VEShapeType.Polygon, vertices);
shape.SetLineColor(new VEColor(255,255,0,1.0));shape.SetLineWidth(1); shape.SetFillColor(new VEColor(255,255,0,0.3))
try{
map.SetMapMode(VEMapMode.Mode3D); map.SetMapStyle(VEMapStyle.Hybrid); map.AddShape(shape);map.SetCenter(new VELatLong(36.17263, -
115.13841)); map.SetAltitude(30000);
}catch(e){
alert(e.message);}
}
Rendering Vectors in 3Dfunction AddPolygon() {
shape = new VEShape(VEShapeType.Polygon, vertices);
shape.SetLineColor(new VEColor(255,255,0,1.0));shape.SetLineWidth(1); shape.SetFillColor(new VEColor(255,255,0,0.3))
try{
map.SetMapMode(VEMapMode.Mode3D); map.SetMapStyle(VEMapStyle.Hybrid); map.AddShape(shape);map.SetCenter(new VELatLong(36.17263, -
115.13841)); map.SetAltitude(30000);
}catch(e){
alert(e.message);}
}
Rendering Vectors in 3Dfunction RemovePolygon(){
map.DeleteShape(shape);}
Rendering Vectors in 3D<body onload="GetMap();"><div id='myMap' style="position:relative; width:1200px;
height:700px;"></div><a href="#" onClick="AddPolygon();">Add Las Vegas Polygon</a><br/><a href="#" onClick="RemovePolygon();">Remove Las Vegas
Polygon</body>
• DEMOS!
New Developer Tool
• Virtual Earth JavaScript Intellisense Helper
• Downloadable from CodePlex• (www.codeplex.com/vejs)
• Blog: blogs.msdn.com/devkeydet• No more Notepad. Yay!
Licensing….Clarified• Free API Access
• PricingFree
• BenefitsSame API as licensed version
• RestrictionsNon-commercial appsNo reverse engineering50,000 geocodes per 24 hoursdev.live.com/terms
Licensing….Clarified• Licensed
• PricingPer User, Per Transaction or UnlimitedWaterfall Schedule1, 2, 3 or 4 year commitment
• BenefitsSLA, Support, Betas, Communications, TAP, Advanced Features and more.
• RestrictionsLimited
Now What?
• Complete Virtual Earth Hands on Lab• Go to dev.live.com• Go to www.CodePlex.com/VEJS• Go to the Sandbox
Questions
SDK: dev.live.comMarketing: microsoft.com/virtualearthLicensing: [email protected]: blogs.msdn.com/virtualearthMe: [email protected]
© 2008 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
