In this blog we will see following things related to Bing Maps:-
1) Add Pushpin
2) Delete Pushpin
3) Add Polyline
Let’s start with 1st part Add Pushpin. Before that we need to include a script to get map in our browser.
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2">
</script>
To get map in browser we need to include following code in body part.
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:1350px; height:500px;"></div>
</body>
1) Add Pushpin :-
Lets see function for Add Pushpin.
var icon = "<div><img src='images/greenpushpin.png' alt='green pin' width='30px' height='30px'/></div>";
var infobox = "<div style='width:309px;'>This is green!!! Run!!!</div>";
function AddPushpin() {
shape = new VEShape(VEShapeType.Pushpin, new VELatLong(19.0177, 72.8562,2272));
shape.SetCustomIcon(icon);
map.ClearInfoBoxStyles();
shape.SetTitle("<h2>Pin</h2>");
shape.SetDescription(infobox);
map.AddShape(shape);
}
In this above function we have used method VEShape to create a shape to which we going to call pushpin. We have VEShapeType.Pushpin as its parameter to get shape pushpin on the map. VELatLong is a method which takes parameters latitude and longitude where by default that pushpin will be placed. We can also dynamically take latitude and longitude as parameters in AddPushpin() function. This will result into following,
We can see in this image above the result of AddPushpin(). We can see a spot marked in red which is pushpin of red color which is place on location Pune.
2) Delete Pushpin :-
Next we will see DeletePushpin.
function DeletePushpin() {
if (shape)
map.DeleteShape(shape);
shape = null;
}
This code is used to delete pushpin from Bing Maps. We have a specific function DeleteShape() to delete pushpins where we can call the shape which we had added using AddPushpin() and then set that shape to null.
3) Add Polyline :-
Lets now see how to add polylines. First we will see how to add button in body part clicking on which we can start adding polylines. For that we need to write following code,
<body>
<input type="button" id="cmdDraw" value="Click to begin drawing" onclick="startDrawing();" />
<div>Drawing Mode: <span id="ModeIndicator">Disabled</span></div>
</body>
var polyline = null;
var polylineMask = null;
var points = new Array();
var maskPoints = new Array(new VELatLong(0, 0), new VELatLong(0, 0));
var drawing = false;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(19.0177, 72.8562), 5, false);
polylineMask = new VEShape(VEShapeType.Polyline, maskPoints);
polylineMask.HideIcon();
polylineMask.Hide();
polylineMask.SetLineColor(new VEColor(0, 0, 255, 0.5));
polylineMask.Primitives[0].symbol.stroke_dashstyle = "Dash";
map.AddShape(polylineMask);
map.AttachEvent("onmousedown", mouseDownHandler);
map.AttachEvent("onmousemove", mouseMoveHandler);
map.AttachEvent("onkeypress", keyPressHandler);
}
function startDrawing() {
if (polyline && !drawing) {
map.DeleteShape(polyline);
polyline = null;
points.length = 0;
}
map.vemapcontrol.EnableGeoCommunity(true);
drawing = true;
document.getElementById("ModeIndicator").innerHTML = 'Enabled';
document.getElementById("cmdDraw").value = 'Press ESC to exit drawing mode';
document.getElementById("cmdDraw").disabled = true;
}
function mouseMoveHandler(e) {
if (drawing) {
var loc = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY));
if (points.length > 0) { polylineMask.Show() };
maskPoints[1] = loc
polylineMask.SetPoints(maskPoints);
}
}
function mouseDownHandler(e) {
if (drawing) {
currentLatLon = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY));
points.push(currentLatLon);
maskPoints[0] = currentLatLon;
if (points.length > 1) {
if (!polyline) {
polyline = new VEShape(VEShapeType.Polyline, points);
polyline.HideIcon();
map.AddShape(polyline);
maskPoints[1] = currentLatLon
} else {
polyline.SetPoints(points);
}
}
}
}
function keyPressHandler(e) {
if (drawing && e.keyCode == 27) {
drawing = false;
map.vemapcontrol.EnableGeoCommunity(false);
document.getElementById("ModeIndicator").innerHTML = 'Disabled';
document.getElementById("cmdDraw").value = 'Click to begin drawing';
document.getElementById("cmdDraw").disabled = false;
polylineMask.Hide();
}
}
In the above code we have given user his choice to choose locations and draw polyline. We have used a button on clicking of which user can start drawing polygon and once it press ESC button on keyboard he will stop drawing polygon. For drawing polyline we have set line width, its color etc using a method VEColor. For drawing polylines we have used mousehandlers and keypress handler events. We have used mousehandlers for clicking on location and start drawing polyline and keypresshandler to use ESC button once polylines drawing is finished. To check whether drawing is finished and user has pressed escaped or not we have used a boolean variable drawing.
Result we can show in below video.
This way we can add pushpins, delete pushpins and draw polylines.
