Skip to content

Commit 9ac3d67

Browse files
soalsoal
committed
Documentation update
1 parent 0b6973e commit 9ac3d67

File tree

11 files changed

+224
-296
lines changed

11 files changed

+224
-296
lines changed

‎docs_source/README.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,18 @@ home: true
44
actionText: Get Started →
55
actionLink: /guide/
66
features:
7-
- title: Declarative style
8-
details:
9-
You can use map elements like layers, markers, popups as Vue components and control them via synchronized props
10-
- title: Vuefied
11-
details: Map elements declared as components respect Vue lifecycle, emit map events like Vue events and can be used in OOP-style
7+
- title: Declarative style
8+
details: You can use map elements like layers, markers, popups as Vue components and control them via synchronized props
9+
- title: Vuefied
10+
details: Map elements declared as components respect Vue lifecycle, emit map events like Vue events and can be used in OOP-style
1211

13-
- title: Promisified async actions
14-
details: You can do async map operations and get results in Promise without messing with map events and figuring out what action cause it
15-
# footer: MIT Licensed | Copyright © 2018-present Evan You
12+
- title: Promisified async actions
13+
details: You can do async map operations and get results in Promise without messing with map events and figuring out what action cause it
14+
footer: MIT Licensed
1615
---
1716

17+
If you like long story, check out [blog post](https://soal.github.io/posts/why-vue-mapbox.html)
18+
1819
```vue{2}
1920
<template>
2021
<mgl-map
@@ -68,7 +69,7 @@ export default {
6869
:::
6970

7071
::: tip Size
71-
~ 39 kB minified
72+
~ 39 kB minified
7273
~ 7 kB minified and gzipped
7374
:::
7475

‎docs_source/_sidebar.md

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎docs_source/guide/README.md

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
# Quickstart
32

43
## Using as ES module
@@ -14,24 +13,27 @@ npm install --save vue-mapbox mapbox-gl
1413
Add mapbox CSS file to `<head></head>` block of your HTML file (e.g. `index.html`)
1514

1615
```html
17-
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
16+
<link
17+
href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css"
18+
rel="stylesheet"
19+
/>
1820
```
1921

2022
### Register a plugin
2123

2224
You need to set up vue-mapbox as a plugin for Vue and pass mapbox-gl as argument:
2325

2426
```javascript
25-
import Vue from 'vue'
26-
import VueMapbox from 'vue-mapbox'
27-
import Mapbox from 'mapbox-gl'
27+
import Vue from "vue";
28+
import VueMapbox from "vue-mapbox";
29+
import Mapbox from "mapbox-gl";
2830

29-
Vue.use(VueMapbox, { mapboxgl: Mapbox })
31+
Vue.use(VueMapbox, { mapboxgl: Mapbox });
3032

3133
new Vue({
32-
el: '#app',
33-
render: h => h(require('./App'))
34-
})
34+
el: "#app",
35+
render: h => h(require("./App"))
36+
});
3537
```
3638

3739
## Using in browser
@@ -46,13 +48,19 @@ Add Vue, MapboxGL and Vue-mapbox scripts on your page:
4648
<head>
4749
<!-- ... -->
4850
<!-- Mapbox GL CSS -->
49-
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css" rel="stylesheet" />
51+
<link
52+
href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css"
53+
rel="stylesheet"
54+
/>
5055
<!-- Mapbox GL JS -->
51-
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js"></script>
56+
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js"></script>
5257
<!-- VueJS -->
5358
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
5459
<!-- Vue-mapbox -->
55-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.min.js"></script>
60+
<script
61+
type="text/javascript"
62+
src="https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.min.js"
63+
></script>
5664
<!-- ... -->
5765
</head>
5866
</html>
@@ -61,9 +69,9 @@ Add Vue, MapboxGL and Vue-mapbox scripts on your page:
6169
Register plugin and add base map component to your application:
6270

6371
```javascript
64-
Vue.use(VueMapbox.plugin, { mapboxgl: window.mapboxgl })
72+
Vue.use(VueMapbox.plugin, { mapboxgl: window.mapboxgl });
6573
```
6674

6775
All components will be placed in global VueMapbox object (`VueMapbox.MglMap` etc.)
6876

69-
Now you're ready for mapping. See how to [create a map](basemap.md).
77+
Now you're ready for mapping. See how to [create a map](/guide/basemap.md).

‎docs_source/guide/basemap.md

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,17 @@
22

33
## Adding map component
44

5-
For using maps with Mapbox GL JS you need a map style. See details in Mapbox GL JS [documentation](https://mapbox.com/mapbox-gl-js/style-spec).
6-
For using Mapbox-hosted maps, you need to set `access_token`. See details in Mapbox [documentation](https://mapbox.com/help/define-access-token/).
5+
For using maps with Mapbox GL JS you need a [map style](https://mapbox.com/mapbox-gl-js/style-spec).
6+
If you using Mapbox-hosted maps, you need to set `access_token`. Look for details in Mapbox [documentation](https://mapbox.com/help/define-access-token/).
77
If you using self-hosting maps on your own server you can omit this parameter.
88

9-
```vue
9+
```vue{2}
1010
<template>
11-
<mgl-map
12-
:accessToken="accessToken"
13-
:mapStyle.sync="mapStyle"
14-
/>
11+
<MglMap :accessToken="accessToken" :mapStyle.sync="mapStyle" />
1512
</template>
1613
1714
<script>
18-
import { MglMap } from 'vue-mapbox'
15+
import { MglMap } from "vue-mapbox";
1916
2017
export default {
2118
components: {
@@ -24,19 +21,21 @@ export default {
2421
data() {
2522
return {
2623
accessToken: ACCESS_TOKEN, // your access token. Needed if you using Mapbox maps
27-
mapStyle: MAP_STYLE, // your map style
28-
}
24+
mapStyle: MAP_STYLE // your map style
25+
};
2926
}
30-
}
27+
};
3128
</script>
3229
```
3330

