leaflet-pointable

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

0.0.4
latest
Source
npm

Version published: 5 years ago

Maintainers: 1

Created: 6 years ago

Source

leaflet-pointable.js

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

For a working example see demo

How to use

include CSS & JavaScript

<head>
...
<style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style>
<!-- Leaflet (JS/CSS) -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<!-- Leaflet-Pointable -->
<script src="https://unpkg.com/leaflet-pointable@latest/leaflet-pointable.js"></script>
...
</head>

choose a div container used for the slippy map

<body>
...
  <div id="map"></div>
...
</body>

create your first simple “leaflet-pointable slippy map

<script>
  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);
  });

</script>

Compatibile with: leaflet@1.3.4

Contributors: Raruto

Keywords

FAQs

What is leaflet-pointable?

Is leaflet-pointable well maintained?

Package last updated on 09 Feb 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

leaflet-pointable

leaflet-pointable.js

How to use

Keywords

Related posts

Oracle Drags Its Feet in the JavaScript Trademark Dispute

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional