You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.5 KiB
39 lines
1.5 KiB
import { Controller } from '@hotwired/stimulus';
|
|
import 'leaflet';
|
|
|
|
export default class extends Controller {
|
|
static values = {
|
|
geojson: String,
|
|
}
|
|
|
|
connect() {
|
|
var map = L.map(this.element);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
var layer = L.featureGroup();
|
|
var geojsons = JSON.parse(this.geojsonValue);
|
|
if (geojsons.length > 0) {
|
|
geojsons.forEach(function (geojson) {
|
|
const feature0 = geojson.features[0].properties;
|
|
L.geoJSON(geojson, {
|
|
style: function (feature) {
|
|
var color = 'blue';
|
|
switch (feature.properties.color) {
|
|
case 'danger' : color = '#dc3545'; break
|
|
case 'warning' : color = '#ffc107'; break
|
|
case 'success' : color = '#198754'; break
|
|
}
|
|
return {color: color};
|
|
}
|
|
}).bindTooltip(feature0.name).addTo(layer).on('click', function (event) {
|
|
window.location.href = event.layer.feature.properties.url;
|
|
});
|
|
});
|
|
layer.addTo(map);
|
|
console.log(layer.getBounds().toBBoxString());
|
|
map.fitBounds(layer.getBounds());
|
|
}
|
|
}
|
|
}
|