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.
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.
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: