Skip to content

Commit cd6390e

Browse files
brandonxiangbrandonxiang
committed
chore: update readme
1 parent cfaa46a commit cd6390e

File tree

1 file changed

+90
-58
lines changed

1 file changed

+90
-58
lines changed

‎README.md

Lines changed: 90 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,124 @@
11
# vue-leaflet
22

3+
<p align="center">
4+
<a href="https://github.com/brandonxiang/vueleaflet/blob/master/LICENSE">
5+
<img src="https://img.shields.io/github/license/brandonxiang/vueleaflet" alt="license">
6+
</a>
7+
<a href="https://npmjs.org/package/vueleaflet" alt="npm version">
8+
<img src="https://img.shields.io/npm/v/vueleaflet.svg" />
9+
</a>
10+
<a href="https://npmjs.org/package/vueleaflet" alt="npm version">
11+
<img src="https://img.shields.io/npm/dw/vueleaflet" />
12+
</a>
13+
<a href="https://twitter.com/intent/follow?screen_name=xwpisme">
14+
<img src="https://img.shields.io/twitter/follow/xwpisme?style=social&logo=twitter"
15+
alt="follow on Twitter">
16+
</a>
17+
18+
</p>
19+
320
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).
421

522
> A vue component for leaflet.js
623
7-
This branch adapts with vue 3.0, and leaflet 1.9.x.
8-
9-
## Completion of components
10-
11-
- [x] Map
12-
- [x] Marker
13-
- [x] Popup
14-
- [x] Tooltip
15-
- [x] TileLayer
24+
This library is compatible with vue 3.0, and leaflet 1.9.x.
1625

1726
## Installation
1827

19-
```
20-
npm install vueleaflet -save
28+
```bash
29+
npm install vueleaflet vue leaflet -save
2130
```
2231

2332
## Startup
2433

2534
You can input some Vue-styled components in a .vue file in order to use leaflet.js, like [Layout.vue](src/Layout.vue).
2635

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>
36+
```html
37+
<l-map
38+
id="map1"
39+
:options="{
40+
zoom: 13,
41+
center: { lat: 51.505, lng: -0.09 },
42+
minZoom: 8,
43+
maxZoom: 15,
44+
attributionControl: true,
45+
zoomControl: true
46+
}"
47+
>
48+
<l-tilelayer
49+
urlTemplate="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
50+
:options="{
51+
attribution: 'vue-leaflet',
52+
maxZoom: 18,
53+
id: 'mapbox/streets-v11',
54+
tileSize: 512,
55+
zoomOffset: -1,
56+
accessToken: 'pk.eyJ1IjoieHdwaXNtZSIsImEiOiJ5cTlCQTlRIn0.QdV-wNUKbgs7jAlbVE747Q'
57+
}"
58+
/>
59+
<l-marker
60+
:latlng="{ lat: 51.505, lng: -0.09 }"
61+
:options="{
62+
title: 'marker1',
63+
opacity: 1,
64+
draggable: true
65+
}"
66+
>
67+
<l-tooltip :options="{ content: 'tooltip with marker1' }" />
3268
</l-marker>
33-
<l-marker :position="marker" :title="title" :opacity="opacity" :draggable="false">
34-
<l-popup content="a popup"></l-popup>
69+
<l-marker
70+
:latlng="{ lat: 51.505, lng: -0.11 }"
71+
:options="{
72+
title: 'marker2'
73+
}"
74+
>
75+
<l-popup :options="{ content: 'popup with marker2' }" />
3576
</l-marker>
77+
<l-tooltip
78+
:options="{ content: 'tooltip standalone' }"
79+
:latlng="{ lat: 51.505, lng: 0 }"
80+
/>
81+
<l-popup
82+
:options="{ content: 'popup standalone' }"
83+
:latlng="{ lat: 51.505, lng: 0 }"
84+
/>
85+
<l-circle
86+
:latlng="[51.508, -0.11]"
87+
:options="{
88+
color: 'red',
89+
fillColor: '#f03',
90+
fillOpacity: 0.5,
91+
radius: 500
92+
}"
93+
/>
94+
<l-polygon
95+
:latlng="[
96+
[51.509, -0.08],
97+
[51.503, -0.06],
98+
[51.51, -0.047]
99+
]"
100+
/>
36101
</l-map>
37102
```
38103

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-
62104
## Build Setup
63105

64-
``` bash
65-
# install dependencies
66-
npm install
67-
68-
# serve with hot reload at localhost:8080
106+
```bash
107+
# serve the example
69108
npm run dev
70109

71-
# build for production with minification
110+
# build the library
72111
npm run build
73112

74-
# build for production and view the bundle analyzer report
75-
npm run build --report
113+
# build the example
114+
npm run build: example
76115

77-
# run unit tests
78-
npm run unit
79-
80-
# run all tests
81-
npm test
82116
```
83117

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-
86118
## Contribute
87119

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.
120+
PR Welcome
89121

90122
## License
91123

92-
[MIT](LICENSE)
124+
[MIT](LICENSE)

0 commit comments

Comments
 (0)