none
How to convert Polygon WKT to VEShape in JavaScript? RRS feed

  • Question

  • Hi

    I am trying to write JavaScript to convert Polygon WKT to VEShape (mapcontrol v=6.1). I am trying to write the simple code to do this, but I can't make it work. Below I will paste my simple script, if anybody would tell me what I am doing wrong, it would be good for me.

        // The Polygon WKT
        var wkt = 'POLYGON ((12.518405914319676 55.709173951207539, 12.539563178975145 55.707360541320753, 12.541537284689605 55.709681690909221, 12.519650459343469 55.711833466854024, 12.518405914319676 55.709173951207539))';
        // This should store objects like: ['12.518405914319676 55.709173951207539', '12.539563178975145 55.707360541320753']
        var wktCoordinatePairs = [];
        // Shall store WKT coordinate sets that looks like this: ['12.518405914319676', '55.709173951207539']
        var wktCoordinateSets = [];
        // Here we will store objects like: 'VELatLong(55.709173951207539, 12.518405914319676)'
        var veLatLongPoints = new Array();
    
        // Removing 'POLYGON ((' & '))' from WKT.
        wkt = wkt.replace('POLYGON ((', '');
        wkt = wkt.replace('))', '');
    
        // Getting an array of wktCoordinatePairs.
        wktCoordinatePairs = wkt.split(',');
    
        // Iterating through the wktCoordinatePairs
        for (var i = 0; i < wktCoordinatePairs.length; i++) {
    
            // Splitting each of the wktCoordinatePairs into wktCoordinateSets
            wktCoordinateSets = wktCoordinatePairs[i].trim().split(' ');
    
            // Storing the VELatLong point in the veLatLongPoints array.
            veLatLongPoints[veLatLongPoints.length] = new VELatLong(wktCoordinateSets[1], wktCoordinateSets[0]);
        }
    
        // Creating the VEShape polygon.
        var shape = new VEShape(VEShapeType.Polygon, veLatLongPoints);
    


    rune007
    • Moved by Ricky_Brundritt Saturday, March 10, 2012 12:50 PM (From:Bing Maps: Map Control and Web services Development)
    Tuesday, January 17, 2012 10:51 AM

Answers

  • You are passing in string for the coordinates. You need to convert these to numbers using parseFloat.

    Also, just a tip for the array of coordinates, just use the veLatLongPoints.push(value) method rather than the indexing method you are using. It looks cleaner and easier to understand.

    Here is a full working example of your code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html>
       <head>
          <title>Adding a Shape to a 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=6.3"> </script>
          <script type="text/javascript">
          var map = null;
    
          function GetMap()
          {
            map = new VEMap('myMap');
    		map.SetCredentials("YOUR_BING_MAPS_KEY");
            map.LoadMap(new VELatLong(55.709, 12.53),15);
            AddPolygon();
          }
    	  
    	  function AddPolygon(){
    	   // The Polygon WKT
    		var wkt = 'POLYGON ((12.518405914319676 55.709173951207539, 12.539563178975145 55.707360541320753, 12.541537284689605 55.709681690909221, 12.519650459343469 55.711833466854024, 12.518405914319676 55.709173951207539))';
    		// This should store objects like: ['12.518405914319676 55.709173951207539', '12.539563178975145 55.707360541320753']
    		var wktCoordinatePairs = [];
    		// Shall store WKT coordinate sets that looks like this: ['12.518405914319676', '55.709173951207539']
    		var wktCoordinateSets = [];
    		// Here we will store objects like: 'VELatLong(55.709173951207539, 12.518405914319676)'
    		var veLatLongPoints = [];
    
    		// Removing 'POLYGON ((' & '))' from WKT.
    		wkt = wkt.replace('POLYGON ((', '');
    		wkt = wkt.replace('))', '');
    
    		// Getting an array of wktCoordinatePairs.
    		wktCoordinatePairs = wkt.split(',');
    
    		// Iterating through the wktCoordinatePairs
    		for (var i = 0; i < wktCoordinatePairs.length; i++) {
    			// Splitting each of the wktCoordinatePairs into wktCoordinateSets
    			wktCoordinateSets = wktCoordinatePairs[i].trim().split(' ');
    
    			// Storing the VELatLong point in the veLatLongPoints array.
    			veLatLongPoints.push(new VELatLong(parseFloat(wktCoordinateSets[1]), parseFloat(wktCoordinateSets[0])));
    		}
    
    		// Creating the VEShape polygon.
    		var shape = new VEShape(VEShapeType.Polygon, veLatLongPoints);
            map.AddShape(shape);
    	  }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:800px; height:600px;"></div>
       </body>
    </html>
    


    http://rbrundritt.wordpress.com
    • Proposed as answer by Ricky_Brundritt Tuesday, January 17, 2012 11:33 AM
    • Marked as answer by rune007 Tuesday, January 17, 2012 11:48 AM
    Tuesday, January 17, 2012 11:33 AM

