none
Clustering the Canvas Push Pins....

    Question

  • I am trying to integrate canvas pushpin into clustering module, i am not getting any errors for the merged code but at the same time the push pins are not plotted on the map. If i check the HTML elements i can see the canvas Id created.

    I am using below 2 external .js files provided in the blog.

    1) V7ClientSideClustering

    2) CanvasPushpinModule

    Please find the code snippet below.

    Any help regrading the same is appreciated.

    Thanks in advance

    var storeLayer;

    var storeData = [];
    var canvasLayer;

    function GetMap() {    

        Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', {
            callback: function () {           
            map = new Microsoft.Maps.Map( document.getElementById( mapId ), {      
            credentials: MAPDEVKEY,  
            customizeOverlays: true,    
            center: new Microsoft.Maps.Location(40.000000, -100.000000),
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            zoom: 4,
            showMapTypeSelector: false    
            });              
          }    
    });

     
      //Register and load the Canvas PushPin Module
        Microsoft.Maps.registerModule("CanvasPushpinModule", "scripts/CanvasPushpinModule.js");
        Microsoft.Maps.loadModule("CanvasPushpinModule", {
            callback: function () {
                //Create Canvas Entity Collection
                canvasLayer = new CanvasLayer();
                map.entities.push(canvasLayer);
            }
        });
        
        //Register and load the Client Side Clustering Module
        Microsoft.Maps.registerModule("ClientSideClusteringModule", "scripts/V7ClientSideClustering.js");
        Microsoft.Maps.loadModule("ClientSideClusteringModule", {
            callback: function () {
                storeLayer = new ClusteredEntityCollection(map, {
                singlePinCallback: createStorePin,
                clusteredPinCallback: createStoreClusteredPin
            });

            //Add infobox layer that is above the clustered layers.
            var infoboxLayer = new Microsoft.Maps.EntityCollection();
            infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 15) });
            infoboxLayer.push(infobox);
            map.entities.push(infoboxLayer);
        }
        });

        //Define custom properties for the pushpin class (this is needed for the infobox and not the clustering)
        Microsoft.Maps.Pushpin.prototype.title = null;
        Microsoft.Maps.Pushpin.prototype.description = null;    

        getStores();
    }

    function createStorePin(data) {
        var pin = new CanvasPushpin(data._LatLong, function (pin, context) {

            img = new Image();
            img.onload = function () {
                if (context) {
                    context.width = img.width;
                    context.height = img.height;
                    context.beginPath();
                    context.arc(13, 13, 11, 0, 2 * Math.PI, false);
                    context.fillStyle = pin.Metadata.color;
                    context.fill();
                    context.drawImage(img, 0, 0);
                }
            };
            img.src = '/assets/images/transparent_pin.png';
        });
        pin.Metadata = {
            color: '#FF3333',
        };

        //var pushpinOptions = { width: null, height: null, htmlContent: "<div class='PushPinsColor' style='width:0;height: 0;cursor: pointer; border-left: 10px solid transparent;border-right:10px solid transparent;border-bottom: 10px solid green;'></div>" };
        //var pin = new Microsoft.Maps.Pushpin(data._LatLong, pushpinOptions);
        //var pin = new Microsoft.Maps.Pushpin(data._LatLong);

        pin.title = "Single Location";
        pin.description = "GridKey: " + data.GridKey;

        //Add handler for the pushpin click event.   
        Microsoft.Maps.Events.addHandler(pin, 'mouseover', displayInfobox);
        Microsoft.Maps.Events.addHandler(pin, 'mouseout', hideInfobox);
        
        return pin;
    }

    function createStoreClusteredPin(cluster, latlong) {

        var pin = new CanvasPushpin(latlong, function (pin, context) {

            img = new Image();
            img.onload = function () {
                if (context) {
                    context.width = img.width;
                    context.height = img.height;
                    context.beginPath();
                    context.arc(13, 13, 11, 0, 2 * Math.PI, false);
                    context.fillStyle = pin.Metadata.color;
                    context.fill();
                    context.drawImage(img, 0, 0);
                }
            };
            img.src = '/assets/images/transparent_pin.png';
        });
        pin.Metadata = {
            color: '#FF3333',

        };

        //var pushpinOptions = { width: null, height: null, htmlContent: "<div  class='PushPinsColor' style='width: 10px;height: 10px;background:red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;'></div>" };
        //var pin = new Microsoft.Maps.Pushpin(latlong, pushpinOptions);
        //var pin = new Microsoft.Maps.Pushpin(latlong);

        pin.title = "Cluster";
        pin.description = "GridKey: " + cluster[0].GridKey + " Cluster Size: " + cluster.length + " Zoom in for more details.";

        //Add handler for the pushpin click event.    
        Microsoft.Maps.Events.addHandler(pin, 'mouseover', displayInfobox);
        Microsoft.Maps.Events.addHandler(pin, 'mouseout', hideInfobox);
        
        return pin;
    }

    function displayInfobox(e) {
        if (e.targetType == "pushpin") {
            infobox.setLocation(e.target.getLocation());

            infobox.setOptions({
                title: e.target.title,
                description: e.target.description,
                visible: true
            });
        }
    }

    function hideInfobox() {
        infobox.setOptions({ visible: false });
    }

    var x;

    function getStores (){  
     for (x = 0; x < MAP_DATA.length; x++)
        {        
            locator(MAP_DATA[x].StoreId, MAP_DATA[x].StoreName, MAP_DATA[x].StoreAddress);        
        }       
    }

    locator = function (storeId, storeName, storeAddress, cssClass) {
        Microsoft.Maps.loadModule("Microsoft.Maps.Search", { callback: searchModuleCallback });

        function searchModuleCallback() {
            var searchManager = new Microsoft.Maps.Search.SearchManager(scope.map);
            var geocodeRequest = { where: storeAddress, count: 1, callback: geoCodeCallback, errorCallback: errorCallback };
            searchManager.geocode(geocodeRequest);
        }

        function geoCodeCallback(geoCodeResult, userData) {
            console.log("geoCodeCallback : Start");
            if (geoCodeResult.results.length) {
                console.log("Geocode " + "StoreId : " + storeId + " Address : " + storeAddress);
                var latitude = geoCodeResult.results[0].location.latitude;
                var longitude = geoCodeResult.results[0].location.longitude;

                storeData.push({
                    "Id": storeId,
                    "Name": storeName,
                    "Latitude": latitude,
                    "Longitude": longitude
                });
                storeLayer.SetData(storeData);
            }        
        }

        function errorCallback(geoCodeRequest) {
            console.log("Geocode Error " + storeAddress);
        }
    }






    • Edited by sapanagarud Tuesday, October 08, 2013 11:10 AM
    Tuesday, October 08, 2013 11:05 AM

Answers

  • Both of these modules make use of a modified version of the EntityCollection. These changes are different in each module. If you want to use CanvasPushpins inside of the clustering module you will need to modify the clustering module's EntityCollection. Take a look at the Canvas entity collection code and you will see two events, add them to the clustering entity collection.

    http://rbrundritt.wordpress.com

    Wednesday, October 30, 2013 9:45 AM
    Owner