SlideShare a Scribd company logo
1 of 42
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
Web
Server
The Big Picture
DevicesSolutions
Online
Locator
Portals/
Yellow
Pages
Fleet/
Asset
tracking
Travel /
Hospitality
Planning
Cartographic
Data
Local Search
FEATURES
Maps
Driving Directions
Find Address/Place
Oblique Photography
Orthographic Photography
Browser-based 3D
JavaScript
Internet
Virtual Earth Service
CONTENT
Aerial
Photography
AJAX/HTTP
Requests
Geocoding
Client-BasedCommunication
Real Estate
Hunting
Routing
• AJAX Interface
• Geocoding
• Mapping
• Driving Directions / Routing
• 3-D Environment
• Data
• Toolset
All Virtual Earth Apps must consist of AT
LEAST 3 items:
1. Link to the map control
2. Functions for calling the service
3. 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 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);
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: maplic@microsoft.com
Blog: blogs.msdn.com/virtualearth
Me: chris.pendleton@microsoft.com
© 2008 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

More Related Content

What's hot

iOS Core location
iOS Core locationiOS Core location
iOS Core locationRicha Jain
 
How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers. How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers. Avni Khatri
 
Sapo GIS Hands-On
Sapo GIS Hands-OnSapo GIS Hands-On
Sapo GIS Hands-Oncodebits
 
ArcGIS Volume Measurement Tutorial
ArcGIS Volume Measurement TutorialArcGIS Volume Measurement Tutorial
ArcGIS Volume Measurement TutorialAlicia Hore
 

What's hot (6)

iOS Core location
iOS Core locationiOS Core location
iOS Core location
 
How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers. How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers.
 
Sapo GIS Hands-On
Sapo GIS Hands-OnSapo GIS Hands-On
Sapo GIS Hands-On
 
ArcGIS Volume Measurement Tutorial
ArcGIS Volume Measurement TutorialArcGIS Volume Measurement Tutorial
ArcGIS Volume Measurement Tutorial
 
Supstat nyc subway
Supstat nyc subwaySupstat nyc subway
Supstat nyc subway
 
D3.js workshop
D3.js workshopD3.js workshop
D3.js workshop
 

Viewers also liked

Extending the Browser Programming Model with Silverlight
Extending the Browser Programming Model with SilverlightExtending the Browser Programming Model with Silverlight
Extending the Browser Programming Model with Silverlightgoodfriday
 
Building Rich Web Experience with Silverlight and Microsoft Expression Studio...
Building Rich Web Experience with Silverlight and Microsoft Expression Studio...Building Rich Web Experience with Silverlight and Microsoft Expression Studio...
Building Rich Web Experience with Silverlight and Microsoft Expression Studio...goodfriday
 
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to LifeDesign Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Lifegoodfriday
 
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...goodfriday
 
Web Development Using Microsoft Visual Studio: Now and in the Future
Web Development Using Microsoft Visual Studio: Now and in the FutureWeb Development Using Microsoft Visual Studio: Now and in the Future
Web Development Using Microsoft Visual Studio: Now and in the Futuregoodfriday
 
Microsoft ASP.NET 4.0 : What's Next?
Microsoft ASP.NET 4.0 : What's Next?Microsoft ASP.NET 4.0 : What's Next?
Microsoft ASP.NET 4.0 : What's Next?goodfriday
 
Take Your Content Mobile with Windows Mobile, Microsoft Expression, and Zumobi
Take Your Content Mobile with Windows Mobile, Microsoft Expression, and ZumobiTake Your Content Mobile with Windows Mobile, Microsoft Expression, and Zumobi
Take Your Content Mobile with Windows Mobile, Microsoft Expression, and Zumobigoodfriday
 
Developing with Windows Live
Developing with Windows LiveDeveloping with Windows Live
Developing with Windows Livegoodfriday
 
Introducing SQL Server Data Services
Introducing SQL Server Data ServicesIntroducing SQL Server Data Services
Introducing SQL Server Data Servicesgoodfriday
 
