Adding a map makes your application more visual, interactive, and attractive for your customers. But is it easy to develop a map?
What should you know and consider before starting? And how to avoid costly mistakes when using technology and maps provider?
In this article, we will tell you about the technologies and services that are necessary to add an interactive map to your app or website. We will also give an overview of map rendering libraries, existing APIs that help to fulfill your business tasks and provide you with advice based on our expertize in this domain.
What do you need to decide on before you start?
Let's think about what is an "interactive map"? Actually, it's a component of your application that generates a map picture for the selected view.
So there are two main aspects you need to think about before starting:
1. What should I use as a map visualizer component?
There are many map client libraries and SDKs to choose from. Below we listed the most popular Map Libraries and SDKs that can be used as a map component to generate a map from provided map parts or tiles.
2. Where can I get the data needed to render a map?
When we are talking about a global interactive map we need to understand that we are talking about hundreds of Gigabytes or sometimes Terabytes of geo-data. For example, a typical planet-wide database needed to render the OSM-Carto map style has size of 900 GB or more.
This amount of data is required to generate map tiles of different zoom levels, including roads, buildings, amenities.
But just storing the data is not enough - you will need very fast SSD storage and lots of processing power to be able to render maps on the fly. That's why in most cases you will need an external service provider who will take care of data and infrastructure for you.
Moreover, to make your map interactive and visualizing useful data for customers you may need some other services and APIs. For example, here are Map APIs are required for almost all map applications:
| Service | Also know as | Description |
|---|---|---|
| Maps | Map Tiles Map Views Map Loads | Interactive maps are often "assembled" from multiple smaller images - so-called "map tiles". One map tile represents an area of 256x256 pixels on the screen. Map providers measure usage in map tiles, map views, or map loads. Accordingly to our statistics 1 map view = 14 map tiles, 1 map load = 50 map tiles. |
| Address search | Geocoding API Autocomplete API | Search location by address. Autocomplete API is used in the address input field to show address suggestions based on user input. |
| Address by coordinate | Reverse Geocoding API | Get location by Latitude, Longitude coordinate. For example, show address details for a given GPS coordinate. |
| IP Geolocation | Geolocation API | Detect roughly customer location by IP address. This lets you set the initial map view according to user location. |
| Place Search | Places API | Search places by type or other criteria, visualize points of interest and amenities. |
| Routing and navigation | Routing API Direction API | Build an optimal route between waypoints. Normally you can choose between walking, driving, public transit, and other routing modes. |
Map client libraries and SDKs
Map libraries can be basically grouped into two categories - Commercial and Free/OpenSource. The main difference is that commercial map libraries and SDK are bound to the Service Provider. For example, Google Maps SDK is supposed to be used with Google services only. In contrast to the commercial products, the Open Source libraries support open standards and formats, so they are generally independent of the service provider.
Commercial libraries & SDKs
Here are the most popular commercial Map SDKs for web maps:
All commercial map products provide convenient access to their services and APIs. In general, every of the listed map library provides Android and iOS SDK together with JavaScript solutions.
Free & Open Source map libraries
The big advantage of the OpenSource map libraries is that by choosing a library you do not choose a provider: you can switch between different providers, mix services from a different provider, and choose services that work best for you.
This is true as long as it does not violate provider terms and conditions. So it is always a good idea to check the conditions before signing up, and avoid providers that do not allow mixed use of their services with other 3rd party APIs.
Leaflet
Pros
- Most popular client library for web maps. Easy to use and feature-rich.
- Best-in-class performance for simple raster maps.
- Big community, lots of documentation and tutorials.
Cons
- Accordingly to GitHub insights not so actively developed nowadays.
- Doesn't have native support for vector maps.
If you never developed a map application before and vector maps is not a mandatory requirement, we recommend you to start with Leaflet.
OpenLayers
Pros
- Flexible, high-performance, and actively developed map client library.
- Has both raster and vector maps support.
- Has lots of community-supported extensions.
Cons
- Relatively steep learning curve.
- Generally heavier and less performat than Leaflet.
A great choice if you know GIS, need advanced features like vector or 3D maps, or ready to invest a bit more time upfront.
MapLibre GL
Free & Open Source fork of Mapbox GL library. Created after Mapbox GL has moved to a Commercial license in December 2020.
Pros
- Based on Mapbox GL 1.x library built by a commercial company.
- Best combination of code quality, performance, and features.
Cons
- The future of the library is not fully clear, yet looks promising.
Was top choice until December 2020. Check GitHub Insights and released versions on official MapLibre GL pages. Use if you accept the risk of it becoming unmaintained.
We listed the most popular map libraries for web development. Nevertheless, there are great OpenSource Map Frameworks to create maps for native Android and iOS apps.
Choosing a service provider for maps and geo-data
Usually, the choice is based on your budget, requirements, preferences, and last but not least on your previous experience. The only advice we can give here is to choose a provider that is:
- Has permissive terms and conditions - e.g. allows you to use APIs from other providers and results
- Has affordable, scalable, and safe pricing - one that won't cost you a fortune if you have an unexpected traffic spike or make a programming mistake
- Has rich set of accompanying APIs - you likely will need Geocoding, Places, IP Geolocation, and others
- Supports open standards and multiple alternative map libraries and technologies
In short - try to make a future-proof decision.
Checklist for choosing a service provider
We've prepared a checklist for you that may help to make the right decision:
Geoapify as a map service provider
Geoapify Location Platform offers location-based services and APIs. Our mission is to make Geo-data and Location Services affordable, high quality, and easy-to-use:
- Try our Maps and API now without registration - LIVE DEMO.
- We have one of the most affordable and predictable pricing on the market. Please check our Pricing page for details.
- Our interactive usage cost calculator will help you to select an optimal plan.
- We have flat pricing, soft limits and will not block you if you unexpectedly go over the quota.
- Our APIs work via HTTP protocol and can be used with any open Map Library or SDK.
- We use GeoJSON data format for most APIs, which is super easy to use and well supported by existing libraries and software.
- We have permissive Term & Conditions, that let you store data and stay on Free pricing plan even if your product is commercial.
- You can check our code samples and templates to start quickly - QUICK START
