|
| 1 | +import { Controller } from '@hotwired/stimulus'; |
| 2 | +import 'leaflet/dist/leaflet.min.css'; |
| 3 | +import * as L from 'leaflet'; |
| 4 | + |
| 5 | +class default_1 extends Controller { |
| 6 | + constructor() { |
| 7 | + super(...arguments); |
| 8 | + this.markers = []; |
| 9 | + this.infoWindows = []; |
| 10 | + this.polygons = []; |
| 11 | + } |
| 12 | + connect() { |
| 13 | + const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue; |
| 14 | + this.dispatchEvent('pre-connect', { options }); |
| 15 | + this.map = this.doCreateMap({ center, zoom, options }); |
| 16 | + markers.forEach((marker) => this.createMarker(marker)); |
| 17 | + polygons.forEach((polygon) => this.createPolygon(polygon)); |
| 18 | + if (fitBoundsToMarkers) { |
| 19 | + this.doFitBoundsToMarkers(); |
| 20 | + } |
| 21 | + this.dispatchEvent('connect', { |
| 22 | + map: this.map, |
| 23 | + markers: this.markers, |
| 24 | + polygons: this.polygons, |
| 25 | + infoWindows: this.infoWindows, |
| 26 | + }); |
| 27 | + } |
| 28 | + createMarker(definition) { |
| 29 | + this.dispatchEvent('marker:before-create', { definition }); |
| 30 | + const marker = this.doCreateMarker(definition); |
| 31 | + this.dispatchEvent('marker:after-create', { marker }); |
| 32 | + this.markers.push(marker); |
| 33 | + return marker; |
| 34 | + } |
| 35 | + createPolygon(definition) { |
| 36 | + this.dispatchEvent('polygon:before-create', { definition }); |
| 37 | + const polygon = this.doCreatePolygon(definition); |
| 38 | + this.dispatchEvent('polygon:after-create', { polygon }); |
| 39 | + this.polygons.push(polygon); |
| 40 | + return polygon; |
| 41 | + } |
| 42 | + createInfoWindow({ definition, element, }) { |
| 43 | + this.dispatchEvent('info-window:before-create', { definition, element }); |
| 44 | + const infoWindow = this.doCreateInfoWindow({ definition, element }); |
| 45 | + this.dispatchEvent('info-window:after-create', { infoWindow, element }); |
| 46 | + this.infoWindows.push(infoWindow); |
| 47 | + return infoWindow; |
| 48 | + } |
| 49 | +} |
| 50 | +default_1.values = { |
| 51 | + providerOptions: Object, |
| 52 | + view: Object, |
| 53 | +}; |
| 54 | + |
| 55 | +class map_controller extends default_1 { |
| 56 | + connect() { |
| 57 | + L.Marker.prototype.options.icon = L.divIcon({ |
| 58 | + html: '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" clip-rule="evenodd" viewBox="0 0 500 820"><defs><linearGradient id="__sf_ux_map_gradient_marker_fill" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -37.57 37.57 0 416.45 541)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#126FC6"/><stop offset="1" stop-color="#4C9CD1"/></linearGradient><linearGradient id="__sf_ux_map_gradient_marker_border" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -19.05 19.05 0 414.48 522.49)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2E6C97"/><stop offset="1" stop-color="#3883B7"/></linearGradient></defs><circle cx="252.31" cy="266.24" r="83.99" fill="#fff"/><path fill="url(#__sf_ux_map_gradient_marker_fill)" stroke="url(#__sf_ux_map_gradient_marker_border)" stroke-width="1.1" d="M416.54 503.61c-6.57 0-12.04 5.7-12.04 11.87 0 2.78 1.56 6.3 2.7 8.74l9.3 17.88 9.26-17.88c1.13-2.43 2.74-5.79 2.74-8.74 0-6.18-5.38-11.87-11.96-11.87Zm0 7.16a4.69 4.69 0 1 1-.02 9.4 4.69 4.69 0 0 1 .02-9.4Z" transform="translate(-7889.1 -9807.44) scale(19.54)"/></svg>', |
| 59 | + iconSize: [25, 41], |
| 60 | + iconAnchor: [12.5, 41], |
| 61 | + popupAnchor: [0, -41], |
| 62 | + className: '', |
| 63 | + }); |
| 64 | + super.connect(); |
| 65 | + } |
| 66 | + dispatchEvent(name, payload = {}) { |
| 67 | + this.dispatch(name, { |
| 68 | + prefix: 'ux:map', |
| 69 | + detail: { |
| 70 | + ...payload, |
| 71 | + L, |
| 72 | + }, |
| 73 | + }); |
| 74 | + } |
| 75 | + doCreateMap({ center, zoom, options, }) { |
| 76 | + const map = L.map(this.element, { |
| 77 | + ...options, |
| 78 | + center: center === null ? undefined : center, |
| 79 | + zoom: zoom === null ? undefined : zoom, |
| 80 | + }); |
| 81 | + L.tileLayer(options.tileLayer.url, { |
| 82 | + attribution: options.tileLayer.attribution, |
| 83 | + ...options.tileLayer.options, |
| 84 | + }).addTo(map); |
| 85 | + return map; |
| 86 | + } |
| 87 | + doCreateMarker(definition) { |
| 88 | + const { position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition; |
| 89 | + const marker = L.marker(position, { title, ...otherOptions, ...rawOptions }).addTo(this.map); |
| 90 | + if (infoWindow) { |
| 91 | + this.createInfoWindow({ definition: infoWindow, element: marker }); |
| 92 | + } |
| 93 | + return marker; |
| 94 | + } |
| 95 | + doCreatePolygon(definition) { |
| 96 | + const { points, title, infoWindow, rawOptions = {} } = definition; |
| 97 | + const polygon = L.polygon(points, { ...rawOptions }).addTo(this.map); |
| 98 | + if (title) { |
| 99 | + polygon.bindPopup(title); |
| 100 | + } |
| 101 | + if (infoWindow) { |
| 102 | + this.createInfoWindow({ definition: infoWindow, element: polygon }); |
| 103 | + } |
| 104 | + return polygon; |
| 105 | + } |
| 106 | + doCreateInfoWindow({ definition, element, }) { |
| 107 | + const { headerContent, content, rawOptions = {}, ...otherOptions } = definition; |
| 108 | + element.bindPopup([headerContent, content].filter((x) => x).join('<br>'), { ...otherOptions, ...rawOptions }); |
| 109 | + if (definition.opened) { |
| 110 | + element.openPopup(); |
| 111 | + } |
| 112 | + const popup = element.getPopup(); |
| 113 | + if (!popup) { |
| 114 | + throw new Error('Unable to get the Popup associated with the element.'); |
| 115 | + } |
| 116 | + return popup; |
| 117 | + } |
| 118 | + doFitBoundsToMarkers() { |
| 119 | + if (this.markers.length === 0) { |
| 120 | + return; |
| 121 | + } |
| 122 | + this.map.fitBounds(this.markers.map((marker) => { |
| 123 | + const position = marker.getLatLng(); |
| 124 | + return [position.lat, position.lng]; |
| 125 | + })); |
| 126 | + } |
| 127 | +} |
| 128 | + |
| 129 | +export { map_controller as default }; |
0 commit comments