Any web application using Bing Maps has to offer something specific to that site or program. For example, you might have a database of speed cameras for your city and want to offer your visitors a way to define search parameters and display the results with custom pushpin graphics.
Check out these reference books for Bing Maps, Google Earth, and Map Scripting:
The heart and soul of this functionality lies in a basic cross-platform Pushpin class that can be set up and populated using a C# backend, then passed to a JavaScript function that can read the generic data types in the class, parse them, and display the information.
1: namespace App_Code
2: {
3: public class Pushpin
4: {
5: private double latitude;
6: private double longitude;
7: private string title;
8: private string description;
9: private string imageUrl;
10:
11: public double Latitude
12: {
13: get { return latitude; }
14: set { this.latitude = value; }
15: }
16:
17: public double Longitude
18: {
19: get { return longitude; }
20: set { this.longitude = value; }
21: }
22:
23: public string Title
24: {
25: get { return title; }
26: set { this.title = value; }
27: }
28:
29: public string Description
30: {
31: get { return description; }
32: set { this.description = value; }
33: }
34:
35: public string ImageUrl
36: {
37: get { return imageUrl; }
38: set { this.imageUrl = value; }
39: }
40:
41: public Pushpin()
42: {
43: this.latitude = 0;
44: this.longitude = 0;
45: this.plancount = 0;
46: this.title = "";
47: this.description = "";
48: this.imageUrl = "";
49: }
50:
51: public Pushpin(double latitude, double longitude,
52: string title, string description, string imageUrl)
53: {
54: this.latitude = latitude;
55: this.longitude = longitude;
56: this.title = title;
57: this.description = description;
58: this.imageUrl = imageUrl;
59: }
60: }
61: }
In the code above, we start by declaring a Namespace (App_Code). The Pushpin class has basic information like latitude, longitude, title, description, and an image URL (imageurl). Our C# backend will populate each of these values and return an array of Pushpin objects to the Javascript function our map page.
Next , we need to create a web service to accommodate our requests to populate the plot points of our speed camera locations. We create a SpeedCameraQueryService.asmx file that is empty except for providing an interface to our backend function:
1: <%@ WebService Language="C#" CodeBehind="~/App_Code/SpeedCameraQueryService.cs" Class="SpeedCameraQueryService" %>
2:
And here is the corresponding SpeedCameraQueryService.cs file (placed in our App_Data directory).
1: using App_Code;
2: using System.Data;
3:
4: [WebService]
5: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
6: // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
7: [ScriptService]
8: public class SpeedCameraQueryService : WebService {
9:
10: [WebMethod]
11: public Pushpin[] GetAllInfo()
12: {
13: ArrayList ppArray = new ArrayList();
14: Pushpin pGeneric;
15: /* HERE IS WHERE YOU INSERT YOUR QUERY OR DATA READ */
16: /* When done, iterate thru your results... */
17: foreach (SpeedCamera.productRow r in MyDatatable)
18: {
19: pGeneric = new Pushpin( r.Lat,
20: r.Long,
21: r.Title,
22: r.Description,
23: "Images/plotpin2.png");
24: ppArray.Add(pGeneric);
25: }
26: Pushpin[] ia = (Pushpin[])ppArray.ToArray(typeof(Pushpin));
27: return ia;
28: }
Now, in our map.aspx file, we implement a Javascript function that is run when your users click a button on your webpage asking for the location of your speed cameras.
1: var _PushpinLayer;
2: _PushpinLayer = new VEShapeLayer();
3: // our VEMap variable, map, gets the empty shape layer added
4: // This line should go in your 'load' function that creates your map.
5: map.AddShapeLayer(_PushpinLayer);
6:
7: // Now we have the function that gets called when a user clicks
8: // the button requesting to see our speed camera data.
9: function PreviewPlots() {
10: var _totalRet = 0;
11: _PushpinLayer.DeleteAllShapes();
12: SpeedCameraQueryService.GetAllInfo(onGetComplete, onGetFailed);
13: function onGetComplete(result) {
14: PlotPreviewData(result);
15: }
16: function onGetFailed(result) {
17: alert("Error while connecting to the remote web service. Please try again later.");
18: }
19: }
20:
21: function PlotPreviewData(data) {
22: if (data == null)
23: return;
24: for (var i = 0; i < data.length; i++) {
25: var currPushpin = data[i];
26: var pushpinLocation = new VELatLong(currPushpin.Latitude, currPushpin.Longitude);
27: var shape = new VEShape(VEShapeType.Pushpin, pushpinLocation);
28: var customIconUrl = currPushpin.ImageUrl;
29: if (customIconUrl != "") {
30: shape.SetCustomIcon(customIconUrl);
31: }
32: shape.SetTitle(currPushpin.Title);
33: shape.SetDescription(currPushpin.Description);
34: _PushpinLayer.AddShape(shape);
35: }
36: }
THE Definitive guide for Bing Maps! Now available on Amazon.com!
Click on the “Map Scripting 101” book at left to find out about this incredible book on map scripting covering Bing, Google, and Yahoo!
If you need assistance or have questions in setting up your application / web site to import KML files, please send us a message and we will schedule a call and let you know how we can help!
Subscribe