Leaflet HTML

LeafletJS is a library geared towards map based visualisations. Leaflet HTML expresses that JavaScript API in HTML.

How-to guides

Articles have been written to make adopting Leaflet HTML simpler. These articles follow the Leaflet tutorials closely and add a few leaflet-html specific tips and tricks.

Design principles

Leaflet HTML tries to model Leaflet's API as closely as possible to avoid confusion and to ease onboarding. Naming conventions are followed where possible. The hierarchy in the JS API is replicated by nesting HTML elements.

Example

The following is a live running example of Leaflet HTML.

The above application is represented in HTML using the following syntax.

<l-map center="[39.61, -105.02]" zoom="10">
  <l-control-layers>
    <l-base-layers>
      <l-tile-layer
        name="CartoDB_Voyager"
        url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
        max-zoom="20"
        subdomains="abcd"
      ></l-tile-layer>
    </l-base-layers>
    <l-overlay-layers>
      <l-layer-group name="Cities">
        <l-marker lat-lng="[39.61, -105.02]">
          <l-popup content="This is Littleton, CO."></l-popup>
        </l-marker>
        <l-marker lat-lng="[39.74, -104.99]">
          <l-popup content="This is Denver, CO."></l-popup>
        </l-marker>
        <l-marker lat-lng="[39.73, -104.8]">
          <l-popup content="This is Aurora, CO."></l-popup>
        </l-marker>
        <l-marker lat-lng="[39.77, -105.23]">
          <l-popup content="This is Golden, CO."></l-popup>
        </l-marker>
      </l-layer-group>
    </l-overlay-layers>
  </l-control-layers>
</l-map>

The above example is a taste of the syntax and capabilities of wrapping Leaflet in HTML tags.