|
| 1 | +import AbstractMapController from '@symfony/ux-map'; |
| 2 | +import 'leaflet/dist/leaflet.min.css'; |
| 3 | +import * as L from 'leaflet'; |
| 4 | + |
| 5 | +class map_controller extends AbstractMapController { |
| 6 | + connect() { |
| 7 | + L.Marker.prototype.options.icon = L.divIcon({ |
| 8 | + 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>', |
| 9 | + iconSize: [25, 41], |
| 10 | + iconAnchor: [12.5, 41], |
| 11 | + popupAnchor: [0, -41], |
| 12 | + className: '', |
| 13 | + }); |
| 14 | + super.connect(); |
| 15 | + } |
| 16 | + dispatchEvent(name, payload = {}) { |
| 17 | + this.dispatch(name, { |
| 18 | + prefix: 'ux:map', |
| 19 | + detail: { |
| 20 | + ...payload, |
| 21 | + L, |
| 22 | + }, |
| 23 | + }); |
| 24 | + } |
| 25 | + doCreateMap({ center, zoom, options, }) { |
| 26 | + const map = L.map(this.element, { |
| 27 | + ...options, |
| 28 | + center: center === null ? undefined : center, |
| 29 | + zoom: zoom === null ? undefined : zoom, |
| 30 | + }); |
| 31 | + L.tileLayer(options.tileLayer.url, { |
| 32 | + attribution: options.tileLayer.attribution, |
| 33 | + ...options.tileLayer.options, |
| 34 | + }).addTo(map); |
| 35 | + return map; |
| 36 | + } |
| 37 | + doCreateMarker(definition) { |
| 38 | + const { position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition; |
| 39 | + const marker = L.marker(position, { title, ...otherOptions, ...rawOptions }).addTo(this.map); |
| 40 | + if (infoWindow) { |
| 41 | + this.createInfoWindow({ definition: infoWindow, element: marker }); |
| 42 | + } |
| 43 | + return marker; |
| 44 | + } |
| 45 | + doCreatePolygon(definition) { |
| 46 | + const { points, title, infoWindow, rawOptions = {} } = definition; |
| 47 | + const polygon = L.polygon(points, { ...rawOptions }).addTo(this.map); |
| 48 | + if (title) { |
| 49 | + polygon.bindPopup(title); |
| 50 | + } |
| 51 | + if (infoWindow) { |
| 52 | + this.createInfoWindow({ definition: infoWindow, element: polygon }); |
| 53 | + } |
| 54 | + return polygon; |
| 55 | + } |
| 56 | + doCreatePolyline(definition) { |
| 57 | + const { points, title, infoWindow, rawOptions = {} } = definition; |
| 58 | + const polyline = L.polyline(points, { ...rawOptions }).addTo(this.map); |
| 59 | + if (title) { |
| 60 | + polyline.bindPopup(title); |
| 61 | + } |
| 62 | + if (infoWindow) { |
| 63 | + this.createInfoWindow({ definition: infoWindow, element: polyline }); |
| 64 | + } |
| 65 | + return polyline; |
| 66 | + } |
| 67 | + doCreateInfoWindow({ definition, element, }) { |
| 68 | + const { headerContent, content, rawOptions = {}, ...otherOptions } = definition; |
| 69 | + element.bindPopup([headerContent, content].filter((x) => x).join('<br>'), { ...otherOptions, ...rawOptions }); |
| 70 | + if (definition.opened) { |
| 71 | + element.openPopup(); |
| 72 | + } |
| 73 | + const popup = element.getPopup(); |
| 74 | + if (!popup) { |
| 75 | + throw new Error('Unable to get the Popup associated with the element.'); |
| 76 | + } |
| 77 | + return popup; |
| 78 | + } |
| 79 | + doFitBoundsToMarkers() { |
| 80 | + if (this.markers.length === 0) { |
| 81 | + return; |
| 82 | + } |
| 83 | + this.map.fitBounds(this.markers.map((marker) => { |
| 84 | + const position = marker.getLatLng(); |
| 85 | + return [position.lat, position.lng]; |
| 86 | + })); |
| 87 | + } |
| 88 | +} |
| 89 | + |
| 90 | +export { map_controller as default }; |
0 commit comments