none
Bing Map AJAX API 7 - JavaScript Error while adding polygon to map RRS feed

  • Question

  • Hi,

    For Bing Map AJAX 7, I am getting JavaScript error(in veapicore.js) while adding polygon to map. Following is my code:

    <html>
       <head>
          <title>Add default pushpin</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
          <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
               <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
                <script type="text/javascript" src=" https://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
              
          <script type="text/javascript">

              var map = null, infobox, infoboxLayer;
              var newLocationLL = null;
              var pinInfobox = null;

                $(document).ready(function () {
                  map = new Microsoft.Maps.Map(document.getElementById("BingMap"), { credentials: ""});
                  var center = new Microsoft.Maps.Location(39.833333333333336, -98.58333333333333); //Lebanon,  Kansas is USA's geographic center (LAT. 39°50' LONG. -98°35') (ref: wikipedia)


                  infoboxLayer = new Microsoft.Maps.EntityCollection();
                  map.entities.clear();
                  SetMapEvents();
                  newLocationLL = new Microsoft.Maps.Location();
                  setMapCenterAndZoom(center, 8); //default zoom level 4 (whole USA)

                  map.entities.push(infoboxLayer);
                  Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: LoadSearchModule });
              });

              function LoadSearchModule()
              {
                  createSearchManager();
                  GeoCodeNewLocation("Irving, TX", true);
              }

              function GeoCodeNewLocation(address, isHome) {
                  if (map === undefined) {
                  }
                  else {
                      var geocodeRequest = { where: address, count: 10, callback: GeocodeCallback, errorCallback: errCallback, userData: isHome };
                      searchManager.geocode(geocodeRequest);
                  }
              }

              function errCallback(geocodeRequest) {
                  map.entities.clear();
              }

              function GeocodeCallback(geocodeResult, userData) {

                  // if there are no results, display any error message and return
                  if (geocodeResult.results.length == 0) {

                      return;
                  }

                  //when user clicks close rather than selecting an address, the places array will return all possible matches
                  if (geocodeResult.results.length > 1) {
                  }
                  //keep only first address element from geocodeResult and remove remaining addresses
                  for (var i = geocodeResult.results.length - 1; i >= 1; i--) {
                      geocodeResult.results.splice(i, 1);
                  }

                  var bestMatch = geocodeResult.results[0];

                  // Add pushpin to the *best* place
                  var location = new Microsoft.Maps.Location(bestMatch.location.latitude, bestMatch.location.longitude);
                  var InfoboxHtml = "<div class='customInfoBox-body'><div>" + bestMatch.name + "</div><div><b>Latitude:</b> " + location.latitude + "<br><b>Longitude:</b>" + location.longitude + "</div></div>";
                  var str = "";
                  //var pushpinOptions = { width: null, height: null, htmlContent: desc, text: "", title: bestMatch.name };
                  var pushpinOptions = { width: null, height: null, htmlContent: str, text: "" };
                  var pushpin = new Microsoft.Maps.Pushpin(location, pushpinOptions);
                  pushpin.LongDescription = InfoboxHtml;
                  map.entities.push(pushpin);
                  infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
                  Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displayInfobox);

                  setMapCenterAndZoom(location, 8);
                  newLocationLL.latitude = location.latitude.toString();
                  newLocationLL.longitude = location.longitude.toString();

                  isCircle = true;
                  //  isCircle = document.getElementById("rdCircle1").checked;
                  isPositive = false;
                  //  isPositive = document.getElementById("stayWithin1").checked;
                  AddNewGeoFence(isCircle, isPositive, bestMatch);
              }

              function displayInfobox(e) {
                  if (e.targetType == 'pushpin') {
                      var pin = e.target;
                      //Get location of the pin on the map object
                      var pinLocation = pin.getLocation();
                      //Move the map so that the cilcked Pin is at the Map center
                      var center = new Microsoft.Maps.Location(pinLocation.latitude, pinLocation.longitude);
                      setMapCenterAndZoom(center, map.getZoom());
                      //map.entities.remove(infobox);
                      infoboxLayer.clear();
                      infobox.setLocation(e.target.getLocation());
                      // Newly comment 7//7 infobox.setOptions({ visible: true, offset: new Microsoft.Maps.Point(12, -90) });
                      infobox.setOptions({ width: null, height: null, visible: true, offset: new Microsoft.Maps.Point(-70, 125) });
                      infobox.setHtmlContent(e.target.LongDescription);
                      setTimeout(function () {
                          //  map.entities.push(infobox);
                          infoboxLayer.push(infobox);
                      }, 500);
                  }
              }

              function createSearchManager() {
                  map.addComponent('searchManager', new Microsoft.Maps.Search.SearchManager(map));
                  searchManager = map.getComponent('searchManager');
              }

              function AddNewGeoFence(isCircle, isPositive, bestMatch) {
                  var coverageValue = 10;
                  var coverageMiles;
                  var shape;

                  if (coverageValue == "") {
                      coverageMiles = 1;
                  }
                  else {
                      coverageMiles = coverageValue;
                  }
                //  alert(isCircle);
                 // if (isCircle) {
                      var GeoCodeCalc = {};
                      GeoCodeCalc.EarthRadiusInMiles = 3956.0;
                      GeoCodeCalc.EarthRadiusInKilometers = 6367.0;
                      var Mileunits = GeoCodeCalc.EarthRadiusInMiles;
                      shape = drawCircle(coverageMiles, newLocationLL, isPositive, Mileunits);
                      //var addressparts = bestMatch.name.trim().split(','); // [0]street, [1]city, [2](state zip)               
                 // }
                  map.entities.push(shape);
    //              var coverageMiles = 10;
    //              setMapCenterAndZoom(newLocationLL, 8);
    //              var isPositive = false;
    //              var GeoCodeCalc = {};
    //              GeoCodeCalc.EarthRadiusInMiles = 3956.0;
    //              GeoCodeCalc.EarthRadiusInKilometers = 6367.0;
    //              var Mileunits = GeoCodeCalc.EarthRadiusInMiles;
    //              var shape = drawCircle(coverageMiles, newLocationLL, isPositive, Mileunits);
    //              map.entities.push(shape);
              }

              function drawCircle(radius, origin, isPositive, units) {
                  var RadPerDeg = Math.PI / 180;
                  var earthRadius = parseFloat(units);
                  //var earthRadius = 3959;
                  var lat = origin.latitude * RadPerDeg;
                  var lon = origin.longitude * RadPerDeg;
                  var locs = new Array();
                  var AngDist = parseFloat(radius) / earthRadius;
                  for (x = 0; x <= 360; x++) { //making a 360-sided polygon
                      var pLatitude, pLongitude;
                      // With a nice, flat earth we could just say p2.Longitude = lon * sin(brng) and p2.Latitude = lat * cos(brng)
                      // But it ain't, so we can't.  See http://www.movable-type.co.uk/scripts/latlong.html
                      brng = x * RadPerDeg;
                      pLatitude = Math.asin(Math.sin(lat) * Math.cos(AngDist) + Math.cos(lat) * Math.sin(AngDist) * Math.cos(brng)); //still in radians
                      pLongitude = lon + Math.atan2(Math.sin(brng) * Math.sin(AngDist) * Math.cos(lat), Math.cos(AngDist) - Math.sin(lat) * Math.sin(pLatitude));
                      pLatitude = pLatitude / RadPerDeg;
                      pLongitude = pLongitude / RadPerDeg;
                      locs.push(new Microsoft.Maps.Location(pLatitude, pLongitude));
                  }
                  var circle = null;
                  if (isPositive) {
                      circle = new Microsoft.Maps.Polygon(locs,
                                  { fillColor: new Microsoft.Maps.Color(100, 0, 150, 100),
                                      strokeColor: new Microsoft.Maps.Color(100, 0, 150, 100),
                                      strokeThickness: 1
                                  });
                  }
                  else {
                      circle = new Microsoft.Maps.Polygon(locs,
                                  { fillColor: new Microsoft.Maps.Color(100, 255, 10, 10),
                                      strokeColor: new Microsoft.Maps.Color(100, 255, 10, 10),
                                      strokeThickness: 1
                                  });
                  }
                  return circle;
              }


              //Set map center and zoom
              function setMapCenterAndZoom(center, zoom) {
                  var mapOptions = map.getOptions();
                  mapOptions.zoom = zoom;
                  mapOptions.center = center;
                  map.setView(mapOptions);
              }

              function SetMapEvents() {
                  //Add click event handler on map
                  //Hide infobox on cliking on map view
                  Microsoft.Maps.Events.addHandler(map, 'click', function (e) {
                      infoboxLayer.clear();
                      // map.entities.remove(infobox);
                  });

                  //Change cursor pointer on mouse move
                  Microsoft.Maps.Events.addHandler(map, "mousemove", function (e) {
                      // get the HTML DOM Element that represents the Map
                      var mapElem = map.getRootElement();
                      if (e.targetType === "pushpin") {
                          // Mouse is over Map
                          mapElem.style.cursor = "pointer";
                      } else {
                          // Mouse is over Pushpin, Polygon etc.
                          mapElem.style.cursor = "auto";
                      }
                  });
              }
          </script>
       </head>
       <body>
          <div id='BingMap' style="; width:400px; height:400px;"></div>
          
       </body>
    </html>















    Friday, September 5, 2014 12:19 PM

Answers

  • In the AddNewGeoFence function you are adding a shape to the map, but you haven't defined it, so it's throwing an error. Move the line "map.entities.push(shape);" inside the if statement for isCircle.

    http://rbrundritt.wordpress.com

    Friday, September 5, 2014 2:47 PM
  • I found one post. It's issue with Jquery and IE, $(document).ready happens too soon in IE and causes Bing Map undefined error when drawing a polygon.

    http://bugs.jquery.com/ticket/9046



    Friday, September 5, 2014 3:38 PM

All replies

  • Any help?
    Friday, September 5, 2014 1:18 PM
  • In the AddNewGeoFence function you are adding a shape to the map, but you haven't defined it, so it's throwing an error. Move the line "map.entities.push(shape);" inside the if statement for isCircle.

    http://rbrundritt.wordpress.com

    Friday, September 5, 2014 2:47 PM
  • I have updated the above code. It works. but sometimes in IE8 browser it throws error in veapicore.js file.

    I am using Jquery 1.6.2 and Jquery Ui 1.8.16. Is there any issue with VML syntax (fillColor: new Microsoft.Maps.Color) with Jquery, because it throws error at that map.entities.push?

    Friday, September 5, 2014 3:06 PM
  • I found one post. It's issue with Jquery and IE, $(document).ready happens too soon in IE and causes Bing Map undefined error when drawing a polygon.

    http://bugs.jquery.com/ticket/9046



    Friday, September 5, 2014 3:38 PM