{"id":19357952,"url":"https://github.com/populatetools/perspective-map","last_synced_at":"2025-04-23T11:30:54.545Z","repository":{"id":42635088,"uuid":"362691874","full_name":"PopulateTools/perspective-map","owner":"PopulateTools","description":"Perspective plugin to create a map with Leaflet","archived":false,"fork":false,"pushed_at":"2025-02-20T05:13:03.000Z","size":1846,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-21T00:09:13.506Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PopulateTools.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-04-29T04:42:03.000Z","updated_at":"2025-02-20T05:13:00.000Z","dependencies_parsed_at":"2024-06-19T20:00:01.588Z","dependency_job_id":"5b5f7679-970d-48a0-abb3-b54db2c8f6bf","html_url":"https://github.com/PopulateTools/perspective-map","commit_stats":{"total_commits":33,"total_committers":4,"mean_commits":8.25,"dds":"0.36363636363636365","last_synced_commit":"8323bddd11592dd8641848fefbf1ab58366c65f8"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PopulateTools%2Fperspective-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PopulateTools%2Fperspective-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PopulateTools%2Fperspective-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PopulateTools%2Fperspective-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PopulateTools","download_url":"https://codeload.github.com/PopulateTools/perspective-map/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250425011,"owners_count":21428488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-10T07:09:47.438Z","updated_at":"2025-04-23T11:30:54.147Z","avatar_url":"https://github.com/PopulateTools.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003ePerspective Map\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  🗺\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  Includes a map of Leaflet in \u003ca href=\"https://github.com/finos/perspective/\"\u003ePerspective\u003c/a\u003e by \u003ca href=\"https://populate.tools\"\u003ePopulate\u003c/a\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/perspective-map\"/\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/perspective-map\"/\u003e\n\u003c/div\u003e\n\n## Table of Contents\n- [Installation](#Installation)\n- [Requeriments](#requeriments)\n- [Dependencies](#Dependencies)\n- [How to use](#use)\n- [Examples](#examples)\n- [Development](#Development)\n\n## Installation\n\nYou can also load directly from UNPKG as a standalone library.\n\n```html\n\u003cscript src=\"https://unpkg.com/@finos/perspective@0.6.2/dist/umd/perspective.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@finos/perspective-viewer@0.6.2/dist/umd/perspective-viewer.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@finos/perspective-viewer-datagrid@0.6.2/dist/umd/perspective-viewer-datagrid.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/@finos/perspective-viewer-d3fc@0.6.2/dist/umd/perspective-viewer-d3fc.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/perspective-map@1.0.1/dist/index.js\"\u003e\u003c/script\u003e\n```\n\nAs a module with NPM or YARN\n\n```bash\n# npm\nnpm i perspective-leaflet --save-dev\n\n# yarn\nyarn add perspective-leaflet\n```\n\nAnd then import it:\n\n```javascript\nimport perspective from \"@finos/perspective\";\nimport \"@finos/perspective-viewer\";\nimport \"@finos/perspective-viewer-datagrid\";\nimport \"@finos/perspective-viewer-d3fc\";\nimport \"@finos/perspective-viewer/themes/all-themes.css\";\nimport \"perspective-map\";\n```\n\n\n## Requirements\n\nThe plugin has been tested with the latest versions of Perspective (\u003e= 0.8.0) which was released on 28.04.2021.\n\nYou will also need to include the Leaflet CSS\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.7.1/dist/leaflet.css\" /\u003e\n```\n\nOr\n\n```javascript\nimport \"leaflet/dist/leaflet.css\";\n```\n\n## How to use\n\nThe plugin expects to receive the data as CSV, and it should have a column called `geometry`, which will have the geospatial data in GeoJSON or TopoJSON format (string-like).\n\nAn example:\n\n```csv\npopulation,city,geometry\n785123,\"Zaragoza\",\"{\"\"type\"\":\"\"Point\"\",\"\"coordinates\"\":[-0.8850860595703125,41.64828831259533]}\"\n125123,\"Teruel\",\"{\"\"type\"\":\"\"Point\"\",\"\"coordinates\"\":[-1.1061859130859375,40.345497469392406]}\"\n785123,\"Huesca\",\"{\"\"type\"\":\"\"Point\"\",\"\"coordinates\"\":[-0.41473388671875,42.14202329789122]}\"\n```\n\n### config-map\n\nYou can choose the metric and zoom value of the map with the `map-config. This attribute is optional.\n\nCreate an object\n```javascript\nconst configMap = {\n  metric: \"population\",\n  zoom: true\n}\n```\n\n`metric: string` This is the column of data used to color the map and display it in the legend. If not defined, the map uses the first value of the data.\n`zoom: boolean`, enable/disable the zoom of the map.\n\nStringify the object to add it as an attribute to the `perspective-viewer`.\n```javascript\nconst element = document.getElementsByTagName(\"perspective-viewer\")[0];\nelement.setAttribute(\"config-map\", JSON.stringify(configMap))\n```\n\n\n## CSS\n\nYou can override the color scale using custom properties. To create color scales for maps, we recommend using [ColorBrewer](https://colorbrewer2.org/#type=sequential\u0026scheme=BuGn\u0026n=3)\n\nIn your CSS, you should override the custom properties that we have created.\n\n```css\n:root {\n  --perspective-map-range-1: #fef0d9;\n  --perspective-map-range-2: #fdcc8a;\n  --perspective-map-range-3: #fc8d59;\n  --perspective-map-range-4: #e34a33;\n  --perspective-map-range-5: #b30000;\n  --perspective-map-category-1: #feebe2;\n  --perspective-map-category-2: #fbb4b9;\n  --perspective-map-category-3: #f768a1;\n  --perspective-map-category-4: #c51b8a;\n  --perspective-map-category-5: #7a0177;\n}\n```\n\n## Examples\n\n\u003cdiv\u003e\n\u003ch3\u003eChoroplet spanish regions\u003c/h3\u003e\n\u003ca href=\"https://bl.ocks.org/jorgeatgu/0ec3f662231e1222b24d1a62a58780fb\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/PopulateTools/perspective-map/main/images/chroloplet.png\"/\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n\u003ch3\u003eChoroplet spanish regions override scale color\u003c/h3\u003e\n\u003ca href=\"https://bl.ocks.org/jorgeatgu/bd2a217bec9297a81f07d32fe7c24f2a\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/PopulateTools/perspective-map/main/images/chroloplet-scale.png\"/\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n\u003ch3\u003eMap marker\u003c/h3\u003e\n\u003ca href=\"https://bl.ocks.org/jorgeatgu/b9555928ff49ddbdceccda73c5ca248b\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/PopulateTools/perspective-map/main/images/map-marker.png\"/\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv\u003e\n\u003ch3\u003eChroloplet map with Vue\u003c/h3\u003e\n\u003ca href=\"https://codesandbox.io/s/j1hk0\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/PopulateTools/perspective-map/main/images/chroloplet.png\"/\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\n\n## Development\n\n- Clone the repo\n- Install dependencies\n- Start coding! \n- Send a PR\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpopulatetools%2Fperspective-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpopulatetools%2Fperspective-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpopulatetools%2Fperspective-map/lists"}