stevelom@Microsoft.com
Microsoft Encarta 1993 Bing Maps 2018
High Performance
Renders 10x more data
Developer Friendly
Less code needed to
write your app
Feature Rich
Lots of new features
that align based on
developer feedback
Web API features (V8)
Creators/Falls Creators Update
Map Styling 3D Enhancements Offline Maps
Windows 10 control
Creators/Falls Creators Update
3D Models Map Styling Extensions3D Buildings
3D Models
Amazon Locker locator
(https://www.amazon.com/findalocker)
Core Features
• Upload and host data. Expose as a spatial REST service
• Access administrative boundaries from Bing Maps
• Batch geocoding & reverse geocoding
New Features
• Upload KML and Shapefiles as data sources
• Automatically reprojects Shapefiles to WGS84
Spatial REST Service
• Find Nearby, Find Along a Route, Find by Bounding Box,
Intersection search, Find by Property
• Point of Interest, Traffic, US Census data and much more
function getNearByLocations() {
var sdsDataSourceUrl =
'http://spatial.virtualearth.net/REST/v1/data/f22876ec257b474b82fe2ffcb8393150/NavteqNA/NavteqPOIs';
//Create a query to get nearby data.
var queryOptions = {
queryUrl: sdsDataSourceUrl,
spatialFilter: {
spatialFilterType: 'nearby',
location: map.getCenter(),
radius: 5
},
filter: new Microsoft.Maps.SpatialDataService.Filter('EntityTypeID', 'eq', 5540) //Filter for Gas Stations.
};
//Process the query.
Microsoft.Maps.SpatialDataService.QueryAPIManager.search(queryOptions, map, function (data) {
//Add results to the layer.
layer.add(data);
});
}
Before: Too many Points of Interest! After Isochrone API: Just show me Jobs within a 15 minute drive
Demo: https://www.microsoft.com/en-us/maps/isochrone
//Create the REST isochrone query URL.
var url = 'https://dev.virtualearth.net/REST/v1/Routes/Isochrones?&optimize=time&travelMode=driving';
//Use the center of the map as the waypoint for the isochrone.
var center = map.getCenter();
url += '&waypoint=' + center.latitude + ',' + center.longitude;
//Set the max time parameter for the isochrone query in minutes.
url += '&timeUnit=minute&maxTime=' + document.getElementById('driveTime').value;
//Make call to get the polygon
var http = new XMLHttpRequest();
http.open("GET", url, true);
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
//Request was successful, do something with it.
var result = JSON.parse(http.responseText);
}
}
var pins = pinLayer.getPrimitives();
//Using spatial math find all pushpins that intersect with the drawn search area.
var intersectingPins = Microsoft.Maps.SpatialMath.Geometry.intersection(pins, searchArea);
//Now you can iterate through IntersectingPins and highlight them on the map or anything else you wish
Business Reverse Geocode API
• Returns business(es) at specified coordinate
• Intelligent – Time of day, popularity…
Address of
the
location
Businesses
at the
location
https://dev.virtualearth.net/REST/v1/locationrecog/47.451277,-122.300660?key=YOURKEY
{
"businessAddress": {
"latitude": 47.451593,
"longitude": -122.29893,
"addressLine": "2626 S 170th St",
"locality": "Seatac",
"adminDivision": "WA",
"countryIso2": "US",
"postalCode": "98188",
"formattedAddress": "2626 S 170th St, Seatac, WA 98188, US"
},
"businessInfo": {
"id": "926x234661963",
"entityName": "Doug Fox Parking",
"url": "https://www.dougfoxparking.com/",
"phone": "(206) 248-2956",
"typeId": 90925,
"otherTypeIds": [
91582,
90881
],
"type": "Parking",
"otherTypes": [
"Ground Transportation",
"Travel"
]
}
},
"addressOfLocation": [
{
"latitude": 47.451277,
"longitude": -122.30066,
"addressLine": "16790 Air Cargo Rd",
"locality": "SeaTac",
"neighborhood": "",
"adminDivision": "WA",
"countryIso2": "US",
"postalCode": "98158",
"formattedAddress": "16790 Air Cargo
Rd, SeaTac, WA 98158, US"
}
]
www.routesavvy.com
• An open source
vehicle tracking
solution for small to
medium sized teams
• Current and historical view
https://fleettrackertest2.azurewebsites.net/assets
https://github.com/Microsoft/Bing-Maps-Fleet-Tracker
https://aka.ms/bingmapsfleettracker
• Zillow Utilizes Bing Maps for ortho and birds eye imagery and displays parcel data on top of map.
• They also created their own custom mapstyle
Custom
Map
Styles
Samples
var myStyle = {
"elements": {
"water": { "fillColor": "#a1e0ff" },
"waterPoint": { "iconColor": "#a1e0ff" },
"transportation": { "strokeColor": "#aa6de0" },
"road": { "fillColor": "#b892db" },
"railway": { "strokeColor": "#a495b2" },
"structure": { "fillColor": "#ffffff" },
"runway": { "fillColor": "#ff7fed" },
"area": { "fillColor": "#f39ebd" },
"political": { "borderStrokeColor": "#fe6850", "borderOutlineColor": "#55ffff" },
"point": { "iconColor": "#ffffff", "fillColor": "#FF6FA0", "strokeColor": "#DB4680" },
"transit": { "fillColor": "#AA6DE0" }
}
map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key',
customMapStyle: myStyle });
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
var layer = new
Microsoft.Maps.GeoXmlLayer('https://bingmapsv8samples.azurewebsites.net/Common
/data/kml/SampleKml.kml');
map.layers.insert(layer);
});
var polygon = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(47.614032,22.318040),
new Microsoft.Maps.Location(47.614032, -122.317438),
new Microsoft.Maps.Location(47.613661, -122.317438),
new Microsoft.Maps.Location(47.613661, -122.318040)], {
fillColor: "rgba(255,255,0,0.2)", strokeColor: 'orange’,
strokeThickness: 5, strokeDashArray: [1, 2, 4, 4]});
map.entities.push(polygon);
(www.ohgo.com) – Public facing app and site that allows OH drivers get real-time traffic updates, personalized
route notifications, can view live traffic cameras and get accurate delay times.
// Creating sample Pushpin data within map view
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
var clusterLayer = new Microsoft.Maps.ClusterLayer(pushpins, { gridSize: 100 });
map.layers.insert(clusterLayer);
https://www.bingmapsportal.com/
https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk
https://msdn.microsoft.com/en-us/library/ff428643.aspx
https://github.com/Microsoft/Bing-Maps-Fleet-Tracker
What are customers building with new Bing Maps capabilities
What are customers building with new Bing Maps capabilities

