Emphasising Information On A Map
Blog|28 March 2018

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.
Contact Grey Matter
If you have any questions or want some extra information, complete the form below and one of the team will be in touch ASAP. If you have a specific use case, please let us know and we'll help you find the right solution faster.
By submitting this form you are agreeing to our Privacy Policy and Website Terms of Use.
Related News
AdminStudio or InstallShield: Which one is right for you?
When it comes to packaging and deploying your software, streamlining the software preparation process for release is essential for efficiency. Software packaging solutions reduce errors and ensure your users have a positive experience. AdminStudio and InstallShield are two great options...
Accelerate App Development with HERE Technologies’ Professional Services
Explore how HERE’s Professional Services can transform your location data and accelerate your app development cycle.
Dev Conference: Grey Matter X Embarcadero
Wed 7 May 2025 9:00 am - 5:00 pm GMT
The UK Embarcadero dev conference is back Enhance your applications. Get advice from experts. Join us in London this May. We’re excited to be teaming up with Embarcadero again for our 2025 free developer conference. Why you should not miss...
Azure Cost Optimisation: Converting Waste to Value
Wed 26 March 2025 3:30 pm GMT
Stop overspending on Azure. Uncover risks. Gain your competitive edge. Hear from our experts about how to convert waste to value with Azure cost optimisation