{"id":20168266,"url":"https://github.com/jakobmiksch/vue-ol-comp","last_synced_at":"2025-04-10T01:52:34.861Z","repository":{"id":217557319,"uuid":"708531246","full_name":"JakobMiksch/vue-ol-comp","owner":"JakobMiksch","description":"A composable connecting Vue with OpenLayers","archived":false,"fork":false,"pushed_at":"2025-02-01T08:28:08.000Z","size":1162,"stargazers_count":10,"open_issues_count":9,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-21T17:08:23.037Z","etag":null,"topics":["gis","openlayers","vue","vue3","webmap","webmapping"],"latest_commit_sha":null,"homepage":"https://jakobmiksch.github.io/vue-ol-comp/","language":"Vue","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/JakobMiksch.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":"2023-10-22T20:32:01.000Z","updated_at":"2024-12-01T08:59:41.000Z","dependencies_parsed_at":"2024-05-20T09:48:17.076Z","dependency_job_id":"bdc5f6d6-d015-431a-ac98-0b4b04257b9f","html_url":"https://github.com/JakobMiksch/vue-ol-comp","commit_stats":null,"previous_names":["jakobmiksch/vue-ol-comp"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakobMiksch%2Fvue-ol-comp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakobMiksch%2Fvue-ol-comp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakobMiksch%2Fvue-ol-comp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JakobMiksch%2Fvue-ol-comp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JakobMiksch","download_url":"https://codeload.github.com/JakobMiksch/vue-ol-comp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248142941,"owners_count":21054671,"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":["gis","openlayers","vue","vue3","webmap","webmapping"],"created_at":"2024-11-14T01:07:08.573Z","updated_at":"2025-04-10T01:52:34.837Z","avatar_url":"https://github.com/JakobMiksch.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-ol-comp\n\n[![NPM Version](https://badgen.net/npm/v/vue-ol-comp)](https://www.npmjs.com/package/vue-ol-comp) \u003c!-- markdown-link-check-disable-line --\u003e\n[![Lint](https://github.com/JakobMiksch/vue-ol-comp/actions/workflows/lint.yml/badge.svg)](https://github.com/JakobMiksch/vue-ol-comp/actions/workflows/lint.yml) \u003c!-- markdown-link-check-disable-line --\u003e\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) \u003c!-- markdown-link-check-disable-line --\u003e\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/github/JakobMiksch/vue-ol-comp) \u003c!-- markdown-link-check-disable-line --\u003e\n\nThis [composable](https://vuejs.org/guide/reusability/composables) exposes reactive variables to make the state of an [OpenLayers](https://openlayers.org/) map available across different Vue components. It provides easy access to commonly used variables such as `map`, `layers`, `center`, `extent`, `zoom`, `pointerCoordinate`, `pointerPixel`, and more. See [src/composables/useOl.ts](src/composables/useOl.ts) for implementation details.\n\nDemo application: \u003chttps://jakobmiksch.github.io/vue-ol-comp/\u003e\n\n## Usage\n\n```shell\n# install\nnpm install vue-ol-comp\n```\n\nInitialize or edit the map in any component, for example in `App.vue`:\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { fromLonLat } from 'ol/proj'\nimport { onMounted } from 'vue'\nimport { useOl, OlMap } from 'vue-ol-comp'\nimport TileLayer from 'ol/layer/Tile'\nimport OSM from 'ol/source/OSM'\n\nconst { map } = useOl()\n\nonMounted(() =\u003e {\n  map.value.addLayer(\n    new TileLayer({\n      source: new OSM()\n    })\n  )\n\n  map.value.getView().setCenter(fromLonLat([11, 47]))\n  map.value.getView().setZoom(15)\n})\n\u003c/script\u003e\n```\n\nThe map can be added to any component like this:\n\n```vue\n\u003ctemplate\u003e\n  \u003cOlMap :style=\"{ width: '500px', height: '100px' }\"/\u003e\n\u003c/template\u003e\n```\n\nMake sure `ol/ol.css` is imported in your CSS.\n\n## Development\n\nThe development is done using a demo app, where all features can directly be tested.\n\n```shell\n# install dependencies\nnpm install\n\n# run the development application\nnpm run dev\n```\n\nThe application will be accessible at \u003chttp://localhost:5173/\u003e \u003c!-- markdown-link-check-disable-line --\u003e\n\n## Alternative ways to use OpenLayers in Vue\n\n- **directly** without any additional library. This is done in the application template [Wegue](https://github.com/wegue-oss/wegue/) or described in this [blog post](https://spatial-dev.guru/2022/02/20/integrating-openlayers-map-with-vuejs-create-map-part-1/)\n- using a **component library** like [vue3-openlayers](https://github.com/MelihAltintas/vue3-openlayers) (for Vue 3) or [vuelayers](https://github.com/ghettovoice/vuelayers) (for Vue 2) that let's one configure the map via the `\u003ctemplate\u003e` section\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakobmiksch%2Fvue-ol-comp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjakobmiksch%2Fvue-ol-comp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakobmiksch%2Fvue-ol-comp/lists"}