What are customers building with new Bing Maps capabilities

  • 2.
  • 5.
    Microsoft Encarta 1993Bing Maps 2018
  • 7.
    High Performance Renders 10xmore data Developer Friendly Less code needed to write your app Feature Rich Lots of new features that align based on developer feedback Web API features (V8)
  • 8.
    Creators/Falls Creators Update MapStyling 3D Enhancements Offline Maps Windows 10 control
  • 9.
    Creators/Falls Creators Update 3DModels Map Styling Extensions3D Buildings
  • 10.
  • 13.
  • 14.
    Core Features • Uploadand host data. Expose as a spatial REST service • Access administrative boundaries from Bing Maps • Batch geocoding & reverse geocoding New Features • Upload KML and Shapefiles as data sources • Automatically reprojects Shapefiles to WGS84 Spatial REST Service • Find Nearby, Find Along a Route, Find by Bounding Box, Intersection search, Find by Property • Point of Interest, Traffic, US Census data and much more
  • 16.
    function getNearByLocations() { varsdsDataSourceUrl = 'http://spatial.virtualearth.net/REST/v1/data/f22876ec257b474b82fe2ffcb8393150/NavteqNA/NavteqPOIs'; //Create a query to get nearby data. var queryOptions = { queryUrl: sdsDataSourceUrl, spatialFilter: { spatialFilterType: 'nearby', location: map.getCenter(), radius: 5 }, filter: new Microsoft.Maps.SpatialDataService.Filter('EntityTypeID', 'eq', 5540) //Filter for Gas Stations. }; //Process the query. Microsoft.Maps.SpatialDataService.QueryAPIManager.search(queryOptions, map, function (data) { //Add results to the layer. layer.add(data); }); }
  • 18.
    Before: Too manyPoints of Interest! After Isochrone API: Just show me Jobs within a 15 minute drive Demo: https://www.microsoft.com/en-us/maps/isochrone
  • 19.
    //Create the RESTisochrone query URL. var url = 'https://dev.virtualearth.net/REST/v1/Routes/Isochrones?&optimize=time&travelMode=driving'; //Use the center of the map as the waypoint for the isochrone. var center = map.getCenter(); url += '&waypoint=' + center.latitude + ',' + center.longitude; //Set the max time parameter for the isochrone query in minutes. url += '&timeUnit=minute&maxTime=' + document.getElementById('driveTime').value; //Make call to get the polygon var http = new XMLHttpRequest(); http.open("GET", url, true); http.onreadystatechange = function () { if (http.readyState == 4 && http.status == 200) { //Request was successful, do something with it. var result = JSON.parse(http.responseText); } }
  • 20.
    var pins =pinLayer.getPrimitives(); //Using spatial math find all pushpins that intersect with the drawn search area. var intersectingPins = Microsoft.Maps.SpatialMath.Geometry.intersection(pins, searchArea); //Now you can iterate through IntersectingPins and highlight them on the map or anything else you wish
  • 21.
    Business Reverse GeocodeAPI • Returns business(es) at specified coordinate • Intelligent – Time of day, popularity… Address of the location Businesses at the location
  • 22.
    https://dev.virtualearth.net/REST/v1/locationrecog/47.451277,-122.300660?key=YOURKEY { "businessAddress": { "latitude": 47.451593, "longitude":-122.29893, "addressLine": "2626 S 170th St", "locality": "Seatac", "adminDivision": "WA", "countryIso2": "US", "postalCode": "98188", "formattedAddress": "2626 S 170th St, Seatac, WA 98188, US" }, "businessInfo": { "id": "926x234661963", "entityName": "Doug Fox Parking", "url": "https://www.dougfoxparking.com/", "phone": "(206) 248-2956", "typeId": 90925, "otherTypeIds": [ 91582, 90881 ], "type": "Parking", "otherTypes": [ "Ground Transportation", "Travel" ] } }, "addressOfLocation": [ { "latitude": 47.451277, "longitude": -122.30066, "addressLine": "16790 Air Cargo Rd", "locality": "SeaTac", "neighborhood": "", "adminDivision": "WA", "countryIso2": "US", "postalCode": "98158", "formattedAddress": "16790 Air Cargo Rd, SeaTac, WA 98158, US" } ]
  • 24.
  • 25.
    • An opensource vehicle tracking solution for small to medium sized teams • Current and historical view
  • 26.
  • 27.
  • 28.
    • Zillow UtilizesBing Maps for ortho and birds eye imagery and displays parcel data on top of map. • They also created their own custom mapstyle
  • 29.
  • 30.
    var myStyle ={ "elements": { "water": { "fillColor": "#a1e0ff" }, "waterPoint": { "iconColor": "#a1e0ff" }, "transportation": { "strokeColor": "#aa6de0" }, "road": { "fillColor": "#b892db" }, "railway": { "strokeColor": "#a495b2" }, "structure": { "fillColor": "#ffffff" }, "runway": { "fillColor": "#ff7fed" }, "area": { "fillColor": "#f39ebd" }, "political": { "borderStrokeColor": "#fe6850", "borderOutlineColor": "#55ffff" }, "point": { "iconColor": "#ffffff", "fillColor": "#FF6FA0", "strokeColor": "#DB4680" }, "transit": { "fillColor": "#AA6DE0" } } map = new Microsoft.Maps.Map('#myMap', { credentials: 'Your Bing Maps Key', customMapStyle: myStyle });
  • 31.
    var map =new Microsoft.Maps.Map(document.getElementById('myMap'), {}); Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () { var layer = new Microsoft.Maps.GeoXmlLayer('https://bingmapsv8samples.azurewebsites.net/Common /data/kml/SampleKml.kml'); map.layers.insert(layer); });
  • 32.
    var polygon =new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(47.614032,22.318040), new Microsoft.Maps.Location(47.614032, -122.317438), new Microsoft.Maps.Location(47.613661, -122.317438), new Microsoft.Maps.Location(47.613661, -122.318040)], { fillColor: "rgba(255,255,0,0.2)", strokeColor: 'orange’, strokeThickness: 5, strokeDashArray: [1, 2, 4, 4]}); map.entities.push(polygon);
  • 33.
    (www.ohgo.com) – Publicfacing app and site that allows OH drivers get real-time traffic updates, personalized route notifications, can view live traffic cameras and get accurate delay times.
  • 34.
    // Creating samplePushpin data within map view var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds()); var clusterLayer = new Microsoft.Maps.ClusterLayer(pushpins, { gridSize: 100 }); map.layers.insert(clusterLayer);
  • 35.

Editor's Notes