All replies

  • You are passing in string for the coordinates. You need to convert these to numbers using parseFloat.

    Also, just a tip for the array of coordinates, just use the veLatLongPoints.push(value) method rather than the indexing method you are using. It looks cleaner and easier to understand.

    Here is a full working example of your code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html>
       <head>
          <title>Adding a Shape to a 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=6.3"> </script>
          <script type="text/javascript">
          var map = null;
    
          function GetMap()
          {
            map = new VEMap('myMap');
    		map.SetCredentials("YOUR_BING_MAPS_KEY");
            map.LoadMap(new VELatLong(55.709, 12.53),15);
            AddPolygon();
          }
    	  
    	  function AddPolygon(){
    	   // The Polygon WKT
    		var wkt = 'POLYGON ((12.518405914319676 55.709173951207539, 12.539563178975145 55.707360541320753, 12.541537284689605 55.709681690909221, 12.519650459343469 55.711833466854024, 12.518405914319676 55.709173951207539))';
    		// This should store objects like: ['12.518405914319676 55.709173951207539', '12.539563178975145 55.707360541320753']
    		var wktCoordinatePairs = [];
    		// Shall store WKT coordinate sets that looks like this: ['12.518405914319676', '55.709173951207539']
    		var wktCoordinateSets = [];
    		// Here we will store objects like: 'VELatLong(55.709173951207539, 12.518405914319676)'
    		var veLatLongPoints = [];
    
    		// Removing 'POLYGON ((' & '))' from WKT.
    		wkt = wkt.replace('POLYGON ((', '');
    		wkt = wkt.replace('))', '');
    
    		// Getting an array of wktCoordinatePairs.
    		wktCoordinatePairs = wkt.split(',');
    
    		// Iterating through the wktCoordinatePairs
    		for (var i = 0; i < wktCoordinatePairs.length; i++) {
    			// Splitting each of the wktCoordinatePairs into wktCoordinateSets
    			wktCoordinateSets = wktCoordinatePairs[i].trim().split(' ');
    
    			// Storing the VELatLong point in the veLatLongPoints array.
    			veLatLongPoints.push(new VELatLong(parseFloat(wktCoordinateSets[1]), parseFloat(wktCoordinateSets[0])));
    		}
    
    		// Creating the VEShape polygon.
    		var shape = new VEShape(VEShapeType.Polygon, veLatLongPoints);
            map.AddShape(shape);
    	  }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:800px; height:600px;"></div>
       </body>
    </html>
    


    http://rbrundritt.wordpress.com
    • Proposed as answer by Ricky_Brundritt Tuesday, January 17, 2012 11:33 AM
    • Marked as answer by rune007 Tuesday, January 17, 2012 11:48 AM
    Tuesday, January 17, 2012 11:33 AM
  • Great Mr. Richard_Brundritt, now I can move on :-)
    rune007
    Tuesday, January 17, 2012 11:48 AM