Step 1: Loading geospatial data

Use cartokit to quickly load and display vector geospatial data on an interactive map.

Often, the first thing you’ll want to do with cartokit is display some data. To load vector geospatial data into cartokit, click the button in the Layers panel. This will open the Add Layer modal.

cartokit allows you to load geospatial data from either an API endpoint or a file on disk. For this example, we’ll load a GeoJSON file of US counties pre-joined with unemployment data from cartokit’s public data catalog. Enter the following url into the Endpoint field:

https://pub-7182966c1afe48d3949439f93d0d4223.r2.dev/us-counties-unemployment.json

Note

cartokit currently only supports loading GeoJSON datasets. If you have data in another format, you’ll need to convert it to GeoJSON before loading it into cartokit. We recommend using MapShaper or ogr2ogr for this purpose. Support for additional formats is planned for future releases.

Next, give the layer a display name, such as “Unemployment Rate”, in the Display Name field. Finally, click the Add button to add the layer to the map.

That’s it, we’ve successfully loaded our data into cartokit! But something else has also happened. If you click the Open Editor button, you’ll see that cartokit has generated a Mapbox GL JS program for you.

This program, when executed, will reproduce the map on screen exactly. We’ll see that in action in a bit; first, let’s visualize our data.