3431
### Interact with map properties as GlMap props
3532

3633
You can control map parameters like zoom, bearing, pitch etc. by changing props.
3734
If you set `.sync` modifier ([Vue docs](https://vuejs.org/v2/guide/components.html#sync-Modifier)) to prop, it will updates when you use operations that takes time to proceed. For example, if you use `flyTo` method, props `zoom`, `center`, `bearing`, `pitch` will be updated when animation ends.
35+
3836
<!-- See example with flyTo:
3937
example with flyTo -->
38+
4039
Full list of props see in [API docs](/api/glmap.md#props), note field 'Synced' in description
4140

4241
## Map actions
@@ -61,7 +60,7 @@ export deafult {
6160
speed: 1
6261
})
6362
console.log(newParams)
64-
/* => {
63+
/* => {
6564
center: [30, 30],
6665
zoom: 9,
6766
bearing: 9,
@@ -78,4 +77,4 @@ See full list of actions on [API](/api/glmap.md#actions) page.
7877

7978
### Method `actions.stop()`
8079

81-
Method `.stop()` just stops all animations on map, updates props with new positions and return Promise with map parameters in the moment when `.stop()` called.
80+
Method `.stop()` just stops all animations on map, updates props with new positions and return Promise with map parameters in the moment when `.stop()` called.

‎docs_source/guide/composition.md

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
# Composition
2+
23
You can use Mapbox GL feature as Vue component and compose it as a child of GlMap. During creation all components waits until map properly initialized.
34

45
For example, adding map controls:
56

67
```vue
78
<template>
89
<div id="#app">
9-
<mgl-map
10+
<MglMap
1011
:accessToken="accessToken"
1112
:mapStyle.sync="mapStyle"
1213
>
13-
<mgl-navigation-control position="top-right"/>
14-
<mgl-geolocate-control position="top-right" />
14+
<MglNavigationControl position="top-right"/>
15+
<MglGeolocateControl position="top-right" />
1516
</mgl-map>
1617
</div>
1718
</template>
@@ -43,19 +44,15 @@ Adding a popup:
4344

4445
```vue
4546
<template>
46-
<div id="#app">
47-
<mgl-map
48-
:accessToken="accessToken"
49-
:mapStyle.sync="mapStyle"
50-
>
51-
<mgl-navigation-control position="top-right"/>
52-
<mgl-geolocate-control position="top-right" />
53-
<mgl-popup :coordinates="popupCoordinates">
54-
<span>Hello world!</span>
55-
</mgl-popup>
56-
57-
</mgl-map>
58-
</div>
47+
<div id="#app">
48+
<MglMap :accessToken="accessToken" :mapStyle.sync="mapStyle">
49+
<MglNavigationControl position="top-right" />
50+
<MglGeolocateControl position="top-right" />
51+
<MglPopup :coordinates="popupCoordinates">
52+
<span>Hello world!</span>
53+
</MglPopup>
54+
</MglMap>
55+
</div>
5956
</template>
6057
6158
<script>
@@ -64,7 +61,7 @@ import {
6461
MglNavigationControl,
6562
MglGeolocateControl,
6663
MglPopup
67-
} from 'vue-mapbox'
64+
} from "vue-mapbox";
6865
6966
export default {
7067
components: {
@@ -75,12 +72,12 @@ export default {
7572
},
7673
data() {
7774
return {
78-
accessToken: 'some_token',
79-
mapStyle: 'style_object',
75+
accessToken: "some_token",
76+
mapStyle: "style_object",
8077
popupCoordinates: [10, 10]
81-
}
78+
};
8279
}
83-
}
80+
};
8481
</script>
8582
```
8683

@@ -89,17 +86,18 @@ Vue-mapbox component will work even if it wrapped in another component as long a
8986
For example:
9087

9188
**_Popup wrapper_**:
92-
```vue
89+
90+
```vue{2}
9391
<template>
94-
<div class="popup-wrapper">
95-
<mgl-popup :coordinates="popupCoordinates">
96-
<span>Hello world from wrapped popup!</span>
97-
</mgl-popup>
98-
</div>
92+
<div class="popup-wrapper">
93+
<MglPopup :coordinates="popupCoordinates">
94+
<span>Hello world from wrapped popup!</span>
95+
</MglPopup>
96+
</div>
9997
</template>
10098
10199
<script>
102-
import { MglPopup } from 'vue-mapbox'
100+
import { MglPopup } from 'vue-mapbox';
103101
104102
export default {
105103
name: 'PopupWrapper'
@@ -118,21 +116,20 @@ export default {
118116
```
119117

120118
**_Main component_**:
119+
121120
```vue
122121
<template>
123-
<div id="#app">
124-
<mgl-map
125-
:accessToken="accessToken"
126-
:mapStyle.sync="mapStyle"
127-
>
128-
<popup-wrapper /> <!-- works! -->
129-
</mgl-map>
130-
</div>
122+
<div id="#app">
123+
<MglMap :accessToken="accessToken" :mapStyle.sync="mapStyle">
124+
<PopupWrapper />
125+
<!-- works! -->
126+
</MglMap>
127+
</div>
131128
</template>
132129
133130
<script>
134-
import { MglMap } from 'vue-mapbox'
135-
import PopupWrapper from 'PopupWrapper' // wrapper for popup
131+
import { MglMap } from "vue-mapbox";
132+
import PopupWrapper from "PopupWrapper"; // wrapper for popup
136133
137134
export default {
138135
components: {
@@ -141,11 +138,11 @@ export default {
141138
},
142139
data() {
143140
return {
144-
accessToken: 'some_token',
145-
mapStyle: 'style_object'
146-
}
141+
accessToken: "some_token",
142+
mapStyle: "style_object"
143+
};
147144
}
148-
}
145+
};
149146
</script>
150147
```
151148

0 commit comments

Comments
 (0)