NET RIA Services - Building Data-Driven Applications with Microsoft Silverlig...
NET RIA Services - Building Data-Driven Applications with Microsoft Silverlig...NET RIA Services - Building Data-Driven Applications with Microsoft Silverlig...
NET RIA Services - Building Data-Driven Applications with Microsoft Silverlig...goodfriday
 
Mesh-Enabled Web Applications
Mesh-Enabled Web ApplicationsMesh-Enabled Web Applications
Mesh-Enabled Web Applicationsgoodfriday
 
Rapidly Building Data Driven Web Pages with Dynamic ADO.NET
Rapidly Building Data Driven Web Pages with Dynamic ADO.NETRapidly Building Data Driven Web Pages with Dynamic ADO.NET
Rapidly Building Data Driven Web Pages with Dynamic ADO.NETgoodfriday
 
09 03 22 easter
09 03 22 easter09 03 22 easter
09 03 22 eastergoodfriday
 
MMI CERTIFICATE OF COMPLETION
MMI CERTIFICATE OF COMPLETIONMMI CERTIFICATE OF COMPLETION
MMI CERTIFICATE OF COMPLETIONKristi Phillips
 
Трансформеры онлайн mmorpg
Трансформеры онлайн mmorpgТрансформеры онлайн mmorpg
Трансформеры онлайн mmorpggimeatroukers1970
 
Zwei Arten Kaffee zu kochen UXCGN 10 2014
Zwei Arten Kaffee zu kochen UXCGN 10 2014Zwei Arten Kaffee zu kochen UXCGN 10 2014
Zwei Arten Kaffee zu kochen UXCGN 10 2014Lutz Schmitt
 
Organigramas
OrganigramasOrganigramas
Organigramascinthia19
 
KKundK Produktbroschüre Social Media Relations
KKundK Produktbroschüre Social Media RelationsKKundK Produktbroschüre Social Media Relations
KKundK Produktbroschüre Social Media RelationsKuhn, Kammann & Kuhn GmbH
 

Viewers also liked (20)

Extending the Browser Programming Model with Silverlight
Extending the Browser Programming Model with SilverlightExtending the Browser Programming Model with Silverlight
Extending the Browser Programming Model with Silverlight
 
Building Rich Web Experience with Silverlight and Microsoft Expression Studio...
Building Rich Web Experience with Silverlight and Microsoft Expression Studio...Building Rich Web Experience with Silverlight and Microsoft Expression Studio...
Building Rich Web Experience with Silverlight and Microsoft Expression Studio...
 
Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to LifeDesign Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
 
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...
Getting Unstuck: Enhancing Designer and Developer Collaboration for Mutual Su...
 
Web Development Using Microsoft Visual Studio: Now and in the Future
Web Development Using Microsoft Visual Studio: Now and in the FutureWeb Development Using Microsoft Visual Studio: Now and in the Future
Web Development Using Microsoft Visual Studio: Now and in the Future
 
Microsoft ASP.NET 4.0 : What's Next?
Microsoft ASP.NET 4.0 : What's Next?Microsoft ASP.NET 4.0 : What's Next?
Microsoft ASP.NET 4.0 : What's Next?
 
Take Your Content Mobile with Windows Mobile, Microsoft Expression, and Zumobi
Take Your Content Mobile with Windows Mobile, Microsoft Expression, and ZumobiTake Your Content Mobile with Windows Mobile, Microsoft Expression, and Zumobi
Take Your Content Mobile with Windows Mobile, Microsoft Expression, and Zumobi
 
Developing with Windows Live
Developing with Windows LiveDeveloping with Windows Live
Developing with Windows Live
 
Introducing SQL Server Data Services
Introducing SQL Server Data ServicesIntroducing SQL Server Data Services
Introducing SQL Server Data Services
 
