In coordination with Digital Map Products (DMP), developers can now easily overlay over 100 million US parcels to more easily identify boundaries between properties. Using a simple, native method in Bing Maps and DMP’s ParcelStream API with just 7 lines of code (yes, SEVEN) you can tap into this wonderful trove of parcel information. So, how is it done? Luckily, DMP even provides code samples and working applications that you can just copy, paste and run.
The sample below uses both the Bing Maps Platform and DMP’s ParcelStream and this and other samples are available at SpatialStream(TM) Samples. Just click "Run Sample" to see the code in action. To walk you through the logic…you’ll first load both APIs by linking through JavaScript script tags. You’ll instantiate the Bing Map control (LoadMap()), then assign the parcels’ via DMP’s API onto a map tile layer (layer = new Dmp.Layer.TileLayer()), and overlay the layer onto Bing Maps (addLayer()). The sample includes a toggle button and navigation which are optional by provide additional benefits to the user.
<html>
<head>
<title>Adding Parcel Tile Layer</title>
<link href="/samples/css/Style.css" rel="STYLESHEET" type="text/css" />
<script type="text/javascript" src="http://www.bing.com/api/maps/mapcontrol?callback=GetMap" async="async" defer="defer"></script>
<script type="text/javascript">
function GetMap() {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "/samples/minifier/DmpApi_BingV8.min.js";
head.appendChild(script);
}
</script>
<script type="text/javascript">
var map;
var layer;
window.onload = function () {
map = new Microsoft.Maps.Map("#myMap", {
credentials: "BingMapsKey",
center: new Microsoft.Maps.Location(33.834866, -117.897282),
zoom: 17,
mapTypeId: "r",
});
Dmp.Map.init(map);
Dmp.Env.Connections["SS"].init("/dc1/_T0/fa9b1917-8f33-4df2-9373-c3ddddc0d307", afterLoad);
function afterLoad() {
// layer for zoom level 20
parcelLayer = new Dmp.Layer.WMSLayer("Parcelwms", "SS", {
antiAlias: true,
});
parcelLayer.addChild(
"Parcels",
"samplesite.dmp/Parcels",
"samplesite.dmp.Styles.Parcels/Default.sld.xml",
{ zIndex: 2, zoomRange: { min: 20, max: 20 } }
);
map.addEntity(parcelLayer);
// precached tiles from zoom level 14 - 19
layer = new Dmp.Layer.TileLayer("ParcelTiles", "SS", {
antiAlias: true,
});
layer.addChild("Parcels", "samplesite.dmp/ParcelTiles", "samplesite.dmp.Styles.Parcels/Default.sld.xml", {
zIndex: 2,
zoomRange: { min: 14, max: 19 },
});
map.addEntity(layer);
}
};
function toggleLayer() {
//toggle layer
var boolCheckbox = document.getElementById("toggleLayer").checked;
boolCheckbox ? map.addEntity(layer) : map.removeEntity(layer);
}
</head>
<body>
<h2>
Adding Parcel Tile Layer with DMP API</h2>
<p>
Parcel boundary lines are displayed on the map below as a tile layer. Click the
Toggle Layer box to turn off/on the parcel lines tile layer.</p>
<input id=’toggleLayer’ type=’checkbox’ name=”Toggle Layer” checked=’checked’ onclick=’toggleLayer()’ />Toggle
Layer
<div id=”myMap”></div>
</body>
</html>
That’s it! I’m not sure they could’ve made it any easier. Developers can create a free 30 day account with DMP to test it out and considering it takes all of 5 minutes to create an app you’ll have 43,195 more minutes to convince your CTO to easily add parcel layers atop your Bing Maps application. The code above requires registration associated with your domain, so if it doesn’t run for you it’s because I’m using my key and you need to get your own.
Obviously, this will also work with the other Bing Maps controls as a tile layer too, so if your preference is to use a different Bing Maps control you can reference the DMP API’s and pull the parcel layers into the Deep Zoom experience.
Find out more about the Bing Maps for Enterprise Platform and sign up for a free trial account at Microsoft.com/Maps
