31:T87d,{ const polygon_layer = new deck.PolygonLayer({ id: 'polygon_layer', data: polygon_data, getFillColor: [250, 0, 0], getLineColor: [250, 0, 0], getLineWidth: d => poly_line_width, getPolygon: d => d.coordinates, stroked: true, filled: false, wireframe: true, pickable: true, // opacity: rescue_opacity }); const scatter_layer = new deck.ScatterplotLayer({ id: 'scatter_layer', data: scatter_data, getPosition: d => { return [d.x, d.y] }, getFillColor: d => { var inst_color var rgb = d3.color(cat_colors[d.name]) inst_color = [rgb.r, rgb.g, rgb.b, 255] return inst_color }, getRadius: radius, pickable: true, // autoHighlight: true, highlightColor: d => [50, 50, 50], radiusMinPixels: radius_min_pixels, updateTriggers: { // getFillColor: select_meta, // getPosition: map_type }, }) const pointcloud_layer = new deck.PointCloudLayer({ id: 'pointcloud_layer', data: scatter_data, getPosition: d => { return [d.x, d.y, scale_z * d.z] }, getColor: d => { var inst_color var rgb = d3.color(cat_colors[d.name]) inst_color = [rgb.r, rgb.g, rgb.b, 255] return inst_color }, getRadius: radius, pickable: true, pointSize:2, sizeUnits:'meters', // autoHighlight: true, highlightColor: d => [50, 50, 50], radiusMinPixels: radius_min_pixels, updateTriggers: { // getFillColor: select_meta, // getPosition: map_type }, }) const bitmap_layer = new deck.BitmapLayer({ id: 'bitmap_layer', bounds:image_bounds, image:image_proc, updateTriggers: { image: z_index, }, }); // deckgl.setProps({layers: [bitmap_layer, polygon_layer, scatter_layer]}); if (view_type === '3D'){ deckgl.setProps({layers: [bitmap_layer, polygon_layer, pointcloud_layer]}); } else { deckgl.setProps({layers: [bitmap_layer, polygon_layer, scatter_layer]}); } }32:[] 2f:{"title":"Deck.gl Image Polygon Scatter - 3D Multi-Level","cells":[{"id":0,"value":"md`# Deck.gl Image Polygon Scatter - 3D Multi-Level`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"\n\ndashboard = html`\n\n

${viewof view_type}

\n\n

${viewof z_index}

\n\n

\n ${container}\n

\n\n` \n//

${viewof select_meta}

","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"viewof z_index = slider({\n min: min_z_level, \n max: max_z_level, \n step: 1, \n value: ini_z_index, \n title: \"Z-Level\", \n // description: \"Z-level index from 0 to 10\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"ini_z_index = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"ini_view_type = '3D'","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"view_type","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"scale_z = 15","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"cat_colors = ({\n 'dog': 'blue', \n 'elephant': 'red'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof view_type = {\n const element = html`\n

`;\n\n d3.select(element)\n .selectAll('div')\n .data(['2D', '3D'])\n .join('span')\n .style('min-width', '200px')\n .style('max-width', '200px') \n .style('margin-right', '10px') \n .text(d => d)\n .style('font-weight', '550px') \n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"16\")\n .style(\"text-anchor\", \"end\")\n .style('font-weight', 'bold')\n .style('color', d => d === ini_view_type ? 'blue': '#808080')\n .on('click', function(d){\n d3.select(element).selectAll('span')\n .style('color', '#808080')\n d3.select(this)\n .style('color', 'blue') \n element.value = d.replace(', ', '')\n element.dispatchEvent(new CustomEvent(\"input\")); \n }) \n\n element.value = ini_view_type\n element.dispatchEvent(new CustomEvent(\"input\"))\n\n return element\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"tmp = 'something'","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"polygon_data = [\n {\n 'name': 'something',\n 'coordinates': [[0,1], [1,1], [2,2]], \n 'z': 0\n },\n \n {\n 'name': 'something',\n 'coordinates': [[10,11], [10,10], [12,12]], \n 'z': 1\n } \n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"scatter_data = [{'name': 'dog', 'x': 0, 'y': 1, 'z': 1},\n {'name': 'elephant', 'x': 2, 'y': 2, 'z': 2}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"// image = FileAttachment(\"image_string.txt\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"// image","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"// blue square image\nimage_string = '\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAHUlEQVR4nGNkYPjPQC5gIlvnqOZRzaOaRzVTRTMAIJ4BJ6WiocQAAAAASUVORK5CYII=\"'","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"images = ({\n 0: image_string, \n 1: image_string ,\n 2: image_string\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"z_levels = Object.keys(images)","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"min_z_level = d3.min(z_levels)","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"max_z_level = d3.max(z_levels)","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"image = images[z_index]","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"image_proc = image.slice(1,-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"// image.slice(1,-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"poly_line_width = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"deck = require.alias({\n // optional dependencies\n h3: {},\n s2Geometry: {}\n})('deck.gl@8.3.7/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"// image_bounds = [[0, -image_size], [0, 0], [image_size, 0], [image_size, -image_size]]\n\n// [[left, bottom], [left, top], [right, top], [right, bottom]]\nimage_bounds = [[0, -image_size], [0, 0], [image_size, 0], [image_size, -image_size]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"image_size = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"radius = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"radius_min_pixels = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"center_x = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"center_y = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"INITIAL_VIEW_STATE_2D = ({\n target: [center_x, center_y, 0],\n zoom: zoom,\n minZoom:min_zoom, \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"INITIAL_VIEW_STATE_3D = ({\n target: [center_x, center_y, 0],\n rotationX: 90,\n // rotationOrbit: -720,\n // minRotationX: -720,\n // minRotationOrbit: -720,\n zoom: zoom,\n minZoom:min_zoom\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"min_zoom = -1.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"zoom = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"view_type","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"deckgl = {\n \n // // reference for below https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles\n // // This is an Observable hack: clear previously generated content\n container.innerHTML = '';\n \n if (view_type == '3D'){\n var view = new deck.OrbitView({id: 'ortho'}) \n var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_3D\n } else {\n var view = new deck.OrthographicView({id: 'ortho'}) \n var INITIAL_VIEW_STATE = INITIAL_VIEW_STATE_2D \n }\n \n return new deck.DeckGL({\n container,\n views:[view],\n initialViewState:INITIAL_VIEW_STATE,\n controller: true,\n getTooltip: ({object}) => {\n return object && ` ${object.name}\n `}, \n \n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}