Skip to content

Leaflet Raster Map

Use leaflet render raster map

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Leaflet WGS84 Basemaps Demo</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"
      integrity="sha384-cxOPjt7s7Iz04uaHJceBmS+qpjv2JkIHNVcuOrM+YHwZOmJGBXI00mdUXEq65HTH"
      crossorigin="anonymous"
    ></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 500px"></div>
    <script>
      const startPos = [-40.5, 173];
      const startZoom = 6;

      const url =
        'https://basemaps.linz.govt.nz/v1/tiles/aerial/WebMercatorQuad/{z}/{x}/{y}.webp?api=d01hep5551e30kxb7w85hck49tp';

      const tiles = L.tileLayer(url, {
        attribution:
          '<a href="https://www.linz.govt.nz/data/linz-data/linz-basemaps/data-attribution">LINZ CC BY 4.0 © Imagery Basemap contributors</a>',
      });

      L.map('map').addLayer(tiles).setView(startPos, startZoom);
    </script>
  </body>
</html>