none
Creating circles on BingoMap RRS feed

  • Question

  • Hi , I have created circles on BingoMap.I have fetched the locations and radius values from SQl database.This is Asp.Net web applications and I have to display circles around the pushpins. These radius values are basically product quantity available for specific locations. Although I am able to display circles but these circles are overlapped and while I zoom the Map these circles are getting bigger with overlapping. I am trying to display circles and while I zoom the map these should avoid overlapping and user should able to identify the size of circles based on quantity. Basically there are 20 locations and displayed with push pins and these locations are very close to each other.

    I have attached the aspx code for your reference. Code behind contains the Sql database connection on page load event. It fetches the  values from Sql and stores into string builder.

    Help would be highly appreciated, need to create it ASAP.

    Aspx Code as follow:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3_aspx"%>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head runat="server">
          <title>Display on Map</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">
              function GetMap() {
    
                  var map = new Microsoft.Maps.Map(document.getElementById("mapMap"),
                                    {
                                        credentials: "App key ",
                                       center: new Microsoft.Maps.Location(42.274260, -83.365717),
                                       mapTypeId: Microsoft.Maps.MapTypeId.road,
                                        zoom: 8
                                    });
    
                  var backgroundColor = new Microsoft.Maps.Color(10, 100, 0, 0);
                  var borderColor = new Microsoft.Maps.Color(150, 200, 0, 0);
                 //Earth's mean radius in KM is 6371km.
                  var R=6371,lat1, long1, d, circlePoints=new Array();
    
                // var location = new Microsoft.Maps.Location(43.3504, -84.5603);
                  var location = new Microsoft.Maps.Location(42.274260, -83.365717);
                  
                  for (var i = 0; i < lats.length; i++) {
                      var loc = new Microsoft.Maps.Location(lats[i], longs[i]);
                                      var pin = new Microsoft.Maps.Pushpin(loc, { text: 'PushPin', typeName: 'PinColor', textOffset: new Microsoft.Maps.Point(-45, 0) });
                                      //Display circle
                      lat1 = (lats[i] * Math.PI) / 180;
                      long1 = (longs[i] * Math.PI) / 180;
                      var d = parseFloat(value[i]) / R;
                      for (x = 0; x <= 360; x += 5)
                      {
                          var p2 = new Microsoft.Maps.Location(0, 0);
                          brng = x * Math.PI / 180;
                          p2.latitude = Math.asin(Math.sin(lat1) * Math.cos(d) + Math.cos(lat1) * Math.sin(d) * Math.cos(brng));
                          p2.longitude=((long1+Math.atan2(Math.sin(brng)*Math.sin(d)*Math.cos(lat1),Math.cos(d)-Math.sin(lat1)*Math.sin(p2.latitude)))*180)/Math.PI;
                          p2.latitude=(p2.latitude*180)/Math.PI;
                          circlePoints.push(p2);
                      }
                      var polygon=new Microsoft.Maps.Polygon(circlePoints,{fillColor:backgroundColor,strokeColor:borderColor,strokeThickness:1});
                      map.entities.push(polygon);
                      map.entities.push(pin);              
                    
                  }
                 
                  map.setView({ center: location, zoom: 10});
                
              }
          </script>
         
       </head>
       <body id="body" runat="server">
           <form id="form1" runat="server">
          <div id='mapMap' style="; width:600px; height:600px;">  
           <script type="text/javascript">GetMap();         
           </script>    
              </div> 
               </form>
       </body>
    </html>
    

    Looking forward for help ASAP. Any help would be higly appreciated.

    Thanks


    • Edited by ArDiChPa3 Monday, July 14, 2014 12:54 PM
    Monday, July 14, 2014 12:41 PM

