|
1 | | -# Vue 3 + Typescript + Vite |
| 1 | +# vue-leaflet |
2 | 2 |
|
3 | | -This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
| 3 | +Here is Vue components for Leaflet maps, which is inspired by [react-leaflet](https://github.com/PaulLeCam/react-leaflet) and [vue-google-maps](https://github.com/GuillaumeLeclerc/vue-google-maps). |
4 | 4 |
|
5 | | -## Recommended IDE Setup |
| 5 | +> A vue component for leaflet.js |
6 | 6 |
|
7 | | -- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) |
| 7 | +This branch adapts with vue 3.0, and leaflet 1.9.x. |
8 | 8 |
|
9 | | -## Type Support For `.vue` Imports in TS |
| 9 | +## Completion of components |
10 | 10 |
|
11 | | -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette. |
| 11 | +- [x] Map |
| 12 | +- [x] Marker |
| 13 | +- [x] Popup |
| 14 | +- [x] Tooltip |
| 15 | +- [x] TileLayer |
| 16 | + |
| 17 | +## Installation |
| 18 | + |
| 19 | +``` |
| 20 | +npm install vueleaflet -save |
| 21 | +``` |
| 22 | + |
| 23 | +## Startup |
| 24 | + |
| 25 | +You can input some Vue-styled components in a .vue file in order to use leaflet.js, like [Layout.vue](src/Layout.vue). |
| 26 | + |
| 27 | +``` |
| 28 | +<l-map :zoom="zoom" :center="center" :min-zoom="minZoom" :max-zoom="maxZoom"> |
| 29 | + <l-tilelayer :url="url" :attribution="attribution"></l-tilelayer> |
| 30 | + <l-marker :position="center" :title="title" :opacity="opacity" :draggable="draggable"> |
| 31 | + <l-tooltip content="a tooltip"></l-tooltip> |
| 32 | + </l-marker> |
| 33 | + <l-marker :position="marker" :title="title" :opacity="opacity" :draggable="false"> |
| 34 | + <l-popup content="a popup"></l-popup> |
| 35 | + </l-marker> |
| 36 | +</l-map> |
| 37 | +``` |
| 38 | + |
| 39 | +Before that, you should config the vuex, see [main.js](src/main.js) |
| 40 | + |
| 41 | +``` |
| 42 | +import Vue from 'vue'; |
| 43 | +import Vuex from 'vuex'; |
| 44 | +import VueLeaflet from './index' |
| 45 | +import App from './Layout'; |
| 46 | +
|
| 47 | +Vue.use(Vuex); |
| 48 | +
|
| 49 | +const store = new Vuex.Store({}); |
| 50 | +
|
| 51 | +Vue.use(VueLeaflet.plugin,store); |
| 52 | +
|
| 53 | +new Vue({ |
| 54 | + el: '#app', |
| 55 | + store, |
| 56 | + template: '<App/>', |
| 57 | + components: { App }, |
| 58 | +}); |
| 59 | +
|
| 60 | +``` |
| 61 | + |
| 62 | +## Build Setup |
| 63 | + |
| 64 | +``` bash |
| 65 | +# install dependencies |
| 66 | +npm install |
| 67 | + |
| 68 | +# serve with hot reload at localhost:8080 |
| 69 | +npm run dev |
| 70 | + |
| 71 | +# build for production with minification |
| 72 | +npm run build |
| 73 | + |
| 74 | +# build for production and view the bundle analyzer report |
| 75 | +npm run build --report |
| 76 | + |
| 77 | +# run unit tests |
| 78 | +npm run unit |
| 79 | + |
| 80 | +# run all tests |
| 81 | +npm test |
| 82 | +``` |
| 83 | + |
| 84 | +For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). |
| 85 | + |
| 86 | +## Contribute |
| 87 | + |
| 88 | +All the developments are on the [develop](https://github.com/brandonxiang/vue-leaflet/tree/next) branch, while the stable version is on the [master](https://github.com/brandonxiang/vue-leaflet/tree/next) branch. |
| 89 | + |
| 90 | +## License |
| 91 | + |
| 92 | +[MIT](LICENSE) |
0 commit comments