The important code parts are these. You can find the whole code here.
- The raster is read as explained in the reading raster data section
- The raster-marching-squares isolines function is called with the raster data, the geoTransform and an array with the intervals
- For each of the generated lines, a canvas path is drawn. I’ve colored the lines to show how to do it, although the most frequent case is drawing black or dark grey lines over other data
The SVG version is very similar, in this case. You can find the whole code here.
The main change is:
- Of course, the difference is that the line is drawn appending paths to the SVG
Isolines without labels are very difficult to understand. Adding labels is quite difficult, specially using Canvas. Canvas hasn’t got any function to know the position of the path in certain length, nor the angle. That’s why I created the svg-path-properties library, that does exactly that.
You can find the whole code here.
As you can see in the image, the isoline behind each label is erased. But under this label there is a background. This effect is not possible to achieve using Canvas, so a hidden canvas is created, where erasing is not a problem. Once the isolines and labels layer is done, is combined with the background:
- The hidden canvas needs a context, and since the geoPath needs a context too, a new one is createLinearGradient
- Another geoPath, this time without context, is created to be past to the svg-path-properties library
- After drawing the isoline, that’s how the labels are drawing
- We will draw many labels, one each 150 px with the for statement
- If not, sine the isoline can be split in several isolines, some large parts could be unlabeled
- The label is placed and rotated with the translate and rotate methods, as in the arrows and barbs example
- The clearRect method removes the isoline under the label so it can be read easily. Fortunately, Canvas has methods to know the text size, so the amount of space to delete is easy to get
In this case, the code changes a little more, and it’s not as easy as it could seem. The first idea I had was to use the stroke-dashoffset and stroke-dasharray properties of the isolines to create the holes to put the labels in. The problem comes with the paths that aren’t continuous (there can be more than one isoline per value).
So, using the same approach as in the Canvas case, the important code parts are these. You can find the whole code here.
- Creates an SVG mask element with a big white rectangle occupying all the image
- The white zones are the ones to show at 100% of opacity
- The id is important, since it will be used with the lines to hide the label parts
- The isolines are drawn as usual with SVG, but adding the mask attribute
- Note how the id of the mask is used, as in a CSS
- The iteration for each label is done as in the Canvas version
- The text is added in the usual way
- The position only moves the text to make it centered at 0,0
- The transform is used to move and rotate the text at the correct positions (order is important)
- The translate part must be done this way or the rotate doesn’t take the center of the text as the origin, putting the label at random positions
- A black rectangle (opacity = 0) is created with the bounding box of each label and appended to the mask
- This is the part that actually removes the line parts to show the labels properly