Vue Choropleth Map component

If you are building an app that has to visualize statistical data, that corresponds to a specific regions of a country, then choropleth map is a must-have for you. As you might already know, Vue has plenty of great libraries and components that saves you a lot of time. For example, there are components for building maps. Great news is that there are Vue choropleth map components for this purpose, and one of them is vue-choropleth.

DEMO Check on GitHub

Vue-choropleth features

As the component has extensive possibilities, it can be customized to your needs.

l-choropleth-layer Props

• geojson: The GeoJSON object that you will use
• data: Data object that hass the information to be shown on the map
• titleKey: Property of the data object to show information after you hover over a specific region of your map (e.g. state_name)
• geojsonIdKey: Property under the properties array of the GeoJSON that serves as identifier of each region of the map.
• idKey: Property of the data object that matches the geojsonIdKey value.
• 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")
• extraValues: Array of value objects that show additional information of a certain region of the map.
• 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 l-choropleth-layer component pass the this information through its default slot:
• currentItem: Current item on focus
• unit: metric associated with the value
• min: The lowest value on the domain set
• max: The highest value on the domain set
• strokeColor: String with the color to use for each of the polygons’ stroke color (in hex format). (e.g.: "e7d090"). If a value is not specified fff is used.
• currentStrokeColor: String with the color to use for the stroke of the currently polygon that the user is hovering over. (e.g.: "e7d090"). If a value is not specified 666 is used.
• strokeWidth: Number with the width of the stroke for each polygon. (default: 2).
• currentStrokeWidth: Number with the width of the stroke for the currently hovered polygon. (default: 5).

One of the following paragraphs has an example code that shows how you can use these props in a real application. If you paid attention to the example, you might see that usually you pass these values to the l-info-control, and l-reference-chart components.

l-info-control props

This is the current item information view.

• item: Item to show information about
• unit: Metric to use while displaying information
• title: Description about what each item of the map is (e.g. "State")
• placeholder: Placeholder text to show when no element is currently selected
• position: Where to render the component. With values allowed here (default: "bottomleft")

l-reference-chart props

• title: Short description to show as reference of the information described by the map (e.g. "Population density")
• colorScale: Same prop as used on l-choropleth-layer component
• min: The lowest value represented on the visualization
• max: The highest value represented on the visualization
• position: Where to render the component. With values allowed here (default: "topright")

Installation instructions

Prerequisites: for this example, you must install Vuea2Leaflet.

To do so, you must execute the following npm command:

npm install vue2-leaflet leaflet --save

After you’ve fulfilled the requirement successfully, you might carry on with the Vue Choropleth Map installation:

npm install vue-choropleth --save

Alternatively, you might use the yarn:

yarn add vue-choropleth

And if instead of installing packages you want to clone the whole component repository and run it on your machine, you can do it with:

git clone https://github.com/voluntadpear/vue-choropleth
npm install
npm run build

Executed commands will clone the repository, install and the dependencies, and build the code for development and production. After you’ve it ready, you might try running it:

npm link
cd examples/node-example
npm link vue-choropleth
npm install
npm run dev

What’s worth having in mind that if you made any changes to the library, you must run “npm run build” in the root folder. In this way changes will become effective after the reload.

How to use the Vue Choropleth Map component

If you are willing to use this component for drawing maps, defining data is easy. For this purpose you can use GeoJSON or any other datasource.

The following code example will show how you can use the component. But before that make sure that you have installed the Vue2Leflet successfully. Otherwise, you will get an error, as you must imoprt LMap, which is a part of vue2-leaflet, to your project.

When you have the leaflet.css included in the HTML link tag or Vue component style

@import "~leaflet/dist/leaflet.css";

You can try creating a sample app:

import {LMap} from 'vue2-leaflet';
import { InfoControl, ReferenceChart, ChoroplethLayer } from 'vue-choropleth'

// Register these components in the components

export default {
  name: "app",
  components: { 
    LMap,
    'l-info-control': InfoControl, 
    'l-reference-chart': ReferenceChart, 
    'l-choropleth-layer': ChoroplethLayer 
  },
// your component code

You should also put this into a template:

<l-map 
  :center="[-23.752961, -57.854357]" 
  :zoom="6" 
  style="height: 500px;" 
  :options="mapOptions">
    <l-choropleth-layer 
      :data="pyDepartmentsData" 
      titleKey="department_name" 
      idKey="department_id" 
      :value="value" 
      :extraValues="extraValues" 
      geojsonIdKey="dpto" 
      :geojson="paraguayGeojson" 
      :colorScale="colorScale">
        <template slot-scope="props">
          <l-info-control 
            :item="props.currentItem" 
            :unit="props.unit" 
            title="Department" 
            placeholder="Hover over a department"/>
          <l-reference-chart 
            title="Girls school enrolment" 
            :colorScale="colorScale" 
            :min="props.min" 
            :max="props.max" 
            position="topright"/>
        </template>
    </l-choropleth-layer>
</l-map>