11.07.2022 - Read in 7 min.
Supercharge your business operations with custom web mapping solutions based on OSM
11.07.2022 - Read in 7 min.
When you can't find a GIS software that fits your needs, you turn to developing your custom web mapping tools. Here's how to do that using OpenStreetMap.
When developing a location-based app, you usually have at least a basic idea of exactly what kind of location-based services you’re going to use and then select your tooling accordingly. Now, what happens when your product starts growing and rather sooner than later, you start thinking about adding features to one-up your competitors? After all, unique functionalities can be a great strategy for your customer acquisition process.
You do an extensive research and see that none of the products available on the market offer what you need out-of-the-box, so you turn your attention to developing your own custom web mapping solution.
Creating custom maps using open-source geospatial data
The decision to build your own dynamic web maps means you have access to geospatial data. It can come from paid third-party companies, web mapping platforms like Google Maps or Mapbox, or, if you don’t want to get dependent on pricy tools, you can opt for open-source spatial data. OpenStreetMap being the most prominent option as of now.
OSM data in itself is just a database. You can do spatial analysis, run spatial queries, but it’s still far from being a simple map, let alone an interactive web map. In order to create a unique product feature, you need to create a custom map.
What is a custom map?
A custom map is a visual representation of geographic data consisting of a basemap layer, usually just terrain without any labels or detailed information, and a number of feature layers, or in other words, data layers that enrich our map with additional geographic information: country borders, roads, points of interest, speed limits etc.
Basically, a custom map is any map that consists of custom datasets projected onto a map.
The duality of frontend and backend of custom interactive maps
It’s very important to understand that while maps are visual, feature layers don’t have to be. There are situations when interactive maps are enhanced with a number of custom data layers and only part of them are meant to be seen on the frontend.
To give you a simple example: let’s say you’re DHL and you want to develop a route optimization tool for your delivery drivers, so they waste less fuel by simply avoiding elevated routes when they are not necessary.
To achieve the following, you need to add elevation data to your geospatial data in correlation with geographic coordinates of each and every road. You then feed said data to the respective algorithms, and they calculate routes accordingly. You could also visualize said elevation on the map drivers use for navigation, but such information wouldn’t be of much use to them.
Benefits of using OSM data for custom web mapping
When utilizing OpenStreetMap data for building your own interactive web maps, you are bound to reap the benefits of its open-source nature:
- It’s free, meaning you don’t have to pay anything for using their geospatial data. Platforms like Google Maps, although well known on a B2C market, can cost you as much as $420 000 per month, which we had a chance to learn from our own experience when developing Trans.eu.
- It’s fairly accurate and constantly updated, which means you don’t have to worry too much about building a product based on outdated data. Although, you need to keep in mind that since OSM is open-source in its nature, people can influence the geodata. Whether their intentions are malice or a simple lack of required knowledge is at place is not for me to judge. Thankfully, you can monitor the quality of your OSM data and mitigate most of the risks.
- Backed by a large community and industry titans. If you’re not familiar with an open-source licensing, in general, such projects, especially as big as OpenStreetMap, gather abnormal communities around them. They make sure the project both grows and delivers exceptional quality of service to those who depend on it. Mapbox and Carto, amongst other big players, rely on OSM data and wouldn’t want it to fail either.
- Unlimited customizability. Because OSM allows you to access data in its raw format, AND they give you a schema standard to map the data to feature layers, it’s up to you how to process it when building interactive maps.
Trans.eu and custom feature layers based on OpenStreetMap data
As you probably already know from our previous articles, Trans.eu – the leading logistics platform in Europe – uses OpenStreetMap to power their web application. Each industry has its own unique requirement and transportation isn’t an exception.
To provide freight forwarders with the ability to efficiently perform their jobs, we developed two custom feature layers: a truck restrictions layer and a visual postcodes layer. Let’s talk about the specifics of both.
Truck limitations visualization
Moving freights from point A to B to Z often is limited not only by the load capacities of a selected truck but also by the time-sensitive delivery requirements. There’s a non-existent chance that any given freight forwarder possesses knowledge about every possible route’s restrictions, especially if we’re operating on a transcontinental scale like Trans.eu.
In order to simplify route planning and to eliminate logistics path to go through areas that forbid truck movement, we create a dedicated feature layer. As OSM data by default already has restrictions mapped out, we had to simply develop a feature layer and enrich the backend of our route mapping algorithms.
At the same time, in order to avoid users trying to change the suggested route because visually it looks longer, we also project all the limitations onto a frontend-part of Trans’ map. This way, freight forwarders know exactly why some roads are out of access to their clients and are not considered by our routing algorithms.
And because those labels that you can see on the screen above are vector-based and only projected onto a raster map layer, we can ensure they scale properly no matter how zoomed in or out our map is. We also applied label anti-collision, so they don’t overlap.
Postcodes grouping, visualization and filtering
What we learned when working with the logistics industry, is that more often than not, freight forwarders and their clients perform searches differently than your regular Google-searcher. Because they tend to look up postcodes instead of actual full addresses, Trans decided to add another feature layer that visualizes postcodes.
On the backend, we feed our postcodes’ database with data from a paid third-party source and perform a number of grouping operations. This allows you to start searching by each fraction of the postcode, even without providing the target country, although the results may not be as accurate, as sometimes parts of postcodes overlap.
It’s an extremely useful geocoding mechanism that Trans’ clients use all the time.
Simultaneously, this data powers a dedicated frontend feature layer that visually divides each country into respective postcode areas. When you know you need to deliver something from A to B, and you know the postcodes, you can easily identify them on the map, as on the zoom-out we group all codes up to the very first number. With each zoom-in you start seeing more and more label data. I’ll show it in the collage below.
This saves freight forwarders tons of time as they don’t have to perform multiple searches and can use visual cues to plan their client’s logistics routes.
4 custom web mapping solutions examples
As you can see, utilizing custom feature layers helps you build interactive web maps offering your users unique functionalities that can convince them to choose your software and keep coming back again and again. Let’s have a look at a couple of examples of custom web mapping solutions that can power your digital product.
Imagine you’re building an Uber-like app and you neither want to integrate costly map APIs (that can cost a fortune) nor you want to redirect your users to a third-party navigation app of their choice. Route visualization is yet another feature layer that you can implement onto your OpenStreetMap-powered dynamic map.
Simply feed your backend with real-time GPS coordinates of the user and visualize them on the frontend. Voilà!
Maybe you don’t want to navigate anyone. Instead, you’d like to build a dashboard for your customer service department that shows a real-time position of dispatched brigades that fix power shortages. This way they will be able to easily manage incoming calls and improve overall customer satisfaction. The process is the same. Gather the data and feed it to your custom feature layer.
Food delivery tracking
What if you want to simply generate a sharable screen that shows to the end-user the progress of their food order delivery, so they actually don’t bother your customer support? Well, generate a fractional map of the delivery area, enhance it with real-time GPS data, draw a route and embed it into your application, and you’re good to go.
Okay, you don’t need to track real-time data. Instead, you’re building a market analysis tool and want to generate coverage visualizations based on whatever data you feed your solution: number of McDonald’s in the area, 5G cellular network coverage, you name it.
You take OpenStreetMap data as a foundation, you connect additional data sources, style it the way you want and visualize it on the frontend.
Looking to create your own web mapping tool?
Obviously, the entire process is much more complex than what I described, but I’m here to give you an idea of how you can utilize open-source data to build a location-based application that is fully tailored to your specific business and market needs.
If all of the above seems to be extremely confusing, and you don’t have time to research every possible third-party tool, you can drop me a line at email@example.com, and I’ll grab one of our Location-based Solutions Architects to help you navigate this topic.