MapLibre

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>MapLibre + CARTO</title>
    
    <!-- Maplibre imports -->
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0; 
}
#map{
  width: 100vw;
  height: 100vh;
}

JavaScript

const map = new maplibregl.Map({
  container: 'map',
  // style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
  // style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
  style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
  center: [10, 50],
  zoom: 3
});