1.0.0 • Published 7 months ago
nepalmap v1.0.0
NepalMap
nepalmap.js allows you to embed a clickable svg map of Nepal.
Installing
npm i nepalmap
Add script
import NepalMap from "nepalmap";
How to use it?
HTML
<div id="root"></div>
Javascript
const Map = new NepalMap();
Now inorder to paint the Map in the website use the setRoot method. It expects the id of the element that you want to set as root as an argument. The setRoot method returns a promsie so you must use await or .then/catch.
await Map.setRoot("root");
Set size of Map
You can use setSize method to set the size of the Map.
Map.setSize("500px", "500px");
Get lists of districts
let districts = Map.DistrictLists;
Set map property
Set property of the map using the setMapProperty
Map.setMapProperty({
fill: "green",
});
Options
Attribute | Description | Example Value |
---|---|---|
fill | Set fill(color) of the svg map | "green" |
stroke | Set stroke(border color) of map | "black" |
cursor | Set cursor | "pointer" |
hoverColor | Set hover color | "blue" |
clickEvent | Provide a callback function to fire on click | function(){} |
Set Property of an individual district
Map.setTarget({
targets: ["dhading", "kathmandu"],
fill: "blue",
});
Options
Attribute | Description | Example Value |
---|---|---|
targets | Provide the target districts to set the property | "kavre","kathmandu" |
fill | Set fill (color) | "red" |
stroke | Set stroke (border color) | "black" |
cursor | Set cursor | "pointer" |
hoverColor | Set hover color | "blue" |
clickEvent | Provide a callback function to fire on click(has event as first argument and placename as second argument) | function(event,placename){} |
Remove Map
You can remove the map from the dom using the removeMap() method
Map.removeMap();
Markers
Add markers in the Map.
You can add marker with createMarker method. It expects the marker location as first argument and options as second argument.
let marker = Map.createMarker("assets/marker.svg", {
addOnClick: true,
});
Attribute | Description | Example Value |
---|---|---|
addOnClick | Accepts boolean. Add marker when clicked on districts | true |
width | width of marker | "15px" |
height | height of marker | "15px" |
allowedToMark | Specifies which districts are allowed to mark | "kavre","kathmandu" |
Add mark by place name
marker.addMarkWithName(["kavre", "kathmandu"]);
1.0.0
7 months ago