leaflet-examples/map-image.html at main · jonnymccullagh/leaflet-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>Leaflet Examples</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  </head>
  <body>

<header>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
        <strong>Leaflet Examples</strong>
      </a>
    </div>
  </div>
</header>

<main>

  <section class="py-5 container">
    <h1 class="fw-light">Add Image Overlay</h1>
    <div class="row py-lg-5">
        <style>
            #map { height: 380px; }
        </style>
        <div id="map"></div>
    </div>


    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8">
        <h3>Try It Out</h3>
        <p>Zoom in to the marker and notice the opacity of the overlay image</p>
        <h3>Code</h3>
        <pre>
          var lyrFloor1;
          lyrFloor1 = L.imageOverlay('images/floorplan.png',
              [
              [54.1772967493766, -6.337912380695343],
              [54.17763269390858, -6.337487250566482]
              ]).addTo(map);
          lyrFloor1.setOpacity(0.9);
        </pre>

        <p class="lead">View the source of this page to see fully how the map is created. In this example notice:</p>
        <ul>
            <li>Layer for the floor plan </li>
            <li>imageOverlay used to specify a raster image as the source</li>
            <li>imageOverlay accepts co-ordinates to position the image. Bottom-left coordinates and top-right coordinates</li>
            <li>Transparency of the layer is set to 10% (0.9)</li>
        </ul>
        <p>
          <a href="map-geojson.html" class="btn btn-primary my-2">Next Example</a>
          <a href="map-satellite.html" class="btn btn-default">Previous</a>
        </p>
      </div>
    </div>
  </section>

</main>

<footer class="text-muted py-5">
  <div class="container">
    <p class="float-end mb-1">
      <a href="#">Back to top</a>
    </p>
    <p class="mb-1"></p>
  </div>
</footer>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1/dist/js/bootstrap.min.js"></script>

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <script>

        var mapbox_url = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoiam9ubnltY2N1bGxhZ2giLCJhIjoiY2xsYzdveWh4MGhwcjN0cXV5Z3BwMXA1dCJ9.QoEHzPNq9DtTRrdtXfOdrw';
        var mapbox_attribution = '© Mapbox © OpenStreetMap Contributors';
        var esri_url ='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
        var esri_attribution = '© Esri © OpenStreetMap Contributors';

        var lyr_satellite = L.tileLayer(esri_url, {id: 'MapID', maxZoom: 20, tileSize: 512, zoomOffset: -1, attribution: esri_attribution});
        var lyr_streets   = L.tileLayer(mapbox_url, {id: 'mapbox/streets-v11', maxZoom: 28, tileSize: 512, zoomOffset: -1, attribution: mapbox_attribution});
        var marker = L.marker([54.17747885048963, -6.337641477584839], {draggable:'false'}).bindPopup('<b>Town Hall with Floor Plan</b>');
        var lg_markers = L.layerGroup([marker]);


        var map = L.map('map', {
            center: [54.17747885048963, -6.337641477584839],
            zoom: 18,
            layers: [lyr_satellite, lyr_streets, lg_markers]
        });

        var baseMaps = {
            "Streets": lyr_streets,
            "Satellite": lyr_satellite
        };
        var overlayMaps = {
            "Markers": lg_markers,
        };

        L.control.layers(baseMaps, overlayMaps).addTo(map);

        var lyrFloor1;
        lyrFloor1 = L.imageOverlay('images/floorplan.png',
            [[54.1772967493766, -6.337912380695343], [54.17763269390858, -6.337487250566482]]).addTo(map);
        lyrFloor1.setOpacity(0.9);

    </script>
  </body>
</html>