{"id":19881382,"url":"https://github.com/giscience/vue2-leaflet-height-graph","last_synced_at":"2025-05-02T14:30:29.402Z","repository":{"id":57683955,"uuid":"226107459","full_name":"GIScience/vue2-leaflet-height-graph","owner":"GIScience","description":"Vue2Leaflet plugin to wrap Leaflet.Heightgraph control for Vue applications","archived":false,"fork":false,"pushed_at":"2021-02-24T10:41:15.000Z","size":818,"stargazers_count":1,"open_issues_count":2,"forks_count":4,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-08T10:02:53.801Z","etag":null,"topics":["elevation-profile","leaflet","vue","vue2leaflet"],"latest_commit_sha":null,"homepage":"","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/GIScience.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}},"created_at":"2019-12-05T13:22:33.000Z","updated_at":"2021-10-13T16:37:52.000Z","dependencies_parsed_at":"2022-09-10T14:40:42.455Z","dependency_job_id":null,"html_url":"https://github.com/GIScience/vue2-leaflet-height-graph","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIScience%2Fvue2-leaflet-height-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIScience%2Fvue2-leaflet-height-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIScience%2Fvue2-leaflet-height-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GIScience%2Fvue2-leaflet-height-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GIScience","download_url":"https://codeload.github.com/GIScience/vue2-leaflet-height-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224315204,"owners_count":17290992,"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":["elevation-profile","leaflet","vue","vue2leaflet"],"created_at":"2024-11-12T17:14:02.118Z","updated_at":"2024-11-12T17:14:02.914Z","avatar_url":"https://github.com/GIScience.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue2-leaflet-height-graph\r\n\r\nThis is a [Vue2Leaflet](https://github.com/KoRiGaN/Vue2Leaflet) plugin to provide the\r\n[Leaflet.Heightgraph](https://github.com/GIScience/Leaflet.Heightgraph) control\r\non [Leaflet](https://leafletjs.com/) maps in [Vue](https://vuejs.org/) applications.\r\n\r\n\r\n## Installation\r\n```bash\r\nnpm install --save vue2-leaflet-height-graph\r\n```\r\n\r\n## Import\r\n\r\nYou could either import the component locally where you need it or register it globally.\r\n\r\n### Local\r\n\r\nIn a `.vue` file:\r\n\r\n```vue\r\n\u003cscript\u003e\r\n    import LHeightGraph from 'vue2-leaflet-height-graph'\r\n    // ...\r\n    export default {\r\n        // ...\r\n        components: { 'l-height-graph': LHeightGraph }\r\n        // ...\r\n    }\r\n\u003c/script\u003e\r\n// ...\r\n```\r\n\r\n### Global\r\n\r\nIn your `main.js`:\r\n\r\n```js\r\nimport Vue from 'vue';\r\nimport Vue2LeafletHeightGraph from 'vue2-leaflet-height-graph';\r\n// ...\r\nVue.component('l-height-graph', Vue2LeafletHeightGraph);\r\n// ...\r\n```\r\n\r\n## Usage\r\n\r\nWith the `LHeightGraph` component loaded into Vue, add the\r\n`l-height-graph` element inside an `l-map`.\r\n\r\n```html\r\n\u003cl-map\u003e\r\n  \u003cl-height-graph :data=\"heightGraphData\"/\u003e\r\n  \u003c!-- other map components --\u003e\r\n\u003c/l-map\u003e\r\n```\r\n\r\n## Properties\r\n\r\nThe following properties can be passed to the `LHeightGraph` component:\r\n\r\n### data\r\n\r\nTakes an array of GeoJSON FeatureCollections as described\r\nin the [Leaflet.Heigthgraph Readme](https://github.com/GIScience/Leaflet.Heightgraph/#supported-data)\r\nby default.\r\n\r\nThe component will assume the data is in `geoJson` format unless you specify another supported parser via options (see [options](#options) below)\r\n\r\nCurrently supported formats for parser values:\r\n\r\n- `ors`: The response of the [openrouteservice directions endpoint](https://openrouteservice.org/dev/#/api-docs/v2/directions/{profile}/geojson/post)\r\nin geojson format. Don't forget to set `elevation=true`.\r\n\r\n- `geojson`: data in a `geoJson` format.\r\n\r\n- `noParser`: the data does not need to be parsed [see expected data structure](./src/data/no-parser-example.js)\r\n\r\nOther relevant formats can be made available by contributing a parser.\r\n\r\nexamples: see [data folder](./src/data)\r\n\r\ndefault: `[]`\r\n\r\n### width via grid/view breakpoint\r\n\r\nThis component supports specifying a dynamic width based current screen resolution and as a portion of the parent width, similar to what is used in the [vuetify](https://dev.vuetifyjs.com/en/components/grids).\r\nSo if can be defined the element width for mutiples scenarios, like: md8, lg10, xl6.\r\n\r\n### options\r\n\r\nUse the `options` property to specify any of the\r\n[Leaflet.Heightgraph options](https://github.com/GIScience/Leaflet.Heightgraph#default-options)\r\nto be set when the control is created.\r\n\r\nIf no options are specified the default options from Leaflet.Heightgraph are used.\r\nthe wrapper has it own defaults only for:\r\n\r\n- width: use the grid system as default. If width is specified it will override the grid system value and not be responsive.\r\n- parser: = `geoJson`\r\n- position: `bottomright`\r\n\r\nexample:\r\n\r\n```js\r\n{ width: 1000, position: 'bottomleft', parser: 'ors' }\r\n```\r\n\r\n#### position\r\n\r\nString to set the position on the map. Values can be `'bottomleft'`, `'bottomright'`, `'topleft'`, `'topright'`.\r\nFast setting for `options.position` (overwriting).\r\n\r\n#### expand\r\n\r\nBoolean for expanding the heightgraph window on creation. Values are `true` and `false`.\r\nFast setting for `options.expand` (overwriting).\r\n\r\n### Events\r\n\r\nThis component emits a `closed` event when the up-right corner graph close button is hit and it is closed. It can be used to synchronize the visibility of the graph with other elements when it is displayed conditionally.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiscience%2Fvue2-leaflet-height-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiscience%2Fvue2-leaflet-height-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiscience%2Fvue2-leaflet-height-graph/lists"}