2c:null 2d:["$","title",null,{"children":"Hello Leaflet.RegularGridCluster | Fati CHEN | Observable"}] 32:[] 30:{"id":"6d1fed89db317ceb","slug":"hello-leaflet-regulargridcluster","title":"Hello Leaflet.RegularGridCluster","thumbnail":"c9c09d4b393bf52e09f7a290ec510dbdd87ed64c7cc65af8314df501d4cecab4","access_level":"public","create_time":"$D2020-11-27T12:59:37.873Z","update_time":"$D2020-11-27T15:28:46.036Z","view_time":null,"first_public_time":"$D2020-11-27T14:35:00.656Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ffbcf8ce47e293f4","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":"starter_2024"},"version":383,"publish_version":383,"role":null,"authored":false,"authors":[{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null}],"members":[{"type":"individual","id":"7affeb11879b11eb","login":"stardisblue","name":"Fati CHEN","avatar_url":"https://avatars-next.observableusercontent.com/c3f14cf2d58aebca19459fc111e35113235be85745ae353f37b7731ea9a84d79","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"88e6464b29b8fb72","slug":"cluster-aggregation","title":"Clustering","owner":{"id":"ffbcf8ce47e293f4","login":"stardisblue","name":"Fati CHEN"}},"type":"notebook","body":{"titling":"auto","title":"Hello Leaflet.RegularGridCluster","cells":[{"id":0,"value":"md`# Hello Leaflet.RegularGridCluster`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof url = createURL(\n \"https://github.com/adammertel/Leaflet.RegularGridCluster#readme\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof map = createMap(L)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"apply = {\n rgc;\n\n const layers = markers.map(marker => ({\n marker,\n properties: {}\n }));\n const grid = L.regularGridCluster(options);\n\n grid.addLayers(layers);\n window.map = map; // this is getting stupid\n map.addLayer(grid);\n delete window.map;\n invalidation.then(() => {\n window.map = map; // this is getting stupid\n grid.unregister();\n map.removeLayer(grid);\n delete window.map;\n });\n\n return md`~~~js\n\"Important\" // this cell adds markers to cluster and cluster to map\n~~~`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`## Options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"html`

${viewof gridMode}${viewof zoneSize}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"html`

${viewof gridOrigin}${viewof gridEnd}${viewof gridBoundsPadding}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"html`

${viewof showCells}${viewof showMarkers}${viewof showTexts}${viewof showEmptyCells}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"html`

${viewof zoomShowElements}${viewof zoomHideGrid}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"html`

${viewof indexSize}${viewof paneElementsZ}${viewof paneCellsZ}${viewof paneMarkersZ}${viewof paneTextsZ}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"options = ({\n rules,\n gridMode,\n zoneSize,\n gridOrigin,\n gridEnd,\n gridBoundsPadding,\n showCells: showCells !== false,\n showMarkers: showMarkers !== false,\n showTexts: showTexts !== false,\n showEmptyCells: showEmptyCells !== false,\n zoomShowElements,\n zoomHideGrid,\n indexSize,\n paneElementsZ,\n paneCellsZ,\n paneMarkersZ,\n paneTextsZ\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"viewof gridMode = select({\n title: \"gridMode\",\n options: [\"square\", \"hexagon\"],\n value: \"hexagon\",\n description: \"The shape of cells,
default: hexagon\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"viewof zoneSize = slider({\n title: \"zoneSize\",\n min: 0,\n max: 10000,\n step: 10,\n value: 10000,\n description: \"Size of the cell at a scale of 10, default: 10000\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof gridOrigin = text({\n title: \"gridOrigin\",\n value: \"auto\",\n description:\n \"Setting the value of a L.latLng instance
will manually define the SW corner of the
grid. Value 'auto' will define the origin
based on data and gridBoundsPadding.
default: auto\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof gridEnd = text({\n title: \"gridEnd\",\n value: \"auto\",\n description:\n 'NE corner of the grid. In case value \"auto\"
is used, corner will be calculated from data
and gridBoundsPadding option. default: auto'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"viewof gridBoundsPadding = slider({\n title: \"gridBoundsPadding\",\n min: 0,\n max: 1,\n precision: 1,\n value: 0.1,\n description: \"Ratio to extend bounding box of elements, default: 0.1\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"viewof showCells = checkbox({\n title: \"showCells\",\n options: [\"\"],\n value: \"showCells\",\n description: \"turning cells off and on.
default: true\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof showMarkers = checkbox({\n title: \"showMarkers\",\n options: [\"\"],\n value: \"showMarkers\",\n description: \"turning markers off and on.
default: true\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"viewof showTexts = checkbox({\n title: \"showTexts\",\n options: [\"\"],\n value: \"showTexts\",\n description: \"turning texts off and on.
default: true\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"viewof showEmptyCells = checkbox({\n title: \"showEmptyCells\",\n options: [\"\"],\n description:\n \"whether display cells where no elements fall.
default: false\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"// zoomShowElements (default: 10) level of zoom when to turn elements on and off\nviewof zoomShowElements = slider({\n title: \"zoomShowElements\",\n min: 1,\n max: 20,\n step: 1,\n value: 10,\n description: \"level of zoom when to turn elements on and off,
default: 10\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"// zoomHideGrid (default: 10) level of zoom when to turn grid on and off\nviewof zoomHideGrid = slider({\n title: \"zoomHideGrid\",\n min: 1,\n max: 20,\n step: 1,\n value: 10,\n description: \"level of zoom when to turn grid on and off,
default: 10\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"// indexSize (default: 12) for a better performence, zones and elements are pre-indexed. Option indexSize difenes the number of super-zones within each axis\nviewof indexSize = slider({\n title: \"indexSize\",\n min: 1,\n max: 20,\n step: 1,\n value: 12,\n description:\n \" for a better performance, zones and elements
are pre-indexed. Option indexSize defines the
number of super-zones within each axis,
default: 12\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"// paneElementsZ (default: 10000)\nviewof paneElementsZ = slider({\n title: \"paneElementsZ\",\n min: 1,\n max: 10000,\n step: 1,\n value: 10000,\n description: \"default: 10000\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"// paneCellsZ (default: 700)\nviewof paneCellsZ = slider({\n title: \"paneCellsZ\",\n min: 1,\n max: 1000,\n step: 1,\n value: 700,\n description: \"z-index, default: 700\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"// paneMarkersZ (default: 800)\nviewof paneMarkersZ = slider({\n title: \"paneMarkersZ\",\n min: 1,\n max: 1000,\n step: 1,\n value: 800,\n description: \"z-index, default: 800\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"// paneTextsZ (default: 900)\nviewof paneTextsZ = slider({\n title: \"paneTextsZ\",\n min: 1,\n max: 1000,\n step: 1,\n value: 900,\n description: \"z-index, default: 900\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"ruleCells = ({\n fillColor: {\n method: \"count\", \n scale: \"continuous\",\n range: [\"#ffffb2\", \"#fecc5c\", \"#fd8d3c\", \"#e31a1c\"]\n },\n color: \"black\",\n fillOpacity: 0.2,\n weight: 0\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"ruleMarkers = ({\n color: \"white\",\n weight: 2,\n fillOpacity: 0.9,\n fillColor: {\n method: \"count\",\n attribute: \"\",\n scale: \"continuous\",\n range: [\"#ffffb2\", \"#fecc5c\", \"#fd8d3c\", \"#e31a1c\"]\n },\n radius: {\n method: \"count\",\n attribute: \"\",\n scale: \"continuous\",\n range: [7, 17]\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"ruleText = ({\n color: {\n method: \"count\",\n scale: \"quantile\",\n range: [\"grey\", \"black\"]\n },\n fontSize: {\n method: \"count\",\n scale: \"continuous\",\n range: [12, 22]\n },\n fontWeight: \"bold\",\n text: {\n method: \"count\",\n attribute: \"\"\n },\n anchorOffsetX: {\n method: \"count\",\n scale: \"continuous\",\n range: [3, 12]\n },\n anchorOffsetY: {\n method: \"count\",\n scale: \"continuous\",\n range: [-5, -1]\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"rules = ({ cells: ruleCells, markers: ruleMarkers, texts: ruleText })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"import { text, checkbox, select, slider, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"html`