Creating custom POI layers in Studio

Nathaniel Slaughter
Wed, 25 May 2016 11:00:00 -0400

In Mapbox Studio you can replace the default source layer of POI data provided by OpenStreetMap with your own! Under the tilesets tab there’s an option to upload several different file types, which are converted to Vector Tiles and ready to add to any Studio map you create. Below we’ll walk through creating a custom POI layer using a snapshot of Chicago restaurants from Foursquare’s API.

Mid zoom level view

Prepping the data

Foursquare’s API returns a JSON response comprised of POI coordinates and parameters. We’ll need to take that response and format its structure as GeoJSON before we upload to Studio. Converting this data also gives us the opportunity to filter unnecessary field values and format them so they are easier to manage when filtering by a POI type in Studio.

Design

With formatted data uploaded as a tileset, We create a new style and add it as a source layer. We want to style each marker by restaurant type so we’ll creating multiple layers that reference the source layer and apply filters that target the field value type. Along with filtering by type, we’ll also filter by ‘checkinsCount’ value, or number of daily visitors a restaurant receives, and assign an icon to represent more popular venues.

Filtering by restaurant type and number of visitors

Close up displaying icons for the most popular restaurants

With your new style and custom layer in place you’re ready to use the Map ID of your published style with Mapbox GL JS to share a fast interactive map. Check out the links below for more instruction on how to build and display your own custom POI layer:

Creating custom icons

Adding custom data in Studio

Interacting with Vector Tiles in Mapbox GL JS