A few months ago I wrote about the various aspects of searching for locations in a database. Little did I know, shortly after writing these articles, I would be working with maps again. This time I would be plotting markers on a map. In this article, I take a look at third-party map services, and how to plot locations on a map.

Finding the Right Map Services

I was given the task of generating a dynamic map. The map had to display markers for records in a database.

My first thought was Google Maps. To display a single marker this service is free to use, however there are costs for displaying multiple markers. The key focus of this web application was the map, and the costs would have become too expensive.

I needed a cheaper alternative to Google Maps. My second thought was Open Street Maps (OSM), a community built map. There is an excellent API tool called OpenLayers, which can show a map from Open Street Maps. Open Layers can also plot any markers needed on that map.

Drawing the Map

Using either Google Maps or OpenLayers to place a map on a web page is easily done. Both services also allow controls to be added (with a little CSS know how) and removed from the map.

Adding Markers

It is a little easier to work with Google Maps, but the extra effort required with OpenLayers is worth it. With both services, it is possible to define different marker appearances. In this project, some markers were to be shown in different colours from other markers.

The first step for implementing coloured markers was to put together a map marker as a vector image (SVG). I was working with the Symfony 4 framework, so I saved the SVG file as a Twig template. This template could then be called with a colour parameter, which was passed to the Twig template. I now had one image that could be displayed in any colour.

Another issue to overcome was multiple markers at the same coordinates. Each marker would be on top of the previous and the user would only see the top most marker. A simple solution to this was to keep track of the markers as they were being added to the map. A counter incremented for that marker’s postcode. The counter’s value for the postcode was also used as an offset for the marker. Using this method, all the stacked markers could be seen.

Using Map Services to Convert Addresses to Coordinates

The users could only be expected to enter an address for a marker. The postcode portion of this address would be mandatory.

A database table of all the postcodes in the UK along with their longitude and latitude was used to convert the postcode to a set of coordinates. When a user enters a postcode, it was then looked up in this table and the longitude and latitude saved against the marker’s record.

Reader beware, I implemented a free to use table of postcode data that just included the longitude and latitude, it did not include full address data. There are only a limited number of legitimate sources for full address data and they all charge for usage.

Dealing With Missing Data

Every marker needed to be plotted on the map. The postcode for a marker could be turned into a longitude and latitude (using the database table I mention above). However, I was concerned about markers for newly built properties. The database table was static, it would never receive updates, so new postcodes would not be added to it. This would mean an increasing number of markers would not be able to be assigned a set of coordinates. I needed to utilise a different type of map service. I leveraged a Geocoding API that, for a very small fee, can lookup a postcode and return a longitude and latitude. The value found by the lookup could then be used to update the postcode table. By utilising this method, the number of Geocoding requests could be kept to a minimum.

But what about postcodes that are so new that even the Geocoding API supplier didn’t know about them? This was the final fallback situation, and the solution was to then ask the user to enter details about the location. This still meant the marker could not be plotted on the map, but when such markers existed a banner would be shown at the bottom of the map advising the user that there are unplottable markers. If the user clicked on the banner, they were given a list of all the markers that could not be added to the map.

Summing Up

With careful use of the right map services, it is relatively easy to create an interactive map that users can add markers to.

SAMWare UK creates bespoke solutions and websites. Contact us to arrange a chat to discuss your needs and for a free no obligation quote.