Estoy usando un folleto para crear un mapa con una capa de sonido personalizada. Cada mosaico tiene un elemento <audio> , y estoy buscando una manera de alterar la reproducción de audio a medida que el usuario se mueve por el mapa (específicamente, cambiando el volumen según la distancia al centro).
Hasta ahora, encontré el evento de move en el objeto del mapa, pero me pregunto si hay una manera de pasarlo a mi capa de cuadrícula personalizada, luego a los mosaicos. ¿Es posible tener un mosaico que reaccione a un evento?
¿Quizás no estoy siguiendo el camino correcto y sería mejor escribir un Handler ?
O tal vez un enfoque diferente use esta biblioteca, https://turfjs.org/docs/#squareGrid cree una cuadrícula que cubra todo su mapa, establezca el tamaño de cada celda al tamaño de los mosaicos. Después de eso, la interacción con tales células no debería ser un problema.
// 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>Otra solución es crear con FeatureCollections con capas apropiadas, podrá agregar sonido, color o cualquier parámetro a cada uno de ellos, y cada clic o movimiento del mouse activará la acción apropiada.