I'm using leaflet to create a map with a custom sound layer. Each tile has a <audio> element in it, and I'm looking for a way to alter the audio playback as the user moves around the map (specifically, changing the volume based on the distance to the center).
So far, I found the move event on the map object, but I wonder if there is a way to pass it down to my custom gridlayer, then to the tiles - is it even possible to have a tile that reacts to an event?
Maybe I'm not following the right path, and I'd be better writing a Handler ?
Or maybe a different approach use this library, https://turfjs.org/docs/#squareGrid create a grid that will cover your entire map, set the size of each cell to the size of the tiles. After that, interaction with such cells should not be a problem.
// config map
let config = {
minZoom: 1,
maxZoom: 18,
};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 52.22977;
const lng = 21.01178;
// calling map
const map = L.map("map", config).setView([lat, lng], zoom);
// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
// ------------------------------
const bbox = [17, 54, 23, 50];
const cellSide = 50;
const options = { units: "kilometers" };
const squareGrid = turf.squareGrid(bbox, cellSide, options);
//addToMap
const addToMap = [squareGrid];
const gridLayers = L.geoJSON(addToMap, {
onEachFeature: function (feature, layer) {
layer.on("mouseover", function (e) {
// show voivodeship
this.setStyle({
fillColor: "#eb4034",
weight: 2,
color: "red",
fillOpacity: 0.7,
});
});
layer.on("mouseout", function () {
this.setStyle({
fillColor: "#3388ff",
weight: 2,
color: "#3388ff",
fillOpacity: 0.2,
});
});
},
}).addTo(map);
map.setView(gridLayers.getBounds().getCenter(), 7);*,
:after,
:before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body,
html,
#map {
width: 100%;
height: 100%;
}
body {
position: relative;
min-height: 100%;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>
<div id="map"></div>Another solution is to create with FeatureCollections with appropriate layers, you will be able to add sound, color or whatever parameters to each of them, and each click or mouse hover will trigger the appropriate action.