29:null 2a:["$","title",null,{"children":"Mapbox with hex grids Version 3.1 | Chuncheng | Observable"}] 2f:T7c4,mkGeoJson = (map) => { const timeStart = new Date(); // Some const for computation efficiency const { sqrt3 } = mathConst; const { xNum, padding } = map; console.log("Use", { xNum }); // Parse the current location var cx = map.getCenter().lng, cy = map.getCenter().lat, e = map.getBounds()._ne.lng, n = map.getBounds()._ne.lat, w = map.getBounds()._sw.lng, s = map.getBounds()._sw.lat; // Correct south lat on pitching s = 2 * cy - n; // xNum is defined, so compute the yNum for it var yNum = parseInt(xNum * aspect); // Make x- and y-Scaler var xScale = d3.scaleLinear().range([cx, e]).domain([0, xNum]), yScale = d3 .scaleLinear() .range([cy, n]) .domain([0, xNum * aspect]); // Parameters for Hex layout var rx = xScale(1) - xScale(0), ry = yScale(1) - yScale(0), rxFull = rx, ryFull = ry, c = sqrt3 / 2; // Padding rx and ry rx *= 1 - padding; ry *= 1 - padding; // Make features for Hex grids var coordinates, type, properties, x, y, uniqueID = 0; const features = []; const stationSummary = []; for (let i = -xNum; i < xNum + 3; i += 3) { for (let j = -yNum / c; j < yNum / c + 1; j += 1) { // Center x = xScale(i + 1.5 * (j % 2)); y = yScale(c * j); // The 6 nodes of the hex, 7 is for closing the polygon // It means the latest node is as the same as the first one. coordinates = [hexFunc(rx, ry, x, y)]; // Generate properties properties = { pos: [x, y], color: gridColor, opacity: 0.5, id: uniqueID, pattern: "" }; // Push the new feature features.push({ type: "Feature", properties, id: uniqueID, geometry: { coordinates, type: "Polygon" } }); uniqueID += 1; } } realTimeSummary.mkGeoJson = new Date() - timeStart; return { type: "FeatureCollection", features: features }; }30:T74d,// Initialize the mapbox { map.on("load", () => { // Init patterns patternImages.map((e) => { const { name, url } = e; map.loadImage(url, (err, image) => { // Throw an error if something goes wrong. if (err) throw err; // Add the image to the map style. map.addImage(name, image); }); }); // Init source map.addSource("gridGeometrySource", { type: "geojson", data: mkGeoJson(map) }); // Init grid stroke map.addLayer({ id: "hexStroke", type: "line", source: "gridGeometrySource", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": gridColor, "line-width": 1 } }); // Init grid fill map.addLayer({ id: "hexFill", type: "fill", source: "gridGeometrySource", layout: {}, paint: { "fill-color": [ "case", ["boolean", ["feature-state", "clicked"], false], "#000000", // Case fail, boolean is true ["get", "color"] // Case success, boolean is false ], "fill-opacity": ["get", "opacity"], "fill-pattern": ["get", "pattern"] } }); // Behavior onclick map.on("click", "hexFill", (e) => { map.setFeatureState( { source: "gridGeometrySource", id: e.features[0].id }, { clicked: true, patternName: patternContainer.currentPatternName } ); changePattern1(); }); // Add handlers { map.on("dragend", () => { console.log("dragend"); reDraw(); }); map.on("zoomend", () => { console.log("zoomend"); reDraw(); }); map.on("pitchend", () => { console.log("pitchend"); reDraw(); }); } }); }31:[{"id":"44eed3bb775fb0b85fd7f5687fbdf601a5539e9d55ad586023400cb2ad0f3ffda970dcd18f1645931911306e34ecb5d3c09a7ee77680c75d072fe19a65122fc3","href":"https://static.observableusercontent.com/files/44eed3bb775fb0b85fd7f5687fbdf601a5539e9d55ad586023400cb2ad0f3ffda970dcd18f1645931911306e34ecb5d3c09a7ee77680c75d072fe19a65122fc3","name":"subway-tianjin.json","type":"application/json","lastModified":1666939578889.339,"size":69964},{"id":"2d3f0f19c7ec07e086b0eaf40c637c89214d464847c90e31c70cece833849ff03a9a508427ffcdf5169f837e06428ae9bcc2da80f2e3196b73000913eade6730","href":"https://static.observableusercontent.com/files/2d3f0f19c7ec07e086b0eaf40c637c89214d464847c90e31c70cece833849ff03a9a508427ffcdf5169f837e06428ae9bcc2da80f2e3196b73000913eade6730","name":"subway-shanghai.json","type":"application/json","lastModified":1666939578889.339,"size":213270},{"id":"cfbe7cb1a9af936084aa7cf8ac56255cd015074ecf00548b3d588f7c37947457e66441eb1581335c0ffa992252ca1b891ece48c02c8cebef4c864c9bd1bb582c","href":"https://static.observableusercontent.com/files/cfbe7cb1a9af936084aa7cf8ac56255cd015074ecf00548b3d588f7c37947457e66441eb1581335c0ffa992252ca1b891ece48c02c8cebef4c864c9bd1bb582c","name":"subway.json","type":"application/json","lastModified":1666939578889.339,"size":180124}] 2d:{"id":"ad5d234901b9d172","slug":null,"title":"Mapbox with hex grids Version 3.1","thumbnail":"1393ab28c8b49112526479077678918aff95f00fa9d1cc958450f06e672669ec","access_level":"public","create_time":"$D2022-10-28T06:46:18.889Z","update_time":"$D2022-10-29T11:17:03.290Z","view_time":null,"first_public_time":"$D2022-10-28T06:46:18.889Z","fork":{"id":"aaffc3439d2559e9","slug":"mapbox-with-hex-grids-version-3","title":"Subway stations in hex grids","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":1182,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"16b273d4fd334cfd","slug":"mapbox","title":"Mapbox","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"Mapbox with hex grids Version 3.1","cells":[{"id":0,"value":"# Mapbox with hex grids Version 3.1\n\nPattern the hex cells by click.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"viewof reloadButton = Inputs.button(\"Reload\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"viewof xNum = Inputs.range([10, 100], { label: \"xNum\", step: 10, value: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof padding = Inputs.range([0, 0.5], {\n label: \"Padding\",\n value: 0.2,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"viewof gridColor = Inputs.color({ label: \"Grid color\", value: \"#e56666\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"viewof setZoom = Inputs.select([5, 10], { label: \"Zoom to\", value: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"viewof selectCity = Inputs.select(cityCenter.names, { label: \"Center to\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"viewof selectPattern = Inputs.select(\n patternImages.map((e) => e.name),\n { label: \"Select Pattern\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"{\n const content = patternImages.map((pi) => {\n const { name, url } = pi;\n return `

${name}

`;\n });\n return html`

${content.join(\"\\n\")}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"## Display","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"container = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1087,"value":"html`

[No data update]

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"Inputs.table(patternImages)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"patternImages = {\n return [\n {\n name: \"colorado_flag\",\n url: \"https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png\"\n },\n {\n name: \"popup-debug\",\n url: \"https://docs.mapbox.com/mapbox-gl-js/assets/popup_debug.png\"\n },\n {\n name: \"rock\",\n url: \"https://ts1.cn.mm.bing.net/th/id/R-C.89b1f9c2fe22fa021e7bc6de6805064d?rik=WJsqZ00RLIaJKw&riu=http%3a%2f%2fimages.unsplash.com%2fphoto-1522140243784-a1df85e3c0f4%3fcrop%3dentropy%26cs%3dtinysrgb%26fit%3dmax%26fm%3djpg%26ixid%3dMXwxMjA3fDB8MXxzZWFyY2h8Mnx8c3RvbmUlMjB0ZXh0dXJlfHwwfHx8%26ixlib%3drb-1.2.1%26q%3d80%26w%3d1080&ehk=QhmSbnxIzh9VsyX7%2fuFrLbqArJa5Eh8Y6Aqh40JmSBs%3d&risl=&pid=ImgRaw&r=0\"\n }\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"updateMapboxParamDiv = () => {\n const { mkGeoJson, reDraw } = realTimeSummary;\n document.getElementById(\"mapboxParamDiv\").innerHTML = html`\n

\n Map parameters: \nLat: ${map.getCenter().lat.toPrecision(8)},\nLng: ${map.getCenter().lng.toPrecision(8)},\nZoom: ${map.getZoom().toPrecision(8)}\n

\n Time Cost (milliseconds): \nmkGeoJson: ${mkGeoJson},\nreDraw: ${reDraw}\n

\n`.outerHTML;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"cityCenter = {\n return {\n shanghai: [121.47204, 31.216047],\n beijing: [116.40067, 39.887172],\n tianjin: [117.21687, 39.097083],\n names: [\"shanghai\", \"beijing\", \"tianjin\"]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"// Update contents of patternContainer\n{\n patternContainer.currentPatternName = selectPattern;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"// A buffer of pattern name, it receives pattern name and prevents updating onchange\npatternContainer = {\n return { currentPatternName: \"\" };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"{\n map.setZoom(setZoom);\n map.setCenter(cityCenter[selectCity]);\n reDraw();\n return { setZoom, selectCity };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"{\n map.xNum = xNum;\n map.padding = padding;\n reDraw();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"// Make the constants for higher efficiency\nmathConst = {\n const sqrt3 = Math.sqrt(3);\n return { sqrt3 };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"// Make function for generating Hex grids\n// hexFunc = mkHexFunc() yields hexFunc = ƒ(rx, ry, x, y)\n// rx, ry: Radius of the hex;\n// x, y: Center location of the hex.\n\nmkHexFunc = () => {\n const pnts = [];\n var rad,\n p = (2 * Math.PI) / 6;\n for (let i = 0; i < 7; ++i) {\n rad = i * p;\n pnts.push([Math.cos(rad), Math.sin(rad)]);\n }\n return (rx, ry, x, y) => {\n return pnts.map((e) => [e[0] * rx + x, e[1] * ry + y]);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"hexFunc = mkHexFunc()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"mkGeoJson(map)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"realTimeSummary = {\n return {\n mkGeoJson: -1,\n reDraw: -1\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"map.on(\"zoomend\", () => {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"reDraw = () => {\n const timeStart = new Date();\n map.getSource(\"gridGeometrySource\").setData(mkGeoJson(map));\n map.setPaintProperty(\"hexStroke\", \"line-color\", gridColor);\n changePattern1(true);\n realTimeSummary.reDraw = new Date() - timeStart;\n updateMapboxParamDiv();\n console.log(\"Redraw\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"changePattern1 = (clearAll = false) => {\n const { _data } = map.getSource(\"gridGeometrySource\");\n\n _data.features.map((feat) => {\n if (clearAll) {\n map.setFeatureState(\n {\n source: \"gridGeometrySource\",\n id: feat.id\n },\n { clicked: false, patternName: \"\" }\n );\n } else {\n const { patternName } = map.getFeatureState({\n source: \"gridGeometrySource\",\n id: feat.id\n });\n feat.properties.pattern = patternName ? patternName : \"\";\n }\n });\n\n map.getSource(\"gridGeometrySource\").setData(_data);\n return _data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"map = {\n reloadButton;\n const map = new mapboxgl.Map({\n container,\n center: cityCenter[\"beijing\"],\n zoom: 10,\n maxPitch: 80,\n style: \"mapbox://styles/listenzcc/cky2j3ywf13yi15nuybjj4kem\"\n // style: \"mapbox://styles/mapbox/light-v9\"\n });\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"aspect = 9 / 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = width * aspect","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoibGlzdGVuemNjIiwiYSI6ImNrMzU5MmpxZDAxMXEzbXQ0dnd4YTZ2NDAifQ.GohcgYXFsbDqfsi_7SXdpA\";\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"## Test field","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"