Bing Maps Concepts
(formerly Virtual Earth)
Mike Garza   
VEMaps@garzilla.net   

   
Concept: Add Push Pins via JSON and Web Services - Bing Maps v7

One of the features not included in this first release of the Bing Maps AJAX Control v7, is a means of bulk loading shapes. In the 6.x platform there was an option of utilizing a GeoRSS or KML feed for bulk importing shapes from an external source (web service).

Bulk loading can still be accomplished on with the Bing Maps AJAX control v7, but you will need to do some of the heavy lifting yourself. Fortunately, with some of the current technologies, like JSON and JQuery, the lifting is not that heavy after all.

In the included example, several push pins have been added to a map. The source of the push pin data is a web service that is invoked as part of the map initialization process. The JQuery AJAX library is used to interact with the web service and JSON (JavaScript Object Notation) based data is returned from the web service. Once retrieved, the data is parsed out and used as the basis for the push pins that are added to the map.

Walk Through:

The main concept here is serving up your location based data to be included in your map. One of the approaches to serve up your data is the use of web services. A web service can be made available to the mapping UI to accept the appropriate input, process that information and return the corresponding results. Those results could then be plotted on the map accordingly.

In this example, there is a supporting web service, though not terribly exciting. The details of the inner workings of the web service are not important, but what is important is the format of the data that it returns. The web service contains a web method named “GetLocations”. The method will return an array of custom objects that represent push pin data in a JSON format. The format of the return data is as follow:

    {"d":[
        {"__type":"VEMaps.PinData","Title":"1","Description":"Push Pin 1.","Latitude":41.8284867713553,"Longitude":-89.3934742184048},
        {"__type":"VEMaps.PinData","Title":"2","Description":"Push Pin 2.","Latitude":41.5804186112039,"Longitude":-87.822813028308},
        {"__type":"VEMaps.PinData","Title":"3","Description":"Push Pin 3.","Latitude":41.2743105224413,"Longitude":-88.6421180936698},
        {"__type":"VEMaps.PinData","Title":"4","Description":"Push Pin 4.","Latitude":41.3402801414583,"Longitude":-87.2673207383479},
        {"__type":"VEMaps.PinData","Title":"5","Description":"Push Pin 5.","Latitude":41.2428051839547,"Longitude":-86.1792543448348}
    ]}
    

This return JSON data contains an array, “d”, of 5 objects. These objects have a type of “VEMaps.PinData” and contain the properties “Title”, “Description”, “Longitude” and “Latitude”. These properties will be used to build out the push pins on the map.

Now that we understand the format of the data, we can step into the code for how it is used in this example. The following is the implementation for map and the creation of the push pins:

     // Initialize the map
    map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                    {
                        credentials: 'Your Key Here',
                        center: new Microsoft.Maps.Location(41.8756, -87.9956),
                        mapTypeId: Microsoft.Maps.MapTypeId.road,
                        zoom: 7
                    });
             
    $.ajax({
        type: 'POST',
        url: 'ws/ClientServices.asmx/GetLocations',
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var pins = response.d
            $.each(pins, function (index, pin) {
                var pinLocation = new Microsoft.Maps.Location(pin.Latitude, pin.Longitude)
                var NewPin = new Microsoft.Maps.Pushpin(pinLocation, { text: pin.Title });
                map.entities.push(NewPin);
            });
        }
    });
    

Lines 1-8 are the standard map initialization which we won’t go through in this article. Beginning on line 10 is the process for consuming the web service and adding the push pins to the map. As mentioned, the JQuery library is being used to interact with the web service. If you are not familiar with JQuery, I would suggest looking into this frame work it simplifies a lot of the tasks that are commonly performed with JavaScript.

On line 10, the JQuery AJAX object is utilized to make an HTTP request to web service and several properties are set. The “type” property defines the HTTP Request type and is set to “POST”. The “url” property is the target location for the HTTP Request and is set to the supporting web service, which is “ws/ClientServices.asmx/GetLocations”. The “contentType” and “dataType” properties indicate what type of data is being worked with and are set accordingly to indicate that JSON based data is being requested. Lastly, the”success” property defines the function that is excuted if the request succeeds. In this case, this is the logic that is executed to add the push pins to the map.

Once the request is made to the web service and the response received, the function beginning on line 16 will be executed. The result of the web service request (listed above) is passed to the function and assigned to the “response” parameter. First the array of JavaScript objects, contained in the “d” property of the “response” object, is assigned to the variable “pins”. Next the JQuery iterator “$.each()” is used to loop through the objects and apply the appropriate logic. The each iterator accepts the object to loop through and the callback function to execute for each iteration.

Beginning on line 18 is the function that will be executed for each iteration of the loop. The function accepts two parameters, which are the index of iteration and the object in that iteration. In this case, the object is the push pin information (pin) that is part of the return data from the web service call. A new Location object is created using the Latitude and Longitude properties of the pin object and assigned to the variable “pinLocation”. Then a new Pushpin object is created and assigned to the variable “NewPin”. In creating the push pin, the Location object, pinLocation, is used to specify the location that the pin will be placed on the map and the text property of PushpinOptions class is set to the value of the Title property of the pin object used in this iteration. Once the pin has been created, the new push pin is added to the map via the Push() method of the Entities object in the map. This process repeats for each pin object in the pins array that was returned from the web service.

Wrap-up:

The previous example demonstrated one approach toward bulk loading push pins. The source of the push pin data is a web services that is accessed via the JQuery AJAX library. The data being returned from the web service is in a JSON format which allows the client side JavaScript logic to easily consume and utilize the data in its native format. Once the JSON data has been received, the information in those objects are the basis for creating the push pins on the map.

This is just one approach that can be taken to implement this type of functionality and is intended to illustrate the mechanics behind this concept. Your implementation will vary depending on your specific needs. As always, feedback, comments or questions are welcome. I look forward to hearing from you.

Return to Home Page

©2007-2017, Mike Garza, All Rights Reserved