How to use Leaflet with TypeScript

How to use Leaflet with TypeScript: this tutorial shows how to install Leaflet from NPM and create a map and display it on a TypeScript application.

You can pick from a large selection of bundlers and always find the best solution for your project. Whether you prefer Parcel, Webpack, Rollup, Turbopack, or anything else.

  1. Install the npm package.

    npm install --save leaflet
    Bash
  2. Install the Leaflet types package.

    npm install --save @types/leaflet @types/geojson
    Bash
  3. Create the map style. Add the map style to your stylesheet. The div must have non-zero height.

    body {
      margin: 0;
      padding: 0;
    }
    
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
    CSS
  4. Create a <div> element with a certain id where you want your map to be.

    Add <div> tag into your page. This div will be the container where the map will be loaded.

    <div id="map"></div>
    HTML
  5. Include the CSS file.

    If you have a bundler that can handle CSS, you can import the CSS from leaflet/dist/leaflet.css.

    import 'leaflet/dist/leaflet.css';
    JavaScript
    Including the CSS file using a <link> in the head of the document via the CDN is the easiest way.
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    HTML
  6. Finally, load the map with the style. Include the following code in your TypeScript.

    import { map, latLng, tileLayer, MapOptions } from "leaflet";
    
    import 'leaflet/dist/leaflet.css';
    
    const options: MapOptions = {
      center: latLng(40.731253, -73.996139),
      zoom: 12,
    };
    
    const mymap = map('map', options);
    
    const key = "YOUR_MAPTILER_API_KEY_HERE";
    
    tileLayer(`https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=${key}`,{ //style URL
      tileSize: 512,
      zoomOffset: -1,
      minZoom: 1,
      attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
      crossOrigin: true
    }).addTo(mymap);
    TypeScript
  7. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

Learn more

Check out the tutorial How to create a map with Leaflet, TypeScript and Parcel.