{"id":16960547,"url":"https://github.com/randomfractals/unfolded-map-snippets","last_synced_at":"2026-05-08T06:17:46.871Z","repository":{"id":157150076,"uuid":"352361062","full_name":"RandomFractals/unfolded-map-snippets","owner":"RandomFractals","description":"Html, CSS, JavaScript, and Python 🐍  vscode snippets ✂️ extension for Unfolded Map 🗺️ and Data SDKs","archived":false,"fork":false,"pushed_at":"2022-08-31T16:43:07.000Z","size":5707,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-02-08T20:33:59.759Z","etag":null,"topics":["code","data","extension","map","sdk","snippets","template","unfolded","vscode"],"latest_commit_sha":null,"homepage":"https://github.com/RandomFractals/unfolded-map-snippets","language":"Jupyter Notebook","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RandomFractals.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-28T15:08:55.000Z","updated_at":"2023-04-15T10:45:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"8c73ac16-4e72-4e07-8ddd-e769eeb29b9b","html_url":"https://github.com/RandomFractals/unfolded-map-snippets","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/RandomFractals/unfolded-map-snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Funfolded-map-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Funfolded-map-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Funfolded-map-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Funfolded-map-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RandomFractals","download_url":"https://codeload.github.com/RandomFractals/unfolded-map-snippets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Funfolded-map-snippets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32769313,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T02:36:36.067Z","status":"ssl_error","status_checked_at":"2026-05-08T02:36:07.210Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code","data","extension","map","sdk","snippets","template","unfolded","vscode"],"created_at":"2024-10-13T22:49:14.135Z","updated_at":"2026-05-08T06:17:46.834Z","avatar_url":"https://github.com/RandomFractals.png","language":"Jupyter Notebook","funding_links":[],"categories":[],"sub_categories":[],"readme":"# unfolded-map-snippets\n\n[Unfolded](https://www.unfolded.ai) Snippets [VSCode](https://code.visualstudio.com) extension provides custom [HTML](https://github.com/RandomFractals/unfolded-map-snippets/blob/main/snippets/html.code-snippets), [JavaScript](https://github.com/RandomFractals/unfolded-map-snippets/blob/main/snippets/javascript.code-snippets) and [Python](https://github.com/RandomFractals/unfolded-map-snippets/blob/main/snippets/python.code-snippets) 🐍 code snippets ✂️ for [Unfolded Map](https://docs.unfolded.ai/map-sdk) and [Data SDK](https://docs.unfolded.ai/data-sdk).\n\nUse [Unfolded Studio](https://docs.unfolded.ai/studio) to create your [unfolded.ai](https://www.unfolded.ai) maps 🗺️.\n\nUnfolded Map 🗺️ Snippets ✂️ extension adds code templates 📑 you can use to create custom Unfolded Map 🌐 web apps, and [Jupyter Notebooks](https://docs.unfolded.ai/jupyter) with Python 🐍 in VSCode to manage data uploaded to [Unfolded Studio](https://docs.unfolded.ai/studio).\n\nSee [unfolded-maps](https://github.com/RandomFractals/unfolded-maps) 🗺️ code repository for [Observable JS](https://github.com/RandomFractals/unfolded-maps#observable-js-notebooks-) and sample [Python Jupyter Notebooks](https://github.com/RandomFractals/unfolded-maps#jupyter-notebooks-) 📚.\n\n# Unfolded JavaScript Snippets\n\nUse `\u003e Unfolded Snippets` loaded from this extension in the Snippets Viewer Tree View ⎇ to streamline your custom Unfolded map creation and data integration development.\n\n![Unfolded JS Snippets](https://raw.githubusercontent.com/RandomFractals/unfolded-maps/main/docs/images/unfolded-map-snippets.png)\n\n\u003c!-- SNIPPETS_START --\u003e\n## JavaScript Snippets\n\n\u003ctable\u003e\u003ctr\u003e\u003cth\u003ePrefix\u003c/th\u003e\u003cth\u003eBody\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-import-map-sdk\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nimport {UnfoldedMap, setViewState} from '@unfolded/map-sdk';\n```\n\n\u003c/td\u003e\u003ctd\u003eImports [Unfolded Map SDK](https://docs.unfolded.ai/map-sdk/javascript-map-sdk).\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-create-map\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nconst map = new UnfoldedMap({\n\tmapUUID: '${1:mapId}', // use: https://www.uuidgenerator.net\n\tappendToDocument: true,\n\tembed: true,\n\twidth: window.innerWidth,\n\theight: window.innerHeight,\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eCreates a new UnfoldedMap.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-get-map-url\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nconst mapUrl = UnfoldedMapSDK.getMapUrl('${1:mapId}');\nconsole.log(mapUrl);\n```\n\n\u003c/td\u003e\u003ctd\u003eGets the url for a map created and **published** in Unfolded Studio.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-add-dataset\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.addDataset({\n\tuuid: '${1:datasetId}'\n\tlabel: '${2:datasetLabel}'\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eAdds a previously uploaded dataset with the specified id to the map. Datasets can be either uploaded via the [Unfolded Data SDK](https://docs.unfolded.ai/data-sdk) or manually added in [Unfolded Cloud](https://studio.unfolded.ai).\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-remove-dataset\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.removeDataset('${1:datasetId}')\n```\n\n\u003c/td\u003e\u003ctd\u003eRemoves dataset from the map.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-refresh-map-data\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.refreshMapData();\n```\n\n\u003c/td\u003e\u003ctd\u003eReloads the data displayed on the map.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-event-handlers\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.setMapEventHandlers({\n\tonLoad: () =\u003e {\n\t\tconsole.log('map loaded!');\n\t},\n\tonClick: (clickEvent: ClickEvent) =\u003e {\n\t\tconsole.log(clickEvent);\n\t},\n\tonHover: (hoverEvent: HoverEvent) =\u003e {\n\t\tconsole.log(hoverEvent);\n\t},\n\tonGeometrySelection: (geometrySelectionEvent: GeometrySelectionEvent) =\u003e {\n\t\tconsole.log(geometrySelectionEvent);\n\t},\n\tonFilter: (filterChangeEvent: FilterChangeEvent) =\u003e {\n\t\tconsole.log(filterChangeEvent);\n\t},\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eSets event handlers to receive notifications for the specified map events.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-timeline-event-handlers\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.setMapEventHandlers({\n\tonTimelineIntervalChange: (timelineInterval) =\u003e {\n\t\tconst startDateTime = new Date(timelineInterval[0]);\n\t\tconst endDateTime = new Date(timelineInterval[1]);\n\t\tconsole.log('start time: ' + startDateTime);\n\t\tconsole.log('end time: ' + endDateTime);\n\t},\n\tonLayerTimelineTimeChange: (currentDateTimeUnix) =\u003e {\n\t\tconst currentDateTime = new Date(currentDateTimeUnix);\n\t\tconsole.log('current layer time: ' + currentDateTime);\n\t},\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eSets timeline interval and layer time change event handlers.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-remove-map-event-handlers\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.setMapEventHandlers({\n\tonClick: null\n\tonHover: null\n\tonGeometrySelection: null\n\tonFilter: null\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eRemoves specificied map event handlers.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-remove-map-timeline-event-handlers\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.setMapEventHandlers({\n\tonTimelineIntervalChange: null\n\tonLayerTimelineTimeChange: null\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eRemoves timeline interval and layer time change event handlers.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-remove-all-map-event-handlers\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.setMapEventHandlers(null);\n```\n\n\u003c/td\u003e\u003ctd\u003eRemoves all registered map event handlers.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-view-state\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.setViewState({\n\tlongitude: -74.006058,\n\tlatitude: 40.712772,\n\tzoom: ${1:zoomLevel}\n});\n```\n\n\u003c/td\u003e\u003ctd\u003ePositions the map view on a certain location based on the provided coordinates with a defined zoom level.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-get-map-layers\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.getLayers().then(data =\u003e {\n\tdata.layers.forEach(layer =\u003e {\n\t\tconsole.log(layer);\n\t});\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eReturns layer `label`, `id`, and `isVisible` properties for each layer on the map.\nMake sure to call `map.getLayers()` after the map successfully loads.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-log-map-layers-on-map-load\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nonLoad: () =\u003e {\n\tmap.getLayers().then(layers =\u003e {\n\t\tlayers.forEach(layer =\u003e {\n\t\t\tconsole.log(`layer:', layer.label`);\n\t\t\tconsole.log(`\tid:', layer.id`);\n\t\t\tconsole.log(`\tisVisible:', layer.isVisible`);\n\t\t});\n}\n```\n\n\u003c/td\u003e\u003ctd\u003eLogs map layer `label`, `id`, and `isVisible` properties for each layer on the loaded map.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-add-points-map-layer\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.addLayer({\n\tid: 'pointLayer',\n\ttype: 'point',\n\tconfig: {\n\t\tdataId: '${1:datasetId}',\n\t\tcolumns: {\n\t\t\t'lat': '${2:latitudeFieldName}',\n\t\t\t'lng': '${3:longitudeFieldName}',\n\t\t},\n\t\tisVisible: true,\n\t\tcolorScale: 'quantize',\n\t\tcolorField: {\n\t\t\tname: '${4:colorFieldName}',\n\t\t\ttype: 'real'\n\t\t},\n\t\tvisConfig: {\n\t\t\tcolorRange: {\n\t\t\t\tcolors: [\n\t\t\t\t\t'#440154','#472777','#3e4989','#30678d','#25828e',\n\t\t\t\t\t'#1e9d88','#35b778','#6dce58','#b5dd2b','#fde724'\n\t\t\t\t]\n\t\t\t}\n\t\t}\n\t}\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eAdds `point` layer to the map.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-remove-map-layer\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.removeLayer('${1:layerId});\n```\n\n\u003c/td\u003e\u003ctd\u003eRemoves a layer from the map.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-layer-visibility\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.setLayerVisibility('${1:layerId}', false);\n```\n\n\u003c/td\u003e\u003ctd\u003eShows or hides a map layer with the specified `layerId`.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-data-filter\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.setFilter({\n\tid: '${1:filterId}'\n\tdataId: '${2:datasetId}',\n\tfield: '${3:fieldName}',\n\tvalue: ${4:filterValue}\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eSets data filter value.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-theme\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.setTheme('light');\n```\n\n\u003c/td\u003e\u003ctd\u003eChanges map theme to `dark` or `light` based on the passed parameter.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-control-visibility\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nconst mapConfig = {\n\tpanelId: '${1:mapControlId}',\n\tisVisible: false\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eSets visibility for the built-in map controls: `mapLegend`, `toggle3d`, `splitMap`, and `mapDraw`.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-timeline-config\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nconst startTime = new Date('2020.10.10').getTime();\nconst endTime = new Date('2020.10.18').getTime();\nconst timelineConfig = {\n\tidx: 0,\n\tcurrentTimeInterval: {\n\t\tstartTime: startTime,\n\t\tendTime: endTime\n\t},\n\ttimezone: 'America/Chicago', // from: https://momentjs.com/timezone\n\ttimeFormat: 'DD.MM.YYYY. HH:mm' // see: https://momentjs.com\n};\n\nmap.setTimelineConfig(timelineConfig).then(timelineData =\u003e {\n\tconsole.log(timelineData);\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eSets time filter timeline configuration that allows us to set timeline visibility, play/pause the animation, set the speed, set the time interval, change the time format and timezone.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-get-map-timeline-info\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.getTimelineInfo(0).then(timelineData =\u003e {\n\tconsole.log(timelineData);\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eGets information object for the time filter timeline map control.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-layer-timeline-config\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nconst time = new Date('2020.10.10').getTime();\nconst timelineConfig = {\n\tcurrentTime: time\n\ttimezone: 'America/Chicago', // from: https://momentjs.com/timezone\n\ttimeFormat: 'DD.MM.YYYY. HH:mm' // see: https://momentjs.com\n};\n\nmap.setLayerTimelineConfig(timelineConfig).then(timelineData =\u003e {\n\tconsole.log(timelineData);\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eSets layer timeline configuration used with `Trips layer` that allows us to set timeline visibility, play/pause the animation, set the speed, set the current time, change the time format and timezone.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-get-map-layer-timeline-info\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.getLayerTimelineInfo().then(timelineData =\u003e {\n\tconsole.log(timelineData);\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eGets information object for the layer timeline control used with `Trips layer`.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-get-map-config\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.getLayers().then(mapConfig =\u003e {\n\tconsole.log(mapConfig);\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eGets map configuration object that contains `mapState`, `mapStyle`, and `visState` object properties.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-config\u003c/td\u003e\u003ctd\u003e\n\n```javascript\nmap.setMapConfig({\n\tmapState: {...}\n\tmapStyle: {...}\n\tvisState: {...}\n});\n```\n\n\u003c/td\u003e\u003ctd\u003eSets map configuration with updated `mapState`, `mapStyle`, and `visState` object properties.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003c/table\u003e\n\n\u003c!-- SNIPPETS_END --\u003e\n\n# Unfolded Python Snippets\n\n![Unfolded Py Snippets](https://raw.githubusercontent.com/RandomFractals/unfolded-maps/main/docs/images/unfolded-map-py-snippets.png)\n\n## Python Snippets\n\n\u003ctable\u003e\u003ctr\u003e\u003cth\u003ePrefix\u003c/th\u003e\u003cth\u003eBody\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-import-map-sdk\u003c/td\u003e\u003ctd\u003e\n\n```python\nfrom unfolded.map_sdk import UnfoldedMap\n```\n\n\u003c/td\u003e\u003ctd\u003eImports [Unfolded Map SDK](https://docs.unfolded.ai/map-sdk/python-map-sdk).\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-create-map\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap = UnfoldedMap(\n\tmapUUID='${1:map_id}', // use: https://www.uuidgenerator.net\n\theight=640px\n)\n```\n\n\u003c/td\u003e\u003ctd\u003eCreates a new UnfoldedMap.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-get-map-url\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap_url = UnfoldedMap.get_map_url('${1:map_id}')\n```\n\n\u003c/td\u003e\u003ctd\u003eGets the url for a map created and **published** in Unfolded Studio.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-add-dataset\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.add_dataset({\n\tuuid: '${1:dataset_id}'\n\tlabel: '${2:dataset_label}'\n})\n```\n\n\u003c/td\u003e\u003ctd\u003eAdds a previously uploaded dataset with the specified id to the map. Datasets can be either uploaded via the [Unfolded Data SDK](https://docs.unfolded.ai/data-sdk) or manually added in [Unfolded Cloud](https://studio.unfolded.ai).\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-remove-dataset\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.remove_dataset('${1:dataset_id}')\n```\n\n\u003c/td\u003e\u003ctd\u003eRemoves dataset from the map.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-refresh-map-data\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.refresh_map_data()\n```\n\n\u003c/td\u003e\u003ctd\u003eReloads the data displayed on the map.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-event-handlers\u003c/td\u003e\u003ctd\u003e\n\n```python\n\n```\n\n\u003c/td\u003e\u003ctd\u003eSets event handlers to receive notifications for the specified map events.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-timeline-event-handlers\u003c/td\u003e\u003ctd\u003e\n\n```python\ndef on_timeline_interval_change(interval: List[int]):\n\tstart_time = interval[0]\n\tend_time = interval[1]\n\t# output time interval here\n\ndef on_layer_timeline_time_change(current_datetime_unix: int):\n\t# output current time here\n\nmap.set_map_event_handlers({\n\t'on_timeline_interval_change': on_timeline_interval_change\n\t'on_layer_timeline_time_change': on_layer_timeline_time_change\n})\n```\n\n\u003c/td\u003e\u003ctd\u003eSets timeline interval and layer time change event handlers.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-remove-map-event-handlers\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.setMapEventHandlers({\n\ton_click: None\n\ton_over: None\n\ton_geometry_selection: None\n\ton_filter: None\n})\n```\n\n\u003c/td\u003e\u003ctd\u003eRemoves specificied map event handlers.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-remove-map-timeline-event-handlers\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.setMapEventHandlers({\n\ton_timeline_interval_change: None\n\ton_layer_timeline_time_change: None\n})\n```\n\n\u003c/td\u003e\u003ctd\u003eRemoves timeline interval and layer time change event handlers.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-remove-all-map-event-handlers\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.set_map_event_handlers(None)\n```\n\n\u003c/td\u003e\u003ctd\u003eRemoves all registered map event handlers.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-view-state\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.set_view_state({\n\tlongitude: -74.006058,\n\tlatitude: 40.712772,\n\tzoom: ${1:zoom_level}\n})\n```\n\n\u003c/td\u003e\u003ctd\u003ePositions the map view on a certain location based on the provided coordinates with a defined zoom level.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-get-map-layers\u003c/td\u003e\u003ctd\u003e\n\n```python\nlayers = unfolded_map.get_layers()\nlayers.result()\n```\n\n\u003c/td\u003e\u003ctd\u003eReturns layer `label`, `id`, and `isVisible` properties for each layer on the map.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-add-points-map-layer\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.add_layer({\n\tid: 'pointLayer',\n\ttype: 'point',\n\tconfig: {\n\t\tdata_id: '${1:dataset_id}',\n\t\tcolumns: {\n\t\t\t'lat': '${2:latitude_field_name}',\n\t\t\t'lng': '${3:longitude_field_name}',\n\t\t},\n\t\tis_visible: true,\n\t\tcolor_scale: 'quantize',\n\t\tcolor_field: {\n\t\t\tname: '${4:color_field_name}',\n\t\t\ttype: 'real'\n\t\t},\n\t\tvis_config: {\n\t\t\tcolorRange: {\n\t\t\t\tcolors: [\n\t\t\t\t\t'#440154','#472777','#3e4989','#30678d','#25828e',\n\t\t\t\t\t'#1e9d88','#35b778','#6dce58','#b5dd2b','#fde724'\n\t\t\t\t]\n\t\t\t}\n\t\t}\n\t}\n})\n```\n\n\u003c/td\u003e\u003ctd\u003eAdds `point` layer to the map.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-remove-map-layer\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.remove_layer('${1:layer_id})\n```\n\n\u003c/td\u003e\u003ctd\u003eRemoves a layer from the map.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-layer-visibility\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.set_layer_visibility(layer_id='${1:layer_id}', is_visible=True)\n```\n\n\u003c/td\u003e\u003ctd\u003eShows or hides a map layer with the specified `layerId`.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-data-filter\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.set_filter({\n\tid: '${1:filter_id}'\n\tfield: '${3:field_name}',\n\tvalue: ${4:filter_value}\n})\n```\n\n\u003c/td\u003e\u003ctd\u003eSets data filter value.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-theme\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.set_theme('light')\n```\n\n\u003c/td\u003e\u003ctd\u003eChanges map theme to `dark` or `light` based on the passed parameter.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-get-map-config\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap_config = map.get_map_config()\nmap_config.result()\n```\n\n\u003c/td\u003e\u003ctd\u003eGets map configuration object that contains `mapState`, `mapStyle`, and `visState` object properties.\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-set-map-config\u003c/td\u003e\u003ctd\u003e\n\n```python\nmap.set_map_config({\n\tmapState: {...}\n\tmapStyle: {...}\n\tvisState: {...}\n})\n```\n\n\u003c/td\u003e\u003ctd\u003eSets map configuration with updated `mapState`, `mapStyle`, and `visState` object properties.\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n# Unfolded Html Snippets\n\n![Unfolded Map Html Snippets](https://raw.githubusercontent.com/RandomFractals/unfolded-maps/main/docs/images/unfolded-map-html-snippets.png)\n\n## Html Snippets\n\n\u003ctable\u003e\u003ctr\u003e\u003cth\u003ePrefix\u003c/th\u003e\u003cth\u003eBody\u003c/th\u003e\u003cth\u003eDescription\u003c/th\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003euf-map-html-template\u003c/td\u003e\u003ctd\u003e\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang='en'\u003e\n\t\u003chead\u003e\n\t\t\u003cmeta charset='utf-8'\u003e\n\t\t\u003cmeta name='viewport' content='width=device-width, initial-scale=1.0'\u003e\n\t\t\u003cmeta name='description' content='Unfolded Map'\u003e\n\t\t\u003ctitle\u003eUnfolded Map\u003c/title\u003e\n\t\t\u003cscript src='https://cdn.unfolded.ai/sdk/unfolded-sdk.min.js'\u003e\u003c/script\u003e\n\t\t\u003cstyle\u003e\n\t\t\thtml, body {\n\t\t\t\theight: 100%;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tbody {\n\t\t\t\tfont-family: 'Graphik Web';\n\t\t\t\tmargin: 0px;\n\t\t\t}\n\t\t\tiframe {\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t\u003c/style\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cscript type='text/javascript'\u003e\n\t\t\tconst map = UnfoldedMapSDK.createMap({\n\t\t\t\tmapUrl: '${1:mapUrl}', // try 'https://studio.unfolded.ai/public/80c800cc-5805-4416-94a5-bd8105cab7f7/embed',\n\t\t\t\tappendToDocument: true,\n\t\t\t\twidth: window.innerWidth,\n\t\t\t\theight: window.innerHeight,\n\t\t\t\tonLoad: () =\u003e {\n\t\t\t\t\tconsole.log('UnfoldedMapSDK: map loaded!');\n\t\t\t\t}\n\t\t\t});\n\t\t\tUnfoldedMapSDK.setViewState(map, {\n\t\t\t\tlongitude: -74.006058,\n\t\t\t\tlatitude: 40.712772,\n\t\t\t\tzoom: 10\n\t\t\t});\n\t\t\twindow.addEventListener('resize', () =\u003e {\n\t\t\t\tif (map) {\n\t\t\t\t\tmap.iframe.style.width = `${window.innerWidth}px`;\n\t\t\t\t\tmap.iframe.style.height = `${window.innerHeight}px`;\n\t\t\t\t}\n\t\t});\n\t\t\u003c/script\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003c/td\u003e\u003ctd\u003eCreates a new Unfolded map html template.\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n# Recommended Extensions\n\nOther extensions you might want to try to help you visualize, map, chart, and share your geo data in [VSCode](https://code.visualstudio.com/):\n\n| Extension | Description |\n| --- | --- |\n| [Data Preivew 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview) | Data Preview 🈸 extension for importing 📤 viewing 🔎 slicing 🔪 dicing 🎲 charting 📊 \u0026 exporting 📥 large JSON array/config, YAML, Apache Arrow, Avro \u0026 Excel data files |\n| [GistPad 📘](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs) | VS Code extension for managing and sharing code snippets, notes and interactive samples using GitHub Gists |\n| [Geo Data Viewer 🗺️](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.geo-data-viewer) | Geo Data Viewer w/0 Py 🐍, pyWidgets ⚙️, pandas 🐼, or @reactjs ⚛️ required to gen. some snazzy maps 🗺️ with keplerGL ... |\n| [Vega Viewer 📈](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer) | VSCode extension for Interactive Preview of Vega \u0026 Vega-Lite maps 🗺️ \u0026 graphs 📈 |\n| [JS Notebook 📓 Inspector 🕵️](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.js-notebook-inspector) | VSCode extension for Interactive Preview of Observable JS Notebooks 📚 \u0026 Notebook 📓 Nodes ⎇ \u0026 Cells ⌗ source code. |\n| [VSCode Map Preview](https://marketplace.visualstudio.com/items?itemName=jumpinjackie.vscode-map-preview) | VSCode extension for visually previewing geospatial file content (GeoJSON, KML, etc) on a map |\n| [Geo Tools](https://marketplace.visualstudio.com/items?itemName=SmartMonkey.geotools) | Geo Tools VSCode extension allows you to easily interact with geographical data |\n| [Hex Editor](https://marketplace.visualstudio.com/items?itemName=ms-vscode.hexeditor) | Allows Hex Editing inside VS Code |\n\n# Dev Build\n\nUse the following commands to build this Unfolded Snippets extension locally for debugging and submitting pull requests (PRs):\n\n```\n$ git clone https://github.com/RandomFractals/unfolded-map-snippets\n$ cd unfolded-map-snippets\n$ npm install\n$ code .\n```\n\nPress `F5` in VSCode to start Unfolded Snippets extension debug session.\n\nUse [Snippets Viewer](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.snippets-viewer) to view and test configured Unfolded vscode [snippets](https://github.com/RandomFractals/unfolded-map-snippets/tree/main/snippets).\n\n# Contributing\n\nAny \u0026 all test, code || feedback contributions are welcome.\n\nOpen an issue || create a pull request to make this VSCode Snippets extension work better for all. 🤗\n\n\n\u003c!-- COMMANDS_START --\u003e\n## Commands (1)\n\n| Command                             | Description                 |\n| ----------------------------------- | --------------------------- |\n| unfolded.snippets.notebook.examples | Unfolded: Notebook Examples |\n\u003c!-- COMMANDS_END --\u003e\n\n\n\n\n\n\u003c!-- DEPENDENCIES_START --\u003e\n## Extension Dependencies (1)\n\n| Extension Name                                                              | Description            |\n| --------------------------------------------------------------------------- | ---------------------- |\n| [Snippets Viewer](https://github.com/RandomFractals/vscode-snippets-viewer) | VSCode Snippets Viewer |\n\u003c!-- DEPENDENCIES_END --\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frandomfractals%2Funfolded-map-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frandomfractals%2Funfolded-map-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frandomfractals%2Funfolded-map-snippets/lists"}