https://www.grenoble.fr/include/js/leaflet/osm.js

1var osm = {
2    token: '0mpJCppKJsNK9eIAkhsOeiWImKdDP4HyfRZLdAAUPKfjQQLEIOpEHuMD2cC2jpOE',
3    idtf: null,
4    map: null,
5    cluster: null,
6    lat: 45.185,
7    lng: 5.735,
8    zoom: 13,
9    bound: null,
10    aMarker: [],
11    aGeoJson: [],
12    inputs: {
13        latitude: null,
14        longitude: null
15    },
16
17    /**
18     * Initialisation de la carte
19     * @param pMapId L'identifiant de la div qui contient la carte
20     */
21    init: function (pMapId, aOption) {
22        if (typeof aOption === 'undefined') {
23            aOption = {};
24        }
25
26        osm.idtf = pMapId;
27        osm.map = L.map(pMapId, {
28            zoomControl: false,
29            gestureHandling: true,
30            zoomSnap: 1
31        }).setView([osm.lat, osm.lng], osm.zoom);
32
33        osm.bound = L.latLngBounds(osm.map.getCenter());
34
35        const contributors = '<a href="https://www.jawg.io" target="_blank">&copy; Jawg</a> - <a href="https://www.openstreetmap.org" target="_blank">&copy; OpenStreetMap</a>';
36        const OSM_jawgst = L.tileLayer('https://tile.jawg.io/jawg-streets/{z}/{x}/{y}.png?access-token=' + osm.token, {attribution: contributors});
37        const OSM_jawgte = L.tileLayer('https://tile.jawg.io/jawg-terrain/{z}/{x}/{y}.png?access-token=' + osm.token, {attribution: contributors}).addTo(osm.map);
38
39        osm.map
40            .addControl(L.control.layers({
41                'Vue rue': OSM_jawgst,
42                'Vue terrain': OSM_jawgte
43            }, null, {position: aOption.controlLayersPosition ? aOption.controlLayersPosition : 'topright'}))
44            .addControl(L.control.zoom({
45                position: aOption.controlZoomPosition ? aOption.controlZoomPosition : 'topleft',
46                zoomInTitle: 'Agrandir le zoom',
47                zoomOutTitle: 'Diminuer le zoom'
48            }))
49            .addControl(L.control.fullscreen({
50                position: aOption.controlFullscreenPosition ? aOption.controlFullscreenPosition : 'topleft',
51                pseudoFullscreen: true,
52                title: {
53                    'false': 'Afficher en plein écran',
54                    'true': 'Sortir du plein écran'
55                }
56            }))
57            .addControl(L.geolet({
58                position: 'bottomleft',
59                title: 'Me geolocaliser',
60                popup: false,
61                minZoom: 15
62            }));
63
64        if (aOption.addCluster) {
65            osm.cluster = new L.MarkerClusterGroup();
66            osm.map.addLayer(osm.cluster);
67        }
68
69        return osm.map;
70    },
71
72    clearAllMarkers: function () {
73        if (osm.aMarker.length) {
74            if (osm.cluster) {
75                osm.aMarker.forEach((item) => osm.cluster.removeLayer(item));
76            } else {
77                osm.aMarker.forEach((item) => osm.map.removeLayer(item));
78            }
79            osm.aMarker = [];
80            osm.bound = L.latLngBounds(osm.map.getCenter());
81        }
82        if (osm.aGeoJson.length) {
83            osm.aGeoJson.forEach((item) => osm.map.removeLayer(item));
84            osm.aGeoJson = [];
85            osm.bound = L.latLngBounds(osm.map.getCenter());
86        }
87    },
88
89    addGeoJson: function (data) {
90        const g = L.geoJson(data).addTo(osm.map);
91        osm.aGeoJson.push(g);
92        osm.bound.extend(g.getBounds());
93    },
94
95    addMarker: function (pLatitude, pLongitude, aOption) {
96        if (typeof aOption === 'undefined') {
97            aOption = {};
98        }
99        if (pLatitude === '' || pLongitude === '' || pLatitude === '0' || pLongitude === '0') {
100            return false;
101        }
102        if (aOption.inputLatLong) {
103            aOption.draggable = true;
104        }
105
106        const marker = L.marker([pLatitude, pLongitude], aOption);
107        if (osm.cluster && ! aOption.noAddToCluster) {
108            marker.addTo(osm.cluster);
109        } else if (aOption.mapTo) {
110            marker.addTo(aOption.mapTo);
111        } else {
112            marker.addTo(osm.map);
113        }
114        osm.aMarker.push(marker);
115        osm.bound.extend(marker.getLatLng());
116        if (osm.aMarker.length === 1) {
117            osm.map.panTo(marker.getLatLng());
118        }
119
120        if (aOption.inputLatLong) {
121            marker.on('dragend', function () {
122                aOption.inputLatLong.lat.val(marker.getLatLng().lat);
123                aOption.inputLatLong.lng.val(marker.getLatLng().lng);
124            });
125        }
126        return marker;
127    },
128
129    setInputValues: function (pLatitude, pLongitude) {
130        osm.inputs.latitude.val(pLatitude);
131        osm.inputs.longitude.val(pLongitude);
132    },
133
134    iconeClick: function (conteneur, zoomLevel) {
135        const wrapper = document.querySelector(conteneur);
136        wrapper.addEventListener('click', function (e) {
137            const btn = e.target.closest('button[data-marker]');
138            if (!btn || !wrapper.contains(btn)) return;
139
140            const markerName = btn.dataset.marker;
141            const _m = window[markerName];
142            const panDuration = 0.25;
143
144            if (!_m) return;
145
146            if (osm.cluster) {
147                osm.cluster.zoomToShowLayer(_m, function () {
148                    _m.openPopup();
149                });
150            } else {
151                osm.map.panTo(_m.getLatLng(), { animate: true, duration: panDuration});
152                _m.openPopup();
153            }
154
155            if (zoomLevel) {
156                setTimeout(() => {
157                    osm.map.setZoom(zoomLevel);
158                }, panDuration * 1000);
159            }
160        });
161    },
162
163    initGeocoding: function (pLatitudeInputId, pLongitudeInputId, btnGeocodingId, pAdresseInputId, pCodePostalInputId, pVilleInputId, aOption) {
164        if (typeof aOption === 'undefined') {
165            aOption = {};
166        }
167        const $lat = $('#' + pLatitudeInputId);
168        const $lng = $('#' + pLongitudeInputId);
169        aOption.inputLatLong = {lat: $lat, lng: $lng};
170        let marker = osm.addMarker($lat.val(), $lng.val(), aOption);
171
172        const geocoder = L.control.geocoder(osm.token, {
173            url: 'https://api.jawg.io/places/v1',
174            markers: false,
175            textStrings: {
176                INPUT_PLACEHOLDER: 'Adresse',
177                RESET_TITLE_ATTRIBUTE: 'Annuler',
178                NO_RESULTS: 'Pas de résultat'
179            }
180        }).addTo(osm.map);
181
182        geocoder.on('select', function (e) {
183            $lat.val(e.latlng.lat);
184            $lng.val(e.latlng.lng);
185            if (marker) {
186                var newLatLng = new L.LatLng($lat.val(), $lng.val());
187                marker.setLatLng(newLatLng);
188                osm.map.panTo(marker.getLatLng());
189            } else {
190                marker = osm.addMarker($lat.val(), $lng.val(), aOption);
191            }
192            if (pCodePostalInputId && pVilleInputId) {
193                $('#' + pAdresseInputId).val(e.feature.properties.name);
194                $('#' + pCodePostalInputId).val(e.feature.properties.postalcode);
195                $('#' + pVilleInputId).val(e.feature.properties.locality);
196            } else {
197                let adresse = e.feature.properties.name + ' \n';
198                adresse += e.feature.properties.postalcode + ' ';
199                adresse += e.feature.properties.locality;
200                $('#' + pAdresseInputId).val(adresse);
201            }
202            geocoder.collapse();
203        });
204
205        geocoder.on('expand', function () {
206            let adresse = $('#' + pAdresseInputId).val().replace('\n', ', ').trim();
207            if (pCodePostalInputId && pVilleInputId) {
208                adresse += ', ' + $('#' + pCodePostalInputId).val() + ' ' + $('#' + pVilleInputId).val();
209            }
210            $('#' + osm.idtf).find('.leaflet-pelias-input').val(adresse);
211        });
212
213        $('#' + btnGeocodingId).on('click', function () {
214            let adresse = $('#' + pAdresseInputId).val().replace('\n', ', ').trim();
215            if (pCodePostalInputId && pVilleInputId) {
216                adresse += ', ' + $('#' + pCodePostalInputId).val() + ' ' + $('#' + pVilleInputId).val();
217            }
218            if (! adresse) {
219                alert('Aucune adresse renseignée');
220                $lat.val('');
221                $lng.val('');
222                return false;

223            }
224            $.getJSON('https://api.jawg.io/places/v1/search?access-token=' + osm.token + '&text=' + adresse, function (data) {
225                if (data['features'].length === 0) {
226                    alert('Impossible de localiser l\'adresse :\n' + adresse);
227                    $lat.val('');
228                    $lng.val('');
229                } else {
230                    $lat.val(data['features'][0]['geometry']['coordinates'][1]);
231                    $lng.val(data['features'][0]['geometry']['coordinates'][0]);
232                    if (marker) {
233                        var newLatLng = new L.LatLng($lat.val(), $lng.val());
234                        marker.setLatLng(newLatLng);
235                        osm.map.panTo(marker.getLatLng());
236                    } else {
237                        marker = osm.addMarker($lat.val(), $lng.val(), aOption);
238                    }
239                }
240            });
241
242            return true;
243        });
244    }
245};