Answers

  • Here is a scaling pushpin example. You can modify the scaling factor by changing how much the zoom level is divided by in the scalePushpins function.

    <!doctype html>
    <html>
    <head>
      <meta http-equiv="x-ua-compatible" content="IE=Edge"/> 
    
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      
      <script type="text/javascript">
    	var map, lastZoomLevel = 0;
    	
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});	
    
    		Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e){
    			var zoom = map.getZoom();			
    			
    			if(zoom != lastZoomLevel){			
    				scalePushpins();
    				
    				lastZoomLevel = zoom;
    			}
    		});
    	}
    	
    	function addPushpin(){
    		var lat = Math.random() * 90 - 45;
    		var lon = Math.random() * 360 - 180;
    		
    		var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), { typeName: 'pinStyle'});
    		map.entities.push(pin);
    		scalePushpins();
    	}
    	
    	function scalePushpins(){
    		var zoom = map.getZoom();
    		var scale = 'scale('+ zoom/10 + ')';
    		var pins = $('.pinStyle'); 
    		pins.css({
    			'-webkit-transform': scale, 
    			'-ms-transform': scale,
    			'transform': scale
    			});
    	}
    	</script>
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=';width:800px;height:600px;'></div><br/>
    	<input type='button' value='Add Pin' onclick='addPushpin()'/>
    </body>
    </html>
    

    http://rbrundritt.wordpress.com

    Monday, July 14, 2014 6:15 PM
  • That error sounds like one of a couple possible things. The first is that you are using IE8 or older which doesn't support the HTML5 canvas. However you can add support to IE7 & 8 by using the Explorer Canvas: http://code.google.com/p/explorercanvas/

    The possibility is that the document.getELementById method you are using when loading the map may either be trying to load before the DIV is created, or the id is incorrect, thus passing null into the map creation method.


    http://rbrundritt.wordpress.com

    Tuesday, July 15, 2014 10:00 AM
  • Infact,
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="piechart.aspx.cs" Inherits="piechart" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></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">
              var map, canvasLayer;
    
              function GetMap() {
                  // Initialize the map
                  map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                  {
                      credentials: "bingo map key"
                  });
    
                  //Register and load the Canvas Pushpin Module
                  Microsoft.Maps.registerModule("CanvasPushpinModule", "scripts/CanvasPushpinModule.js");
                  Microsoft.Maps.loadModule("CanvasPushpinModule", {
                      callback: function () {
                          //Create Canavas Entity Collection
                          canvasLayer = new CanvasLayer(map);
                          map.entities.push(canvasLayer);
    
                          //Create the canvas pushpins
                          createCanvasPins();
                      }
                  });
              }
    
              function createCanvasPins() {
                  var pin;
    
                  //Define a color for each type of data
                  var colorMap = ['red', 'blue'];
    
                  for (var i = 0; i < lats.length; i++) {
                      var loc = new Microsoft.Maps.Location(lats[i], longs[i]);
    
                      //Create a canvas pushpin at a random location
                      pin = new CanvasPushpin(loc, function (pin, context) {
                          //Calculate the number of slices each pie we can support
                          var max = Math.min(pin.Metadata.data.length, colorMap.length);
    
                          //Calculate the total of the data in the pie chart
                          var total = 0;
                          for (var i = 0; i < max; i++) {
                              total += pin.Metadata.data[i];
                          }
    
                          //Draw the pie chart
                          createPieChart(context, total, pin.Metadata.data, colorMap);
                      });
    
                      //Give the pushpin some data-- here I have assign the string builder which has array named "value" from code behind to pie data
                      pin.Metadata = value;
    
                      //Add the pushpin to the Canvas Entity Collection
                      canvasLayer.push(pin);
                  }
              }
    
              function createPieChart(context, total, data, colorMap) {
                  var radius = 12.5,
                      center = { x: 12.5, y: 12.5 },
                      lastPosition = 0;
    
                  context.width = 25;
                  context.height = 25;
    
                  for (var i = 0; i < data.length; i++) {
                      context.fillStyle = colorMap[i];
                      context.beginPath();
                      context.moveTo(center.x, center.y);
                      context.arc(center.x, center.y, radius, lastPosition, lastPosition + (Math.PI * 2 * (data[i] / total)), false);
                      context.lineTo(center.x, center.y);
                      context.fill();
                      lastPosition += Math.PI * 2 * (data[i] / total);
                  }
              }
    
    
          </script>
        <style>
            /* Bug fix for mouse events on Polylines, Polygons and custom HTML pushpins in IE11 */
            .MicrosoftMapDrawing, .MapPushpinBase {
                pointer-events: auto !important;
            }
        </style>
       </head>
       <body id="body" runat="server">
           <form id="form1" runat="server">
          <div id='mapMap' style="; width:600px; height:600px;">  
           <script type="text/javascript">GetMap();
           </script>    
              </div> 
               </form>
       </body>
     I am trying to use data driven push pin example but getting the same error. Can you check whats the error in above code I want display quantity present in a Value array in pie chart.
    • Marked as answer by ArDiChPa3 Tuesday, July 15, 2014 6:17 PM
    Tuesday, July 15, 2014 3:11 PM
  • Simple error. Your map div has an id of "mapMap" but you try to get element with id "myMap".

    http://rbrundritt.wordpress.com

    Tuesday, July 15, 2014 6:01 PM
  • Using the code you provided before my last response I managed to get it working fairly easily once the id of the map was corrected. To test I posted the following data to the page when it was loading:

    protected void Page_Load(object sender, EventArgs e)
    {
        var script = @"<script>
                    var lats = [45, 50, 32];
                    var longs = [-100, -80, -110];
                    var value = {data:[30,70]};
                    </script>
                ";
    
        ClientScript.RegisterClientScriptBlock(this.GetType(), "valueScript", script);
    }

    That said, this gives all your pushpins the same Pie chart values. To correct this turn the data property into a 2D array like so:

    var value = {data:[[30,70],[20,80],[40,60]]};

    And then update this line:

    pin.Metadata = value;

    to this:

    pin.Metadata = value[i];


    http://rbrundritt.wordpress.com

    Wednesday, July 16, 2014 3:02 PM
  • The SQL Data is likely in a SqlDataReader object. You need to go through and read the values and write them as string to your script. http://msdn.microsoft.com/en-us/library/system.data.sqlclient.sqldatareader(v=vs.110).aspx

    As for the question about overlapping circles. Unless you write a the logic to do something like this its not something that would be easily done.


    http://rbrundritt.wordpress.com

    Thursday, July 17, 2014 10:35 AM
  • Okay finally I am able to display circles without any transparent intersection. I am attaching the code just to help some body who is in need of such example.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head id="Head1" runat="server">
          <title>Display on Map</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">
              function GetMap() {
    
                  var map = new Microsoft.Maps.Map(document.getElementById("mapMap"),
                                    {
                                        credentials: "Your Bingo Map Key",
                                        center: new Microsoft.Maps.Location(42.274260, -83.365717),
                                        mapTypeId: Microsoft.Maps.MapTypeId.road,
                                        zoom: 8
                                    });
    
                  // var backgroundColor = new Microsoft.Maps.Color(10, 100, 0, 0);
                
                  var backgroundColor = new Microsoft.Maps.Color(10, 10,00,100);
                  var borderColor = new Microsoft.Maps.Color(150, 200, 0, 0);
                  //Earth's mean radius in KM is 6371km.
                  var R = 6371, lat1, long1, d, circlePoints = new Array();
                  
                  // var location = new Microsoft.Maps.Location(43.3504, -84.5603);
                  var location = new Microsoft.Maps.Location(42.274260, -83.365717);
    
                  for (var i = 0; i < lats.length; i++)
                  {
                      var loc = new Microsoft.Maps.Location(lats[i], longs[i]);
                      var pin = new Microsoft.Maps.Pushpin(loc, { text: ''+i });
                      //Display circle
                      lat1 = (lats[i] * Math.PI) / 180;
                      long1 = (longs[i] * Math.PI) / 180;
                      var d = parseFloat(Value[i]) / R;
                      for (x = 0; x <= 360; x += 5)
                      {
                          var p2 = new Microsoft.Maps.Location(0, 0);
                          brng = x * Math.PI / 180;
                          p2.latitude = Math.asin(Math.sin(lat1) * Math.cos(d) + Math.cos(lat1) * Math.sin(d) * Math.cos(brng));
                          p2.longitude = ((long1 + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat1), Math.cos(d) - Math.sin(lat1) * Math.sin(p2.latitude))) * 180) / Math.PI;
                          p2.latitude = (p2.latitude * 180) / Math.PI;
                          //circlePoints.push(p2);
                          circlePoints.push(p2);
                          var polygon = new Microsoft.Maps.Polygon(circlePoints, {fillColor:backgroundColor,strokeColor:borderColor,strokeThickness: 1 });
                           map.entities.push(polygon);
                          
                      }
                      circlePoints = [];
                       //var polygon = new Microsoft.Maps.Polyline(circlePoints);
                     // var polygon = new Microsoft.Maps.Polygon(circlePoints, {strokeThickness: 1 })
                     
                       map.entities.push(pin);
                       //map.entities.push(polygon);
    
                  }
    
                  map.setView({ center: location, zoom: 10 });
    
              }
          </script>
         
       </head>
       <body id="body" runat="server">
           <form id="form1" runat="server">
          <div id="mapMap" style=";width:600px; height:600px">  
           <script type="text/javascript">GetMap();
           </script>    
              </div> 
               </form>
       </body>
    </html>

    • Marked as answer by ArDiChPa3 Tuesday, July 22, 2014 2:18 PM
    Friday, July 18, 2014 1:21 PM

