The avatar for @planemad
Arun Ganesh
Drawing rivers and roads on a mathematical projection of the earth. Like to dig out large stones when I find them.
Published
Edited
Oct 5, 2022
2 forks
Importers
8 stars
Insert cell
Insert cell
Insert cell
map1.keyboard
Insert cell
Insert cell
Insert cell
table(inspectCounty.map(feature => feature.properties))
Insert cell
map2.getLayer('us county')
Insert cell
map2.on('mousemove', e => {
let features = map2.querySourceFeatures('us county', {
sourceLayer: "historical_pres_elections_county"
});
console.log(features);
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
findLayers(map1, function(layer) {
return layer['source-layer'] == 'place_label';
})
Insert cell
Insert cell
findLayers(map1)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md`### search

Use the [Mapbox Geocoding API](https://docs.mapbox.com/search-playground/) to search for a location using an input string. Copied from https://observablehq.com/@mbostock/mapbox-fly-to

~~~js
import {search} from "@planemad/mapbox-gl-cartography"
~~~
`
Insert cell
Insert cell
Insert cell
Insert cell
d3.tile()
Insert cell
tileData = {
var height = 520;

var projection = d3
.geoAzimuthalEqualArea()
.center([0, 0])
.rotate([96, -40, 6])
.scale(1700)
.translate([width / 2, height / 2]);

var tile = d3
.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]));

var tiles = Promise.all(
tile().map(async t => {
let data = new vt.VectorTile(
new protobuf(
await d3.buffer(
`https://api.mapbox.com/v4/mapbox.mapbox-streets-v8,mapbox.hist-pres-election-county/${t.z}/${t.x}/${t.y}.mvt?sku=101esRrPXF7pO&access_token=pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiemdYSVVLRSJ9.g3lbg_eN0kztmsfIPxa9MQ`
)
)
).layers;

t.data = Object.keys(data).reduce((initialData, key) => {
initialData[key] = {
type: "FeatureCollection",
features: [...Array(data[key].length).keys()].map((item, i) => {
let feature = data[key].feature(i).toGeoJSON(t.x, t.y, t.z);

if (key === 'water') {
feature.properties['class'] = 'water';
}

return feature;
})
};

return initialData;
}, {});

return t;
})
);

return tiles;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
addLayersFromStyle()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mapboxgl = {
let mapboxgl = await require('mapbox-gl');

if (!mapboxgl.accessToken) {
mapboxgl.accessToken = accessToken;
const href = await require.resolve("mapbox-gl/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}

return mapboxgl;
}
Insert cell
mapboxglGeocoder = {
let mapboxglGeocoder = await require('https://bundle.run/@mapbox/mapbox-gl-geocoder@4.6.0');

const href = await require.resolve(
"@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css"
);
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
return mapboxglGeocoder;
}
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3", "d3-tile")
Insert cell
vt = require('https://bundle.run/@mapbox/vector-tile@1.3.1')
Insert cell
Insert cell
import { table } from "@gampleman/table"
Insert cell
import { text, autoSelect } from "@jashkenas/inputs"
Insert cell
Insert cell
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