javascript 謎のライブラリ leafletjs





ふと謎のライブラリを見つけたので記事を書く。

画像の縮小・拡大するライブラリらしい。



ドキュメント


https://leafletjs.com/

成果物


成果物

index.html


index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>leaflet.js</title>

    <!-- leaflet.css -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

    <!-- plugins leaflet.fullscreen.css-->
    <link
      href="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css"
      rel="stylesheet"
    />

    <style>
      #map {
        width: 768px;
        height: 768px;
        margin: 0 auto;
        margin-top: 50px;
      }

      @media screen and (max-width: 767px) {
        #map {
          width: 300px;
          height: 300px;
        }
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <!-- leaflet.js -->
    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>

    <!-- plugins Leaflet.fullscreen.min.js -->
    <script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>

    <script>
      var imageBounds = L.latLngBounds([
        [40.712216, -74.22655],
        [40.773941, -74.12544]
      ]);

      var map = L.map('map', {
        fullscreenControl: true,
        maxBounds: imageBounds.pad(0.5)
      });

      map.fitBounds(imageBounds);
      L.imageOverlay(
        'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
        imageBounds
      ).addTo(map);
    </script>
  </body>
</html>


ホームへ