Upload earthquakes data to MTS

README.md

Steps to upload Earthquake data to Mapbox MTS

1. Download this geojson file from this example.

wget https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson -O earthquakes.geojson

2. Convert geojson into geojsonld for MTS upload. Confirm in the output file that the features are line-delimited

cat earthquakes.geojson | jq -c '.features[]' > earthquakes.geojsonld; 

3. Set secret token, account name, and source name etc - refer to Getting Started on how to get your token.

# your secret token (not pk.*)
export SK_TOKEN="sk.***"
export ACCOUNT="takutosuzukimapbox";
export SOURCE="earthquakes";

4. Upload source to server (API doc)

> curl -X POST "https://api.mapbox.com/tilesets/v1/sources/${ACCOUNT}/${SOURCE}?access_token=${SK_TOKEN}"   -F "file=@earthquakes.geojsonld"  --header "Content-Type: multipart/form-data";

{"id":"mapbox://tileset-source/takutosuzukimapbox/earthquakes","files":1,"source_size":1066243,"file_size":1066243}

5. Create a recipe (API doc)

echo '{ "recipe": { "version": 1, "layers": { "'$SOURCE'": { "source": "mapbox://tileset-source/takutosuzukimapbox/'$SOURCE'", "minzoom": 0, "maxzoom": 16, "features": { "simplification": 0 } } } }, "name": "earthquakes", "description": "", "attribution": [ ] }' > recipe.json

6. Create a tileset (API doc) which is generated from the source data using the recipe. (I used the same name for the tileset as the source but you can optionally change the name of the tileset)

curl -X POST "https://api.mapbox.com/tilesets/v1/${ACCOUNT}.${SOURCE}?access_token=${SK_TOKEN}" -d "@recipe.json" --header "Content-Type:application/json"; 

{"message":"Successfully created empty tileset takutosuzukimapbox.earthquakes. Publish your tileset to begin processing your data into vector tiles."}

7. Publish the tileset (API doc) - generate the tiles on the server

curl -X POST "https://api.mapbox.com/tilesets/v1/${ACCOUNT}.${SOURCE}/publish?access_token=${SK_TOKEN}"; 

{"message":"Processing takutosuzukimapbox.earthquakes","jobId":"ckvt06pq8000609mjfypv7vcp"}

8. View your tileset by accessing this URL in your browser

https://studio.mapbox.com/tilesets/takutosuzukimapbox.earthquakes

9. In your GL JS, add this code after map.on('load') (example)

function renderFromTileset(map) {
  map.addSource(mts, {
    type: 'vector',
    // Use any Mapbox-hosted tileset using its tileset id.
    // Learn more about where to find a tileset id:
    // https://docs.mapbox.com/help/glossary/tileset-id/
    url: 'mapbox://takutosuzukimapbox.earthquakes'
  });
  map.addLayer({
    'id': mts,
    'type': 'circle',
    'source': mts,
    'source-layer': 'earthquakes',
    'paint': {
      'circle-radius': 8,
      'circle-stroke-width': 2,
      'circle-color': '#4264fb',
      'circle-stroke-color': 'white'
    }
  });
}