Примеры
Строим область на карте, достижимую от точки отправления/до точки прибытия.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS isochrone API</title>
<meta name="description" content="Several destination points example" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
select {
border: 0;
padding: 4px 10px;
font-size: 13px;
box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
border-radius: 4px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="tooltip"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const reqUrl = `https://catalog.api.2gis.com/get_hull?key=Your directions API access key`;
const start = {
lat: 54.97564330524832,
lon: 82.88566589362209,
};
const map = new mapgl.Map('container', {
center: [start.lon, start.lat],
zoom: 11,
key: 'Your API access key',
});
const controlsHtml = `<div class="controls">
<select name="reverse">
<option value="true">Поиск до точки</option>
<option value="false" selected>Поиск от точки</option>
</select>
<select name="mode">
<option value="walking">пешком</option>
<option value="driving" selected>на авто</option>
</select>
<select name="duration">
<option value="600">10 минут</option>
<option value="1200" selected>20 минут</option>
</select>
</div>`;
new mapgl.Control(map, controlsHtml, {
position: 'topLeft',
});
const reverseSelectEl = document.querySelector('select[name="reverse"]');
const modeSelectEl = document.querySelector('select[name="mode"]');
const durationSelectEl = document.querySelector('select[name="duration"]');
const startMarker = new mapgl.Marker(map, {
coordinates: [start.lon, start.lat],
});
let polyline;
function renderGeometries(geometries) {
if (polyline) {
polyline.destroy();
}
polyline = new mapgl.Polyline(map, {
coordinates: geometries.map((item) => [item.lon, item.lat]),
width: 2,
color: '#00b7ff',
});
}
window.addEventListener('change', (evt) => {
if (evt.target.name === 'reverse' || evt.target.name === 'mode' || evt.target.name === 'duration') {
updateGeometries();
}
});
updateGeometries();
function updateGeometries() {
const reverse = reverseSelectEl.value;
const mode = modeSelectEl.value;
const duration = Number(durationSelectEl.value);
fetch(reqUrl, {
method: 'POST',
body: JSON.stringify({
start,
durations: [duration],
mode,
reverse,
start_time: new Date().toISOString(),
}),
})
.then((res) => res.json())
.then((parsed) => renderGeometries(parsed.geometries[0].points))
.catch((err) => console.error('error', err));
}
</script>
</body>
</html>