https://www.mairie-villetaneuse.fr/template/villetaneuse-2018/js/carto-leaflet.js?ver=202102111638

1(function($) {
2  if ($('#omap, #mapDetail').length) {
3    var locations = [],
4        map,
5        tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
6          maxZoom: 18,
7          accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
8          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
9          id: 'mapbox/streets-v11',
10          worldCopyJump: true
11        }),
12        iconDefault = L.icon({
13          iconUrl: '/template/villetaneuse-2018/img/icones-carto/map-default.png',
14          // shadowUrl: '/template/villetaneuse-2018/img/ombre-marqueur.png',
15          iconSize: [24, 28],
16          // shadowSize: [24, 16],
17          iconAnchor: [12, 28],
18          // shadowAnchor: [0, 16],
19          popupAnchor: [0, -32]
20        }),
21        customLayer,
22        markersList = [],
23        markersObject = {},
24        // kmlLayer,
25        markersLayer,
26        coordonneesVilletaneuse = [48.9585032,2.3473081];
27  }
28
29  if ($('#mapDetail').length) {
30    map = L.map('mapDetail', {
31      center: [$('.marker').attr('data-lat'), $('.marker').attr('data-lng')],
32      layers: [tiles],
33      zoom: 14,
34      zoomControl: false
35    });
36
37    L.marker(
38      [$('.marker').attr('data-lat'), $('.marker').attr('data-lng')],
39      {icon: iconDefault}
40    ).addTo(map);
41  }
42
43  if ($('#omap').length) {
44    map = L.map('omap', {
45      center: coordonneesVilletaneuse,
46      layers: [tiles],
47      zoom: 15,
48      zoomControl: false
49    });
50
51    // Ajout du KML pour les communes
52    // customLayer = L.geoJson(null, {
53    //   // http://leafletjs.com/reference.html#geojson-style
54    //   style: function(feature) {
55    //     return { color: '#9b2b30', fill: '#9b2b30', weight:5, opacity:.5 };
56    //   }
57    // });
58
59    // kmlLayer = omnivore.kml('/files/villetaneuse-2018/files-kml/toutes-les-communes-13.kml', null, customLayer).on('ready', function() {
60    //   map.fitBounds(kmlLayer.getBounds());
61    // }).addTo(map);
62
63    var customLayer = L.geoJson(null, {
64          // http://leafletjs.com/reference.html#geojson-style
65          style: function(feature) {
66            return {
67              color: '#808080',
68              fill: false,
69              weight: 5,
70              opacity: .5
71            };
72          }
73        });
74
75    omnivore.kml('/files/villetaneuse/villetaneuse-2019.kml', null, customLayer).addTo(map);
76
77    function centerToMarker(event) {

78      map.setView(event.target.getLatLng());
79    }
80
81    $('.map-filters').click(function() {
82      $('.map-container').removeClass('layers-active').toggleClass('filters-active');
83      map.invalidateSize();
84    });
85
86    $('.map-layers').click(function() {
87      $('.map-container').removeClass('filters-active').toggleClass('layers-active');
88      map.invalidateSize();
89    });
90
91    $('.sidebar-close').click(function() {
92      $('.map-container').removeClass('filters-active layers-active');
93      map.invalidateSize();
94    });
95
96    $('.map-container').on('click', '.map-list a', function(event) {
97      var item = $(this).parent('.map-item');
98
99      event.preventDefault();
100
101      if (!$(this).is(':only-child')) {
102        item.addClass('active');
103      }
104
105      if (item.find('> div').find('> ul').find('> .map-item.point').length) {
106        var coordinates = [];
107
108        markersList = [];
109        markersObject = {};
110
111        if ($(this).closest('.map-sublist').length) {
112          $('.map-sidebar').addClass('sublist-active');
113        }
114
115        if (markersLayer) {
116          map.removeLayer(markersLayer);
117        }
118
119        item.find('> div').find('> ul').find('> .map-item.point').each(function() {
120          var htmlMarker = $('.marker[data-id="' + $(this).find('> a').attr('data-id') + '"]'),
121              icon = L.icon({
122                iconUrl: $(this).parents('.map-item').last().find('> a').css('background-image').replace(location.origin + '/', '').replace(/"|(url\()|\)/g, '').replace(/(picto-)|(ico-)/, 'map-'),

123                iconSize: [($(this).parents('.map-item').last().find('> a').css('background-image').indexOf('default') !== -1 ? 24 : 20), 28],
124                iconAnchor: [10, 28],
125                popupAnchor: [0, -32]
126              }),
127              marker = L.marker(
128                [htmlMarker.attr('data-lat'), htmlMarker.attr('data-lng')],
129                {
130                  title: htmlMarker.attr('data-title'),
131                  icon: icon
132                }
133              ).bindPopup('<div class="popup"><h3 class="popup-title">' + htmlMarker.attr('data-title') + '</h3>' + htmlMarker.html() + '<p><a class="popup-link" href="' + $(this).find('> a').attr('href') + '">Voir la fiche détaillée</a><br><button class="popup-zoom" type="button" data-zoom="' + htmlMarker.attr('data-lat') + ',' + htmlMarker.attr('data-lng') + '">Zoomer sur ce point</button></p></div>').on('click', centerToMarker);
134
135          coordinates.push([htmlMarker.attr('data-lat'), htmlMarker.attr('data-lng')]);
136          markersList.push(marker);
137          markersObject[htmlMarker.attr('data-id')] = marker;
138        });
139
140        if (markersList.length) {
141          markersLayer = L.layerGroup(markersList).addTo(map);
142          map.fitBounds(new L.LatLngBounds(coordinates), {maxZoom: 15});
143        } else {

144          map.setView(coordonneesVilletaneuse, 15);
145        }
146      } else if (item.hasClass('point')) {
147        for (id in markersObject) {
148          var marker = markersObject[id];
149
150          if (id === $(this).attr('data-id')) {
151            marker.openPopup();
152            map.setView(marker.getLatLng());
153          }
154        }
155      }
156    }).on('click', '.form-reset', function() {
157      $('#recherche').val('');
158      $('.sidebar-form').submit();
159    }).on('click', '.popup-zoom', function() {
160      map.setView($(this).attr('data-zoom').split(','), 18);
161    });
162
163    $('.map-list-back').click(function() {
164      $(this).closest('.map-item').removeClass('active').find('.map-item').removeClass('active');
165      $('.map-sidebar').removeClass('sublist-active');
166
167      if (markersLayer) {
168        map.removeLayer(markersLayer);
169      }
170
171      if ($(this).closest('.map-item.active').length) {
172        $(this).closest('.map-item.active').find('> a').click();
173      } else {
174        // map.fitBounds(kmlLayer.getBounds());

175        map.setView(coordonneesVilletaneuse, 15);
176      }
177    });
178
179    $('.sidebar-form').submit(function(event) {
180      var form = $(this),
181          query = $('#recherche').val() ? $(this).serialize() : {},
182          resultList = '',
183          coordinates = [];
184
185      markersList = [];
186      markersObject = {};
187
188      event.preventDefault();
189
190      if (markersLayer) {
191        map.removeLayer(markersLayer);
192      }
193
194      if ($('#recherche').val()) {
195        $.getJSON('/json', query, function (json) {
196          locations = json;
197        }).done(function() {
198          for (var i = 0, lLength = locations.length; i < lLength; i++) {
199            var point = locations[i],
200                marker = L.marker(
201                  [point.latitude, point.longitude],
202                  {
203                    title: point.titre,
204                    icon: iconDefault
205                  }
206                ).bindPopup('<div class="popup"><h3 class="popup-title">' + point.titre + '</h3>' + point.contenu + '<p><a class="popup-link" href="' + point.lien + '">Voir la fiche détaillée</a><br><button class="popup-zoom" type="button" data-zoom="' + point.latitude + ',' + point.longitude + '">Zoomer sur ce point</button></p></div>').on('click', centerToMarker);
207
208            coordinates.push([point.latitude, point.longitude]);
209            markersList.push(marker);
210            markersObject[point.id] = marker;
211            resultList += '<li class="map-item point"><a href="' + point.lien + '" data-id="' + point.id + '">' + point.titre + '</a></li>';
212          }
213
214          markersLayer = L.layerGroup(markersList).addTo(map);
215
216          if (coordinates.length) {
217            map.fitBounds(new L.LatLngBounds(coordinates), {maxZoom: 13});
218          } else {
219            // map.fitBounds(kmlLayer.getBounds());

220            map.setView(coordonneesVilletaneuse, 15);
221          }
222
223          $('.form-result').addClass('active').find('.map-list').html('<ul>' + resultList + '</ul>');
224          $('.result-count').find('.couleur').text(markersList.length);
225
226          if (!$('.form-reset').length) {
227            form.after('<button class="form-reset">Effacer</button>');
228          }
229        });
230      } else {
231        locations = [];
232
233        $('.form-result').removeClass('active');
234        $('.form-reset').remove();
235
236        if (!$('.map-item.active').length) {
237          // map.fitBounds(kmlLayer.getBounds());
238          map.setView(coordonneesVilletaneuse, 15);
239        } else {
240          $('.map-item.active').each(function() {
241            if (!$(this).find('.map-item.active').length) {
242              $(this).find('> a').click();
243            }
244          });
245        }
246      }
247    });
248
249    if ($('.map-item.' + location.href.split('/').pop()).length) {
250      $('.map-item.point').closest('.' + location.href.split('/').pop()).addClass('active').find('> a').click().parents('.map-item').addClass('active');
251    }
252  }
253
254  if ($('#omap, #mapDetail').length) {
255    L.control.zoom({position:'bottomright'}).addTo(map);
256    map.addControl(new L.Control.Fullscreen({position:'bottomright'}));
257  }
258})(jQuery);