var map = null; // carte leaflet pour affichage
function go() {
var lon = document.getElementById("lon").value;
var lat = document.getElementById("lat").value;
var reverse= document.getElementById("reverse").checked;
var limit = document.getElementById("limit").value;
var graphIdx = document.getElementById("graph").selectedIndex;
var graph = document.getElementById("graph").options[graphIdx].value ;
var methodIdx = document.getElementById("method").selectedIndex;
var method = document.getElementById("method").options[methodIdx].value ;
var resultDiv = document.getElementById("result");
try {
Gp.Services.isoCurve({
position: {
x: lon,
y: lat
},
time: (method=="time" ? limit : null),
distance: (method=="distance" ? limit : null),
graph: graph,
reverse: reverse,
apiKey: "calcul",
onSuccess: function(result) {
resultDiv.innerHTML = "<p>" + JSON.stringify(result) + "</p>" ;
// affichage sur la carte
L.geoJson(result.geometry).addTo(map);
},
onFailure: function(error) {
resultDiv.innerHTML = "<p>" + error + "</p>"
}
});
} catch (e) {
resultDiv.innerHTML = "<p>" + e + "</p>"
}
}
map = L.map("map").setView([48.845, 2.424], 5);
L.tileLayer(
'https://wxs.ign.fr/essentiels/geoportail/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&format=image/png&style=normal', {
minZoom: 0,
maxZoom: 18,
tileSize: 256
}).addTo(map);
var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> Bibliothèque d'accès version " + Gp.servicesVersion + " (" + Gp.servicesDate + ")</p>";
<div id="params">
<p>
longitude :
<input type="text" id="lon" size="10"/>
latitude :
<input type="text" id="lat" size="10"/>
</p>
<p>
<input type="checkbox" value="true" id="reverse"> Position d'arrivée
</p>
<p>Methode de calcul :
<select id="method">
<option value="time">Isochrones</option>
<option value="distance">Isodistances</option>
</select>
</p>
<p>
Limite de temps (secondes) ou de distance (m)
<input type="text" id="limit" size="10"/>
</p>
<p>Graphe :
<select id="graph">
<option value="Pieton">Piéton</option>
<option value="Voiture">Voiture</option>
</select>
</p>
</div>
<div id="go">
<input type="button" value="IsoChrone" onclick="go()" />
</div>
<div id="map"></div>
<div id="result"></div>
<div id="info"></div>
#params {
width: 100%;
height: 200px;
box-shadow: 0 0 10px #999;
font-family: monospace;
padding: 5px;
}
#go {
padding: 5px;
float: center;
width: 100%;
height: 30px;
}
#map {
padding: 5px;
width: 100%;
height: 300px;
box-shadow: 0 0 10px #999;
}
#result {
padding: 5px;
width: 100%;
height: 200px;
box-shadow: 0 0 10px #999;
font-family: monospace;
overflow: scroll;
}
#info {
padding: 5px;
width: 100%;
height: 20px;
font-family: monospace;
}