Published
Edited
May 19, 2020
Insert cell
md`# GeoTrack`
Insert cell
map = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
const container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
const location = await getLocation;
// Now we create a map object and add a layer to it.
const map = L.map(container).setView([location.coords.latitude, location.coords.longitude], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Add marker to map
// If we don't supply second argument, it uses default options (which is the default blue pin);
L.marker([location.coords.latitude, location.coords.longitude]).addTo(map);
}
Insert cell
mutable currentCoord = 0
Insert cell
await bang()
Insert cell
async function bang() {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(coords => {
console.log('coords', coords)
const newc = JSON.parse(JSON.stringify(coords));
console.log('newc', newc)
resolve(newc);
}, reject)
})
}
Insert cell
Insert cell
L = require('leaflet@1.2.0')
Insert cell
html`<link href='${resolve('leaflet@1.6.0/dist/leaflet.css')}' rel='stylesheet' />`
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