Skip to content
cartokit cartokit cartokit Docs

Step 4: Running the program

cartokit compiles your map into a Mapbox GL JS 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 separate “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 mapboxgl from 'mapbox-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 mapbox-gl as a dependency:

    Terminal window
    npm install mapbox-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://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-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. Replace "<YOUR_MAPBOX_ACCESS_TOKEN>" in the program with your own Mapbox access token.

    src/main.js
    import mapboxgl from "mapbox-gl";
    

     mapboxgl.accessToken = "<YOUR_MAPBOX_ACCESS_TOKEN>";
     mapboxgl.accessToken =
       "pk.eyJ1IjoicGFya2VyemllZ2xlciIsImEiOiJjbG5tYm01Mm0yNWQ2Mm9wZTMzbXVmMW5hIn0.BNtWKuymyJJh-eEWoGuhCg";
    

    const map = new mapboxgl.Map({
      container: "map",

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

    sh npm run dev

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

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 X. We can’t wait to see what you build, and happy mapping 🗺!