infoware mapsuite Javascript API - Company for Mapping, Routing, GPS-Navigation, Tracking and Telematics solutions

« Previous Chapter 9: Multi-Language Support Back to Index Next Chapter 11: SelectionAPI »

Chapter 10: Drawing with SVG and VM

All modern desktop browsers have buildin support for vector graphics. Internet Explorer versions up to 8 use VML (Vector Markup Language), all other browsers and newer Internet Explorer versions use SVG (Scalable Vector Graphics). Both formats are XML based and have similar features, but are not compatible.

To support vector cross-browser graphics in your map application, the API provides the classes IWGraphicsRenderer and IWMapRenderer. An IWGraphicsRenderer uses a HTML container like a div as a canvas and is pixel based. You could use it to draw a circle at position (100, 50) with a radius of 100px. However, map applications often are used to draw polygons, lines, circles etc. in the map.

Let's assume you want to display a circle with a radius of 2 km at a specified coordinate. This is what the IWMapRenderer was designed for: You specify polygon points by coordinates and radiuses in kilometers. Everything else like projecting these coordinates to the map and repositioning after moving and zooming the map is handled by the IWMapRenderer.

The first part of this chapter shows how to use an IWGraphicsRenderer without a map and shows the basics like lines, circles and so on. The second part explains how to use an IWMapRenderer to visualize e.g. polylines with your favourite bike tours on a map.

11.1 Creating a graphic renderer

To get started, you just have to create a new IWGraphics object. This returns a renderer suitable for your browser (SVG if supported, otherwise VML). The constructor of the graphics class requires a DIV container as parameter. This container tells the graphic renderer where it has to draw the elements on the screen.

IWGraphics is part of the "graphics" module. You need to call IWLoader.loadModules(['controls', 'graphics']);

10.2 Basis shapes

First of all, VML and SVG are both very powerful and provide a set of different shapes. Our graphic renderer supports only the basis shapes. The reason for this is, that it is very difficult to implement a common interface to support all VML and SVG shapes and properties at the same time. The following shapes are supported by our renderer:

LINE
CIRCLE
ELLIPSE
RECTANGLE
ROUNDED RECTANGLE
POLYLINE
POLYGON
COMPLEX POLYGON
TEXT

11.2.1 Draw a line

The following example uses the drawLine method from the graphics object to draw the four lines below. The first and second parameter define the start and end point of the line. The other both parameters specify the width of the line and its color.

Example 11a:

var renderer = new IWGraphics(document.getElementById('drawLineContainer'));	
renderer.drawLine(new IWPoint(0, 10), new IWPoint(500, 10), 1, '#000000');			
renderer.drawLine(new IWPoint(0, 15), new IWPoint(500, 15), 3, '#FF0000');
renderer.drawLine(new IWPoint(0, 23), new IWPoint(500, 23), 5, '#00FF00');
renderer.drawLine(new IWPoint(0, 32), new IWPoint(500, 32), 7, '#0000FF');

11.2.2 Draw a circle

The following example uses the drawCircle method from the graphics object to draw some circles. The first parameter defines the center and the second parameter the radius of the circle. The other parameters specify the width and the color of the outer line and the color of the inner circle.

Example 11b:

var renderer = new IWGraphics(document.getElementById('drawCircleContainer'));	
renderer.drawCircle(new IWPoint( 25, 45), 20, 1, '#000000', '#0000FF');			
renderer.drawCircle(new IWPoint( 85, 50), 10, 1, '#000000', '#00FF00');
renderer.drawCircle(new IWPoint(145, 50), 40, 1, '#000000', '#FF0000');
renderer.drawCircle(new IWPoint(225, 50), 30, 1, '#000000', '#00FF00');

11.2.3 Draw an ellipse

The following example uses the drawEllipse method from the graphics object to draw the ellipses below. The first parameter specifies the center of the ellipse and the second the x and y expansion. The last parameters specify the border width and the fill and line color of the ellipse.

Example 11c:

