Add your data
Learn about the different ways you can overlay your data on a map.
This guide focuses on the process of taking geographic data that already exists and transforming it into a format that can be used on a web or mobile map. This could be data that you downloaded from an open data portal, data that you drew in a GIS application, aerial imagery taken by a drone, or something else.
How do I add my data to a map?
There are many ways to add data to your map, starting with quick integrations using the Mapbox Console, using different APIs and uploading data programmatically.
Upload data in the Console
The fastest and simplest way is by dragging data into a style. There are two no-code editors that allow you to upload and store your data.
These editors create a tileset, a styleable format optimized for high-performance rendering across all platforms. Then this tileset can be added to a style, a JSON document that defines the visual appearance of a map and the added data.
Mapbox Studio styles the presentation of the data and publishes a style for use in your applications or webpages.
Data Workbench can convert your source data into a tileset that is hosted on the Mapbox platform and then that tileset can be added to a style.
Learn more about supported file types and transfer limits in the Console Tools documentation.
Learn how to add and style data in Mapbox Studio and publish a style for use in a mobile application or webpage.
Create and publish a custom tileset using sample data.
Upload data with the APIs
You can upload data using two different APIs as seen in the tables below:
| Mapbox Tiling Service | |
|---|---|
| Recommended use-case | Data greater than 300 MB or programmatically created tilesets. |
| Supported formats | Line-delimited GeoJSON, GeoJSON (Tilesets CLI). |
| Useful links | Tutorial: Get started with MTS |
| Uploads API | |
|---|---|
| Recommended use-case | Programmatically creating a tileset when you cannot use MTS (because GeoJSON is not a suitable format for your data or your data is in a raster format). |
| Supported formats | MBTiles, KML, GPX, GeoJSON, Shapefile (zipped), CSV file, GeoTIFF. |
| Useful links | Upload API Docs |
Load externally-hosted data at runtime
If your data lives in a third-party data-source, you can load it on the client during runtime using the addSource method.
| Loading third-party data sources at runtime | |
|---|---|
| Recommended use-case | Loading data sources hosted on the web into your maps. |
| Supported formats | GeoJSON. |
| Useful links |
The examples below show how you can load an externally-hosted GeoJSON on web or mobile.
map.on('load', () => {
map.addSource('earthquakes', {
type: 'geojson',
// Use a URL for the value for the data property.
data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson'
});
map.addLayer({
'id': 'earthquakes-layer',
'type': 'circle',
'source': 'earthquakes',
'paint': {
'circle-radius': 4,
'circle-stroke-width': 2,
'circle-color': 'red',
'circle-stroke-color': 'white'
}
});
});
let earthquakeSource = GeoJSONSource(id: "earthquakes")
earthquakeSource.data = .url("https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson")
earthquakeSource.generateId = true
do {
try mapView.mapboxMap.addSource(earthquakeSource)
} catch {
print("Ran into an error adding a source: (error)")
}
style.addSource(geoJsonSource("earthquakes") {url("https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson")})
How do I style my data?
You can either style your data at runtime or in Studio.
- Runtime Styling: This option is ideal for event-based styling (for example, if a user hovers over data and it changes color). This option is also good if you want styling variants but don't want to support multiple styles in Studio.
- Styling in Studio: This option is ideal if you want to style your data without having to alter client-side code or redeploy your application. It also keeps all your map styling in one place.
Style your data dynamically at runtime
After adding your data to a new layer, style it using one of the available paint properties for that layer type.
The example snippet below shows how you can style custom line data on web with Mapbox GL JS:
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}
});
Style your map in Studio
Any data uploaded to our platform is accessible from within Studio for quick styling. Changes you publish in Studio will be reflected in your mobile and web applications with no additional code changes needed.
Learn more about styling in Studio by following the Configure the basemap tutorial.
How much will it cost?
Tilesets published with Mapbox Studio and Data Workbench use the Mapbox Tiling Service (MTS) to upload tilesets and are billed by input file size and compute units (CU). The monthly free tier for MTS is 10 GB and 20 CUs, and most vector uploads typically range between 0.3 and 5 CUs.
Read more about MTS pricing on the Mapbox pricing page.