data = d3.json("https://raw.githubusercontent.com/niiyz/JapanCityGeoJson/master/geojson/13/13103.json")
height = 400
viewof map = {
const container = html`<div style="height:${height}px;">`;
yield container; // Give the container dimensions.
const map = container.value = new mapboxgl.Map({
container,
center: [-97.547760, 35.486067],
zoom: 11,
style: "mapbox://styles/mapbox/streets-v9",
scrollZoom: true
});
map.on("load", () => {
var geojson = {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-97.554882, 35.542201],
[-97.617270, 35.482703]
]
},
"properties": {
"title": 'aaaaaa' // this is a field we can reference in the addLayer with '{title}'
}
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-97.617270, 35.482703],
[-97.535206, 35.427500]
]
},
"properties": {
"title": 'bbbbbb'
}
}, {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-97.617270, 35.482703],
[-97.491217, 35.476099]
]
},
"properties": {
"title": 'cccccc'
}
}]
}
};
map.addSource("route", geojson);
map.addLayer({
"id": "route",
"type": "line",
"source": "route",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "lightgreen",
"line-width": 8
}
});
map.addLayer({
"id": "symbols",
"type": "symbol",
"source": "route",
"layout": {
"symbol-placement": "line-center",
"text-font": ["Open Sans Regular"],
"text-field": '{title}',
// "text-field": [
// 'format',
// ['get', 'title'],
// { 'font-scale': 1.2 },
// '\n',
// {},
// ['get', 'title'],
// {
// 'font-scale': 0.8,
// 'text-font': [
// 'literal',
// ['DIN Offc Pro Italic', 'Arial Unicode MS Regular']
// ]
// }
// ],
"text-size": 16,
"text-rotate": -4,
"symbol-spacing": 1,
},
"paint":{
"text-translate":[0,-20],
}
});
});
invalidation.then(() => map.remove());
}
mapboxgl = {
const gl = await require("mapbox-gl@0.54");
if (!gl.accessToken) {
// token allowed only for @sw1227
gl.accessToken = "pk.eyJ1IjoiY2hyaXN6cmMiLCJhIjoiY2thcGxpcHd0MGdzdTJxcXlua2V6cDYzeiJ9.l1puPEgB888XpHH5sLFTTQ";
const href = await require.resolve("mapbox-gl@1.10.1/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
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.
