Synetech

We have tried working with Mapbox, what possibilities does it offer?

Our web team was faced with the challenge of creating an application based on a map. We have only had very little experience with map integration so far, so that is why this was a challenge for us. What new have we found out and learned from it?

The purpose of our application was to display tags at defined coordinates, filtering them and grouping them into clusters. The user is supposed to use the app to obtain information about the availability of different locations, their distance and opening hours.

Mapbox vs. Google Maps

At the outset, we had to decide whether to choose Google Maps or Mapbox for implementation. Therefore our first logical step was to compare the pros and cons of both services.

mapbox_googlemaps

Source of the comparison:  https://mapsvg.com/blog/mapbox-vs-google-maps

After comparing the two services, we ended up choosing Mapbox Studio, which offers a wide range of map editing options and is very user-friendly. Its specifics include the fact that the user can create their own dataset in no time at all, place it on a satellite map and add descriptions in any language, perhaps Japanese if they like.

What exactly does Mapbox Studio offer?

Style

Style refers to the display options of the different elements on the map as well as the map itself. In the Styles tab in Mapbox studio, the user can create their own style from pre-prepared templates, start from scratch or try some stock styles and edit them.

The things that can be edited include: colour of the terrain, roads, markers, etc., displayed markers, descriptions, language options, roads, states or regional borders and 3D map views.

Dataset

Data visualization is very simple in Mapbox Studio. The users can draw points, lines or areas directly onto the map. They can import data from CSV or GeoJSON files and modify it as desired. Each record (point, line, area) can have its own characteristics that will help with such things as data organization. The created data is then exported directly into a set of tiles, which the users insert into their own style maps.

Tiles

Tiles are vector or raster data from which the mapbox creates a map in 22 preset zoom levels. In the case of vector data, the map is built from a set of lines, points and polygons, in the case of raster data it is composed of pixels just like images are.

Workflow

Each Mapbox map that site visitors or application users see consists of the components discussed above. At first you need to have a set of tiles, which is actually the map itself, which is then filled with our own data. In the end you have the freedom to choose what the whole thing will look like.

Mapbox offers several APIs for implementing web navigation. These APIs can also be used with the SDK for JS and mobile platforms.

  • Direction API

    This service provides us with the ideal route, considering the state of traffic whether cycling, driving or walking. (Unfortunately, Mapbox API doesn’t offer information on public transit.) In addition to the route itself, the API also returns information about the distance between each point, estimated travel time, etc. It can also produce turn-by-turn instructions. In one entry, it is possible to waypoint up to 25 positions with this service.

  • Map Matching API

    Uses the Directions API and provides a route that can be displayed on a map.

  • Isochrone API

    Calculates which points are at a specified distance from a given center point. E.g. In this way, it is possible to find out where it is possible to get to within 5 minutes and thus determine different sectors according to the travel time. (Again, the service is limited by means of transport, public transport is not available and the maximum travel time is 60 minutes.)

  • Optimisation API

    This service deals with a popular algorithmic issue- business travelers. It finds the optimal route with several stops in between.

  • Matrix API

    Accepts a matrix of points and calculates the shortest (fastest) routes between all points. The maximum the matrix accepts is 25 points, but if we want to take into account the state of traffic, it accepts only 10 points.

mapbox

Preview of style editing

Project implementation

React wrappers

Mapbox offers developers a library Mapbox GL JS.. to implement a map into a project. This library can be used on its own, but if we are working on a project with React, it is possible to make the work easier and use some of the libraries that encloses Mapbox GL JS/. For Mapbox the most relevant libraries are react-map-gl a react-mapbox-gl. Both libraries are very similar. Basically, they provide developers with a set of React components, especially

, with which you only need to tinker with the necessary settings (map height and width, api token, map style, zoom, etc.),
, which is a wrapper for markers on the map . We can embed additional components in the Marker to fully control how the markers appear on the map.

We opted for react-map-gl. As you can understand from the paragraph above, libraries do not differ much functionally, but what differs significantly is the level of their documentation. Because react-map-gl is developed by Uber, the documentation for this library is better and developers have access to quality demo projects.

Development problems and their solutions

Gatsby vs. mapbox

During development, we encountered certain limitations. Mapbox GL JS is distributed as an ES6 bundle and this causes problems with the current version of Gatsby, when bundling using the Webpack. In the Mapbox documentation, you can find a solution, but unfortunately it did not work with our Gatsby project. However, the downgrade of Mapbox GL JS helped.

The problem became obvious, even after we thought we had discovered the solution, when we passed the source code to the client and they tried to deploy it to their server. The error was the same one we faced during development - instead of a map, a blank canvas with markers was displayed. Modifying the Mapbox GL version helped again.

Markers Vs. Layers

In our project, we needed to display custom markers on the map, which have a special design depending on their condition. At the same time, we needed to filter the markers. We decided on a solution using the react-map-gl component

, which displays any HTML element at the given coordinates. Thanks to this, we were able to conveniently filter and change the appearance based on the state of the application, but it turned out that the markers created in this way were incomplete. You cannot move the map through them. You can move through the map without any problems if the user clicks or taps anywhere but on our custom marker. As mentioned before, Mapbox creates maps using 3 sources: style, tiles and layers. If the markers get onto the map this way, they become a part of the map and you can move through them.

API limitations

As I mentioned in the navigation paragraph above, the Mapbox API offers services for driving, cycling, walking and can take into account the current situation in regards to traffic, but doesn’t work with public transport. However, we needed this feature in our project and therefore we were forced to integrate another service into our application.

Satellite map

One of the client’s requirements was a button that, like on Google Maps, would change the normal appearance of the map to satellite imagery. Our expectation that Mapbox GL JS and react-map-gl could have some ready-made control element, which you just need to select in the options, turned out to be naive. Mapbox doesn’t offer anything like that and it’s because of its architecture. The satellite look is just one of many (there are no limits in theory) looks that we can achieve with the mapbox. That’s why we defined the satellite look as a special style and implemented a custom button in the application that simply toggles these styles.

Did we make the right decision?

Although we have encountered various limitations, Mapbox is a very high quality service at an affordable price. The problems actually arose only due to our unpreparedness, as Mapbox is well documented.

But next time we will definitely try Google Maps in order to be able to compare, whether in terms of user-friendliness, development experience and community, or API options for public transport.