https://www.gironde.fr/modules/custom/cd33_carto/js/carte_crd.js?v=2.0.0

1(function ($, Drupal) {
2  Drupal.behaviors.carto_crd = {
3    attach: function (context, settings) {
4
5      const card_code = 'carto_crd'
6      $('.' + card_code).each(function (index, item) {
7        const carto_id = $(item).data('random-id')
8        const map_id = 'map-' + card_code + '-' + carto_id
9        const infotemplate_title = settings.gironde_fr.arcgis[card_code][carto_id].infotemplate.title
10        const infotemplate_content = settings.gironde_fr.arcgis[card_code][carto_id].infotemplate.content
11
12        const secteurs_url = '//sig.gironde.fr/arcgis/rest/services/Routes_D%C3%A9partementales/MapServer/11'
13        const points_url = '//sig.gironde.fr/arcgis/rest/services/Routes_D%C3%A9partementales/MapServer/14'
14
15        require([
16            'esri/Map',
17            'esri/views/MapView',
18            'esri/layers/FeatureLayer',
19            'esri/widgets/Locate',
20            'esri/widgets/Search',
21            'dojo/domReady!'
22          ],
23          function (Map, MapView, FeatureLayer, Locate, Search) {
24
25            const map = new Map({
26              basemap: 'osm'
27            })
28
29            const view = new MapView({
30              container: map_id,
31              map: map,
32              center: [-1.0, 44.6088],
33              zoom: 8
34            })
35
36            const template = {
37              title: infotemplate_title,
38              content: infotemplate_content
39            }
40
41            const layerPoints = new FeatureLayer({
42              url: points_url
43            })
44
45            map.add(layerPoints)
46
47            const layerSecteurs = new FeatureLayer({
48              url: secteurs_url,
49              outFields: ['*'],
50              popupTemplate: template
51            })
52
53            map.add(layerSecteurs)
54
55            // Add a search widget to the very top left corner of the view
56
57            const searchWidget = new Search({
58              view: view,
59              popupEnabled: false
60            })
61
62            searchWidget.on('select-result', function (e) {
63              view.popup.clear()
64              const geometry = e.result.feature.geometry
65              const query = layerSecteurs.createQuery()
66              query.geometry = geometry
67
68              layerSecteurs.queryFeatures(query).then(function (result) {
69                view.popup.open({
70                  location: geometry,
71                  features: result.features
72                })
73              })
74            })
75
76            view.ui.add(searchWidget, {
77              position: 'top-left',
78              index: 0
79            })
80
81            function changeMouseCursor(response)
82            {
83              if (response.results.length > 0) {
84                document.getElementById(map_id).style.cursor = 'pointer'
85              } else {
86                document.getElementById(map_id).style.cursor = 'default'
87              }
88            }
89
90            view.on('pointer-move', function (evt) {
91              let screenPoint = {
92                x: evt.x,
93                y: evt.y
94              }
95              view.hitTest(screenPoint)
96                .then(function (response) {
97                  changeMouseCursor(response)
98                })
99            })
100
101          })
102
103        // Styling the map
104        $(this).height('650px')
105        $(this).parent().css('margin-top', '2rem')
106
107      })
108    }
109  }
110})(jQuery, Drupal)