NET RIA Services - Building Data-Driven Applications with Microsoft Silverlig...
NET RIA Services - Building Data-Driven Applications with Microsoft Silverlig...NET RIA Services - Building Data-Driven Applications with Microsoft Silverlig...
NET RIA Services - Building Data-Driven Applications with Microsoft Silverlig...
 
Mesh-Enabled Web Applications
Mesh-Enabled Web ApplicationsMesh-Enabled Web Applications
Mesh-Enabled Web Applications
 
April2009
April2009April2009
April2009
 
Rapidly Building Data Driven Web Pages with Dynamic ADO.NET
Rapidly Building Data Driven Web Pages with Dynamic ADO.NETRapidly Building Data Driven Web Pages with Dynamic ADO.NET
Rapidly Building Data Driven Web Pages with Dynamic ADO.NET
 
09 03 22 easter
09 03 22 easter09 03 22 easter
09 03 22 easter
 
MMI CERTIFICATE OF COMPLETION
MMI CERTIFICATE OF COMPLETIONMMI CERTIFICATE OF COMPLETION
MMI CERTIFICATE OF COMPLETION
 
Mmo -data
Mmo -dataMmo -data
Mmo -data
 
Трансформеры онлайн mmorpg
Трансформеры онлайн mmorpgТрансформеры онлайн mmorpg
Трансформеры онлайн mmorpg
 
Zwei Arten Kaffee zu kochen UXCGN 10 2014
Zwei Arten Kaffee zu kochen UXCGN 10 2014Zwei Arten Kaffee zu kochen UXCGN 10 2014
Zwei Arten Kaffee zu kochen UXCGN 10 2014
 
Organigramas
OrganigramasOrganigramas
Organigramas
 
KKundK Produktbroschüre Social Media Relations
KKundK Produktbroschüre Social Media RelationsKKundK Produktbroschüre Social Media Relations
KKundK Produktbroschüre Social Media Relations
 

Similar to Virtual Earth JavaScript API Overview

Introducing the Microsoft Virtual Earth Silverlight Map Control CTP
Introducing the Microsoft Virtual Earth Silverlight Map Control CTPIntroducing the Microsoft Virtual Earth Silverlight Map Control CTP
Introducing the Microsoft Virtual Earth Silverlight Map Control CTPgoodfriday
 
OpenLayers Feature Frenzy
OpenLayers Feature FrenzyOpenLayers Feature Frenzy
OpenLayers Feature FrenzyAndreas Hocevar
 
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece CoLab Athens
 
Making the Most of Maps in Your Connect IQ Apps - Garmin Connect IQ Developer...
Making the Most of Maps in Your Connect IQ Apps - Garmin Connect IQ Developer...Making the Most of Maps in Your Connect IQ Apps - Garmin Connect IQ Developer...
Making the Most of Maps in Your Connect IQ Apps - Garmin Connect IQ Developer...Richard Süselbeck
 
Mapas, geolocalización, geofencing en Windows Phone 8, y 8.1
Mapas, geolocalización, geofencing en Windows Phone 8, y 8.1Mapas, geolocalización, geofencing en Windows Phone 8, y 8.1
Mapas, geolocalización, geofencing en Windows Phone 8, y 8.1Kevin Ricardo Sejin
 
Creating an Uber Clone - Part XVII.pdf
Creating an Uber Clone - Part XVII.pdfCreating an Uber Clone - Part XVII.pdf
Creating an Uber Clone - Part XVII.pdfShaiAlmog1
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring CanvasKevin Hoyt
 
Gis SAPO Hands On
Gis SAPO Hands OnGis SAPO Hands On
Gis SAPO Hands Oncodebits
 
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe Martin Kleppe
 
Rule Your Geometry with the Terraformer Toolkit
Rule Your Geometry with the Terraformer ToolkitRule Your Geometry with the Terraformer Toolkit
Rule Your Geometry with the Terraformer ToolkitAaron Parecki
 