var renderer = new IWGraphics(document.getElementById('drawEllipseContainer'));	
renderer.drawEllipse(new IWPoint( 25, 45), new IWSize(20, 15), 1, '#000000', '#0000FF');			
renderer.drawEllipse(new IWPoint( 85, 50), new IWSize(20, 10), 1, '#000000', '#00FF00');
renderer.drawEllipse(new IWPoint(145, 50), new IWSize(20, 40), 1, '#000000', '#FF0000');
renderer.drawEllipse(new IWPoint(225, 50), new IWSize(30, 40), 1, '#000000', '#00FF00');

11.2.4 Draw a rectangle

The following example uses the drawRectangle method from the graphics object to draw some rectangles. The first parameter specifies the upper left corner of the rectangle. The second parameter defines the size of the rectangle. You can set the with of the line, the line- and fill color by setting the last three parameters.

Example 11d:

var renderer = new IWGraphics(document.getElementById('drawRectangleContainer'));	
renderer.drawRectangle(new IWPoint(  0, 25), new IWSize( 40, 40), 1, '#000000', '#0000FF');			
renderer.drawRectangle(new IWPoint( 60, 15), new IWSize( 20, 60), 1, '#000000', '#00FF00');
renderer.drawRectangle(new IWPoint(100, 35), new IWSize(100, 20), 1, '#000000', '#FF0000');
renderer.drawRectangle(new IWPoint(220, 25), new IWSize( 40, 50), 1, '#000000', '#00FF00');

11.2.5 Draw a rounded rectangle

The following example uses the drawRoundedRectangle method from the graphics object to draw some rounded rectangles. The first parameter specifies the upper left corner of the rectangle. The next parameters define the radius of the edges and the size of the rectangle. You can set the with of the line, the line- and fill color by setting the last parameters.

Example 11e:

var renderer = new IWGraphics(document.getElementById('drawRoundedRectangleContainer'));	
renderer.drawRoundedRectangle(new IWPoint(  0, 25),  5, new IWSize( 40, 40), 1, '#000000', '#0000FF');			
renderer.drawRoundedRectangle(new IWPoint( 60, 15),  5, new IWSize( 20, 60), 1, '#000000', '#00FF00');
renderer.drawRoundedRectangle(new IWPoint(100, 35), 10, new IWSize(100, 20), 1, '#000000', '#FF0000');
renderer.drawRoundedRectangle(new IWPoint(220, 25), 10, new IWSize( 40, 50), 1, '#000000', '#00FF00');

11.2.6 Draw a polyline

Now we use the drawPolyline method from the graphics object to draw our polylines. The first parameter specifies the points of the line. The points are given as a formatted string, where each point is separated with a whitespace. The last two parameters set the width and the line color.

Example 11f:

var renderer = new IWGraphics(document.getElementById('drawPolylineContainer'));	
renderer.drawPolyline('10,10 20,20 30,10 40,20 50,10 60,20 70,10 80,20', 6, '#0000FF');			
renderer.drawPolyline('10,40 20,50 30,40 40,50 50,40 60,50 70,40 80,50', 4, '#00FF00');
renderer.drawPolyline('10,70 20,80 30,70 40,80 50,70 60,80 70,70 80,80', 2, '#FF0000');
renderer.drawPolyline('100,10 140,10 140,90 180,90 180,10 220,10 220,90 260,90 260,10 300,10 300,90 340,90 340,10 380,10', 10, '#00FF00');

11.2.7 Draw a polygon

Now we use the drawPolygon method from the graphics object to draw our polygons. The first parameter specifies the points for the line. The points are given as a formated string, where each point is separated with a whitespace. The last three parameters set the width, the line color and the fill color.

Example 11g:

var renderer = new IWGraphics(document.getElementById('drawPolygonContainer'));	
renderer.drawPolygon('10,10 70,70 10,70 70,10', 1, '#000000', '#0000FF');			
renderer.drawPolygon('110,10 170,10 170,70 110,70', 1, '#000000', '#00FF00');
renderer.drawPolygon('210,70 250,10 290,70', 1, '#000000', '#FF0000');
renderer.drawPolygon('320,30 360,30 360,10 390,40 360,70 360,50, 320,50', 1, '#000000', '#0000FF');

11.2.8 Draw complex polygons using paths

In case your geometry has holes in it you can't use a simple polygon but need a path (SVG renderer only). Here are some examples showing how to render paths using drawPath, for more details see http://www.w3.org/TR/SVG/paths.html.

Example 11h:

var renderer = new IWGraphics(document.getElementById('drawPathContainer'));
			
var attributes = {
	fill: 'orange',
	strokeWidth: 0,
	fillRule: 'evenodd'
};

// example 1: simple shape
var path = 'M 0 50 L 0 150 50 200 150 200 200 150 200 50 150 0 50 0 Z M 50 50 L 50 150 150 150 150 50 Z';
renderer.drawPath(path, null, null, null, '', attributes);

// example 2: polygon of Berlin, could be rendered using a polygon, too
var offsetsBerlin = '1 -1 3 -1 1 0 1 -1 0 1 -1 0 0 1 0 1 0 2 0 1 -1 2 0 1 1 0 0 1 1 0 0 1 1 0 0 1 1 1 1 0 1 1 1 0 0 1 1 0 1 0 0 1 1 0 1 1 -1 0 0 1 0 1 0 -1 1 0 1 0 0 1 2 -1 1 -1 1 1 0 1 1 0 0 3 0 1 -1 0 0 1 0 2 -1 3 0 1 -1 0 0 1 -2 0 0 1 -1 0 -1 0 0 1 -1 0 0 1 0 1 0 2 0 1 -1 0 0 1 -1 2 0 1 0 1 -1 1 0 1 0 2 -1 1 1 0 1 1 0 1 1 1 0 1 1 2 0 1 1 3 2 -1 2 0 1 0 1 0 1 0 2 0 1 1 2 1 1 0 1 0 1 1 1 0 1 0 1 1 1 0 0 1 1 1 1 0 1 1 1 0 1 1 0 1 1 0 0 1 1 1 0 1 1 1 0 1 1 0 1 0 1 0 1 0 0 1 0 1 1 0 1 0 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 1 1 0 1 1 1 0 1 0 1 0 1 -1 1 0 1 1 0 1 0 1 0 1 1 1 0 1 0 2 1 2 0 1 0 0 1 1 0 2 0 1 1 1 0 1 0 1 0 1 0 1 0 1 0 1 1 1 0 0 1 -1 1 0 1 -1 0 -1 0 -1 0 -2 0 0 1 1 0 0 1 0 1 -1 0 0 1 1 0 0 1 0 1 1 0 1 -1 1 0 2 0 1 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 1 0 1 -1 0 -2 1 -1 1 -1 1 -1 1 -1 0 0 1 -1 1 -1 1 -1 0 0 1 -1 1 0 1 -1 1 0 1 0 1 -1 0 0 1 0 1 -1 3 0 1 0 1 -1 1 0 1 1 0 1 1 0 1 -1 1 0 1 -1 0 0 1 -2 1 0 1 -1 1 -1 2 0 1 0 1 -1 1 0 1 1 0 1 0 -1 0 0 1 -1 1 0 1 -1 0 1 0 1 1 0 -1 1 0 1 0 1 0 0 1 0 1 0 1 1 0 -1 -1 1 0 0 -1 0 -1 0 -2 1 0 1 0 1 -1 1 0 1 -1 1 0 1 -1 1 0 0 -1 1 0 1 0 1 0 0 1 1 0 1 0 1 1 1 0 0 1 1 0 0 1 1 0 1 0 1 0 1 0 1 1 1 1 1 0 0 1 1 0 0 1 1 0 0 1 1 0 0 1 1 0 1 0 1 0 1 0 1 1 1 0 0 1 1 2 0 1 0 1 0 1 0 1 1 0 1 0 1 0 0 -1 0 -1 0 -1 0 -1 -1 0 0 -1 0 -1 0 -1 -1 -2 -1 -1 1 0 1 0 0 1 1 0 0 1 1 0 1 1 1 1 1 0 1 0 0 1 2 3 1 1 1 1 1 2 1 1 1 0 1 0 1 0 1 0 0 1 1 0 1 0 1 0 1 0 1 1 1 0 1 0 0 1 1 0 -1 1 0 1 1 0 0 1 -1 3 1 0 1 0 1 0 -1 1 -1 0 -1 0 0 -1 0 -1 1 -1 0 -1 -3 0 -2 2 -1 1 0 1 0 1 0 1 0 1 -1 0 -1 -1 0 1 -1 0 -2 -1 -1 0 -1 -1 -1 -1 -1 0 1 0 0 1 1 0 1 1 1 0 1 1 1 0 1 0 0 1 0 1 0 1 1 0 0 1 -1 0 -1 0 0 2 -1 0 0 1 -1 0 0 1 0 1 -1 0 1 0 0 1 -1 0 0 1 0 1 0 1 1 1 0 1 1 0 0 1 1 0 0 1 1 1 0 1 -1 0 -1 0 0 1 0 1 0 1 -1 1 0 1 -1 0 -1 0 -1 0 -1 0 0 1 -1 0 0 -1 -1 0 -1 0 -1 0 0 1 -1 0 0 1 -1 0 0 1 -1 0 -1 0 0 1 -1 0 -1 1 0 1 -1 0 0 -1 -1 1 0 1 0 1 -1 0 0 1 -1 0 0 1 -1 0 0 1 0 -1 -1 0 0 1 0 1 1 0 1 0 1 1 1 0 1 0 -1 3 1 0 1 0 0 1 -1 1 0 1 -1 1 0 1 -1 0 0 1 0 1 -1 0 0 1 0 -1 -1 0 -1 0 -1 -1 -1 0 -1 0 -1 0 0 1 -1 0 -1 1 -1 0 0 1 -1 0 0 1 -1 0 0 1 0 1 0 1 0 1 -1 0 0 1 -1 0 0 1 0 1 -1 1 -1 0 0 1 0 1 -1 1 0 1 -1 1 0 1 0 1 -1 0 0 1 0 1 0 1 -1 0 0 1 -1 -1 -1 0 0 -1 -1 0 0 -1 -1 0 -1 -1 0 -1 0 -1 -1 0 0 -1 1 -1 0 -1 0 -1 0 -1 0 -3 0 -1 0 -1 1 0 0 -1 1 -1 1 -1 0 -1 1 0 0 -1 0 -1 0 -1 0 -1 -1 0 -1 0 0 -1 1 0 0 -1 -1 -2 0 -1 -1 0 -2 1 -1 0 0 -1 -1 0 0 -2 -1 -1 -1 1 -1 0 -1 1 -1 0 0 1 -1 0 -1 1 -1 0 -1 1 -1 0 0 1 -1 0 0 -1 0 -1 0 -1 0 -1 0 -1 -1 -1 0 -1 -1 0 0 -1 -1 0 0 -1 -1 0 -1 -1 0 -1 0 -1 0 -2 -1 -1 -1 0 0 1 -1 0 -1 1 -2 0 -2 1 -1 0 -2 0 0 1 -1 0 -1 0 -1 0 -1 0 -1 0 -1 0 -2 0 -1 0 -2 0 -4 0 -1 -2 1 -1 0 -1 0 -1 0 -1 0 -1 1 0 0 -1 0 -1 -1 1 -1 0 0 1 -1 0 -1 0 0 1 0 -1 -1 0 -1 -1 -1 0 -1 -1 -1 0 0 -1 -1 0 0 1 -1 0 -1 0 -2 1 -2 0 -1 0 -1 0 0 1 -1 0 -1 0 -1 0 -1 0 -1 1 -1 0 -1 0 -1 1 0 -3 -1 -1 0 -1 0 -1 -1 -2 -1 -2 0 -1 0 -1 -1 -1 0 -1 -1 -2 0 -1 0 -1 -1 0 -1 0 0 -1 -2 1 -1 0 -1 1 -1 0 -1 1 -1 0 -1 0 0 1 -1 0 -1 0 0 1 -1 0 -3 1 -1 1 -1 0 -1 0 -1 1 -1 0 -1 0 0 1 0 1 0 1 0 1 0 1 1 1 0 1 0 1 1 1 0 1 0 1 1 3 0 1 0 1 1 2 -1 0 0 1 -1 2 0 1 0 1 -1 1 0 1 -1 0 -1 0 -2 0 0 -1 -1 1 -1 0 -1 -1 -1 0 -1 0 -1 0 -3 0 -2 0 0 -1 0 -1 0 -1 0 -1 0 -1 0 -1 0 -1 0 -1 -1 0 -1 0 -1 0 -1 0 -1 0 -1 0 -2 0 1 -4 -1 -1 -1 0 -1 0 0 -1 -1 0 -1 -1 -1 0 0 -1 -1 0 -1 -1 0 -1 -1 0 0 -1 -1 0 -1 -1 0 -1 -2 -1 0 -2 0 -1 0 1 -3 1 -1 1 -1 0 -2 1 0 1 -2 1 -2 1 -1 1 -1 0 0 1 -1 0 -1 -2 0 -1 -1 0 0 -1 -1 -1 0 -1 -1 -1 -1 -1 0 -1 -1 0 -1 -2 1 0 0 -1 -1 1 -1 0 -1 1 -1 1 -1 1 -1 1 -1 1 -2 1 -1 1 -1 0 -1 1 -1 0 -1 -1 -1 0 -1 -1 -1 0 -1 0 -1 0 -1 0 -1 1 0 -1 0 -1 -1 0 0 -1 0 -2 0 -2 0 -1 0 -1 0 -1 -1 -1 0 -1 -1 0 -1 0 -1 1 -1 0 -1 0 -1 0 -1 0 -1 0 -1 0 0 -1 -1 1 -1 0 -1 1 -1 0 -1 0 0 1 -1 0 -1 1 -1 0 -1 0 -2 0 -1 0 -1 0 -1 1 -4 2 -1 1 -1 1 -3 1 -1 0 -2 2 -3 2 0 2 -1 0 0 1 0 1 1 0 4 0 1 -1 0 1 0 1 -1 1 -3 0 -1 0 -2 0 -1 -1 -2 0 -1 0 -1 0 0 -1 -1 0 1 0 -1 0 -1 1 -1 0 0 1 -1 1 -1 0 -1 1 0 1 1 1 0 1 -1 0 -1 -1 -1 -1 0 -1 1 0 1 0 0 1 0 -1 1 -1 0 -1 2 -1 0 -1 -1 0 1 -1 -1 0 -1 -1 0 1 -2 1 -1 0 -1 0 -1 -1 -1 -1 0 -1 -1 0 0 -1 -1 0 -1 -1 -1 0 0 -1 0 -1 -1 0 0 -1 0 -1 -1 0 1 0 1 0 0 -1 1 0 -1 -1 0 -1 -1 0 -1 0 0 1 0 1 0 1 0 -1 -1 1 0 -1 -1 0 0 -1 0 -1 -1 0 -1 0 0 1 1 1 -1 0 0 1 -1 -1 -1 0 0 -1 -1 0 0 -1 -1 -5 3 -1 1 0 0 -1 0 -1 1 0 0 -1 1 0 0 1 1 0 1 0 0 -1 1 -1 2 -2 0 -1 0 -1 1 0 0 -1 1 -2 1 0 1 -1 1 -1 0 -1 -1 -1 -1 -1 0 -1 -1 0 0 -1 -1 0 -1 -1 1 0 -1 -1 -1 -1 -1 0 1 -1 0 -1 1 0 0 -1 0 -2 0 -1 -1 -1 0 -2 0 -1 0 -1 0 -1 1 -1 0 -1 1 -2 1 0 0 -1 0 -1 0 -2 1 0 2 0 1 -1 1 0 1 -1 0 -1 1 -1 0 -1 1 -1 1 -1 1 -2 2 -1 1 -2 1 -1 0 -1 1 0 1 -1 0 -1 1 0 0 -1 1 0 0 -1 1 -1 2 -1 0 -1 1 -1 0 -1 1 0 -1 0 -1 -1 -1 0 0 -1 -1 0 0 -1 -1 0 -1 0 -1 -1 -1 0 0 -1 -1 0 0 -1 -1 0 -1 0 0 -1 -1 0 0 -1 0 1 -1 0 -1 0 -1 0 -1 0 0 1 -1 0 -1 0 -1 0 -1 0 -2 0 -1 0 0 -1 0 -1 1 0 0 -1 0 -1 0 -1 0 -1 0 -1 0 -1 0 -1 0 -1 0 -1 1 -1 0 -1 1 -1 0 -1 0 -1 1 -3 -1 0 1 -1 0 -1 0 -2 1 -1 0 -1 0 -2 1 0 0 -1 1 1 1 1 1 0 0 1 1 0 1 0 1 0 0 -1 1 0 0 -1 0 -1 0 -1 0 -1 0 -1 0 -1 0 -2 1 -1 0 -1 1 0 0 -1 0 -1 0 -1 1 0 0 -1 0 -1 0 -1 0 -1 0 -1 0 -1 0 -1 -1 0 0 -1 0 -1 -1 0 -1 0 -1 1 -1 0 -1 1 -1 0 -1 0 -1 1 -1 -1 0 -1 0 -1 -1 0 0 -2 0 -1 1 0 1 0 1 0 1 -1 1 0 2 -1 1 0 1 -1 1 -2 1 -1 1 -1 1 0 1 -1 1 0 1 0 1 0 0 1 1 0 1 1 1 0 1 0 1 0 0 1 1 0 1 0 1 1 1 0 0 1 1 0 1 1 1 0 1 0 1 1 1 0 1 0 0 1 1 0 1 1 1 0 1 0 1 0 1 0 0 -1 1 -1 0 -1 0 -1 0 -1 -1 0 0 -1 -1 0 0 -1 -1 0 0 -1 -1 0 0 -1 -1 0 0 -1 -1 -1 0 -1 -1 -1 -1 -1 0 -1 0 -1 1 0 1 0 0 -1 1 0 0 -1 1 -1 1 -3 1 -1 0 -1 1 -1 1 -1 1 -2 0 -1 0 -1 0 -1 1 0 1 0 1 1 1 0 1 0 1 -1 2 0 1 0 1 0 1 1 1 0 1 0 1 0 1 0 1 0 0 -1 1 0 1 1 1 0 0 -1 0 -1 0 -1 1 -1 0 -1 0 -1 -1 -1 0 -1 -1 -1 0 -1 2 0 2 1 1 0 1 -1 1 0 2 0 1 0 0 -4 0 -1 0 -1 0 -1 0 -1 0 -1 -1 0 0 -1 0 -2 0 -1 0 -2 1 0 0 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 1 0 0 1 1 0 -3 1 0 1 -2 1 1 0 0 1 0 1 2 2 0 1 1 2 0 1 0 1 0 1 -1 0 0 1 0 1 1 1 0 1 0 1 0 1 1 0 -1 0 0 1 1 0 -1 0 0 1 -1 0 -1 0 -1 0 0 1 1 0 1 0 0 -1 1 0 1 0 1 0 1 0 0 1 1 0 1 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 0 1 1 0 1 0 1 0 1 0 1 -1 1 0 2 0 0 1 1 0 1 0 0 -1 0 1 1 0 1 -1 1 0 0 -1 0 1 1 0 0 -1 1 0 1 0 0 -1 1 0 1 -1 1 0 0 -1 0 -1 0 -1 1 0 0 -1 1 0 0 -1 1 0 -1 -1 1 0 1 0 1 0 0 -1 1 0 0 -1 0 -1 0 -1 0 -1 1 0 0 -1 0 -1 1 0 0 -1 1 0 0 -1 1 0 0 1 0 1 1 0 1 1 1 1 1 0 0 1 0 -1 1 0 1 0 0 1 1 0 0 1 1 1 1 1 2 1 0 1 1 -1 1 0 0 -1 2 0 1 0 0 -1 -1 0 0 -1 0 -1 0 -1 0 -1 1 0 1 0 1 0 0 -2 1 -1 1 0 1 0 0 -1 1 0 1 0 1 0 0 1 2 0 1 0 1 0 0 -1 1 0 0 -1 1 0 1 0 1 0 0 -1 1 0 0 -1 0 -1 -1 -1 -1 0 -3 0 -1 -1 -1 -1 -1 -1 -1 0 -1 -1 1 -1 1 0 1 -2 1 -1 0 -1 3 1 1 -2 1 0 0 -1 1 -1 1 -1 1 1 -1 2 0 2 0 1';
var pathBerlin = 'M 400 10 l ' + offsetsBerlin + 'Z';
renderer.drawPath(pathBerlin, null, null, null, '', attributes);

