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