Drawing rivers and roads on a mathematical projection of the earth. Like to dig out large stones when I find them.
mapLayers = ({
"reveal-heatmap": {
id: 'reveal-heatmap',
type: 'heatmap',
source: 'reveal-points',
maxzoom: 24,
paint: {
// Increase the heatmap weight based on frequency and property magnitude
'heatmap-weight': 1,
// Increase the heatmap color weight weight by zoom level
// heatmap-intensity is a multiplier on top of heatmap-weight
'heatmap-intensity': 1,
// Color ramp for heatmap. Domain is 0 (low) to 1 (high).
// Begin color ramp at 0-stop with a 0-transparancy color
// to create a blur-like effect.
'heatmap-color': [
"interpolate",
["linear"],
["heatmap-density"],
0,
"hsl(0, 0%, 19%)",
0.1,
"hsla(0, 0%, 24%, 0.59)",
1,
"hsla(0, 100%, 50%, 0)"
],
// Adjust the heatmap radius by zoom level
'heatmap-radius': 15,
// Transition from heatmap to circle layer by zoom level
'heatmap-opacity': 1
}
}
})
viewof mousePosition = {
var container = html`<span"></span>`;
map.on('mousemove', function(e) {
let points = map.getSource('reveal-points')._data;
points = turf.simplify(points, { tolerance: 5 });
points.features.push({
type: "Feature",
properties: {},
geometry: {
type: "Point",
coordinates: e.lngLat.toArray()
}
});
map.getSource('reveal-points').setData(points);
console.log(e.lngLat);
console.log(points);
container.innerHTML =
// e.point is the x, y coordinates of the mousemove event relative
// to the top-left corner of the map
JSON.stringify(e.point) +
'<br />' +
// e.lngLat is the longitude, latitude geographical position of the event
JSON.stringify(e.lngLat.wrap());
container.value = {
point: e.point,
lngLat: e.lngLat
};
container.dispatchEvent(new CustomEvent("input"));
});
return container;
}
turf = require('@turf/turf')
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.
