Dev: SM: Javascript Polygon Layer

From AAT Wiki
Jump to: navigation, search

Introduction

The Polygon layer allows you to plot a vector-based polygon layer on the maps - the advantage of this, is that as you zoom in and out, the vector shapes will resize and stay looking good. This function uses the free wz_jsgraphics library, available at http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm.

Working Sample

<script type="text/javascript" language="javascript" src="https://www.streetmaps.co.za/wz_jsgraphics_ext.js"></script>
<script language="javascript" src="https://www.streetmaps.co.za/aatutil.js?Key=--YOUR USER Key HERE--"></script>
<script language="javascript" src="https://www.streetmaps.co.za/aatmaps.js?Key=--YOUR USER Key HERE--"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>StreeMaps JavaScript API Example</title>

<script>
	
function displayMap()
{
   // set up the main map window
   myMap = new CAatMap();
   // Define the DIV the map will live in
   myMap.SetOutput("map1");
   // Add a map layer, level 500 (higher is lower down)
   var newlayer = myMap.AddLayer("map",500);
   myMap.Jump(20.833948,-29.793029,5.12);
   
   var poly = myMap.AddLayer("poly",100,"polylayer");
   poly.setStroke(2);
   poly.setColor("#ff0000");
   poly.drawLine(18.341,-34.422,30.936,-29.984);
   poly.drawPolyline(new Array(30.936,31.936,32.936,33.936,34.936), new Array(-29.984,-28.984,-29.984,-28.984,-29.984));
   poly.setColor("#00ff00");
   poly.drawRect(18.341,-34.422,18.341+6,-34.422+6);
   poly.fillRect(19.341,-33.422,18.341+5,-34.422+5);
   poly.setColor("#0000ff");
   poly.drawPolygon( new Array(18,19,20,21,19), new Array(-25,-27,-26,-23,-26) )
   poly.fillPolygon( new Array(28,29,30,31,29), new Array(-25,-27,-26,-23,-26) )
   poly.setColor("#ff00ff");
   poly.fillEllipse(25,-20,26,-23)
   poly.drawEllipse(24,-19,27,-24)
   poly.setColor("#00ffff");
   poly.fillArc(15,-20,18,-23,45,285)
   poly.setColor("#000000");
   poly.setFont("arial","22px",Font.ITALIC_BOLD);
   poly.drawString("Test 01", 23,-25);
   poly.setFont("arial","8px",Font.PLAIN);
   poly.drawStringRect("Test 02 Wrap Test 02 Wrap Test 02 Wrap Test 02 Wrap Test 02 Wrap Test 02 ", 23,-26, 26,"right");
   poly.drawImage("http://www.iol.co.za/feeds/iol/mot_pic4.jpg", 30, -30, 33, -32);

	myMap.Init();
}

</script>

</head>
<body  onload="displayMap();">
  <table width=400 height=500  border=0>
    <tr>
      <td colspan=2> <div style="width:800;height:700;" id="map1" ></div></td>
    </tr>
  </table>
</body>    
</html>

Initializing the layer

You create a new poly layer like so:

var poly = myMap.AddLayer("poly",100,"polylayer");

The parameters here, mean:

"poly" The type of layer, in this case, "poly"
100 This is the order the layer will be drawn in, the lower this number is, the more precedence it will get.
"polylayer" The name of the layer, which you can use to find it programatically later.

Drawing on the Layer

Once the layer is initialised, you may simply start drawing on it. To make things simple, the streetmaps API simply maps straight onto the jsgraphics library (see "Documentation") at the URL http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm. Each of these functions is mapped onto the layer you created, so you simply call them as per the example.

There is only one important difference here, when the jsgraphics library function specify a width and height, the streetmaps version of them must be sent the absolute parameters of the x2, y2 points. For example if you wanted to plot a square at (20,-20) that is 5 degrees wide and high, you'd use (20,-20,25,-25) instead of (20,-20,5,5) - the reason it is done like this, is because with hemispheres changing signs widths and heights becomes ambiguous, especially when they cross hemispheres.

Removing Objects

To remove an object that's on the layer, you can use the .Remove(id) function, where "id" is the return value from an function that added a polygon to the layer. For example:

myPoly = polyLayer.FillEllipse(25,-20,26,-23);
polyLayer.Remove(myPoly);

To remove all the objects on a polygon layer, use

polyLayer.RemoveAll();

Limitations

The streetmaps API imposes no limitations on the jsgraphics library, however the library itself might be subject to some limitations, when it comes to large numbers of polygons, or large polygons. For normal usage it should be fine, though.