Skip to main content

Quick Start

Complete HTML Example​

<!DOCTYPE html>
<html>
<head>
  <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
</head>
<body>
  <div id="map" style="width:100%;height:500px;"></div>
  <script>
    const apiKey = 'YOUR_API_KEY';
    const map = new maplibregl.Map({
      container: 'map',
      style: {
        version: 8,
        sources: {
          arohon: {
            type: 'vector',
            tiles: ['https://map.arohon.co/tiles/{z}/{x}/{y}'],
            minzoom: 0,
            maxzoom: 14
          }
        },
        layers: [
          { id: 'water', type: 'fill', source: 'arohon', 'source-layer': 'water', paint: { 'fill-color': '#aad3df' } },
          { id: 'roads', type: 'line', source: 'arohon', 'source-layer': 'roads', paint: { 'line-color': '#019157', 'line-width': 2 } }
        ]
      },
      center: [90.41, 23.81],
      zoom: 12
    });
    map.addControl(new maplibregl.NavigationControl());
  </script>
</body>
</html>

With Route Drawing​

See the full demo for a working example with routing and polyline drawing.