Making custom OpenStreetMaps with Mapbox Studio

OpenStreetMap’s mission is to make one free, public map of the world, so it doesn’t offer much in the way of creating custom maps with OSM data. Mapbox Studio is a good way to do that. Despite being billed as a tool for cartographers, devs and designers, it’s straightforward enough for regular folks with some tinker time on their hands to make simple custom maps. (We’ve also tried uMap – and are definitely open to suggestions!)

A close-up of the test map with fire alarm call boxes and a fire hydrant.

As part of the emergency map project, we’ve started adding standalone fire alarm call boxes to OpenStreetMap. There are about 2,000 of these in San Francisco — and despite recent reports that a significant number are out of order — they are one form of emergency communication that should work after a major event. Our proposed tag for them (emergency: fire_alarm_box) was accepted.

A combo police and fire alarm call box on Van Ness Street in San Francisco.

Creating a map of the first fire alarm boxes that we added seemed like a good way to try out Mapbox Studio.

Step one is to create a new dataset: https://www.mapbox.com/help/add-points-pt-1/. Then to query OSM, we used Overpass Turbo for a GeoJSON to find all fire_alarm_box features currently mapped in San Francisco https://overpass-turbo.eu/#  

Overpass query:

/*
This was generated by the overpass-turbo wizard.
The original search was:
“"emergency"="fire_alarm_box"”
*/
[out:json][timeout:25];
// gather results
(
  // query part for: “emergency=fire_alarm_box”
  node["emergency"="fire_alarm_box"](37.707998069120265,-122.52406311035156,37.83337825839438,-122.34306335449217);
  way["emergency"="fire_alarm_box"](37.707998069120265,-122.52406311035156,37.83337825839438,-122.34306335449217);
  relation["emergency"="fire_alarm_box"](37.707998069120265,-122.52406311035156,37.83337825839438,-122.34306335449217);
);
// print results
out body;
>;
out skel qt;

The result is a GeoJSON file that can be imported in Studio to create a new dataset. https://www.mapbox.com/help/add-points-pt-1/#about-datasets

Mapbox Studio allows to you assign new icons to the dataset and we used the awesome  https://glyph.smarticons.co/ SVG icons. The fire alarm icon looks great and the overall results are pretty good. This is a fairly simple way for individuals or neighborhood groups to highlight the features they want on their maps while contributing to OSM.

One thought on “Making custom OpenStreetMaps with Mapbox Studio

Leave a Reply

Your email address will not be published. Required fields are marked *

I accept that my given data and my IP address is sent to a server in the USA only for the purpose of spam prevention through the Akismet program.More information on Akismet and GDPR.

This site uses Akismet to reduce spam. Learn how your comment data is processed.