https://github.com/raruto/leaflet-pointable

Leaflet plugin that allows to interact with semi-transparent tiled overlays
https://github.com/raruto/leaflet-pointable

leaflet overlay pointable transparency

Last synced: over 1 year ago
JSON representation

Leaflet plugin that allows to interact with semi-transparent tiled overlays

• Host: GitHub
• URL: https://github.com/raruto/leaflet-pointable
• Owner: Raruto
• License: gpl-3.0
• Created: 2019-06-07T20:09:24.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-02-09T19:21:46.000Z (over 6 years ago)
• Last Synced: 2025-03-03T11:41:47.670Z (over 1 year ago)
• Topics: leaflet, overlay, pointable, transparency
• Language: JavaScript
• Homepage: https://raruto.github.io/leaflet-pointable
• Size: 30.3 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# leaflet-pointable.js

A Leaflet plugin that allows to interact with semi-transparent tiled overlays

_For a working example see [demo](https://raruto.github.io/leaflet-pointable/examples/leaflet-pointable.html)_

---

## How to use

1. **include CSS & JavaScript**

    ```html

    

    ...

     html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } 

    

    

    

    

    

    ...

    

    ```

2. **choose a div container used for the slippy map**

    ```html

    

    ...

	  


    ...

    

    ```

3. **create your first simple “leaflet-pointable slippy map**

    ```html

    

      var map = L.map('map');

      map.setView(new L.LatLng(45, 9.5), 5);


      var control = L.control.layers(null, null, {

        collapsed: false

      }).addTo(map);

      var Basemap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {

        maxZoom: 17,

        attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',

        opacity: 0.90

        });

      Basemap.addTo(map);

      var Overlay = L.tileLayer('https://tile.waymarkedtrails.org/{id}/{z}/{x}/{y}.png', {

        id: 'hiking',

        pointable: true,

        attribution: '&copy; <a href="http://waymarkedtrails.org">Sarah Hoffmann</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',

      });

      Overlay.addTo(map);

      control.addOverlay(Overlay, "ON / OFF");

      map.on("pointable_mouseclick",function(e){

        map.openPopup("<b>Clicked overlay</b>: " + e.latlng.lat + "," + e.latlng.lng, e.latlng);

      });

    

    ```

---

**Compatibile with:** leaflet@1.3.4

---

**Contributors:** [Raruto](https://github.com/Raruto/leaflet-pointable)