| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| asc:rando [2017/01/08 23:26] – jbpuel | asc:rando [2017/01/16 22:49] (Version actuelle) – jbpuel |
|---|
| Une bonne source d'informations sur le site de la communauté de communes, le [[http://www.sicoval.fr/fr/sortir/promenades-et-randonnees.html|Sicoval]]. | Une bonne source d'informations sur le site de la communauté de communes, le [[http://www.sicoval.fr/fr/sortir/promenades-et-randonnees.html|Sicoval]]. |
| |
| Carte des environs de l'ENSFEA. Pour obtenir les coordonnées d'un point, cliquer sur la carte. | |
| |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> | |
| <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> | |
| <script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script> | |
| </head> | |
| <body> | |
| <center> | |
| <div id="mapid" style="width: 800px; height: 500px;"></div> | |
| <script> | |
| var ignKey = "creg33c72cmsdz555il0jl57"; | |
| var layerIGNScanStd = "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD"; | |
| var url = "http://wxs.ign.fr/" + ignKey + "/geoportail/wmts"; | |
| var ign = new L.TileLayer.WMTS( url , | |
| { | |
| layer: layerIGNScanStd, | |
| style: "normal", | |
| tilematrixSet: "PM", | |
| format: "image/jpeg", | |
| attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>© <a href='http://www.ign.fr'>IGN</a>" | |
| }); | |
| var mymap = L.map('mapid').setView([43.5352, 1.4876], 15); | |
| L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { | |
| maxZoom: 18, | |
| attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + | |
| '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="http://mapbox.com">Mapbox</a>', | |
| id: 'mapbox.streets' | |
| }).addTo(mymap); | |
| |
| L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(mymap); | |
| mymap.addLayer(ign); | |
| var baseLayers = {"Carte IGN" : ign}; | |
| L.control.layers(baseLayers, {}).addTo(mymap); | |
| |
| L.marker([43.534227 , 1.488545]).addTo(mymap).bindPopup("<b>Salut !</b><br />Je suis le gymnase."); | |
| <!-- Pour ouverture par défaut ajouter .openPopup(); --> | |
| | |
| L.circle([43.534864, 1.486942], 11, { | |
| color: 'red', | |
| fillColor: '#f03', | |
| fillOpacity: 0.5 | |
| }).addTo(mymap).bindPopup("Je suis le cercle."); | |
| |
| var trajetBoisJoli = [ | |
| [43.53529218508908, 1.4873224496841428], | |
| [43.53562274375085, 1.4871078729629514], | |
| [43.536470521211925, 1.4894628524780271], | |
| [43.536050522858545, 1.4897525310516355], | |
| [43.53731050914266, 1.4932984113693235], | |
| [43.5373766188072, 1.4937812089920044], | |
| [43.53682440644249, 1.494027972221374], | |
| [43.5351560721723, 1.4951652288436883], | |
| [43.53471661980089, 1.4953529834747314], | |
| [43.534537726767894, 1.4945107698440552], | |
| [43.53443661307975, 1.494237184524536], | |
| [43.53425771921613, 1.4939421415328975], | |
| [43.53418382811756, 1.4937597513198848], | |
| [43.53410215890335, 1.4933842420577998], | |
| [43.53327379348022, 1.4935773611068721], | |
| [43.533013225478214, 1.4936739206314085] | |
| ]; | |
| L.polyline(trajetBoisJoli).addTo(mymap).bindPopup("Aller au Bois Joli."); | |
| |
| |
| var popup = L.popup(); | |
| function onMapClick(e) { | |
| popup | |
| .setLatLng(e.latlng) | |
| .setContent("Coordonnées : " + e.latlng.toString()) | |
| .openOn(mymap); | |
| } | |
| mymap.on('click', onMapClick); | |
| </script> | |
| </center> | |
| </body> | |
| </html> | |
