diff options
Diffstat (limited to 'docs/_posts/2016-12-08-v2.0-area-highlighting.md')
| -rw-r--r-- | docs/_posts/2016-12-08-v2.0-area-highlighting.md | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/docs/_posts/2016-12-08-v2.0-area-highlighting.md b/docs/_posts/2016-12-08-v2.0-area-highlighting.md new file mode 100644 index 000000000..5cd424fbd --- /dev/null +++ b/docs/_posts/2016-12-08-v2.0-area-highlighting.md @@ -0,0 +1,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... |