Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
asc:rando [2017/01/08 23:25] – 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(mapid); | |
mapid.addLayer(ign); | |
var baseLayers = {"Carte IGN" : ign}; | |
L.control.layers(baseLayers, {}).addTo(mapid); | |
| |
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> | |