Creating an Uber Clone - Part XXI - Transcript.pdf
Creating an Uber Clone - Part XXI - Transcript.pdfCreating an Uber Clone - Part XXI - Transcript.pdf
Creating an Uber Clone - Part XXI - Transcript.pdfShaiAlmog1
 
Mashup caravan android-talks
Mashup caravan android-talksMashup caravan android-talks
Mashup caravan android-talkshonjo2
 
Reactive programming with RxJS - ByteConf 2018
Reactive programming with RxJS - ByteConf 2018Reactive programming with RxJS - ByteConf 2018
Reactive programming with RxJS - ByteConf 2018Tracy Lee
 
Creating an Uber Clone - Part VII.pdf
Creating an Uber Clone - Part VII.pdfCreating an Uber Clone - Part VII.pdf
Creating an Uber Clone - Part VII.pdfShaiAlmog1
 
What's the deal with Android maps?
What's the deal with Android maps?What's the deal with Android maps?
What's the deal with Android maps?Chuck Greb
 
You will learn RxJS in 2017
You will learn RxJS in 2017You will learn RxJS in 2017
You will learn RxJS in 2017名辰 洪
 

Similar to Virtual Earth JavaScript API Overview (20)

Google Maps JS API
Google Maps JS APIGoogle Maps JS API
Google Maps JS API
 
Introducing the Microsoft Virtual Earth Silverlight Map Control CTP
Introducing the Microsoft Virtual Earth Silverlight Map Control CTPIntroducing the Microsoft Virtual Earth Silverlight Map Control CTP
Introducing the Microsoft Virtual Earth Silverlight Map Control CTP
 
OpenLayers Feature Frenzy
OpenLayers Feature FrenzyOpenLayers Feature Frenzy
OpenLayers Feature Frenzy
 
Pycon2011
Pycon2011Pycon2011
Pycon2011
 
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
 
Making the Most of Maps in Your Connect IQ Apps - Garmin Connect IQ Developer...
Making the Most of Maps in Your Connect IQ Apps - Garmin Connect IQ Developer...Making the Most of Maps in Your Connect IQ Apps - Garmin Connect IQ Developer...
Making the Most of Maps in Your Connect IQ Apps - Garmin Connect IQ Developer...
 
Mapas, geolocalización, geofencing en Windows Phone 8, y 8.1
Mapas, geolocalización, geofencing en Windows Phone 8, y 8.1Mapas, geolocalización, geofencing en Windows Phone 8, y 8.1
Mapas, geolocalización, geofencing en Windows Phone 8, y 8.1
 
Maps
MapsMaps
Maps
 
Mobile Web 5.0
Mobile Web 5.0Mobile Web 5.0
Mobile Web 5.0
 
Creating an Uber Clone - Part XVII.pdf
Creating an Uber Clone - Part XVII.pdfCreating an Uber Clone - Part XVII.pdf
Creating an Uber Clone - Part XVII.pdf
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
 
Gis SAPO Hands On
Gis SAPO Hands OnGis SAPO Hands On
Gis SAPO Hands On
 
Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe Google Maps API - DevFest Karlsruhe
Google Maps API - DevFest Karlsruhe
 
Rule Your Geometry with the Terraformer Toolkit
Rule Your Geometry with the Terraformer ToolkitRule Your Geometry with the Terraformer Toolkit
Rule Your Geometry with the Terraformer Toolkit
 
Creating an Uber Clone - Part XXI - Transcript.pdf
Creating an Uber Clone - Part XXI - Transcript.pdfCreating an Uber Clone - Part XXI - Transcript.pdf
Creating an Uber Clone - Part XXI - Transcript.pdf
 
Mashup caravan android-talks
Mashup caravan android-talksMashup caravan android-talks
Mashup caravan android-talks
 
Reactive programming with RxJS - ByteConf 2018
Reactive programming with RxJS - ByteConf 2018Reactive programming with RxJS - ByteConf 2018
Reactive programming with RxJS - ByteConf 2018
 
