Skip to content

Commit a869a9e

Browse files
KoRiGaNKoRiGaN
committed
Add logo, fix readme, and warn for breaking change in v1
1 parent 22cbb33 commit a869a9e

File tree

3 files changed

+73
-115
lines changed

3 files changed

+73
-115
lines changed

‎README.md

Lines changed: 73 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,114 @@
11
# Vue2Leaflet
22

3-
[![Join the chat at https://gitter.im/Vue2Leaflet/Lobby](https://badges.gitter.im/Vue2Leaflet/Lobby.svg)](https://gitter.im/Vue2Leaflet/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
4-
5-
<a href="https://travis-ci.org/KoRiGaN/Vue2Leaflet"><img src="https://travis-ci.org/KoRiGaN/Vue2Leaflet.svg?branch=master" alt="Downloads"></a>
6-
<a href="https://www.npmjs.com/package/vue2-leaflet"><img src="https://img.shields.io/npm/dt/vue2-leaflet.svg" alt="Downloads"></a>
7-
<a href="https://www.npmjs.com/package/vue2-leaflet"><img src="https://img.shields.io/npm/v/vue2-leaflet.svg" alt="Version"></a>
8-
<a href="https://www.npmjs.com/package/vue2-leaflet"><img src="https://img.shields.io/npm/l/vue2-leaflet.svg" alt="License"></a>
9-
10-
11-
> Vue2 component that helps with leaflet interaction
12-
13-
14-
## How to display a map with a marker
15-
16-
Register Map and TileLayer components from Vue2Leaflet
17-
``` javascript
18-
import Vue2Leaflet from 'vue2-leaflet';
19-
20-
Vue.component('v-map', Vue2Leaflet.Map);
21-
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
22-
Vue.component('v-marker', Vue2Leaflet.Marker);
23-
```
24-
25-
Add the map to your page
26-
``` html
27-
<div id="app" style="height: 100%">
28-
<v-map :zoom=13 :center="[47.413220, -1.219482]">
29-
<v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
30-
<v-marker :lat-lng="[47.413220, -1.219482]"></v-marker>
31-
</v-map>
32-
</div>
33-
```
34-
3+
<img align="right" height="178" title="Vue2Leaflet Limit logo" src="./logo.png">
4+
5+
<a href="https://travis-ci.org/KoRiGaN/Vue2Leaflet">
6+
<img src="https://travis-ci.org/KoRiGaN/Vue2Leaflet.svg?branch=master" alt="Downloads">
7+
</a>
8+
<a href="https://www.npmjs.com/package/vue2-leaflet">
9+
<img src="https://img.shields.io/npm/dt/vue2-leaflet.svg" alt="Downloads">
10+
</a>
11+
<a href="https://www.npmjs.com/package/vue2-leaflet">
12+
<img src="https://img.shields.io/npm/v/vue2-leaflet.svg" alt="Version">
13+
</a>
14+
<a href="https://www.npmjs.com/package/vue2-leaflet">
15+
<img src="https://img.shields.io/npm/l/vue2-leaflet.svg" alt="License">
16+
</a>
17+
<a href="https://gitter.im/Vue2Leaflet/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge">
18+
<img src="https://badges.gitter.im/Vue2Leaflet/Lobby.svg" alt="Gitter">
19+
</a>
20+
21+
Vue2Leaflet is a JavaScript library for the [Vue](https://vuejs.org/) framework that wraps [Leaflet](http://leafletjs.com/) making it easy to create reactive maps.
22+
23+
24+
![Image of Map](./vue2leaflet-example.png)
25+
26+
## Documentation
27+
[Go here](https://korigan.github.io/Vue2Leaflet/) to check out live examples and docs.
28+
29+
If you want to hack around, here is a [JS Fiddle](https://jsfiddle.net/Boumi/k04zpLx9/) to get started
30+
### :warning: Breaking changes from v1.x.x to v0.x.x :warning:
31+
A new major release v1.x.x is available and come with some breaking changes.
32+
#### :exclamation: Components names
33+
As some component where conflicting with reserved name like Circle with SVG Circle, from v1.x.x all components are prefixed with L.
34+
35+
For example Marker component became LMarker (l-marker in template).
36+
#### :exclamation: Events names
37+
Event handling have been simplified and are now mapped directly to Leaflet event.
38+
39+
For example Marker move event was 'l-move' and became simply 'move'.
40+
#### :sparkles: Leaflet Controls
41+
v1.0.0 introduces Leaflet Controls you can now use them using LControlAttribution, LControlLayers, LControlScale and LControlZoom.
42+
43+
When adding LControlAttribution or LControlZoom to your template, remember to desactivate the default one by using LMap options:
3544
``` javascript
36-
new Vue({ el: '#app'});
45+
{
46+
zoomControl: false,
47+
attributionControl: false
48+
}
3749
```
38-
39-
Make sure the leaflet.css is included, either via a HTML link tag or in your vue component style
40-
41-
``` css
42-
@import "~leaflet/dist/leaflet.css";
43-
```
44-
Here is the result
45-
46-
![Image of Map](https://korigan.github.com/Vue2Leaflet/images/example_map.png)
47-
48-
## [Live Demo here](https://korigan.github.io/Vue2Leaflet/)
49-
50-
More live demos will come soon
51-
52-
### If you want to try it here is a [JS Fiddle Hello Map of the World](https://jsfiddle.net/Boumi/k04zpLx9/)
53-
50+
Otherwise you will end up with two zoom/attribution control)
5451
## How to install
55-
5652
``` bash
5753
$ npm install vue2-leaflet --save
5854
```
59-
60-
## List of currently implemented components
61-
62-
- [x] Map
63-
- [x] Marker
64-
- [x] Popup
65-
- [x] Tooltip
66-
- [x] TileLayer
67-
- [x] TileLayer.WMS
68-
- [x] ImageOverlay
69-
- [x] Polyline
70-
- [x] Polygon
71-
- [x] Rectangle
72-
- [x] Circle
73-
- [x] CircleMarker
74-
- [x] LayerGroup
75-
- [ ] FeatureGroup
76-
- [x] GeoJSON
77-
78-
## Build Setup
79-
80-
``` bash
81-
# Once you have cloned this repo, install dependencies
82-
$ npm install
83-
84-
# build for development and production with minification
85-
$ npm run build
86-
87-
```
55+
For more detailed informations you can follow the [Quick Start Guide](https://korigan.github.io/Vue2Leaflet/)
8856
## Leaflet Plugins
89-
This repo is a wrapper for Leafet and VueJs. I want to keep it as simple as possible so I don't want to add any plugin support into this repo.
90-
9157
Leaflet plugins can easily work with Vue2Leaflet, if you want to use one I would recommand to look at the awesome work made by the community in the list below.
9258

9359
#### Vue2Leafet plugins:
94-
* [MarkerCluster](https://github.com/jperelli/vue2-leaflet-markercluster)
95-
* [TrackSymbol](https://github.com/ais-one/vue2-leaflet-tracksymbol)
96-
* [Choropleth](https://github.com/voluntadpear/vue-choropleth)
97-
* [VectorGrid](https://github.com/tesselo/vue2-leaflet-vectorgrid)
60+
* [vue2-leaflet-markercluster](https://github.com/jperelli/vue2-leaflet-markercluster) wrapper for [MarkerCluster](https://github.com/Leaflet/Leaflet.markercluster)
61+
* [vue2-leaflet-tracksymbol](https://github.com/ais-one/vue2-leaflet-tracksymbol) wrapper for [TrackSymbol](https://github.com/lethexa/leaflet-tracksymbol)
62+
* [vue-choropleth](https://github.com/voluntadpear/vue-choropleth) to display a choropleth map given a certain GeoJSON
63+
* [vue2-leaflet-geosearch](https://github.com/fega/vue2-leaflet-geosearch) wrapper for [GeoSearch](https://github.com/smeijer/leaflet-geosearch)
64+
* [vue2-leaflet-vectorgrid](https://github.com/tesselo/vue2-leaflet-vectorgrid) wrapper for [VectorGrid](https://github.com/Leaflet/Leaflet.VectorGrid) to display gridded vector data
9865

9966
If you have created a plugin and want it to be listed here, let me know :-).
10067

68+
Vue2Leaflet is only a wrapper for Leaflet. I want to keep it as simple as possible so I don't want to add any plugin support into this repo.
69+
10170
## FAQ
10271
#### How can I access the Leaflet map object ?
10372
First add a ref to the map
10473
``` html
105-
<div id="app" style="height: 100%">
106-
<v-map ref="map" :zoom=13 :center="[47.413220, -1.219482]">
107-
<v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
108-
</v-map>
109-
</div>
74+
<l-map ref="map" :zoom=13 :center="[47.413220, -1.219482]">
75+
...
76+
</l-map>
11077
```
111-
Then in you javascript you can use mapObject which is Leaflet map instance :
78+
Then in you JavaScript you can use mapObject which is Leaflet map instance :
11279
``` javascript
11380
this.$refs.map.mapObject;
11481
```
11582
This also work for any other component (Marker, Polyline, etc...)
11683

11784
#### How can I bind events of Vue2Leaflet components ?
118-
All event binding can be done to event with the same as in leaflet documentation.
85+
All event binding can be done to event with the same name as in [leaflet documentation](http://leafletjs.com/reference-1.3.0.html).
11986

120-
For example if you want to listen to Vue2Leaflet.Marker move event.
121-
```
122-
<div id="app" style="height: 100%">
123-
<v-map :zoom=13 :center="[47.413220, -1.219482]">
124-
<v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
125-
<v-marker :lat-lng="[47.413220, -1.219482]" @move="doSomething"></v-marker>
126-
</v-map>
127-
</div>
87+
For example if you want to listen to Vue2Leaflet.LMarker move event.
88+
``` html
89+
<l-marker :lat-lng="[47.413220, -1.219482]" @move="doSomething"></l-marker>
12890
```
129-
## Run demo locally
91+
## Run code locally for contributors
13092
``` bash
131-
# Run demo at localhost:8080
93+
# clone the repository
94+
$ git clone git@github.com:KoRiGaN/Vue2Leaflet.git
95+
$ cd Vue2Leaflet
96+
# install dependencies and build vue2-leaflet
97+
$ npm install
98+
$ npm run build
99+
# create a symlink for vue2-leaflet
132100
$ npm link
133101
$ cd examples
134102
$ npm install
103+
# create a symbolic link for vue2-leaflet in node_modules/
135104
$ npm link vue2-leaflet
136105
# serve with hot reload at localhost:8080
137106
$ npm run dev
138107
```
139108
Go to <http://localhost:8080/> to see running examples
140109

141110
NOTE: If you make changes to the library you should run 'npm run build' again in the root folder.
142-
The dev server should detect modification and reload the demo
111+
The dev server should detect modification and reload the examples
143112
## Authors
144113

145114
Mickaël Bouchaud
@@ -148,18 +117,7 @@ Inspired by many map wrapper (google and leaflet) for many framework (React, Ang
148117

149118
## Contributors
150119

151-
Thanks goes to these wonderful people:
152-
153-
* [@zuck](https://github.com/zuck)
154-
* [@SiggyF](https://github.com/SiggyF)
155-
* [@nikos](https://github.com/nikos)
156-
* [@Ralf8686](https://github.com/Ralf8686)
157-
* [@antixrist](https://github.com/antixrist)
158-
* [@jteppinette](https://github.com/jteppinette)
159-
* [@rootman](https://github.com/rootman)
160-
* [@strixy](https://github.com/strixy)
161-
* [@EyMaddis](https://github.com/EyMaddis)
162-
* [@schlunsen](https://github.com/schlunsen)
120+
Thanks goes to these [wonderful people](https://github.com/your/project/contributors)
163121

164122
## License
165123

‎logo.png

45.1 KB
Loading

‎vue2leaflet-example.png

1.3 MB
Loading

0 commit comments

Comments
 (0)