You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> Vue component to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using [Vue2Leaflet](https://korigan.github.com/Vue2Leaflet/)
7
+
> Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using [Vue2Leaflet](https://korigan.github.com/Vue2Leaflet/)
8
8
9
9
10
10
11
11
## How to use
12
+
*For a complete example, check the code in the single-file component [example](https://github.com/voluntadpear/vue-choropleth/blob/master/examples/node-example/src/App.vue).*
12
13
13
-
Register ChoroplethMap as a component
14
+
Make sure you have `Vue2Leaflet` installed and add the `v-map`component along with the next `vue-choropleth` components:
Make sure the leaflet.css is included, either via a HTML link tag or in your vue component style
@@ -25,71 +36,66 @@ Make sure the leaflet.css is included, either via a HTML link tag or in your vue
25
36
26
37
On the template:
27
38
```html
28
-
<ChoroplethMap
29
-
:geojson="geojson"
30
-
:data="pyDepartmentsData"
31
-
titleKey="department_name"
32
-
geojsonIdKey="dpto"
33
-
idKey="department_id"
34
-
:value="value"
35
-
:extraValues="extraValues"
36
-
:center="center"
37
-
:colorScale="colorScale"
38
-
mapStyle="height: 500px;"
39
-
:zoom="6"
40
-
:mapOptions="mapOptions">
41
-
<templatescope="props">
42
-
<InfoControl
39
+
<v-map
40
+
:center="[-23.752961, -57.854357]"
41
+
:zoom="6"
42
+
style="height: 500px;"
43
+
:options="mapOptions">
44
+
<v-choropleth-layer
45
+
:data="pyDepartmentsData"
46
+
titleKey="department_name"
47
+
idKey="department_id"
48
+
:value="value"
49
+
:extraValues="extraValues"
50
+
geojsonIdKey="dpto"
51
+
:geojson="paraguayGeojson"
52
+
:colorScale="colorScale">
53
+
<template slot-scope="props">
54
+
<v-info-control
43
55
:item="props.currentItem"
44
56
:unit="props.unit"
45
57
title="Department"
46
-
placeholder="Hover over a department"
47
-
position="topright">
48
-
</InfoControl>
49
-
<ReferenceChart
58
+
placeholder="Hover over a department"/>
59
+
<v-reference-chart
50
60
title="Girls school enrolment"
51
61
:colorScale="colorScale"
52
62
:min="props.min"
53
63
:max="props.max"
54
-
position="bottomright">
55
-
</ReferenceChart>
56
-
</template>
57
-
</ChoroplethMap>
64
+
position="topright"/>
65
+
</template>
66
+
</v-choropleth-layer>
67
+
</v-map>
58
68
```
59
69
60
-
### ChoroplethMap Props
70
+
### `v-choropleth-layer` Props
61
71
* **geojson**: The GeoJSON object to use
62
72
* **data**: Data object with the information to show on the map
63
73
* **titleKey**: Property of the **data** object to show when you hover over a certain region of your map (e.g. state_name)
64
74
* **geojsonIdKey**: Property under the *properties* array of the GeoJSON that serves as identifier of each region of the map.
65
75
* **idKey**: Property of the **data** object that matches the **geojsonIdKey** value.
66
76
* **value**: JS object with two properties, **key**: that maps to the **data** property that contains the value domain set (e.g. amount) and **metric**: that maps to the **data** property that describes the unit that you're working on (e.g. ```"% of students"```)
67
77
* **extraValues**: Array of **value** objects that show additional information of a certain region of the map.
68
-
***center**: Geographic coordinates of the map initial center (e.g. ```[-23.752961, -57.854357]```)
69
78
* **colorScale**: Array of hex color codes to fill each region of the map with. At the minimum you need to specify two colors, the one to use with the lowest values and another one to use with the highest values. (e.g. ```["e7d090", "de7062"]```)
The `ChoroplethMap` component pass the this information through its [default slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
80
+
The `v-choropleth-layer` component pass the this information through its [default slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
75
81
* **currentItem**: Current item on focus
76
82
* **unit**: metric associated with the value
77
83
* **min**: The lowest value on the domain set
78
84
* **max**: The highest value on the domain set
79
85
80
-
As seen on the example, usually you'll pass these values to the `InfoControl` and `ReferenceChart` components.
86
+
As seen on the example, usually you'll pass these values to the `v-info-control` and `v-reference-chart` components.
81
87
82
-
### InfoControl props
88
+
### `v-info-control` props
83
89
This is the current item information view.
84
90
* **item**: Item to show information about
85
91
* **unit**: Metric to use while displaying information
86
92
* **title**: Description about what each item of the map is (e.g. ```"State"```)
87
93
* **placeholder**: Placeholder text to show when no element is currently selected
88
94
* **position**: Where to render the component. With values allowed [here](http://leafletjs.com/reference-1.2.0.html#control-position) (default: ```"bottomleft"```)
89
95
90
-
### ReferenceChart props
96
+
### `v-reference-chart` props
91
97
* **title**: Short description to show as reference of the information described by the map (e.g. ```"Population density"```)
92
-
***colorScale**: Same prop as used on `ChoroplethMap` component
98
+
* **colorScale**: Same prop as used on `v-choropleth-layer` component
93
99
* **min**: The lowest value represented on the visualization
94
100
* **max**: The highest value represented on the visualization
95
101
* **position**: Where to render the component. With values allowed [here](http://leafletjs.com/reference-1.2.0.html#control-position) (default: ```"topright"```)
@@ -136,7 +142,7 @@ The dev server should detect modification and reload the demo
136
142
137
143
### Web example
138
144
139
-
You'll also find an example using direct`<script>`include under `examples/browser-example`
145
+
You'll also find an example using `<script>`tags included under `examples/browser-example`
0 commit comments