Detta exempel avser att intruducera Leaflet plugins, kod som på något vis lägger till eller förändrar funktionalitet som du kan använda dig av.
I detta exempel ska vi lägga till ett plugin som i sin tur skapar en "glidare" som tillåter användaren att ändra opaciteten på ett kartlager för att på detta sätt möjliggöra att användare kan jämföra kartor.
Tips
Lär dig mer länkar
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Karta</title> | |
| <meta charset="utf-8"> | |
| <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/> | |
| <link rel="stylesheet" href="Leaflet.Slider.css"> | |
| <script src="Leaflet.Slider.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| #map { | |
| width: 100vw; | |
| height: 100vh; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="map.js"></script> | |
| </body> | |
| </html> |
| /* | |
| * Leaflet Slider plugin Albin Larsson MIT 2016-2017 | |
| */ | |
| .LeafletSlider { | |
| width: calc(100% - 30px); | |
| margin-left: 15px; | |
| margin-right: 15px; | |
| user-select: none; | |
| height: 30px; | |
| } | |
| .leaflet-bottom.leaflet-left { | |
| width: 100%; | |
| } | |
| .LeafletSlider .LeafletSlider-scale { | |
| background-color: #aaa; | |
| height: 3px; | |
| width: 100%; | |
| float: left; | |
| } | |
| .LeafletSlider .LeafletSlider-scale .LeafletSlider-button { | |
| width: 30px; | |
| border-radius: 4px; | |
| border: 2px solid rgba(0,0,0,0.2); | |
| height: 30px; | |
| position: relative; | |
| top: -15px; | |
| left: 0px; | |
| background-color: #fff; | |
| cursor: pointer; | |
| } | |
| .LeafletSlider .LeafletSlider-scale .LeafletSlider-button:hover { | |
| background-color: rgb(244, 244, 244); | |
| } |
| /* | |
| * Leaflet Slider plugin Albin Larsson MIT 2016-2017 | |
| */ | |
| L.Control.Slider = L.Control.extend({ | |
| onAdd: function(map) { | |
| var root = L.DomUtil.create('div'); | |
| root.className += 'LeafletSlider'; | |
| root.innerHTML = '<div class="LeafletSlider-scale"><div class="LeafletSlider-button"></div></div>'; | |
| map.whenReady(function() { | |
| var isMouseDown = false; | |
| var currentVal = 0; | |
| var getMousePosition = function (e) { | |
| var posx = 0; | |
| var posy = 0; | |
| if (!e) var e = window.event; | |
| if (e.pageX || e.pageY) { | |
| posx = e.pageX; | |
| posy = e.pageY; | |
| } else if (e.clientX || e.clientY) { | |
| posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; | |
| posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; | |
| } | |
| return { 'x': posx, 'y': posy }; | |
| }; | |
| var updatePosition = function (e) { | |
| var pos = getMousePosition(e); | |
| var spanX = (pos.x - startMouseX); | |
| var newPos = (lastElemLeft + spanX); | |
| var upperBound = (root.querySelector('.LeafletSlider-scale').offsetWidth - root.querySelector('.LeafletSlider-button').offsetWidth); | |
| newPos = Math.max(0, newPos); | |
| newPos = Math.min(newPos, upperBound); | |
| currentVal = Math.round((newPos / upperBound) * 100, 0); | |
| root.querySelector('.LeafletSlider-button').style.left = newPos + 'px'; | |
| }; | |
| function startSlide(e) { | |
| isMouseDown = true; | |
| map.dragging.disable(); | |
| var pos = getMousePosition(e); | |
| startMouseX = pos.x; | |
| lastElemLeft = (root.querySelector('.LeafletSlider-button').offsetLeft - root.offsetLeft + 10); | |
| updatePosition(e); | |
| return false; | |
| } | |
| function moving(e) { | |
| if (isMouseDown) { | |
| updatePosition(e); | |
| var event = new CustomEvent('sliderChange', { | |
| detail: { | |
| value: currentVal | |
| } | |
| }); | |
| root.dispatchEvent(event); | |
| return false; | |
| } | |
| } | |
| function dropCallback(e) { | |
| if (isMouseDown) { | |
| isMouseDown = false; | |
| map.dragging.enable(); | |
| var event = new CustomEvent('sliderDrop', { | |
| detail: { | |
| value: currentVal | |
| } | |
| }); | |
| root.dispatchEvent(event); | |
| } | |
| } | |
| root.querySelector('.LeafletSlider-button').addEventListener('mousedown', startSlide); | |
| root.addEventListener('mousemove', moving, false); | |
| document.addEventListener('mouseup', dropCallback, false); | |
| }); | |
| return root; | |
| } | |
| }); | |
| L.control.slider = function(opts) { | |
| return new L.Control.Slider(opts); | |
| } |
| // Skapa kartan och ange dess egenskaper | |
| var map = L.map('map', { | |
| center: [64.556933, 17.626683], // ursprungs-centrum | |
| zoom: 4, // ursprungs-zoom | |
| }); | |
| // lägg till ett rut baserat rasterlager | |
| const osm = L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', { | |
| maxZoom: 18, | |
| subdomains: 'abc', | |
| attribution: 'OpenStreetMap', | |
| }).addTo(map); | |
| // lägg till ytterligare ett rut baserat rasterlager | |
| const karta = L.tileLayer('https://warper.wmflabs.org/maps/tile/1519/{z}/{x}/{y}.png', { | |
| attribution: 'Boston Public Library CC BY 2.0', | |
| maxZoom: 18, | |
| }).addTo(map); | |
| // skapa en glidare och ange dess egenskaper | |
| var slider = L.control.slider({ position: 'bottomleft' }).addTo(map); | |
| // lyssna efter förändring från en användare | |
| slider._container.addEventListener('sliderChange', function (e) { | |
| var opacity = (100- e.detail.value) / 100; // skala värdet från glidaren(0-1) | |
| karta.setOpacity(opacity); // använd det skalade värdet som opacitet för valt kartlager | |
| }, false); |