// example 3: Berlin cut out of a box
var pathBerlinOutline = 'M 550 0 l 300 0 0 250 -300 0 Z M 723 10 l ' + offsetsBerlin;
renderer.drawPath(pathBerlinOutline, null, null, null, '', attributes);

11.2.9 Draw a text

Now we use the drawText method from the graphics object to draw a text. The first parameter specifies the point where to render the text, the second is the text itself. The other parameters, a CSS class name and an object with CSS attributes, can be used to control the text rendering.

Example 11i:

var renderer = new IWGraphics(document.getElementById('drawTextContainer'));	
renderer.drawText(new IWPoint(120, 20), 'Hello', null, { fill: 'red', fontFamily: 'monospace' });
renderer.drawText(new IWPoint(140, 40), 'World', null, { fill: 'green', fontWeight: 'bold', textDecoration: 'underline' });

10.3 Working with SVG and VML

Before the graphic objects are drawn, they are applied to the DOM. Each drawing method returns a graphic object which can be used e.g. to catch DOM events. So, they can be handled as normal DOM nodes. The returned objects are platform dependent graphic objects. These means, that you receive a VML node if you are using the Internet Explorer otherwise you get a SVG node. The example below shows graphic objects, which can be dragged around. In this case we can not use the IWDraggable interface, because the graphic object does not support the CSS attributes style.left and style.top for positioning the element. We have to call the move method of the renderer by ourself. Just take the graphics and move them around to see how the example works.

