Chris Pendleton Virtual Earth Technical Evangelist Microsoft Corporation • Virtual Earth (AJAX API) MapPoint Web Service (SOAP XML Web Service) Live Search Maps (Consumer Web.
Download ReportTranscript Chris Pendleton Virtual Earth Technical Evangelist Microsoft Corporation • Virtual Earth (AJAX API) MapPoint Web Service (SOAP XML Web Service) Live Search Maps (Consumer Web.
Chris Pendleton
Virtual Earth Technical Evangelist
Microsoft Corporation
•
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
•
•
•
The Big Picture
Client-Based Communication
JavaScript
Virtual Earth Service
Geocoding
Routing
Cartographic
Data
FEATURES
Maps
Driving Directions
Find Address/Place
Oblique Photography
Orthographic Photography
Browser-based 3D
Aerial
Photography
Solutions
Internet
CONTENT
Local Search
AJAX/HTTP
Requests
Online
Locator
Real Estate
Hunting
Portals/
Yellow
Pages
Travel /
Hospitality
Planning
Fleet/
Asset
tracking
Web
Server
Devices
•
•
•
•
•
•
•
AJAX Interface
Geocoding
Mapping
Driving Directions / Routing
3-D Environment
Data
Toolset
1.
2.
3.
All Virtual Earth Apps must consist of AT
LEAST 3 items:
Link to the map control
Functions for calling the service
DIV tags for containing the map
<!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"></s
cript>
<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>
<!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"></s
cript>
<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>
<!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"></s
cript>
<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>
<!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"></s
cript>
<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>
var 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>
var map = null;
var layerid=1;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
}
var 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 AddMyLayer(type)
{
map.DeleteAllShapes();
var l = new VEShapeLayer();
var veLayerSpec = new VEShapeSourceSpecification(type,
txtSource.value, l);
map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1);
}
function AddMyLayer(type)
{
map.DeleteAllShapes();
var l = new VEShapeLayer();
var veLayerSpec = new VEShapeSourceSpecification(type,
txtSource.value, l);
map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1);
}
function AddMyLayer(type)
{
map.DeleteAllShapes();
var l = new VEShapeLayer();
var veLayerSpec = new VEShapeSourceSpecification(type,
txtSource.value, l);
map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1);
}
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>
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
}
var shape = null;
var
var
var
var
var
var
dblVertices1
dblVertices2
dblVertices3
dblVertices4
dblVertices5
dblVertices6
=
=
=
=
=
=
new
new
new
new
new
new
VELatLong(36.31874,-115.16773);
VELatLong(36.21565,-115.35949);
VELatLong(35.98240,-115.25993);
VELatLong(35.97261,-114.99517);
VELatLong(36.17013,-114.98039);
VELatLong(36.26305,-115.04402);
var vertices = new Array(dblVertices1, dblVertices2, dblVertices3,
dblVertices4, dblVertices5, dblVertices6);
function 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);
}
}
function 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);
}
}
function 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);
}
}
function 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);
}
}
function 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);
}
}
function 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);
}
}
function 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);
}
}
function RemovePolygon()
{
map.DeleteShape(shape);
}
<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>
•
•
Virtual Earth JavaScript Intellisense Helper
Downloadable from CodePlex
•
•
•
(www.codeplex.com/vejs)
Blog: blogs.msdn.com/devkeydet
No more Notepad. Yay!
•
Free API Access
•
Pricing
Free
•
Benefits
Same API as licensed version
•
Restrictions
Non-commercial apps
No reverse engineering
50,000 geocodes per 24 hours
dev.live.com/terms
•
Licensed
•
Pricing
Per User, Per Transaction or Unlimited
Waterfall Schedule
1, 2, 3 or 4 year commitment
•
Benefits
SLA, Support, Betas, Communications, TAP,
Advanced Features and more.
•
Restrictions
Limited
•
•
•
•
Complete Virtual Earth Hands on Lab
Go to dev.live.com
Go to www.CodePlex.com/VEJS
Go to the Sandbox
SDK: dev.live.com
Marketing: microsoft.com/virtualearth
Licensing: [email protected]
Blog: blogs.msdn.com/virtualearth
Me: [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.