none
Empty HTML5 Canvas Pushpin elements RRS feed

  • Question

  • Hi,
    I have implemented the canvas pushpin module solution and it works, many many thanks for your previous answer Ricky Brundritt. But sometimes[2 in 10 iterations]  i get "document.getElementById(canvasID)" as "null", though the record exists. Since i get this as "null" the pushpin is not plotted on the map. You can check the screen shot from here " http://s22.postimg.org/53s8l030h/canvas_Problem.png ".

    Example- I have 5 records that needs to be plotted, but sometimes only 3 of them gets plotted & the rest 2 are ignored. But again when i search for those 5 records in the same window, all of them are plotted !

    I have added canvas modules, in $(document).ready state, as shown in below code block
     

     //REGISTER  the custom pushpin module            Microsoft.Maps.registerModule("CanvasPushpinModule", "scripts/CanvasPushpinModule.js");            //load the pushpin module            Microsoft.Maps.loadModule('CanvasPushpinModule');

    Below function is where i get "document.getElementById(canvasID)" as "null"

    function getCanvas(canvasID) {        var c = document.getElementById(canvasID);        if (c) {            c = c.getContext("2d");        }        return c;    }
    Anything that i'm missing here ? Please suggest.


    Thanks! AhmedRaza

    Thursday, September 12, 2013 10:13 AM

Answers

  • After investigation further we’ve found the root cause of the problem. Let us explain the scenario a bit just to have a clear background of what our problem was and how we resolved it.

    We have geo-coded records that can be plotted on the map by selecting them from the Home Page or by a search method from the Map Page. We were setting the view/zoom level of the map as per the record collection i.e. if there was only one record we would zoom into that only record on the map, if there are many records in the collection we then set the appropriate map view/zoom level to display all of them.
    Now when we used to select a few records from Home Page and call the Map Page everything used to work fine. The problem of getting canvas element as null used to occur when we used to search for other records from the Map Page with those selected records already plotted on the map. This behavior/problem doesn’t used to occur if we were on the Map Page with no canvas pushpins plotted on the map.

    After digging into the code and lots of hard work we found the lines that were creating the problem for us.

    var viewRect = getLocationBounds();

                _map.setView({ bounds: viewRect });

    // Method to get the location bounds to set the map view.

    function getLocationBounds() {

        var rect = null;

        var latLong = new Array();

        var functionName = "getLocationBounds ";

        try {

            //loop through collection and add into collection

            $.each(_allRecords, function (index, data) {

                if (data.attributes[Latitude] != undefined && data.attributes[Longitude] != undefined) {

                    //add the location to the list

                    latLong.push(new Microsoft.Maps.Location(data.attributes[Latitude].value, data.attributes[Longitude].value));

                }

            });

            ////Check if locations found

            if (latLong.length > 0) {

                rect = new Microsoft.Maps.LocationRect.fromLocations(latLong);

            }

        }

        catch (e) {

            throw new Error(e);

        }

    return rect;

    }

    Here we used to iterate through the records and set the MapView, using the Map control. After commenting

    var viewRect = getLocationBounds();

                _map.setView({ bounds: viewRect });

    These two lines the problem what we were facing went.

    Since we used the Bing method to set the View of the map we faced problem which took us very long to resolve.

    We are posting our answer here in case it may help someone in future.

    We would like to know if you have any suggestions for us that could justify this behavior of Bing Map. We would like to know how to achieve the setView functionality, as shown in our above code.


    Thanks! AhmedRaza


    Monday, October 7, 2013 6:38 AM
  • The lines of code causing the issue appear to be from your own application since none of that code exists in the canvas pushpin module source code. Generating a locationRect from an array of locations works fine and can be used to set the view. I have done this while using the canvas pushpin module and haven't seen any similar issue. Perhaps instead of throwing an error in your code you should return null for the bounding box and then check it is not null before setting the view.


    http://rbrundritt.wordpress.com

    Monday, October 7, 2013 10:30 AM

All replies

  • After investigation further we’ve found the root cause of the problem. Let us explain the scenario a bit just to have a clear background of what our problem was and how we resolved it.

    We have geo-coded records that can be plotted on the map by selecting them from the Home Page or by a search method from the Map Page. We were setting the view/zoom level of the map as per the record collection i.e. if there was only one record we would zoom into that only record on the map, if there are many records in the collection we then set the appropriate map view/zoom level to display all of them.
    Now when we used to select a few records from Home Page and call the Map Page everything used to work fine. The problem of getting canvas element as null used to occur when we used to search for other records from the Map Page with those selected records already plotted on the map. This behavior/problem doesn’t used to occur if we were on the Map Page with no canvas pushpins plotted on the map.

    After digging into the code and lots of hard work we found the lines that were creating the problem for us.

    var viewRect = getLocationBounds();

                _map.setView({ bounds: viewRect });

    // Method to get the location bounds to set the map view.

    function getLocationBounds() {

        var rect = null;

        var latLong = new Array();

        var functionName = "getLocationBounds ";

        try {

            //loop through collection and add into collection

            $.each(_allRecords, function (index, data) {

                if (data.attributes[Latitude] != undefined && data.attributes[Longitude] != undefined) {

                    //add the location to the list

                    latLong.push(new Microsoft.Maps.Location(data.attributes[Latitude].value, data.attributes[Longitude].value));

                }

            });

            ////Check if locations found

            if (latLong.length > 0) {

                rect = new Microsoft.Maps.LocationRect.fromLocations(latLong);

            }

        }

        catch (e) {

            throw new Error(e);

        }

    return rect;

    }

    Here we used to iterate through the records and set the MapView, using the Map control. After commenting

    var viewRect = getLocationBounds();

                _map.setView({ bounds: viewRect });

    These two lines the problem what we were facing went.

    Since we used the Bing method to set the View of the map we faced problem which took us very long to resolve.

    We are posting our answer here in case it may help someone in future.

    We would like to know if you have any suggestions for us that could justify this behavior of Bing Map. We would like to know how to achieve the setView functionality, as shown in our above code.


    Thanks! AhmedRaza


    Monday, October 7, 2013 6:38 AM
  • The lines of code causing the issue appear to be from your own application since none of that code exists in the canvas pushpin module source code. Generating a locationRect from an array of locations works fine and can be used to set the view. I have done this while using the canvas pushpin module and haven't seen any similar issue. Perhaps instead of throwing an error in your code you should return null for the bounding box and then check it is not null before setting the view.


    http://rbrundritt.wordpress.com

    Monday, October 7, 2013 10:30 AM