Visualizing PMTiles with Esri Maps SDK

This project demonstrates how to render PMTiles vector data using Esri's Maps SDK for JavaScript with a local tile server.

Before you get started

This repo is a part of a hands-on project that shows you how to generate and visualize PMTiles. It consists of three parts:

Blog Post: A quick post that introduces and showcases this capability.
Jupyter Notebook: The practical, step-by-step code for generating the PMTiles file.
This Repo: Contains a tile server and the client-side code using the Esri JavaScript SDK to render your PMTiles on a basemap.

ArcGIS API Key: Create one at ArcGIS Developer
- This key is required to render the basemap in the application.
- Add https://localhost to your allowed referrers list
- Insert the API key into the esriConfig.apiKey variable in index.html
Docker: Install from Docker Desktop for Mac
HTML Preview Tool:
- The reason you need this is ArcGIS Maps SDK requires a web server to authenticate and load the basemap properly.
- JetBrains IDEs: HTML Tools plugin
- VS Code: Live Preview extension

Clone the repository:

git clone https://github.com/wherobots/pmtiles-esri-tile-layer.git
cd pmtiles-esri-tile-layer

Add your PMTiles data:
- Download your PMTiles file from Wherobots managed storage
- Place it in the src/pmtiles/ directory
- Verify the filename matches the configuration in src/config.json (default: railroads.pmtiles)
Configure API key:
- Open src/index.html
- Update the esriConfig.apiKey variable with your ArcGIS API key
Start the tile server:
```
make docker-setup
```
Launch the application:
- Open src/index.html in your IDE
- Use your HTML preview tool to view the map

When finished:

Stop the tile server: Press Ctrl+C in the terminal running the Docker container
Remove PMTiles file: Delete it from src/pmtiles/ if no longer needed

The Docker container will automatically be removed when stopped.