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.

211 lines
10 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. /**
  2. Contrôleur qui gère la carte (charge son contenu et contrôle linteractivité)
  3. Voir la macro Twig `map` qui produit le HTML géré par ce contrôleur.
  4. Cf <https://leafletjs.com/reference.html>
  5. **/
  6. import { Controller } from '@hotwired/stimulus';
  7. import 'leaflet';
  8. export default class extends Controller {
  9. static values = {
  10. geojson: String,
  11. overpassResult: String,
  12. icon: String,
  13. popupUrl: String,
  14. }
  15. connect() {
  16. // Constitue une collection d’icones aux couleurs Bootstrap
  17. const iconHtml = `
  18. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
  19. <path fill="currentColor" d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
  20. </svg>
  21. `;
  22. const icons = {
  23. 'danger': L.divIcon({ html: iconHtml, className: 'svg-icon text-danger', iconSize: [16, 16], iconAnchor: [8, 16], }),
  24. 'warning': L.divIcon({ html: iconHtml, className: 'svg-icon text-warning', iconSize: [16, 16], iconAnchor: [8, 16], }),
  25. 'success': L.divIcon({ html: iconHtml, className: 'svg-icon text-success', iconSize: [16, 16], iconAnchor: [8, 16], }),
  26. 'info': L.divIcon({ html: iconHtml, className: 'svg-icon text-info', iconSize: [16, 16], iconAnchor: [8, 16], }),
  27. };
  28. var geojsons, _this = this, map = L.map(this.element.querySelector('#map'));
  29. this.mapInstance = map;
  30. // Commence par déclarer le fond de carte classique OSM par défaut
  31. L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  32. maxZoom: 19,
  33. attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  34. }).addTo(map);
  35. // Crée un ensemble de couches pour mieux les manipuler
  36. // individuellement
  37. var layer = L.featureGroup();
  38. // Crée la couche dédiée à Overpass
  39. var overpassLayer = L.featureGroup();
  40. if (this.overpassResultValue !== '') {
  41. geojsons = JSON.parse(this.overpassResultValue);
  42. if (geojsons.elements.length > 0) {
  43. // Ajoute chaque forme
  44. geojsons.elements.forEach(function (element) {
  45. // Cas d’un nœud
  46. if (element.type === 'node') {
  47. L.marker([ element.lat, element.lon ], {
  48. icon: icons['info'],
  49. }).addTo(overpassLayer).bindPopup(L.popup({
  50. overpassElement: element, // on transmet les données du geojson à la popup par là
  51. }).setContent('…')); // le contenu définitif de la popup sera chargé plus tard en ajax
  52. }
  53. // Cas d’autre chose qu’un nœud, sans distinction
  54. if (element.members) {
  55. element.members.forEach(function (member) {
  56. // TODO On est parti du principe que les features du
  57. // geojson sont toutes des polylines ce qui est un peu
  58. // réducteur, à terme il faudrait distinguer les géométries
  59. const polygon = L.polyline(member.geometry.map(function (coord) { return L.latLng(coord.lat, coord.lon)}), {
  60. color: '#0dcaf0', // bleu info bootstrap
  61. weight: 6, // l’idée c’est que ce soit plus gros (par défaut c’est 3) que le tracé des données des tâches parce que ce sera en dessous
  62. opacity: 0.8,
  63. }).addTo(overpassLayer).bindPopup(L.popup({
  64. overpassElement: element, // on transmet les données du geojson à la popup par là
  65. }).setContent('…')); // le contenu définitif de la popup sera chargé plus tard en ajax
  66. });
  67. }
  68. });
  69. // Intervient lors de l’ouverture de la popup associée à la forme
  70. overpassLayer.on('popupopen', function (event) {
  71. // Récupère le geojson de la forme
  72. var element = event.popup.options.overpassElement;
  73. // Enlève ce qui nous est inutile (les points, etc)
  74. delete element.members;
  75. // Ajoute ce qui peut-être utile (concernant la carte0
  76. element['map'] = {
  77. 'center': map.getCenter(),
  78. 'zoom': map.getZoom(),
  79. };
  80. // Effectue l’appel ajax pour récupérer le contenu de la popup
  81. fetch(_this.popupUrlValue + '?' + (new URLSearchParams({
  82. 'element': JSON.stringify(element),
  83. })))
  84. .then(function (response) {
  85. return response.text();
  86. })
  87. .then(function (text) {
  88. event.popup.setContent(text);
  89. });
  90. });
  91. overpassLayer.addTo(layer);
  92. }
  93. }
  94. // Créé la couche dédiée aux tâches
  95. var taskLayer = L.featureGroup();
  96. geojsons = JSON.parse(this.geojsonValue);
  97. if (geojsons.length > 0) {
  98. geojsons.forEach(function (geojson) {
  99. geojson.features.forEach(function (feature) {
  100. // Dessine la forme de la tâche avec la proprieté `name` qui
  101. // s’ffiche au survol et cliquable vers l’adresse web dans la
  102. // propriété `url`
  103. if (feature.geometry.type === 'Point') {
  104. L.marker([
  105. feature.geometry.coordinates[1],
  106. feature.geometry.coordinates[0],
  107. ], {
  108. icon: icons[feature.properties.color],
  109. title: feature.properties.name,
  110. clickUrl: feature.properties.url,
  111. }).addTo(taskLayer).on('click', function (event) {
  112. window.location.href = event.target.options.clickUrl;
  113. });
  114. } else {
  115. const polygon = L.geoJSON(feature, {
  116. style: function (feature) {
  117. // Par défaut c’est un bleu par défaut de leaflet mais
  118. // sinon on utilise les couleurs de Bootstrap
  119. var color = 'blue';
  120. switch (feature.properties.color) {
  121. case 'danger' : color = '#dc3545'; break
  122. case 'warning' : color = '#ffc107'; break
  123. case 'success' : color = '#198754'; break
  124. }
  125. if (feature.geometry.type === 'Polygon') {
  126. return {
  127. color: color,
  128. weight: 1,
  129. fillOpacity: 0.5,
  130. };
  131. } else {
  132. return {color: color};
  133. }
  134. }
  135. }).bindTooltip(feature.properties.name).addTo(taskLayer).on('click', function (event) {
  136. window.location.href = event.layer.feature.properties.url;
  137. });
  138. }
  139. });
  140. });
  141. taskLayer.addTo(layer);
  142. }
  143. layer.addTo(map);
  144. // Si la couche Overpass n’est pas vide, ajoute le sélecteur de couches
  145. // sur la carte
  146. if (this.overpassResultValue !== '') {
  147. L.control.layers({}, {
  148. 'Overpass': overpassLayer,
  149. 'Tâches': taskLayer,
  150. }).addTo(map);
  151. }
  152. // Zoome la carte pour que les données des tâches soient toutes
  153. // visibles
  154. map.fitBounds(taskLayer.getBounds());
  155. }
  156. openInOsm() {
  157. const url = "https://www.openstreetmap.org/#map="+this.mapInstance.getZoom()+"/"+this.mapInstance.getCenter().lat+"/"+this.mapInstance.getCenter().lng;
  158. window.open(url, '_blank');
  159. }
  160. openInPanoramax() {
  161. const url = "https://api.panoramax.xyz/#focus=map&map="+this.mapInstance.getZoom()+"/"+this.mapInstance.getCenter().lat+"/"+this.mapInstance.getCenter().lng;
  162. window.open(url, '_blank');
  163. }
  164. openInPifomap() {
  165. const url = "https://bano.openstreetmap.fr/pifometre/pifomap.html?ratio=N#map="+this.mapInstance.getZoom()+"/"+this.mapInstance.getCenter().lat+"/"+this.mapInstance.getCenter().lng;
  166. window.open(url, '_blank');
  167. }
  168. openInGeohack() {
  169. const url = "https://geohack.toolforge.org/geohack.php?params="+this.mapInstance.getCenter().lat+"_N_"+this.mapInstance.getCenter().lng+"_E";
  170. window.open(url, '_blank');
  171. }
  172. openInGeoportail() {
  173. const url = "https://www.geoportail.gouv.fr/carte?c="+this.mapInstance.getCenter().lng+","+this.mapInstance.getCenter().lat+"&z="+this.mapInstance.getZoom()+"&permalink=yes";
  174. window.open(url, '_blank');
  175. }
  176. openInMapillary() {
  177. const url = "https://www.mapillary.com/app/?lat="+this.mapInstance.getCenter().lat+"&lng="+this.mapInstance.getCenter().lng+"&z="+this.mapInstance.getZoom();
  178. window.open(url, '_blank');
  179. }
  180. openInGoogleMaps() {
  181. const url = "https://www.google.com/maps/@"+this.mapInstance.getCenter().lat+","+this.mapInstance.getCenter().lng+","+this.mapInstance.getZoom()+"z";
  182. window.open(url, '_blank');
  183. }
  184. openInBing() {
  185. const url = "https://www.bing.com/maps/?cp="+this.mapInstance.getCenter().lat+"%7E"+this.mapInstance.getCenter().lng+"&lvl="+this.mapInstance.getZoom();
  186. window.open(url, '_blank');
  187. }
  188. }