All replies

  • If the circles overlap because of the size of the radius then that's what they will do. When you zoom in/out they will always be overlapping, no more or no less. It's possible that the stroke of your polygon might make the polygon circle appear larger than it is when zooming as it is set to be 1 pixel wide. A single pixel at different zoom levels has a different size and as such at high zoom levels your circle would look bigger than it is, mainly due to the stroke. Try hiding the stroke line to see if that helps by either making it transparent or setting the thickness to 0.

    As for overlapping pushpins their are a couple of options. One is to scale their size depending on the zoom level. Another option is to implement clustering: http://bingmapsv7modules.codeplex.com/wikipage?title=Client%20Side%20Clustering


    http://rbrundritt.wordpress.com

    Monday, July 14, 2014 1:35 PM
  • Thanks for the quick reply Ricky.

    I tries stoke thickness=0, it has removed the outline or border of the circles but looks the same .I would like to scale the push pin size depending on the zoom level. I am looking for some help or code to do that. Can you provide some links which I can refer or help me to modify the  above code . Or is there any other way through which we can draw circles big/small based on quantity or radius on bingo map. Or to distinguish locations based on quantity without drawing circles.(Any idea).

    Thanks

    Monday, July 14, 2014 2:51 PM
  • There are several different ways to go about this. Before I go into the scaling pushpin part I will cover the other questions you mentioned.

    To draw different size circles based on the number circles on the map you would need to add this logic in yourself. Since you are puling in the data and adding it to the map this shouldn't be an issue. Although I would of though the circles had a purpose such as representing an area and that resizing them would negate that purpose. If you are drawing different size circles on the map show the relative difference of some metric then there are a couple of different ways to deal with that. Rather than using a polygon you could use a Canvas pushpin: http://rbrundritt.wordpress.com/2013/04/10/html5-canvas-pushpins-in-javascript/

    If you want distinguish quantity without drawing circles there are lots of possibilities. The easiest is to simply write the number as text. Set the "text" option of the pushpin to the quantity. Currently you are setting this to 'PushPin'. Other ways include using pie/bar charts a pushpins, or heat maps. If you want to do a heat map then take a look at this: http://bingmapsv7modules.codeplex.com/wikipage?title=Client%20Side%20Heatmap

    As for scaling pushpin's, there are a couple different ways to do this. The easiest way would be to give your pushpins all a typeName. The typeName is actually a CSS class name. You can then use jQuery to easily update the class properties. You could then use map events for when the view has changed to scale the pushpins using CSS transition styles. I'll try and put together a quick code sample for you.


    http://rbrundritt.wordpress.com

    Monday, July 14, 2014 5:43 PM
  • Here is a scaling pushpin example. You can modify the scaling factor by changing how much the zoom level is divided by in the scalePushpins function.

    <!doctype html>
    <html>
    <head>
      <meta http-equiv="x-ua-compatible" content="IE=Edge"/> 
    
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      
      <script type="text/javascript">
    	var map, lastZoomLevel = 0;
    	
    	function GetMap()
    	{	
    		map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
    			credentials: "YOUR_BING_MAPS_KEY"
    		});	
    
    		Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e){
    			var zoom = map.getZoom();			
    			
    			if(zoom != lastZoomLevel){			
    				scalePushpins();
    				
    				lastZoomLevel = zoom;
    			}
    		});
    	}
    	
    	function addPushpin(){
    		var lat = Math.random() * 90 - 45;
    		var lon = Math.random() * 360 - 180;
    		
    		var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), { typeName: 'pinStyle'});
    		map.entities.push(pin);
    		scalePushpins();
    	}
    	
    	function scalePushpins(){
    		var zoom = map.getZoom();
    		var scale = 'scale('+ zoom/10 + ')';
    		var pins = $('.pinStyle'); 
    		pins.css({
    			'-webkit-transform': scale, 
    			'-ms-transform': scale,
    			'transform': scale
    			});
    	}
    	</script>
    </head>
    <body onload="GetMap();">
    	<div id='myMap' style=';width:800px;height:600px;'></div><br/>
    	<input type='button' value='Add Pin' onclick='addPushpin()'/>
    </body>
    </html>
    

    http://rbrundritt.wordpress.com

    Monday, July 14, 2014 6:15 PM
  • Hi Ricky,

    I tried Canvas push pin example to fetch data from my sql server database and display canvas push pins on MAP.

    I am getting an error

    Unhandled exception at line 1, column 38808 in http://ecn.dev.virtualearth.net/mapcontrol/v7.0/7.0.20140521120514.27/js/en-us/veapicore.js

    0x800a138f - JavaScript runtime error: Unable to get property 'appendChild' of undefined or null reference

    Monday, July 14, 2014 8:11 PM
  • That error sounds like one of a couple possible things. The first is that you are using IE8 or older which doesn't support the HTML5 canvas. However you can add support to IE7 & 8 by using the Explorer Canvas: http://code.google.com/p/explorercanvas/

    The possibility is that the document.getELementById method you are using when loading the map may either be trying to load before the DIV is created, or the id is incorrect, thus passing null into the map creation method.


    http://rbrundritt.wordpress.com

    Tuesday, July 15, 2014 10:00 AM
  • Thanks again for quick reply!

    I checked the IE versions as well I am using IE 10 and I am calling GetMAP function as mentioned below

    </head>
        <body>
           <form id="form1" runat="server">
          <div id="mapMap" style=";width:400px;height:400px;">  
           <script type="text/javascript">GetMap();
           </script>    
              </div> 
               </form>
       </body>
    </html>

    Thanks,


       

    Tuesday, July 15, 2014 1:10 PM
  • Infact,
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="piechart.aspx.cs" Inherits="piechart" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></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">
              var map, canvasLayer;
    
              function GetMap() {
                  // Initialize the map
                  map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                  {
                      credentials: "bingo map key"
                  });
    
                  //Register and load the Canvas Pushpin Module
                  Microsoft.Maps.registerModule("CanvasPushpinModule", "scripts/CanvasPushpinModule.js");
                  Microsoft.Maps.loadModule("CanvasPushpinModule", {
                      callback: function () {
                          //Create Canavas Entity Collection
                          canvasLayer = new CanvasLayer(map);
                          map.entities.push(canvasLayer);
    
                          //Create the canvas pushpins
                          createCanvasPins();
                      }
                  });
              }
    
              function createCanvasPins() {
                  var pin;
    
                  //Define a color for each type of data
                  var colorMap = ['red', 'blue'];
    
                  for (var i = 0; i < lats.length; i++) {
                      var loc = new Microsoft.Maps.Location(lats[i], longs[i]);
    
                      //Create a canvas pushpin at a random location
                      pin = new CanvasPushpin(loc, function (pin, context) {
                          //Calculate the number of slices each pie we can support
                          var max = Math.min(pin.Metadata.data.length, colorMap.length);
    
                          //Calculate the total of the data in the pie chart
                          var total = 0;
                          for (var i = 0; i < max; i++) {
                              total += pin.Metadata.data[i];
                          }
    
                          //Draw the pie chart
                          createPieChart(context, total, pin.Metadata.data, colorMap);
                      });
    
                      //Give the pushpin some data-- here I have assign the string builder which has array named "value" from code behind to pie data
                      pin.Metadata = value;
    
                      //Add the pushpin to the Canvas Entity Collection
                      canvasLayer.push(pin);
                  }
              }
    
              function createPieChart(context, total, data, colorMap) {
                  var radius = 12.5,
                      center = { x: 12.5, y: 12.5 },
                      lastPosition = 0;
    
                  context.width = 25;
                  context.height = 25;
    
                  for (var i = 0; i < data.length; i++) {
                      context.fillStyle = colorMap[i];
                      context.beginPath();
                      context.moveTo(center.x, center.y);
                      context.arc(center.x, center.y, radius, lastPosition, lastPosition + (Math.PI * 2 * (data[i] / total)), false);
                      context.lineTo(center.x, center.y);
                      context.fill();
                      lastPosition += Math.PI * 2 * (data[i] / total);
                  }
              }
    
    
          </script>
        <style>
            /* Bug fix for mouse events on Polylines, Polygons and custom HTML pushpins in IE11 */
            .MicrosoftMapDrawing, .MapPushpinBase {
                pointer-events: auto !important;
            }
        </style>
       </head>
       <body id="body" runat="server">
           <form id="form1" runat="server">
          <div id='mapMap' style="; width:600px; height:600px;">  
           <script type="text/javascript">GetMap();
           </script>    
              </div> 
               </form>
       </body>
     I am trying to use data driven push pin example but getting the same error. Can you check whats the error in above code I want display quantity present in a Value array in pie chart.
    • Marked as answer by ArDiChPa3 Tuesday, July 15, 2014 6:17 PM
    Tuesday, July 15, 2014 3:11 PM
  • Simple error. Your map div has an id of "mapMap" but you try to get element with id "myMap".

    http://rbrundritt.wordpress.com

    Tuesday, July 15, 2014 6:01 PM
  • Thanks a lot for your help but still trying to get the values in pie chart push pins.
    Tuesday, July 15, 2014 6:18 PM
  • The error for above pie chart code is

    Unhandled exception at line 49, column 23 in

    0x800a138f - JavaScript runtime error: Unable to get property 'length' of undefined or null referen

    Tuesday, July 15, 2014 6:25 PM
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="piechart.aspx.cs" Inherits="piechart" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></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">
              var map, canvasLayer;
    
              function GetMap() {
                  // Initialize the map
                  map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                  {
                      credentials: "Map Key",
                  center: new Microsoft.Maps.Location(42.274260, -83.365717),
                  mapTypeId: Microsoft.Maps.MapTypeId.road,
                  zoom: 8
                  });
    
                  //Register and load the Canvas Pushpin Module
                  Microsoft.Maps.registerModule("CanvasPushpinModule", "scripts/CanvasPushpinModule.js");
                  Microsoft.Maps.loadModule("CanvasPushpinModule", {
                      callback: function () {
                          //Create Canavas Entity Collection
                          canvasLayer = new CanvasLayer(map);
                          map.entities.push(canvasLayer);
    
                          //Create the canvas pushpins
                          createCanvasPins();
                      }
                  });
              }
    
              function createCanvasPins()
              {
                  var pin;
    
                  //Define a color for each type of data
                  var colorMap = ['red', 'blue'];
                
                  for (var i = 1; i <= lats.length; i++)
                  {
                      var loc = new Microsoft.Maps.Location(lats[i - 1], longs[i] - 1);
                      var total = 10;
                      //Create a canvas pushpin at a random location
                      pin = new CanvasPushpin(loc, function (pin, context) {
                          
                          createPieChart(context, total, value[i], colorMap);
                      });
    
                      };
    
                      //Add the pushpin to the Canvas Entity Collection
                      canvasLayer.push(pin);
                  }
              
    
              function createPieChart(context, total, data, colorMap) {
                  var radius = 12.5,
                      center = { x: 12.5, y: 12.5 },
                      lastPosition = 0;
    
                  context.width = 25;
                  context.height = 25;
    
                      context.fillStyle = colorMap;
                      context.beginPath();
                      context.moveTo(center.x, center.y);
                      context.arc(center.x, center.y, radius, lastPosition, lastPosition + (Math.PI * 2 * (data / total)), false);
                      context.lineTo(center.x, center.y);
                      context.fill();
                      lastPosition += Math.PI * 2 * (data / total);
                 
              }
    
          </script>
        <style>
            /* Bug fix for mouse events on Polylines, Polygons and custom HTML pushpins in IE11 */
            .MicrosoftMapDrawing, .MapPushpinBase {
                pointer-events: auto !important;
            }
        </style>
       </head>
       <body id="Body1" runat="server">
        <form id="form1" runat="server">
        <div id='myMap' style=";width:800px;height:600px;">
            <script type="text/javascript">GetMap();
            </script>    
        </div>
        </form>
    </body>>
    </html>

    I have modified the pie chart program as below. I have to generate total 20 pie push pins with only 2 colors. Values are from 1 to 10. so I considered the total as a 10 .

    Please have a look at a code I am getting an error for context and we can assign width to null context.

    Tuesday, July 15, 2014 7:45 PM
  • Again I have modified createPieChart function used in the above program and now I am not getting any error. It displayed map without piechart push pins.
     function createPieChart(context, total, data, colorMap) {
                  var radius = 12.5,
                      center = { x: 12.5, y: 12.5 },
                      lastPosition = 0;
                  if (context) {
    
                      context.width = 25;
                      context.height = 25;
    
                      context.fillStyle = colorMap;
                      context.beginPath();
                      context.moveTo(center.x, center.y);
                      context.arc(center.x, center.y, radius, lastPosition, lastPosition + (Math.PI * 2 * (data / total)), false);
                      context.lineTo(center.x, center.y);
                      context.fill();
                      lastPosition += Math.PI * 2 * (data / total);
                  }
                 
              }

    • Edited by ArDiChPa3 Tuesday, July 15, 2014 7:56 PM
    Tuesday, July 15, 2014 7:56 PM
  • I have modified the program again but still it is not displaying pie chart push pins just displayed map in browser.

    Can you Please look in to the code. value is the array of values which has total 20 values and values are in the range of 1 to 10.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="piechart.aspx.cs" Inherits="piechart" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></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">
              var map, canvasLayer;
    
              function GetMap() {
                  // Initialize the map
                  map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                  {
                      credentials: "Map Key";              center: new Microsoft.Maps.Location(42.274260, -83.365717),
                  mapTypeId: Microsoft.Maps.MapTypeId.road,
                  zoom: 8
                  });
    
                  //Register and load the Canvas Pushpin Module
                  Microsoft.Maps.registerModule("CanvasPushpinModule", "scripts/CanvasPushpinModule.js");
                  Microsoft.Maps.loadModule("CanvasPushpinModule", {
                      callback: function () {
                          //Create Canavas Entity Collection
                          canvasLayer = new CanvasLayer(map);
                          map.entities.push(canvasLayer);
    
                          //Create the canvas pushpins
                          createCanvasPins();
                      }
                  });
              }
    
              function createCanvasPins()
              {
                  var pin;
    
                  //Define a color for each type of data
                  var colorMap = ['red', 'blue'];
                
                  for (var i = 1; i <= lats.length; i++)
                  {
                      var loc = new Microsoft.Maps.Location(lats[i - 1], longs[i] - 1);
                     // var total = 10;
                      //Create a canvas pushpin at a random location
                      pin = new CanvasPushpin(loc, function (pin, context)
                      {
    
                          //    var max = Math.min(pin.Metadata.data.length, colorMap.length);
                          var max = Math.min(value.length, colorMap.length);
                          var total = 0;
                          for (vari = 0; i < max; i++) {
                              total += pin.Metadata.data[i];
                          }
                          
                          createPieChart(context, total, value, colorMap);
                          // canvasLayer.push(pin);
                          pin.Metadata = {
                              data:value,
                          };
                      });
    
                      };
    
                      //Add the pushpin to the Canvas Entity Collection
                      canvasLayer.push(pin);
                  }
              
    
              function createPieChart(context, total, data, colorMap)
              {
                  var radius = 12.5,
                      center = { x: 12.5, y: 12.5 },
                      lastPosition = 0;
                  if (context) {
    
                      context.width = 25;
                      context.height = 25;
    
                      for (var i = 0; i < lats.length; i++) {
    
    
                          context.fillStyle = colorMap[i];
                          context.beginPath();
                          context.moveTo(center.x, center.y);
                          context.arc(center.x, center.y, radius, lastPosition, lastPosition + (Math.PI * 2 * (data[i] / total)), false);
                          context.lineTo(center.x, center.y);
                          context.fill();
                          lastPosition += Math.PI * 2 * (data[i] / total);
                      }
                  }
                 
              }
    
          </script>
        <style>
            /* Bug fix for mouse events on Polylines, Polygons and custom HTML pushpins in IE11 */
            .MicrosoftMapDrawing, .MapPushpinBase {
                pointer-events: auto !important;
            }
        </style>
       </head>
       <body id="Body1" runat="server">
        <form id="form1" runat="server">
        <div id='myMap' style=";width:800px;height:600px;">
            <script type="text/javascript">GetMap();
            </script>    
        </div>
        </form>
    </body>>
    </html>
    

    This is the approach which i would like to use ,to dispaly available quantities at the specified location. looking forward for your help.

    Thanks,

    Wednesday, July 16, 2014 1:40 PM
  • Using the code you provided before my last response I managed to get it working fairly easily once the id of the map was corrected. To test I posted the following data to the page when it was loading:

    protected void Page_Load(object sender, EventArgs e)
    {
        var script = @"<script>
                    var lats = [45, 50, 32];
                    var longs = [-100, -80, -110];
                    var value = {data:[30,70]};
                    </script>
                ";
    
        ClientScript.RegisterClientScriptBlock(this.GetType(), "valueScript", script);
    }

    That said, this gives all your pushpins the same Pie chart values. To correct this turn the data property into a 2D array like so:

    var value = {data:[[30,70],[20,80],[40,60]]};

    And then update this line:

    pin.Metadata = value;

    to this:

    pin.Metadata = value[i];


    http://rbrundritt.wordpress.com

    Wednesday, July 16, 2014 3:02 PM
  • Hi tried to change the code as mentioned by you but getting an error. I have hard coded the values as you mentioned as I am not able to pass values from sql database to pie chart metadata. I was able to generate canvas push pins from my sql database but if I am trying to use the createPieChart function,I am stuck. Don't know how to pass the sql data to javascript variables. I created the string bulder and assign the data reader value to it then I was using that string builder in my Canvas pushpin example. :(

    JavaScript critical error at line 103, column 101 in

    SCRIPT1028: Expected identifier, string or number.

    Wednesday, July 16, 2014 7:00 PM
  • My question is  it possible to display dark color at the intersection of two circles. Because it is showing light color or transparent at union of two circles.

    Wednesday, July 16, 2014 8:16 PM
  • The SQL Data is likely in a SqlDataReader object. You need to go through and read the values and write them as string to your script. http://msdn.microsoft.com/en-us/library/system.data.sqlclient.sqldatareader(v=vs.110).aspx

    As for the question about overlapping circles. Unless you write a the logic to do something like this its not something that would be easily done.


    http://rbrundritt.wordpress.com

    Thursday, July 17, 2014 10:35 AM
  • Okay finally I am able to display circles without any transparent intersection. I am attaching the code just to help some body who is in need of such example.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head id="Head1" runat="server">
          <title>Display on Map</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">
              function GetMap() {
    
                  var map = new Microsoft.Maps.Map(document.getElementById("mapMap"),
                                    {
                                        credentials: "Your Bingo Map Key",
                                        center: new Microsoft.Maps.Location(42.274260, -83.365717),
                                        mapTypeId: Microsoft.Maps.MapTypeId.road,
                                        zoom: 8
                                    });
    
                  // var backgroundColor = new Microsoft.Maps.Color(10, 100, 0, 0);
                
                  var backgroundColor = new Microsoft.Maps.Color(10, 10,00,100);
                  var borderColor = new Microsoft.Maps.Color(150, 200, 0, 0);
                  //Earth's mean radius in KM is 6371km.
                  var R = 6371, lat1, long1, d, circlePoints = new Array();
                  
                  // var location = new Microsoft.Maps.Location(43.3504, -84.5603);
                  var location = new Microsoft.Maps.Location(42.274260, -83.365717);
    
                  for (var i = 0; i < lats.length; i++)
                  {
                      var loc = new Microsoft.Maps.Location(lats[i], longs[i]);
                      var pin = new Microsoft.Maps.Pushpin(loc, { text: ''+i });
                      //Display circle
                      lat1 = (lats[i] * Math.PI) / 180;
                      long1 = (longs[i] * Math.PI) / 180;
                      var d = parseFloat(Value[i]) / R;
                      for (x = 0; x <= 360; x += 5)
                      {
                          var p2 = new Microsoft.Maps.Location(0, 0);
                          brng = x * Math.PI / 180;
                          p2.latitude = Math.asin(Math.sin(lat1) * Math.cos(d) + Math.cos(lat1) * Math.sin(d) * Math.cos(brng));
                          p2.longitude = ((long1 + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat1), Math.cos(d) - Math.sin(lat1) * Math.sin(p2.latitude))) * 180) / Math.PI;
                          p2.latitude = (p2.latitude * 180) / Math.PI;
                          //circlePoints.push(p2);
                          circlePoints.push(p2);
                          var polygon = new Microsoft.Maps.Polygon(circlePoints, {fillColor:backgroundColor,strokeColor:borderColor,strokeThickness: 1 });
                           map.entities.push(polygon);
                          
                      }
                      circlePoints = [];
                       //var polygon = new Microsoft.Maps.Polyline(circlePoints);
                     // var polygon = new Microsoft.Maps.Polygon(circlePoints, {strokeThickness: 1 })
                     
                       map.entities.push(pin);
                       //map.entities.push(polygon);
    
                  }
    
                  map.setView({ center: location, zoom: 10 });
    
              }
          </script>
         
       </head>
       <body id="body" runat="server">
           <form id="form1" runat="server">
          <div id="mapMap" style=";width:600px; height:600px">  
           <script type="text/javascript">GetMap();
           </script>    
              </div> 
               </form>
       </body>
    </html>

    • Marked as answer by ArDiChPa3 Tuesday, July 22, 2014 2:18 PM
    Friday, July 18, 2014 1:21 PM
  • I am using the data reader in my code behind but any ways finally I am able to display circles the way I wanted to display.

    Thanks for all your help Ricky. I will try to display pie chart push pins some time later when ever I need to.

    Friday, July 18, 2014 1:23 PM