1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
---
layout: post
title: Version 2.0 – area highlighting
author: matthew
---
FixMyStreet's report pages for a particular body have always highlighted the
area of the body covered, by fetching the KML shape from the associated MapIt
and plotting it on a map. In version two we have made it look much nicer:
<img src="/assets/posts/area-highlighting-before.jpeg" align="left" style="max-width:49%">
<img src="/assets/posts/area-highlighting-after.jpeg" align="right" style="max-width:49%">
Until now we have coloured in the shape in a light orange, as pictured above
left. This is fine for an overall view of a body, but if you want to zoom in to
a particular area, it makes it quite hard to see the underlying map.
It would be preferable if every part of the map *except* the body's area could
be shaded, highlighting the correct area without losing any clarity from the
part you're interested in, as in the new image above right.
## Polygon make-up
Polygons in KML and other similar formats are made up of multiple linear rings
– the first ring is the polygon's outline, and any subsequent entries are holes
within the polygon. You can therefore 'invert' a polygon by having the outer
ring be something surrounding the polygon, then having the polygon be a hole
within that.
So the way we have implemented this in our new version is to fetch the area
from [MapIt](https://mapit.mysociety.org/), but before plotting it preface it
with a giant rectangle covering the whole world. (Thankfully, any holes within
the original shape are inverted too, though that is implementation dependent
and it would have been a lot harder if they weren't!).
There were a couple of issues along the way. MapIt may return either a polygon
or multiple polygons, so we needed to deal with each differently (we turn
multiple polygons into one polygon, which also thankfully Just Works). And
OpenLayers has a hardcoded maximum pixel co-ordinate for SVG rendering, dating
from [2007 and an issue in Firefox 2](https://github.com/openlayers/ol2/commit/ba5b664a2f34691574e149c8d48ab4deb33c532b).
We hope that any such issues have been fixed by now. We haven't had any reports
of crashes yet, anyway...
|
