2d:null 2e:["$","title",null,{"children":"Leaflet Pixi Overlay | Taras Novak | Observable"}] 33:T10de,function createMapDataOverlay(map, data, textures) { return L.pixiOverlay(utils => { // pixi overlay projection utils vars const pixiContainer = utils.getContainer(); const renderer = utils.getRenderer(); const project = utils.latLngToLayerPoint; const zoom = utils.getMap().getZoom(); const scale = utils.getScale(); const scaleInverse = 1/scale; const duration = 250; // 100; const markers = []; // TODO: color scale based on crime type const colorScale = d3.scaleLinear() .domain([0, 50, 100]) .range(["#c6233c", "#ffd300", "#008000"]); // drawing vars let start = null; let frame = null; let firstDraw = true; let lastMapZoom; let centerPoint = [41.85, -87.68]; let centerPointXY; let pointRadius = 5; let focusMarker = null; if (frame) { // reset zoom animation cancelAnimationFrame(frame); frame = null; } // add center point for preview [circle].forEach(function(geo) { geo.interactive = true; }); if (firstDraw) { lastMapZoom = zoom; centerPointXY = project(centerPoint); pointRadius = pointRadius / scale; // plot data points const pointTexture = textures[0]; // circle png pixiContainer.removeChildren(); data.forEach(dataPoint => { const xyPoint = project([dataPoint.lat, dataPoint.long]); const marker = createMarker(xyPoint.x, xyPoint.y, pointTexture, scaleInverse); marker.lat = dataPoint.lat; marker.long = dataPoint.long; marker.info = dataPoint.info; // TODO: tint them later based on crime type // const tint = d3.color(colorScale(marker.avancement || Math.random() * 100)).rgb(); // marker.tint = 256 * (tint.r * 256 + tint.g) + tint.b; pixiContainer.addChild(marker); markers.push(marker); }); console.log('markers:', markers.length); // create zoom quad tree let zoomQuadTree = {}; for (var z = map.getMinZoom(); z <= map.getMaxZoom(); z++) { const initialRadius = 8 / utils.getScale(z); zoomQuadTree[z] = solveCollision(markers, {r0: initialRadius, zoom: z}); } // add map interactions map.on('click', function(e) { let redraw = false; if (focusMarker) { // reset focused marker focusMarker.texture = textures[focusMarker.textureIndex]; focusMarker = null; redraw = true; } // get marker from map click const marker = findMarker(project(e.latlng), zoomQuadTree, zoom); if (marker) { marker.texture = textures[1]; // set dot marker focus texture focusMarker = marker; L.popup() .setLatLng(e.latlng) .setContent(marker.info) .openOn(map); redraw = true; } if (redraw) utils.getRenderer().render(pixiContainer); }); } // end of first draw if (firstDraw || lastMapZoom !== zoom) { // draw center point drawPoint(circle, centerPointXY.x, centerPointXY.y, pointRadius, 1/scale, 0xff0000, 0xff0033); // line width, line color, fill color // rescale markers markers.forEach(marker => { rescaleMarker(marker, scaleInverse, zoom); }); } // animate zoom function animate(timestamp) { let progress; if (start === null) start = timestamp; progress = timestamp - start; let lambda = progress / duration; if (lambda > 1) lambda = 1; lambda = lambda * (0.4 + lambda * (2.2 + lambda * -1.6)); markers.forEach(marker => { marker.x = marker.currentX + lambda * (marker.targetX - marker.currentX); marker.y = marker.currentY + lambda * (marker.targetY - marker.currentY); marker.scale.set(marker.currentScale + lambda * (marker.targetScale - marker.currentScale)); }); renderer.render(pixiContainer); if (progress < duration) { frame = requestAnimationFrame(animate); } } if (!firstDraw && lastMapZoom !== zoom) { // start = null; frame = requestAnimationFrame(animate); } firstDraw = false; lastMapZoom = zoom; renderer.render(pixiContainer); }, pixiContainer, { doubleBuffering: doubleBuffering, destoryInteractionManager: true }); }34:Tb4f,function solveCollision(circles, opts) { opts = opts || {}; var tree = d3.quadtree() .x(function(d) {return d.xp;}) .y(function(d) {return d.yp;}); if (opts.extent !== undefined) tree.extent(opts.extent); var rMax = 0; circles.forEach(function(circle) { circle.xp = circle.x0; circle.yp = circle.y0; if (opts.r0 !== undefined) circle.r0 = opts.r0; circle.r = circle.r0; circle.xMin = circle.x0 - circle.r0; circle.xMax = circle.x0 + circle.r0; circle.yMin = circle.y0 - circle.r0; circle.yMax = circle.y0 + circle.r0; function collide(d) { function fixCollision(node) { var x = d.xp - node.xp; var y = d.yp - node.yp; var l = x * x + y * y; var r = d.r + node.r; if (l < r * r) { var c1, c2, lambda1, lambda2, u1, u2; var delta = Math.sqrt(l); if (d.r < node.r) { c1 = node; c2 = d; } else { c1 = d; c2 = node; } var r1 = c1.r; var r2 = c2.r; var alpha = (r1 + r2 + delta) / 4; if (l > 0) { u1 = (c2.xp - c1.xp) / delta; u2 = (c2.yp - c1.yp) / delta; } else { var theta = 2 * Math.PI * Math.random(); u1 = Math.cos(theta); u2 = Math.sin(theta); } if (r2 >= alpha) { lambda1 = alpha / r1; lambda2 = alpha / r2; } else { lambda1 = (r1 - r2 + delta) / (2 * r1); if (lambda1 > 1) console.log(lambda1); lambda2 = 1; } c1.r *= lambda1; c2.r *= lambda2; c1.xp += (lambda1 - 1) * r1 * u1; c1.yp += (lambda1 - 1) * r1 * u2; c2.xp += (1 - lambda2) * r2 * u1; c2.yp += (1 - lambda2) * r2 * u2; c1.xMin = c1.xp - c1.r; c1.xMax = c1.xp + c1.r; c1.yMin = c1.yp - c1.r; c1.yMax = c1.yp + c1.r; c2.xMin = c2.xp - c2.r; c2.xMax = c2.xp + c2.r; c2.yMin = c2.yp - c2.r; c2.yMax = c2.yp + c2.r; } } return function(quad, x1, y1, x2, y2) { if (!quad.length) { do { if (quad.data != d && d.xMax > quad.data.xMin && d.xMin < quad.data.xMax && d.yMax > quad.data.yMin && d.yMin < quad.data.yMax) { fixCollision(quad.data); } } while (quad = quad.next) } return x1 > d.xMax + rMax || x2 + rMax < d.xMin || y1 > d.yMax + rMax || y2 + rMax < d.yMin; }; } tree.visit(collide(circle)); rMax = Math.max(rMax, circle.r); tree.add(circle); }); if (opts.zoom !== undefined) { circles.forEach(function(circle) { circle.cache = circle.cache || {}; circle.cache[opts.zoom] = { x: circle.xp, y: circle.yp, r: circle.r }; }); } var ret = d3.quadtree() .x(function(d) {return d.xp;}) .y(function(d) {return d.yp;}); var rMax2 = 0; circles.forEach(function(circle) { ret.add(circle); rMax2 = Math.max(rMax2, circle.r); }) ret.rMax = rMax2; return ret; }35:T27f8,// code from https://github.com/manubb/Leaflet.PixiOverlay/L.PixiOverlay.js function PixiOverlay (L, PIXI) { var round = L.Point.prototype._round; var no_round = function () {return this;}; function setInteractionManager(interactionManager, destroyInteractionManager, autoPreventDefault) { if (destroyInteractionManager) { interactionManager.destroy(); } else if (!autoPreventDefault) { interactionManager.autoPreventDefault = false; } } var pixiOverlayClass = { options: { // @option padding: Number = 0.1 // How much to extend the clip area around the map view (relative to its size) // e.g. 0.1 would be 10% of map view in each direction padding: 0.1, // @option forceCanvas: Boolean = false // Force use of a 2d-canvas forceCanvas: false, // @option doubleBuffering: Boolean = false // Help to prevent flicker when refreshing display on some devices (e.g. iOS devices) // It is ignored if rendering is done with 2d-canvas doubleBuffering: false, // @option resolution: Number = 1 // Resolution of the renderer canvas resolution: L.Browser.retina ? 2 : 1, // @option projectionZoom(map: map): Number // return the layer projection zoom level projectionZoom: function (map) {return (map.getMaxZoom() + map.getMinZoom()) / 2;}, // @option destroyInteractionManager: Boolean = false // Destroy PIXI Interaction Manager destroyInteractionManager: false, // @option // Customize PIXI Interaction Manager autoPreventDefault property // This option is ignored if destroyInteractionManager is set autoPreventDefault: true }, initialize: function (drawCallback, pixiContainer, options) { L.setOptions(this, options); L.stamp(this); this._drawCallback = drawCallback; this._pixiContainer = pixiContainer; this._rendererOptions = { transparent: true, resolution: this.options.resolution, antialias: true, forceCanvas: this.options.forceCanvas }; this._doubleBuffering = PIXI.utils.isWebGLSupported() && !this.options.forceCanvas && this.options.doubleBuffering; }, _setMap: function () {}, _setContainerStyle: function () {}, _addContainer: function () { this.getPane().appendChild(this._container); }, _setEvents: function () {}, onAdd: function (targetMap) { this._setMap(targetMap); if (!this._container) { var container = this._container = L.DomUtil.create('div', 'leaflet-pixi-overlay'); container.style.position = 'absolute'; this._renderer = PIXI.autoDetectRenderer(this._rendererOptions); setInteractionManager( this._renderer.plugins.interaction, this.options.destroyInteractionManager, this.options.autoPreventDefault ); container.appendChild(this._renderer.view); if (this._zoomAnimated) { L.DomUtil.addClass(container, 'leaflet-zoom-animated'); this._setContainerStyle(); } if (this._doubleBuffering) { this._auxRenderer = PIXI.autoDetectRenderer(this._rendererOptions); setInteractionManager( this._auxRenderer.plugins.interaction, this.options.destroyInteractionManager, this.options.autoPreventDefault ); container.appendChild(this._auxRenderer.view); this._renderer.view.style.position = 'absolute'; this._auxRenderer.view.style.position = 'absolute'; } } this._addContainer(); this._setEvents(); var map = this._map; this._initialZoom = this.options.projectionZoom(map); this._wgsOrigin = L.latLng([0, 0]); this._wgsInitialShift = map.project(this._wgsOrigin, this._initialZoom); this._mapInitialZoom = map.getZoom(); this._scale = map.getZoomScale(this._mapInitialZoom, this._initialZoom); var _layer = this; this.utils = { latLngToLayerPoint: function (latLng, zoom) { zoom = (zoom === undefined) ? _layer._initialZoom : zoom; var projectedPoint = map.project(L.latLng(latLng), zoom); return projectedPoint; }, layerPointToLatLng: function (point, zoom) { zoom = (zoom === undefined) ? _layer._initialZoom : zoom; var projectedPoint = L.point(point); return map.unproject(projectedPoint, zoom); }, getScale: function (zoom) { if (zoom === undefined) return map.getZoomScale(map.getZoom(), _layer._initialZoom); else return map.getZoomScale(zoom, _layer._initialZoom); }, getRenderer: function () { return _layer._renderer; }, getContainer: function () { return _layer._pixiContainer; }, getMap: function () { return _layer._map; } }; this._update({type: 'add'}); }, onRemove: function () { L.DomUtil.remove(this._container); }, getEvents: function () { var events = { zoom: this._onZoom, moveend: this._update, zoomend: this._zoomChange }; if (this._zoomAnimated) { events.zoomanim = this._onAnimZoom; } return events; }, _onAnimZoom: function (e) { this._updateTransform(e.center, e.zoom); }, _onZoom: function (e) { this._updateTransform(this._map.getCenter(), this._map.getZoom()); }, _updateTransform: function (center, zoom) { var scale = this._map.getZoomScale(zoom, this._zoom), viewHalf = this._map.getSize().multiplyBy(0.5 + this.options.padding), currentCenterPoint = this._map.project(this._center, zoom), topLeftOffset = viewHalf.multiplyBy(-scale).add(currentCenterPoint) .subtract(this._map._getNewPixelOrigin(center, zoom)); if (L.Browser.any3d) { L.DomUtil.setTransform(this._container, topLeftOffset, scale); } else { L.DomUtil.setPosition(this._container, topLeftOffset); } }, _redraw: function(offset, e) { this._disableLeafletRounding(); var shift = this._map.latLngToLayerPoint(this._wgsOrigin) ._subtract(this._wgsInitialShift.multiplyBy(this._scale))._subtract(offset); this._pixiContainer.scale.set(this._scale); this._pixiContainer.position.set(shift.x, shift.y); this._drawCallback(this.utils, e); this._enableLeafletRounding(); }, _update: function (e) { // is this really useful? if (this._map._animatingZoom && this._bounds) {return;} // Update pixel bounds of renderer container var p = this.options.padding, mapSize = this._map.getSize(), min = this._map.containerPointToLayerPoint(mapSize.multiplyBy(-p)).round(); this._bounds = new L.Bounds(min, min.add(mapSize.multiplyBy(1 + p * 2)).round()); this._center = this._map.getCenter(); this._zoom = this._map.getZoom(); if (this._doubleBuffering) { var currentRenderer = this._renderer; this._renderer = this._auxRenderer; this._auxRenderer = currentRenderer; } var view = this._renderer.view; var b = this._bounds, container = this._container, size = b.getSize(); if (!this._renderer.size || this._renderer.size.x !== size.x || this._renderer.size.y !== size.y) { if (this._renderer.gl) { this._renderer.resolution = this._renderer.rootRenderTarget.resolution = this.options.resolution; } this._renderer.resize(size.x, size.y); view.style.width = size.x + 'px'; view.style.height = size.y + 'px'; if (this._renderer.gl) { var gl = this._renderer.gl; if (gl.drawingBufferWidth !== this._renderer.width) { this._renderer.resolution = this._renderer.rootRenderTarget.resolution = this.options.resolution * gl.drawingBufferWidth / this._renderer.width; this._renderer.resize(size.x, size.y); } } this._renderer.size = size; } if (this._doubleBuffering) { var self = this; requestAnimationFrame(function() { self._redraw(b.min, e); self._renderer.gl.finish(); view.style.visibility = 'visible'; self._auxRenderer.view.style.visibility = 'hidden'; L.DomUtil.setPosition(container, b.min); }); } else { this._redraw(b.min, e); L.DomUtil.setPosition(container, b.min); } }, _disableLeafletRounding: function () { L.Point.prototype._round = no_round; }, _enableLeafletRounding: function () { L.Point.prototype._round = round; }, _zoomChange: function () { this._scale = this._map.getZoomScale(this._map.getZoom(), this._initialZoom); }, redraw: function (data) { if (this._map) { this._disableLeafletRounding(); this._drawCallback(this.utils, data); this._enableLeafletRounding(); } return this; } }; if (L.version >= "1") { L.PixiOverlay = L.Layer.extend(pixiOverlayClass); } else { // backport some leaflet@1.0.0 methods L.Map.prototype.getZoomScale = function (toZoom, fromZoom) { var crs = this.options.crs; fromZoom = fromZoom === undefined ? this._zoom : fromZoom; return crs.scale(toZoom) / crs.scale(fromZoom); }; L.DomUtil.setTransform = function (el, offset, scale) { var pos = offset || new L.Point(0, 0); el.style[L.DomUtil.TRANSFORM] = (L.Browser.ie3d ? 'translate(' + pos.x + 'px,' + pos.y + 'px)' : 'translate3d(' + pos.x + 'px,' + pos.y + 'px,0)') + (scale ? ' scale(' + scale + ')' : ''); }; // patch pixiOverlayClass for leaflet@0.7.7 pixiOverlayClass.includes = L.Mixin.Events; pixiOverlayClass.addTo = function (map) { map.addLayer(this); return this; }; pixiOverlayClass._setMap = function (map) { this._map = map; this._zoomAnimated = map._zoomAnimated; }; pixiOverlayClass._setContainerStyle = function () { var self = this; [ '-webkit-transform-origin', '-ms-transform-origin', 'transform-origin' ].forEach(function (property) { self._container.style[property] = '0 0'; }); }; pixiOverlayClass._addContainer = function () { this._map.getPanes()[this.options.pane || 'overlayPane'] .appendChild(this._container); }; pixiOverlayClass._setEvents = function () { var events = this.getEvents(); for (var evt in events) { this._map.on(evt, events[evt], this); } }; pixiOverlayClass.onRemove = function () { this._map.getPanes()[this.options.pane || 'overlayPane'] .removeChild(this._container); var events = this.getEvents(); for (var evt in events) { this._map.off(evt, events[evt], this); } }; L.PixiOverlay = L.Class.extend(pixiOverlayClass); } }36:[] 31:{"id":"310a1a019d012db9","slug":"leaflet-pixi-overlay","title":"Leaflet Pixi Overlay","thumbnail":"a45c7c16fbf5ac1eb4353dfdf63b495eb2bcf61fd77f4dfbbd7d1d1e95c72ed7","access_level":"public","create_time":"$D2018-07-09T16:30:45.712Z","update_time":"$D2019-02-25T15:03:15.462Z","view_time":null,"first_public_time":"$D2018-07-09T16:31:29.038Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":"starter_2024"},"version":639,"publish_version":639,"role":null,"authored":false,"authors":[{"type":"individual","id":"17b72db66175b428","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":null}],"members":[{"type":"individual","id":"17b72db66175b428","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":{"id":"08aa2e504097ac5b","slug":"chicago-crimes","title":"Chicago Crimes","owner":{"id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak"}},"type":"notebook","body":{"title":"Leaflet Pixi Overlay","cells":[{"id":0,"value":"intro = md`# Leaflet Pixi Overlay\n\n[leaflet.js](https://leafletjs.com/) / \n[pixi.js](http://www.pixijs.com/) map overaly drawing for the \n[Chicago Crimes](https://www.linkedin.com/pulse/chicago-crimes-2017-taras-novak/) \n2018 revisit in JS using [Leaflet.PixiOverlay](https://github.com/manubb/Leaflet.PixiOverlay)\n\nYou might also want to try\n[Leaflet.glify plugin](https://github.com/robertleeplummerjr/Leaflet.glify) \nor straight up webgl to [draw many points on the map](http://bl.ocks.org/Sumbera/c6fed35c377a46ff74c3) \nor do it with [mapbox-gl.js](https://github.com/mapbox/mapbox-gl-js) \n\nFresh 2018 Chicago crimes data loaded below with over 156+K recrods for this webgl map notebook combo. See Imports section for the Leaflet, Pixi and PixiOverlay.js setup at the bottom.\n\nAslo see my [Intro to Using Apache Arrow JS with Large Datasets](https://beta.observablehq.com/@randomfractals/apache-arrow)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"dataUrl = 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/data/2018/chicago-crimes-2018.arrow'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = loadData(dataUrl).then(buffer => arrow.Table.from(new Uint8Array(buffer)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"fields = data.schema.fields.map(f => f.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"fieldTypes = data.schema.fields.map(f => f.type)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`## Arrow Data Sample`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"every20KRecord = range(data, 0, data.count(), 20000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`${getMarkdown(every20KRecord, fields)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`## Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"viewof startDaySlider = slider({min: 0, max: days, step: 1, value: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"viewof endDaySlider = slider({min: 0, max: days, step: 1, value: days})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"viewof selectedType = select(['HOMICIDE', 'KIDNAPPING', 'PROSTITUTION', 'ARSON'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"md`**from:** ${new Date(startDate.getTime() + startDaySlider*millisPerDay).toLocaleDateString()}\n**to:** ${new Date(startDate.getTime() + endDaySlider*millisPerDay).toLocaleDateString()}\n**count:** ${filteredData.length.toLocaleString()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"map = {\n // create map container and leaflet map\n const mapContainer = DOM.element('div', {style: `width:${width}px;height:${width/1.6}px`});\n yield mapContainer;\n const map = createMap(mapContainer);\n \n // add Chicago center point to the Pixi container\n pixiContainer.addChild(circle);\n pixiContainer.interactive = true;\n\tpixiContainer.buttonMode = true;\n \n // create leaflet pixi overlay and draw points\n const pixiOverlay = createMapDataOverlay(map, filteredData, textures);\n pixiOverlay.addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"md`## Map Vars`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"filteredData = filterByDate(data, \n new Date(startDate.getTime() + startDaySlider*millisPerDay),\n new Date(startDate.getTime() + endDaySlider*millisPerDay))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"startDate = new Date('1/1/2018')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"endDate = new Date('8/8/2018')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"days = Math.ceil((endDate - startDate) / millisPerDay)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"millisPerDay = 24 * 60 * 60 * 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"pixiContainer = new PIXI.Container()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"circle = new PIXI.Graphics()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"textures = loadTextures().then(t => t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"doubleBuffering = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md`## Map Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"function filterByDate(data, startDate, endDate) {\n let lat, long, date, block, type, info, results = [];\n const dateFilter = arrow.predicate.custom(i => {\n const date = toDate(data.getColumn('Date').get(i));\n const type = data.getColumn('PrimaryType').get(i);\n return date >= startDate && date <= endDate && type === selectedType;\n }, b => 1); \n data.filter(dateFilter) \n .scan((index) => {\n results.push({\n 'lat': lat(index),\n 'long': long(index),\n 'info': `${block(index)}
${type(index)}
${info(index)}
${toDate(date(index)).toLocaleString()}`\n });\n }, (batch) => {\n lat = arrow.predicate.col('Latitude').bind(batch);\n long = arrow.predicate.col('Longitude').bind(batch);\n date = arrow.predicate.col('Date').bind(batch);\n block = arrow.predicate.col('Block').bind(batch);\n type = arrow.predicate.col('PrimaryType').bind(batch);\n info = arrow.predicate.col('Description').bind(batch);\n }\n );\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"function createMap(mapContainer) {\n // create Stamen leaflet toner map with attributions\n const map = L.map(mapContainer).setView([41.85, -87.68], 10); // Chicago origins\n const mapTiles = '//stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png';\n const osmCPLink = 'OpenStreetMap';\n const mapCPLink = 'Stamen Design';\n const tileLayer = L.tileLayer(mapTiles, {\n attribution: `${osmCPLink} | ${mapCPLink}`,\n detectRetina: false,\n maxZoom: 18,\n minZoom: 10,\n noWrap: false,\n subdomains: 'abc'\n }).addTo(map);\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"function loadTextures() {\n // create pixi textures loader\n const loader = new PIXI.loaders.Loader();\n \n // add marker textures\n loader.add('circle', 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/maps/markers/black-circle.png');\n loader.add('focusCircle', 'https://raw.githubusercontent.com/RandomFractals/ChicagoCrimes/master/maps/markers/red-circle.png');\n\n // load marker pics\n return new Promise((resolve, reject) => {\n loader.load((loader, resources) => {\n const textures = []; \n textures.push(resources.circle.texture);\n textures.push(resources.focusCircle.texture);\n resolve(textures);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"function createMarker(x, y, texture, scale) {\n const sprite = new PIXI.Sprite(texture);\n sprite.textureIndex = 0;\n sprite.x0 = x;\n sprite.y0 = y;\n sprite.anchor.set(.5, .5);\n sprite.scale.set(scale);\n sprite.currentScale = scale;\n return sprite;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"function rescaleMarker(marker, scale, zoom, redraw) {\n\tconst position = marker.cache[zoom];\n\tif (!redraw) { // 1st draw\n\t marker.x = position.x;\n\t\tmarker.y = position.y;\n\t\tmarker.scale.set((position.r * scale < 8) ? position.r/8 : scale); // 16\n\t} else {\n\t marker.currentX = marker.x;\n\t\tmarker.currentY = marker.y;\n\t\tmarker.targetX = position.x;\n\t\tmarker.targetY = position.y;\n\t\tmarker.currentScale = marker.scale.x;\n\t\tmarker.targetScale = (position.r * scale < 8) ? position.r/16 : scale; // 16\n\t}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"function findMarker(layerPoint, quad, zoom) {\n const quadTree = quad[zoom];\n\tconst maxR = quadTree.rMax; \n\tlet marker;\n\tlet found = false;\n\tquadTree.visit((quad, x1, y1, x2, y2) => { \n\t if (!quad.length) {\n\t\t const dx = quad.data.x - layerPoint.x;\n\t\t\tconst dy = quad.data.y - layerPoint.y;\n\t\t\tconst r = quad.data.scale.x * 8; // 16;\n\t\t\tif (dx * dx + dy * dy <= r * r) {\n\t\t\t marker = quad.data;\n\t\t\t\tfound = true;\n\t\t\t}\n\t\t}\t\t\n return found || \n x1 > layerPoint.x + maxR || \n x2 + maxR < layerPoint.x || \n y1 > layerPoint.y + maxR || \n y2 + maxR < layerPoint.y;\n\t});\n\treturn marker;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"function drawPoint(graphics, x, y, r, \n lineWidth, lineColor, fillColor) {\n graphics.clear();\n\tgraphics.lineStyle(lineWidth, lineColor, 1);\n\tgraphics.beginFill(fillColor, 0.5);\n\tgraphics.x = x;\n\tgraphics.y = y;\n\tgraphics.drawCircle(0, 0, r); // radius\n\tgraphics.endFill();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"md`## Apache Arrow Helper Functions Imports\n\nfrom [Intro to Using Apache Arrow JS with Large Datasets](https://beta.observablehq.com/@randomfractals/apache-arrow)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"import {loadData, range, getMarkdown, toDate} from '@randomfractals/apache-arrow'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`## Appache Arrow, Leaflet, Pixi JS Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"arrow = require('apache-arrow@0.3.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"leafletCSS = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"PIXI = require('https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"import {slider, select} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"md`## Pixi Overlay Leaflet Plugin Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"{\n // add Pixi overlay plugin to Leaflet\n PixiOverlay(L, PIXI)\n return L.PixiOverlay;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"// @factory L.pixiOverlay(drawCallback: function, pixiContainer: PIXI.Container, options?: L.PixiOverlay options)\n// Creates a PixiOverlay with the given arguments.\nL.pixiOverlay = function (drawCallback, pixiContainer, options) {\n return L.Browser.canvas ? new L.PixiOverlay(drawCallback, pixiContainer, options) : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"