{"id":17864046,"url":"https://github.com/hassanbahati/vue-map","last_synced_at":"2026-01-16T00:57:01.278Z","repository":{"id":104008007,"uuid":"442411155","full_name":"HassanBahati/vue-map","owner":"HassanBahati","description":null,"archived":false,"fork":false,"pushed_at":"2021-12-28T09:29:23.000Z","size":3300,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-08T11:42:35.822Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/HassanBahati.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-12-28T09:17:14.000Z","updated_at":"2021-12-28T09:29:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"9ea5c462-cd70-4dde-8726-d1dd875bc655","html_url":"https://github.com/HassanBahati/vue-map","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HassanBahati%2Fvue-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HassanBahati%2Fvue-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HassanBahati%2Fvue-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HassanBahati%2Fvue-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HassanBahati","download_url":"https://codeload.github.com/HassanBahati/vue-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246893306,"owners_count":20850927,"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-10-28T09:08:26.606Z","updated_at":"2026-01-16T00:57:01.272Z","avatar_url":"https://github.com/HassanBahati.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue.js map using MapLibre GL JS\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA quick way to start a web map application with Vue.js using MapLibre GL JS.\n\nA simple fullscreen map application is used to showcase how to utilize MapTiler maps together with Vue.js and MapLibre GL JS for your Vue.js app.\n\n## Screenshot\n\n![vue maplibre template](/assets/vue-maplibre-template.png \"Vue MapLibre template\")\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Demo\n\nOnline demo: https://labs.maptiler.com/vue-template-maplibre-gl-js/\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Build With\n\n* [Vue.js](https://v3.vuejs.org/)\n* [MapLibre GL JS](https://maplibre.org/)\n* [MapTiler](https://www.maptiler.com/)\n\nThis project was generated with [Vue CLI](https://cli.vuejs.org/) version 4.5.15.\n\n## Getting Started\n\n### Prerequisites\n\n* npm\n  ```sh\n  npm install npm@latest -g\n  ```\n* Angular CLI\n  ```sh\n  npm install -g @vue/cli\n  ```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Create an app\n\nClone the repo to create a new Vue.js project. Run in your command-line:\n\n```\n  git clone https://github.com/maptiler/vue-template-maplibre-gl-js.git my-vue-map\n```\n\nNavigate to the newly created project folder **my-vue-map**\n\n```\n  cd my-vue-map\n```\n\nInstall the NPM packages dependencies. Run in your command-line:\n\n```\n  npm install\n```\n\n### API KEY\n\nRename or copy the `.env.example` file to `.env`\n\n```\n  cp .env.example .env\n```\n\nOpen the `.env` file, :warning: you will need to replace **YOUR_MAPTILER_API_KEY** with your own MapTiler API key.\n\nYour MapTiler account access key is on your MapTiler [Cloud](https://cloud.maptiler.com/account/keys/) account page. \n\n:information_source: If you don't have an API KEY, you can create it for free at https://www.maptiler.com/cloud/\n\n### Run\n\nTo start your local environment, run: \n\n```\n  npm run serve\n``` \n\nYou will find your app on address http://localhost:8080/.\n\nNow you should see the app in your browser.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ACKNOWLEDGMENTS --\u003e\n## Acknowledgments\n\nInstead of using or developing a custom map component, you can use the [Vue.js binding of maplibre-gl-js](https://github.com/razorness/vue-maplibre-gl).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhassanbahati%2Fvue-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhassanbahati%2Fvue-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhassanbahati%2Fvue-map/lists"}