Skip to content
cartokit cartokit cartokit Docs

Step 4: Running the program

cartokit compiles your map into a JavaScript (or TypeScript) program using Maplibre GL JS (or Mapbox GL JS). You can run this program in real-time, making it easy to transfer the code to your development environment.

A core goal of cartokit is to provide access to your map’s code at all phases of the design process. There is no “Export” workflow here; the program is always available under the Program tab in the Editor.

Additionally, we strive to make cartokit programs runnable without modification. In order to do that, we make some assumptions about the environment in which they’re run.

  1. We assume you’re using JavaScript modules (also called ECMAScript modules or ES modules), such that import statements are valid.
  2. We assume you’re using a bundler or build system, such as Webpack, Rollup, Vite, or esbuild such that “bare” import statements like import maplibregl from 'maplibre-gl'; are resolved correctly.

For this tutorial, we’ll use Vite’s vanilla template to create a new vanilla JS project using the Vite build system. You can follow the instructions on scaffolding a Vite project to get started.

Once you have your project scaffolded, take the following steps:

  1. Install maplibre-gl as a dependency:

    Terminal window
    npm install maplibre-gl

  2. Apply the following diff to the root index.html file:

    index.html
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
        <link
          href="https://unpkg.com/maplibre-gl@^5.3.0/dist/maplibre-gl.css"
          rel="stylesheet"
        />
        <style>
          body {
            margin: 0;
            padding: 0;
          }
    

          #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
          }
        </style>
      </head>
      <body>
        <div id="app"></div>
        <div id="map"></div>
        <script type="module" src="/main.js"></script>
      </body>
    </html>

  3. Copy the program from the Program tab in the Editor and paste it into src/main.js.

  4. Run your dev command and navigate to http://localhost:5173 in your browser. You should see your map running in a web browser.

    Terminal window
    npm run dev

That’s it! In just a few steps, we’ve got our cartokit-generated program running in our own local development environment. Notice that we wrote none of the mapping code ourselves; cartokit did all the heavy lifting for us!

Next steps

Section titled “Next steps”

Congratulations on making your first map with cartokit! For more specific questions on functionality, check out our Guides. Can’t find what you’re looking for or want to leave us some feedback? Let us know on GitHub or Bluesky. We can’t wait to see what you build, and happy mapping 🗺!