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        // Styling the map
16        $('#' + map_id).height('650px')
17        $(this).parent().css('margin-top', '2rem')
18
19        if (Drupal.cd33Carto && !Drupal.cd33Carto.apiDisponible()) {
20          return;
21        }
22
23        require([
24            'esri/Map',
25            'esri/views/MapView',
26            'esri/layers/FeatureLayer',
27            'esri/widgets/Locate',
28            'esri/widgets/Search',
29            'dojo/domReady!'
30          ],
31          function (Map, MapView, FeatureLayer, Locate, Search) {
32
33            const map = new Map({
34              basemap: 'osm'
35            })
36
37            const view = new MapView({
38              container: map_id,
39              map: map,
40              center: [-1.0, 44.6088],
41              zoom: 8
42            })
43
44            if (Drupal.cd33Carto && Drupal.cd33Carto.configurerVue4) {
45              Drupal.cd33Carto.configurerVue4(view)
46            }
47
48            const template = {
49              title: infotemplate_title,
50              content: infotemplate_content
51            }
52
53            const layerPoints = new FeatureLayer({
54              url: points_url,
55              renderer: {
56                type: 'simple',
57                symbol: {
58                  type: 'picture-marker',
59                  url: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PHBhdGggZmlsbD0iIzAwNjRDOCIgZD0iTTExLjY1Ny41QTguNjcgOC42NyAwIDAgMCAzIDkuMTcxQzMgMTQuMzIgMTEuNTc4IDI0LjUgMTEuNTc4IDI0LjVzOC43MzYtMTAuMTgxIDguNzM2LTE1LjMyOUE4LjY2NyA4LjY2NyAwIDAgMCAxMS42NTcuNVptLS4wMTIgMTMuMjMyYTQuNTYzIDQuNTYzIDAgMSAxIDAtOS4xMjYgNC41NjMgNC41NjMgMCAwIDEgMCA5LjEyNloiLz48L3N2Zz4=',
60                  width: '32px',
61                  height: '32px'
62                }
63              }
64            })
65
66            map.add(layerPoints)
67
68            const layerSecteurs = new FeatureLayer({
69              url: secteurs_url,
70              outFields: ['*'],
71              popupTemplate: template
72            })
73
74            map.add(layerSecteurs)
75
76            // Add a search widget to the very top left corner of the view
77
78            const searchWidget = new Search({
79              view: view,
80              popupEnabled: false
81            })
82
83            searchWidget.on('select-result', function (e) {
84              view.popup.clear()
85              const geometry = e.result.feature.geometry
86              const query = layerSecteurs.createQuery()
87              query.geometry = geometry
88
89              layerSecteurs.queryFeatures(query).then(function (result) {
90                view.popup.open({
91                  location: geometry,
92                  features: result.features
93                })
94              })
95            })
96
97            view.ui.add(searchWidget, {
98              position: 'top-left',
99              index: 0
100            })
101
102            function changeMouseCursor(response) {
103              if (response.results.length > 0) {
104                document.getElementById(map_id).style.cursor = 'pointer'
105              } else {
106                document.getElementById(map_id).style.cursor = 'default'
107              }
108            }
109
110            view.on('pointer-move', function (evt) {
111              let screenPoint = {
112                x: evt.x,
113                y: evt.y
114              }
115              view.hitTest(screenPoint)
116                .then(function (response) {
117                  changeMouseCursor(response)
118                })
119            })
120
121          })
122
123      })
124    }
125  }
126})(jQuery, Drupal)