nepalmap allows you to embed a clickable svg map of Nepal.

npm i nepalmap

import NepalMap from "nepalmap";

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

Map.setTarget({
  targets: ["dhading", "kathmandu"],
  fill: "blue",
});

Options

Remove Map

You can remove the map from the dom using the removeMap() method

Map.removeMap();

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,
});

Add mark by place name

marker.addMarkWithName(["kavre", "kathmandu"]);