HTMLDrop.

Leaflet starter

Leaflet: an interactive map with OpenStreetMap tiles, a marker, and shapes.

Open in editor Free. No install, no sign-up.
  • leaflet

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Leaflet starter</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <a href="https://leafletjs.com" target="_blank" class="badge"
      ><svg class="logo" viewBox="0 0 24 24" role="img" aria-label="Leaflet">
        <path
          fill="#199900"
          d="M17.69 0c-.355.574-8.432 4.74-10.856 8.649-2.424 3.91-3.116 6.988-2.237 9.882.879 2.893 2.559 2.763 3.516 3.717.958.954 2.257 2.113 4.332 1.645 2.717-.613 5.335-2.426 6.638-7.508 1.302-5.082.448-9.533-.103-11.99A35.395 35.395 0 0 0 17.69 0zm-.138.858l-9.22 21.585-.574-.577Z"
        />
      </svg>
      Leaflet</a
    >
  </body>
</html>

html,
body {
  margin: 0;
  height: 100%;
}
#map {
  height: 100%;
}
.badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 1px 5px #0006;
  color: #333;
  font:
    600 14px system-ui,
    sans-serif;
  text-decoration: none;
}
.logo {
  width: 24px;
  height: 24px;
}

// The Leaflet quick start: a map, a marker, a circle, and a polygon.
const map = L.map("map").setView([51.505, -0.09], 13);

// Esri's World Street Map basemap: no key needed, with attribution.
L.tileLayer(
  "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
  {
    maxZoom: 19,
    attribution: "Tiles &copy; Esri &mdash; Source: Esri, HERE, Garmin, USGS, NGA, and others",
  },
).addTo(map);

L.marker([51.5, -0.09]).addTo(map).bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

L.circle([51.508, -0.11], { color: "red", fillColor: "#f03", fillOpacity: 0.5, radius: 500 })
  .addTo(map)
  .bindPopup("I am a circle.");

L.polygon([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047],
])
  .addTo(map)
  .bindPopup("I am a polygon.");

Questions

Can I use Leaflet without a build step?

Yes. This starter loads Leaflet straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a Leaflet project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my Leaflet demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits