58178df982d481a05a27a0677d43be68a5ab0775
[lhc/web/spip_carte_de_sites.git] / contenu / page-carte_de_sites.html
1 <div id="map" style="width: 540px; height: 400px"></div>
2
3
4 <h2 class='h2 spip'>Legende</h2>
5 <BOUCLE_legende(MOTS){type = Ateliers}{par num titre}>
6 <p>#LOGO_MOT [(#TITRE|supprimer_numero)]</p>
7 </BOUCLE_legende>
8
9
10
11 <h2 class='h2 spip'>Ateliers</h2>
12 <BOUCLE_liste_pays(GIS){par pays}{fusion pays}>
13 <h3 class='h3 spip'>#PAYS</h3>
14 <BOUCLE_liste_region(GIS){par region}{pays}{fusion region}>
15 <h4 class='h4 spip'>#REGION</h4>
16 <BOUCLE_liste_ateliers(GIS){par ville}{region}>
17 <li>#VILLE (#CODE_POSTAL) #TITRE - #ADRESSE</li>
18 </BOUCLE_liste_ateliers>
19 </BOUCLE_liste_region>
20 </BOUCLE_liste_pays>
21
22 <script src="#CONFIG{adresse_site}/lib/CloudMade-Leaflet-404b097/dist/leaflet.js"></script>
23 <script>
24 var map = new L.Map('map');
25
26 var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
27 cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
28 cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
29
30 map.setView(new L.LatLng(46.8, 2.52), 5).addLayer(cloudmade);
31
32 var WorkshopIcon = L.Icon.extend({
33 iconUrl: '#CONFIG{adresse_site}/plugins/carte-de-sites/images/grey.png',
34 shadowUrl: '#CONFIG{adresse_site}/lib/CloudMade-Leaflet-404b097/dist/images/marker-shadow.png',
35 iconSize: new L.Point(25, 41),
36 shadowSize: new L.Point(41, 41),
37 iconAnchor: new L.Point(13, 41),
38 popupAnchor: new L.Point(0, -33)
39 });
40
41 var greyIcon = new WorkshopIcon()
42 redIcon = new WorkshopIcon('#CONFIG{adresse_site}/plugins/carte-de-sites/images/red.png'),
43 yellowIcon = new WorkshopIcon('#CONFIG{adresse_site}/plugins/carte-de-sites/images/yellow.png'),
44 blueIcon = new WorkshopIcon('#CONFIG{adresse_site}/plugins/carte-de-sites/images/blue.png'),
45 greenIcon = new WorkshopIcon('#CONFIG{adresse_site}/plugins/carte-de-sites/images/green.png');
46
47
48 <BOUCLE_ateliers_types(MOTS){type = Ateliers}{par num titre}>
49 <BOUCLE_sites(SITES){id_mot}>
50 <BOUCLE_coord(GIS){id_syndic}>
51 siteIcon = new WorkshopIcon('#CONFIG{adresse_site}/IMG/[(#LOGO_MOT|fichier)]')
52 var markerGrenoble = new L.Marker(new L.LatLng(#LAT, #LON), {icon: siteIcon});
53 map.addLayer(markerGrenoble);
54 markerGrenoble.bindPopup("<a href='#URL_SITE'>#NOM_SITE</a><br/>#_sites:DESCRIPTIF<br/>#ADRESSE<br/> #CODE_POSTAL #VILLE<br/><br/><em>Statut: [(#_ateliers_types:TITRE|supprimer_numero)]</em>");
55 </BOUCLE_coord>
56 </BOUCLE_sites>
57 </BOUCLE_ateliers_types>
58
59
60 map.on('click', onMapClick);
61
62 var popup = new L.Popup();
63
64 function onMapClick(e) {
65 var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
66
67 popup.setLatLng(e.latlng);
68 popup.setContent("You clicked the map at " + latlngStr);
69 map.openPopup(popup);
70 }
71
72 </script>