ysvgmaps v0.1.3
Ysvgmaps
Useful tool to use and config svg maps
Access on github : ysvgmaps
Dependencies
Ysvgmaps uses 2 mains technologies:
How to use
First install ysvgmaps:
npm install --save-dev ysvgmaps
Then in js file :
// import ysvgmaps module
import 'ysvgmaps'
// start the installation of the maps
ysvgmaps.ysvgmaps()
ysvgmaps adds one tag for HTML. It needs a path to a config. The path is gave in an attribute config in the tag like:
<ysvgmaps config="path_to_your_config"></ysvgmaps>
Configuration
{
"legend": {
"automaticallysetlegend": true,
"colors": ["#05F000", "yellow", "green", "blue",
"parts" : [
{ "interval": 25, "color": "#05F000" },
{ "interval": 50, "color": "yellow" },
{ "interval": 100, "color": "green" },
{ "interval": 200, "color": "blue" }
],
"title": "title of legend"
},
"map": {
"nameOfArea": "name_of_area_in_svg",
"title": "Title of the map",
"selected-color": "green",
"datadesc": "desc in tooltip",
"url": "path_to_svg",
"data": "path_to_data"
}
}
The legend is defined by multiple parts. 'interval' is the superior value to set the color at a area.
If automaticallysetlegend is true, ysvgmaps will create a legend with the colors in colors variable.
The url is the link to your svg map in html tag.
Your svg data have to be formatted like:
<svg>
<name_of_area id="areaname" desc="Description" [...]/>
</svg>
Put the name of the area to attribute nameOfArea in the config file.
The data is the link to a json data for areas settings. Example: if in your svg map they are 2 areas name: 'area1' and 'area2' with value 75 and 150:
{
"area1": 75,
"area2": 150,
}