Test transect paysager
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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>
<!– Attention : normalement lien vers image.ensfea.fr mais en https <link rel=“stylesheet” href=“http://image.labotim.fr/opp/lib/leaflet/leaflet.css” /> <script src=“http://image.labotim.fr/opp/lib/leaflet/leaflet.js”></script> –> </head>
<body>
<div id="mapid" style="margin: 0 auto; width: 95%; height: 600px; box-shadow: 0 0 10px #999;"></div>
<script>
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '<a href="https://wiki.ensfea.fr/doku.php?id=geo:credits_carto">Credits</a>'
});
var Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: '<a href="https://wiki.ensfea.fr/doku.php?id=geo:credits_carto">Credits</a>'
});
var url_carto = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoiamlib3VpbGxlIiwiYSI6ImNqMjgyc3phOTAwMmIzMm5zc3BhYWFxMXkifQ.K8NLVNDa8P8tROjrQ45mVg";
var carto = new L.tileLayer(url_carto,
{
maxZoom: 20,
attribution: '<a href="https://wiki.ensfea.fr/doku.php?id=geo:credits_carto">Credits</a>',
id: 'mapbox.streets'
});
<!-- Gestion des spots -->
// var url_spots = "http://opp.jibouille.net/spot.php?spotName=Spot";
var url_spots = "http://image.labotim.fr/opp/spot.php?spotName=Spot";
var coordo = [];
var nbspots=0;
coordo.push(45.922721,2.956272);coordo.push(45.314305,1.772315);coordo.push(45.166669,1.460274);coordo.push(45.315906,1.786542);coordo.push(45.363125,1.948346);coordo.push(45.392745,2.025715);coordo.push(45.514053,2.315258);coordo.push(45.620439,2.457618);coordo.push(45.835123,2.818872);coordo.push(45.813658,2.953132);coordo.push(45.712195,2.7678899);coordo.push(45.474414,2.125363);coordo.push(43.561717,1.46813);nbspots = 13; var spots = new L.layerGroup();
for (var sp=1; sp<=nbspots; sp++) {
L.marker([coordo[2*sp-2] , coordo[2*sp-1]]).bindPopup("<b>Point de vue N°" + sp + "</b><br /><a href=" + url_spots + sp + ">Lien</a>").addTo(spots);
}
var tracks = new L.layerGroup(); var poly = [ [43.532409640029073, 1.499510323628783], [43.532386170700192, 1.4994334615767], [43.532297741621733, 1.499147890135646], [43.532164972275496, 1.498710690066218], [43.532084925100207, 1.498429896309972], [43.532017283141613, 1.498173158615828], [43.531913598999381, 1.49776479229331], [43.531848136335611, 1.497499421238899], [43.531731208786368, 1.497009918093681], [43.531663734465837, 1.496727531775832], [43.531568264588714, 1.496343472972512], [43.531497521325946, 1.496066199615598], [43.531395178288221, 1.495695635676384], [43.531323932111263, 1.495525063946843], [43.531268863007426, 1.495403107255697], [43.531152606010437, 1.495197918266058], [43.530947417020798, 1.494917962700129], [43.530794531106949, 1.494744038209319], [43.530658576637506, 1.494589308276772], [43.53058498352766, 1.494419658556581], [43.53058498352766, 1.494419658556581], [43.53058498352766, 1.494419658556581], [43.530362276360393, 1.494254870340228], [43.530213413760066, 1.494086058810353], [43.529986683279276, 1.493828734382987], [43.529775459319353, 1.493588509038091], [43.529583094641566, 1.493360437452793], [43.52946650236845, 1.493199840188026], [43.529275059700012, 1.493059862405062], [43.529151510447264, 1.493184668943286], [43.529023770242929, 1.493249461054802], [43.528776168823242, 1.493236972019076], [43.528662258759141, 1.493318611755967], [43.528506439179182, 1.493459260091186], [43.52830502204597, 1.493595717474818], [43.528122128918767, 1.493576439097524], [43.527972092851996, 1.493545928969979], [43.527955496683717, 1.493362700566649], [43.527929680421948, 1.493079224601388], [43.527903696522117, 1.49279348552227], [43.52786866016686, 1.492299707606435], [43.527854327112436, 1.491883462294936], [43.527838904410601, 1.49152010679245], [43.527811160311103, 1.491045691072941], [43.527789786458015, 1.490790462121367], [43.527772603556514, 1.490662973374128], [43.527772603556514, 1.490662973374128], [43.527772603556514, 1.490662973374128], [43.52781199850142, 1.490349574014544], [43.527801437303424, 1.490217391401529], [43.527624160051346, 1.490052435547113], [43.527615275233984, 1.489733839407563], [43.527609826996922, 1.489459499716759], [43.527549896389246, 1.489219777286053], [43.52752567268908, 1.488769082352519], [43.527584597468376, 1.48829709738493], [43.527597673237324, 1.487961485981941], [43.527608485892415, 1.487599974498153], [43.52762583643198, 1.487379027530551], [43.527728179469705, 1.486940570175648], [43.52781493216753, 1.486588111147285], [43.527918197214603, 1.486326260492206], [43.528032610192895, 1.485931808128953], [43.528088601306081, 1.485623186454177], [43.528151800855994, 1.48544741794467], [43.528220364823937, 1.485227309167385], [43.528264705091715, 1.484889015555382], [43.528251629322767, 1.484735962003469], [43.528220364823937, 1.484592128545046], [43.528160182759166, 1.484287697821856], [43.528109304606915, 1.48387162014842], [43.528144676238298, 1.483592167496681], [43.528203684836626, 1.483215736225247], [43.528242660686374, 1.482968805357814], [43.528301836922765, 1.482594637200236], [43.528406023979187, 1.482327003031969], [43.528478108346462, 1.482109911739826], [43.52860358543694, 1.481764996424317], [43.528766361996531, 1.481468109413981], [43.528852192685008, 1.481297537684441], [43.528925366699696, 1.481161331757903], [43.529039192944765, 1.480956478044391], [43.529124604538083, 1.480810130015016], [43.529301965609193, 1.480527324602008], [43.529482763260603, 1.480234460905194], [43.52959742769599, 1.480058692395687], [43.529687030240893, 1.479932041838765], [43.529749978333712, 1.479826681315899], [43.529804879799485, 1.479596178978682], [43.529718462377787, 1.47946709766984], [43.529517715796828, 1.479204325005412], [43.529537497088313, 1.479010367766023], [43.529723323881626, 1.47896770387888], [43.529738327488303, 1.478754468262196], [43.52976112626493, 1.478549866005778], [43.529703123494983, 1.478395387530327], [43.529581585898995, 1.478266390040517], [43.529370110481977, 1.478030858561397], [43.529123598709702, 1.477771103382111], [43.528959229588509, 1.477682422846556], [43.528654631227255, 1.47763816639781], [43.528352966532111, 1.477596592158079], [43.528093295171857, 1.477464661002159], [43.527961196377873, 1.477382183074951], [43.527873437851667, 1.47732350975275], [43.527781572192907, 1.477261818945408], [43.527615275233984, 1.477233907207847], [43.527438919991255, 1.477196859195828], [43.527274131774902, 1.477100383490324], [43.527130717411637, 1.477026371285319], [43.526855539530516, 1.476882034912705], [43.526576673611999, 1.476603671908379], [43.526432923972607, 1.476430501788855], [43.526315661147237, 1.476280214264989], [43.526151292026043, 1.476069828495383], [43.525982815772295, 1.475855503231287], [43.525858009234071, 1.475657019764185], [43.525783410295844, 1.475525759160519], [43.525719372555614, 1.475375890731812], [43.525689197704196, 1.47522141225636], [43.525661285966635, 1.47477918304503], [43.525628512725234, 1.474255062639713], [43.525604959577322, 1.473879972472787], [43.525569504126906, 1.473311679437757], [43.52554771117866, 1.472981935366988], [43.525479231029749, 1.472635762766004], [43.525404380634427, 1.472305431962013], [43.525407901033759, 1.472125723958015], [43.525464311242104, 1.471976190805435], [43.525560535490513, 1.471880972385406], [43.525685258209705, 1.471775360405445], [43.525789696723223, 1.471660863608122], [43.525939397513866, 1.471431786194444], [43.526045260950923, 1.47121611982584], [43.526107035577297, 1.471090475097299], [43.52616285905242, 1.470976481214166], [43.526297975331545, 1.470753690227866], [43.526466116309166, 1.470504160970449], [43.526568124070764, 1.470352783799171], [43.526710113510489, 1.470130998641253], [43.52677121758461, 1.470034020021558], [43.52693541906774, 1.469719531014562], [43.527053017169237, 1.469464721158147], [43.527205567806959, 1.469219718128443], [43.52743430994451, 1.468880502507091], [43.527646120637655, 1.468536760658026], [43.527870923280716, 1.468254625797272], [43.52802942506969, 1.468116827309132], [43.528267135843635, 1.467932173982263], [43.528381297364831, 1.467778198421001], [43.528436617925763, 1.467633694410324], [43.528436617925763, 1.467633694410324], [43.528436617925763, 1.467633694410324], [43.528436617925763, 1.467633694410324] ]; var polyline = L.polyline(poly, {color: 'red'}).bindPopup('<b>Track N°1</b><br /><a href=“http://image.labotim.fr/opp/video/transect.html” target=_blank>Lien</a>').addTo(tracks);
var overlayMaps = {
"Spots": spots,
"Tracks": tracks
};
<!-- Gestion des cartes de base -->
var baseMaps = {
"Raster": Esri_WorldImagery,
"Topo": Esri_WorldTopoMap,
"Carto": carto
};
var mymap = L.map('mapid',
{
center: [43.53,1.48],
zoom: 14,
layers: [carto,Esri_WorldTopoMap,Esri_WorldImagery]
});
mymap.addLayer(spots);
mymap.addLayer(tracks);
<!-- En 2 fois pour que les 2 soient cochées par défaut -->
L.control.layers(baseMaps, overlayMaps).addTo(mymap);
L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(mymap);
</script>
</body>
</html>