Full code: https://github.com/aleksvp2017/heatmap.git
Using:
Vue / Vuetify: to construct de UI;
Scalable Vector Graphics (SGV) html-tag to draw the map;
chroma-js to generate the colors of the map.
The main idea is to use a SVG tag (inside a vue/vuetify component). This is a standard HTML5 tag used to draw all sorts of things.
For example, to draw a circle:
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
In the case of a map, basically you supply it with a bunch of data that represents it. There are a lot of places to get this data in the format require by the SVG tag. I suggest starting with https://www.amcharts.com/. In this example, I used a map from Brazil, with details of its states borders.
I create a component that receives the info require to paint the map, an array with the label of the state (in a particular format, that is specified in the SVG file I took from amcharts) and a number that wil be used to paint the map. The higher number more red the state will become. There is js-file responsible for that, paint-map.js. You can mess around with it to change the way the parts of the map are colored.
The data sent to the component is this:
metricsPorUF = [ { uf: 'DF', metric: 100}, { uf: 'SP', metric: 200}, { uf: 'MG', metric: 110}, { uf: 'RN', metric: 90}, { uf: 'SC', metric: 150}, { uf: 'AM', metric: 50}, { uf: 'PA', metric: 250}, ]
Also it is important to use key attribute on the component to force the map to render again every time you hit the button.
<MyMap :key="mapkey" :countryData="stateData" highColor="#ff0000" lowColor="#aaaaaa" countryStrokeColor="#909090" defaultCountryFillColor="#dadada"/>
Pretty simple, uh?
Credits to https://github.com/Ghrehh/vue-world-map. I took the main code from there. Just adapted to my needs and explain it a little bit more here.
Comentarios