We set the transparency of each circle to 75 percent and we use a pointer as cursor to demonstrate that you can also use common style attributes.

Example 10j:

Source code example 10j:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>infoware mapsuite Javascript API - Chapter 11: Drawing with SVG and VML</title>
		
		<script type="text/javascript" src="http://iw.mapandroute.de/MapAPI-1.1/js/core.js?vnr=0&pnr=0"></script>
		
		<script type="text/javascript">

			var onMouseMoveListener = null;
			var onMouseUpListener = null;	
			var mouseAdapter = new IWMouseAdapter();
			var colors = new Array('#FF0000', '#00FF00', '#0000FF');

			function init() 
			{
				IWEventManager.addListener(IWLoader, 'onmoduleload', function(event)
				{
					if (event.name == 'graphics')
					{
						//Gets the drawing and dragging container.
						var drawContainer = document.getElementById('drawContainer');
						
						//Creates a graphic renderer with the specified drawing container.
						var renderer = new IWGraphics(drawContainer);
						
						for (var i=0; i < 5; i++)
						{
							var width = iw.random(10, 50);
							var point = new IWPoint(iw.random(0, 500), iw.random(0, 350));				
							var size = new IWSize(width, width);
								
							var myEllipse = renderer.drawEllipse(point, size, 1, '#000000', colors[iw.random(0,2)]);
							myEllipse.style.cursor = 'pointer';
							myEllipse.style.opacity = '0.75';
							myEllipse.style.filter = 'alpha(opacity=75)';
			
							//start dragging on mouse down
							IWEventManager.addDomListener(myEllipse, 'onmousedown', function(event) { 
								startDragging(this, event); 
							}.iwclosure(myEllipse)); 
						}	
						
						//Prepares the graphic object for dragging.
						function startDragging(object, event)
						{
							iw.noPropagation(event);
							
							IWEventManager.removeListener(onMouseUpListener);
			
							onMouseMoveListener = IWEventManager.addDomListener(drawContainer, 'onmousemove', function(event) { 
								drag(object, event);
							});
							
							onMouseUpListener = IWEventManager.addDomListener(drawContainer, 'onmouseup', function(event) { 
								stopDragging(event); 
							});
						}	
			
						//Drags the graphic object to its new position.
						function drag(object, event)
						{
							iw.noPropagation(event);
							
							var mouseEvent = mouseAdapter.toMouseEvent(event, drawContainer);
							//bring dragging object to front
							renderer.moveToTop(object);
							//move object
							renderer.move(object, mouseEvent.position);
						}
			
						//Releases the mousemove listener to stop dragging.
						function stopDragging(event)
						{				
							iw.noPropagation(event);
							IWEventManager.removeListener(onMouseMoveListener);
						}	
					}
				});
				IWLoader.loadModules(['graphics']);
			}
		</script>		
		
	</head>
	
	<body onload="init();" class="tutorial">
		<div id="drawContainer" style="position: relative; width: 500px; height:350px; border: 1px solid black"></div>
	</body>
