Emphasising Information On A Map

Emphasizing something on a printed map is easy – take a marker and circle the location, draw an arrow or pull out your highlighter. However, how can we achieve this emphasis on a digital map? The basic tutorials show us how to add a point, a pushpin, needle etc. But can we do something more with this point? Imagine how an overlaid area can be hard to spot on a map. Of course, one possibility is to use neon colour that really screams ‘look at me’ in combination with a blinking animation! It sounds fun and a lot like the first web pages back in the 90’s. There are better ways though.

Regular Polygons

Since the introduction of the spatial math module we can simply use getRegularPolygon to create a regular polygon. This takes a location, radius, number of points, units and offset.

That is how easy it is to represent a point as a polygon!

If polygons are used to show football fields on a city map they will probably be tiny and hard to see. Might there be another solution?

Pushpins

Can pushpins help in the scenario with football fields? I think they can.  A pushpin will stand out better and be clearer to see. The user can click the pin which will reveal the actual area underneath the pin and this will allow the user to view the field’s borders and other detail. Another cool thing with pushpins is that they can be clustered. With the clustering module it is easy to shine.

Application

I made a theoretical demo application that creates circles from points, cluster the points and it is possible to toggle the circles on and off.  The application uses lots of the power in Bing Maps.

Real World Example

Let’s test if this works as expected in a real world example. Let’s go back to the example with soccer fields – and where else than the capital of the homeland of soccer? To display all soccer fields in London, I used the awesome tool https://overpass-turbo.eu/ to export the fields from Open Street Map. Then I simply used QGIS to visualise them. QGIS has a built in drag and drop feature supporting GeoJson. Soccer fields are usually green, so I coloured them green. The problem is there are many things on the map that are also green. You can imagine the problem on the left image below.

Even plotted with a different border color the soccer fields are not that easy to spot:

Soccer fields are spread over most of London which is not so readily apparent in this image:

When the fields are represented as a point, and in a cluster, they can be seen more clearly on the map. This gives a pretty clear overview of the distribution of soccer fields:

If we zoom in on a particular area, it is easy to click on a pushpin and the actual soccer field is plotted:

The part I really appreciate is that it is not even 100 lines of code to load a GeoJson full with polygons, plot them on a map as clustered pushpins and be able to drill down into the areas they represent. These lines of code haven’t been compacted or optimised! In fact, Bing Maps has a lot of hidden candy in the API.

Code

You can download the code from here.

For an extra layer of detail on PushPin Clustering (pun intended), read Ricky Brundritt’s post “PushPin Clustering in Bing Maps V8” on the Bing Maps blog.

Contact the Grey Matter Maps Licensing specialists with any questions you have about adding location to your app, geocoding, licensing, and more: [email protected] or call +44 (0)1364 655133.