Creating an Uber Clone - Part VII.pdf
Creating an Uber Clone - Part VII.pdfCreating an Uber Clone - Part VII.pdf
Creating an Uber Clone - Part VII.pdf
 
What's the deal with Android maps?
What's the deal with Android maps?What's the deal with Android maps?
What's the deal with Android maps?
 
You will learn RxJS in 2017
You will learn RxJS in 2017You will learn RxJS in 2017
You will learn RxJS in 2017
 

More from goodfriday

Narine Presentations 20051021 134052
Narine Presentations 20051021 134052Narine Presentations 20051021 134052
Narine Presentations 20051021 134052goodfriday
 
Holy Week Easter 2009
Holy Week Easter 2009Holy Week Easter 2009
Holy Week Easter 2009goodfriday
 
Holt Park Easter 09 Swim
Holt Park Easter 09 SwimHolt Park Easter 09 Swim
Holt Park Easter 09 Swimgoodfriday
 
Swarthmore Lentbrochure20092
Swarthmore Lentbrochure20092Swarthmore Lentbrochure20092
Swarthmore Lentbrochure20092goodfriday
 
Eastercard2009
Eastercard2009Eastercard2009
Eastercard2009goodfriday
 
Easterservices2009
Easterservices2009Easterservices2009
Easterservices2009goodfriday
 
Bulletin Current
Bulletin CurrentBulletin Current
Bulletin Currentgoodfriday
 
March 2009 Newsletter
March 2009 NewsletterMarch 2009 Newsletter
March 2009 Newslettergoodfriday
 
Lent Easter 2009
Lent Easter 2009Lent Easter 2009
Lent Easter 2009goodfriday
 
Easterpowersports09
Easterpowersports09Easterpowersports09
Easterpowersports09goodfriday
 
Easter Trading 09
Easter Trading 09Easter Trading 09
Easter Trading 09goodfriday
 
Easter Brochure 2009
Easter Brochure 2009Easter Brochure 2009
Easter Brochure 2009goodfriday
 
March April 2009 Calendar
March April 2009 CalendarMarch April 2009 Calendar
March April 2009 Calendargoodfriday
 
Easter 2009 Advertising
Easter 2009 AdvertisingEaster 2009 Advertising
Easter 2009 Advertisinggoodfriday
 

More from goodfriday (20)

Narine Presentations 20051021 134052
Narine Presentations 20051021 134052Narine Presentations 20051021 134052
Narine Presentations 20051021 134052
 
Triunemar05
Triunemar05Triunemar05
Triunemar05
 
Holy Week Easter 2009
Holy Week Easter 2009Holy Week Easter 2009
Holy Week Easter 2009
 
Holt Park Easter 09 Swim
Holt Park Easter 09 SwimHolt Park Easter 09 Swim
Holt Park Easter 09 Swim
 
Easter Letter
Easter LetterEaster Letter
Easter Letter
 
Swarthmore Lentbrochure20092
Swarthmore Lentbrochure20092Swarthmore Lentbrochure20092
Swarthmore Lentbrochure20092
 
Eastercard2009
Eastercard2009Eastercard2009
Eastercard2009
 
Easterservices2009
Easterservices2009Easterservices2009
Easterservices2009
 
Bulletin Current
Bulletin CurrentBulletin Current
Bulletin Current
 
Easter2009
Easter2009Easter2009
Easter2009
 
Bulletin
BulletinBulletin
Bulletin
 
March 2009 Newsletter
March 2009 NewsletterMarch 2009 Newsletter
March 2009 Newsletter
 
Mar 29 2009
Mar 29 2009Mar 29 2009
Mar 29 2009
 
Lent Easter 2009
Lent Easter 2009Lent Easter 2009
Lent Easter 2009
 
Easterpowersports09
Easterpowersports09Easterpowersports09
Easterpowersports09
 
Easter Trading 09
Easter Trading 09Easter Trading 09
Easter Trading 09
 