</html>

11.4 Drawing on the map

The previous examples demonstrate how to use IWGraphics renderers to create vector graphics in containers. It is possible to use these renderers to draw on a map, but with several drawbacks: Imagine you have a set of coordinates (e.g. in WGS 84) which should be drawn as a polygon or polyline. To render this coordinates you have to project them to screen pixels first. Every time the map is moved the projected coordinates move as well, and after a map zoom the projection has to be done once again.

As mentioned above the class IWMapRenderer takes the coordinates in WGS 84 or Mercator and does the projection every time it is required (i.e. the map is moved, zoomed or resized). The following example shows how to render a polygon from an array of coordinates.

Drawing example 10k

Source code example 10k:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>infoware mapsuite Javascript API - Chapter 11: Drawing with SVG and VML</title>
		<script type="text/javascript" src="http://iw.mapandroute.de/MapAPI-1.1/js/core.js?vnr=0&pnr=0"></script>
		
		<script type="text/javascript">
			
			var coords = [...];
			var coordsPolyline = [...];
				
			function init() 
			{
				map = new IWMap(document.getElementById('map'));
				var bounds = new IWBounds(coords);
				map.setCenter(bounds.getCenter(), map.getBoundsZoomlevel(bounds));
				
				IWEventManager.addListener(IWLoader, 'onmoduleload', function(event)
				{
					if (event.name == 'graphics')
					{
						var attributes = {
							//some style attributes	
						};
						
						var renderer = new IWMapRenderer(map);
						
						renderer.drawPolygon(coords, attributes);
						renderer.drawText(bounds.getCenter(), 'a polygon', { fill: 'white' });
						
						renderer.drawPolyline(coordsPolyline, { stroke: 'red', strokeWidth: 5});
						renderer.drawText(coordsPolyline[1], 'a polyline', { fill: 'white' }, { fill: 'red', strokeWidth: 0});
						
						renderer.render();
					}
				});
				
				IWLoader.loadModules(['graphics']);
			}
			
			</script>
	</head>
	
	<body onload="init();" class="tutorial">
		<div id="map" style="width: 450px; height: 300px;"></div>
	</body>
</html>

« Previous Chapter 9: Multi-Language Support Back to Index Next Chapter 11: SelectionAPI »