Creating Maps Using Canvas or SVG
This topic compares how to use Canvas and SVG to create interactive maps that can be displayed on a webpage.
- Canvas Code Sample
- Canvas Code Sample Discussion
- Drawing the Map
- Processing the Click Event
- SVG Code Sample
- SVG Code Sample Discussion
- Drawing the Map
- Processing the Click Event
- Comparison Summary
- Related topics
This Canvas code sample uses a standard HTML5 header: <!doctype html>, so that browsers can distinguish it as part of the HTML5 specification.
The <canvas> tag is included in the body. You must specify the width and height. An ID is assigned to the tag so that it can be part of the document object model. You must also specify which function is called when the canvas is clicked.
The <script> portion of the page has two sections; one for drawing the map and the other for processing the click event on the map.
Canvas uses pixels in immediate mode to create the map images. When you begin to draw the map outline of Lake Michigan, the init function is called when the page loads. It draws the map in two steps.
The first step adds the canvas element to the document object model and initializes the drawing context. Then the draw function is called.
The second step is to draw the outline of Lake Michigan on the canvas. This is done by starting at one point and drawing lines to the other points that are defined by a set of x, y coordinates. The makeLake function is called to create a path consisting of moveTo and lineTo methods that outline the lake shape. Then the shape is filled with white and the edge is stroked with blue.
For this sample, Adobe Illustrator CS5 was used to calculate the coordinates. This makes it easy to transfer map shapes to a form that can be used by Canvas. To use this technique, you must load the AI2Canvas plug-in, available from
. First a satellite map of Lake Michigan was loaded into Illustrator, and a new layer was created on top of it. Then the lake was traced by hand. The layer was then exported (without the satellite map) using AI2Canvas to an HTML page. From that HTML document, the data was copied and pasted to this example's makeLake function.
The paintLake function is called when the user clicks the canvas element. An alert box is displayed and the canvas shape is filled with blue. Be aware that this assumes that the last shape created by using closePath has not changed. Each time you create a new path, the old path is no longer the current path. fill and stroke only apply to the current path.
This SVG code sample uses a standard HTML5 header: <!doctype html>, so that browsers can distinguish it as part of the HTML5 specification. Be aware that not all browsers support this aspect of HTML5, where SVG tags are treated as if they are HTML tags. This treatment is called inline SVG.
SVG uses retained mode to create the shape-based map outline. You begin doing this by putting an svg tag in the webpage body. You must also specify the width and height of the SVG drawing container. Then a polygon is embedded inside the SVG container. The polygon has a white fill, a blue stroke, and an ID of lake so it can be included in the document object model. The polygon’s onclick attribute must specify the lakeColor function as the target if the element is clicked. Unlike the Canvas sample, with SVG you can respond to click events on each separate element. A click outside the polygon is not processed
In this sample, Adobe Illustrator CS5 was used to calculate the coordinates for the polygon. First a satellite map of Lake Michigan was loaded into Illustrator and a new layer was created on top of it. Then the lake was traced by hand. The layer was saved as a SVG document. From the SVG document, it was easy to copy and paste the sequence of coordinate to this example's polygon element..
The script section has one function which processes the click event when you click on the lake. The lakeColor function displays an alert message when the lake shape is clicked. It also colors the lake “blue” by changing the polygon attribute.
The main difference between the two code samples discussed here is the way they create images and put them on the screen. SVG’s retained mode graphic display system allows you to create all the map details in HTML-like tags in the body and modify them in script by changing shape attributes. Canvas requires more code to accomplish the same task, because the shapes must be drawn in script and the body only contains the basic Canvas tag. In this example, the fill is done by using the fillStyle method, but if an intermediate shape had been used, the lake shape would have to be redrawn. Also, because Canvas uses immediate mode, the shape cannot be modified as easily as an SVG shape.
In general, SVG can create maps using fewer lines than Canvas. In the code samples used for this comparison, the SVG map code has 40 lines and the Canvas map code has 91 lines. Both technologies are supported by Adobe Illustrator CS5, allowing you to create your map in Illustrator and then copy the data directly into your HTML code.