Published
Edited
Jul 24, 2018
1 star
Insert cell
Insert cell
Insert cell
{
// Создаем объект \`map\` с помощью конструктора mapboxgl.Map, ссылаясь на
// контейнер div
let map = new mapboxgl.Map({
container,
center: [
65.61457, 55.524149
],
zoom: 10,
style: 'mapbox://styles/mapbox/streets-v9',
scrollZoom: false
});
if (showNavigationControl) {
map.addControl(new mapboxgl.NavigationControl(), 'top-right');
}
// Будьте осторожны, при очистке ресурса карты, используя \`map.remove()\` всякий раз
// эта ячейка обновляется.
try {
yield map;
yield invalidation;
} finally {
map.remove();
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
map = {
let map = this;
if (!map) {
// Создайте объект \`map\` с помощью конструктора mapboxgl.Map, ссылаясь на
// контейнер div
map = new mapboxgl.Map({
container: container2,
center: [
65.352731704711914,
55.846272321172954
],
zoom: 4,
style: 'mapbox://styles/mapbox/light-v9'
});
}
// Подождите, пока карта загрузится, затем снова верните контейнер.
yield new Promise(resolve => {
if (map.loaded()) resolve(map);
else map.on('load', () => resolve(map));
});
map.setLayoutProperty('country-label-lg', 'text-field', ['get', 'name_' + language]);
}
Insert cell
Insert cell
Insert cell
Insert cell
centerpoint = {
// Создайте объект \`map\` с помощью конструктора mapboxgl.Map, ссылаясь на
// контейнер div
let map = new mapboxgl.Map({
container: container3,
center: [
65.352731704711914,
55.846272321172954
],
zoom: 4,
style: 'mapbox://styles/mapbox/light-v9'
});
return Generators.observe(change => {
map.on('mousemove', e => {
change(e.lngLat);
});
});
}
Insert cell
Insert cell
Insert cell
mapboxgl = {
let mapboxgl = await require('mapbox-gl@0.43.0');
mapboxgl.accessToken = 'pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg';
return mapboxgl;
}
Insert cell
html`<link href='https://unpkg.com/mapbox-gl@0.43.0/dist/mapbox-gl.css' rel='stylesheet' />`
Insert cell
Insert cell
html`<style>
.labeled::after {
margin-left: 2em;
white-space: nowrap;
content: attr(aria-label);
}
</style>`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more