Easter Brochure 2009
Easter Brochure 2009Easter Brochure 2009
Easter Brochure 2009
 
March April 2009 Calendar
March April 2009 CalendarMarch April 2009 Calendar
March April 2009 Calendar
 
Easter 2009 Advertising
Easter 2009 AdvertisingEaster 2009 Advertising
Easter 2009 Advertising
 
Vc12.04.09
Vc12.04.09Vc12.04.09
Vc12.04.09
 

Virtual Earth JavaScript API Overview

  • 1. Chris Pendleton Virtual Earth Technical Evangelist Microsoft Corporation
  • 2. • 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
  • 3.
  • 4. Web Server The Big Picture DevicesSolutions Online Locator Portals/ Yellow Pages Fleet/ Asset tracking Travel / Hospitality Planning Cartographic Data Local Search FEATURES Maps Driving Directions Find Address/Place Oblique Photography Orthographic Photography Browser-based 3D JavaScript Internet Virtual Earth Service CONTENT Aerial Photography AJAX/HTTP Requests Geocoding Client-BasedCommunication Real Estate Hunting Routing
  • 5. • AJAX Interface • Geocoding • Mapping • Driving Directions / Routing • 3-D Environment • Data • Toolset
  • 6.
  • 7. All Virtual Earth Apps must consist of AT LEAST 3 items: 1. Link to the map control 2. Functions for calling the service 3. DIV tags for containing the map
  • 8. <!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>
  • 9. <!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>
  • 10. <!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>
  • 11. <!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>
  • 12.
  • 13. 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>
  • 14. var map = null; var layerid=1; function GetMap() { map = new VEMap('myMap'); map.LoadMap(); }
  • 15. var map = null; var layerid=1; function GetMap() { map = new VEMap('myMap'); map.LoadMap(); }
  • 16. function AddMyLayer(type) { map.DeleteAllShapes(); var l = new VEShapeLayer(); var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l); map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1); }
  • 17. function AddMyLayer(type) { map.DeleteAllShapes(); var l = new VEShapeLayer(); var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l); map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1); }
  • 18. function AddMyLayer(type) { map.DeleteAllShapes(); var l = new VEShapeLayer(); var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l); map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1); }
  • 19. function AddMyLayer(type) { map.DeleteAllShapes(); var l = new VEShapeLayer(); var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l); map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1); }
  • 20. function AddMyLayer(type) { map.DeleteAllShapes(); var l = new VEShapeLayer(); var veLayerSpec = new VEShapeSourceSpecification(type, txtSource.value, l); map.ImportShapeLayerData(veLayerSpec, onFeedLoad, 1); }
  • 21. function onFeedLoad(feed) { alert('KML File has been loaded. There are '+feed.GetShapeCount()+ ' items in this list.'); }
  • 22. <body onload="GetMap();"> <div id='myMap' style="position:relative; width:800; height:600;"></div>
  • 23.
  • 24. var map = null; function GetMap() { map = new VEMap('myMap'); map.LoadMap(); }
  • 25. var 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);
  • 26. 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); } }
  • 27. 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); } }
  • 28. 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); } }
  • 29. 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); } }
  • 30. 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); } }
  • 31. 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); } }
  • 32. 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); } }
  • 34. <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>
  • 35.
  • 36. • Virtual Earth JavaScript Intellisense Helper • Downloadable from CodePlex • (www.codeplex.com/vejs) • Blog: blogs.msdn.com/devkeydet • No more Notepad. Yay! 
  • 37. • 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
  • 38. • 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
  • 39.
  • 40. • Complete Virtual Earth Hands on Lab • Go to dev.live.com • Go to www.CodePlex.com/VEJS • Go to the Sandbox
  • 41. SDK: dev.live.com Marketing: microsoft.com/virtualearth Licensing: maplic@microsoft.com Blog: blogs.msdn.com/virtualearth Me: chris.pendleton@microsoft.com
  • 42. © 2008 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

Editor's Notes

  1. ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.