Cartokit

cartokit is a direct manipulation programming system for interactive cartography on the web. Try it now at alpha.cartokit.dev, read the docs, or watch the demo.

Cartography with cartokit

Many cartographers make heavy use of direct manipulation interfaces for map design. Whether these are built-in cartography tools in QGIS or ArcGIS, vector editing software like Figma or Adobe Illustrator, or style specification editors like Mapbox Studio or Maputnik, direct manipulation tools help us create maps faster.

As cartography has shifted to the web, however, our material for mapping has expanded. We can now make maps by writing programs in addition to working with static media. Libraries like D3, Leaflet, and MapLibre GL JS are incredibly powerful for data-intensive mapping on the web. However, these tools also have steep learning curves—you need to be a proficient JavaScript developer just to get started.

Could we have the best of both worlds? Can we give users access to rich direct manipulation interfaces for styling maps while automatically writing programs for them? This is cartokit's central goal.

System Goals

First and foremost, cartokit is a direct manipulation programming environment for interactive cartography. You edit elements of the map directly and cartokit takes care of writing a JavaScript (or TypeScript!) program to reproduce that map. In addition, cartokit seeks to:

• Make it simple and efficient to visualize geospatial data using different cartographic representations. Want to see your data as a choropleth map? Maybe a proportional symbol (bubble) map? How about heatmaps? cartokit will do the heavy lifting of transforming your geospatial data on-the-fly, making it possible to explore a wide space of map designs in a few clicks.
• Apply sound cartographic practices by default. Unsure how to scale proportional symbols accurately? Concerned about picking a color scheme? How do you compute quantiles again? cartokit bakes in best cartographic practices to guide you into the pit of mapping success.
• Give access to the underlying program, always. It's frustrating to use a tool and hit the point where it doesn't have support for that one thing you want. cartokit gives you access to a plain JavaScript or TypeScript program—using MapLibre GL JS or Mapbox GL JS—to reproduce the current map exactly as it appears. Use cartokit when it works for you, and take your JS program to your text editor when it doesn't!

Demo

For a deeper dive into how cartokit works—and to see how you can get started programming with cartokit—check out the extended demo.

https://github.com/user-attachments/assets/1cfb92d5-74d1-4f83-8ed0-07fccafa6a77