No framework or build step

Build a map in five minutes

Start a local server, add the Web Component, and listen for one selection event.

Or use the guided project starter to choose a layer and interaction, see a live preview, and download one complete HTML file.

1. Create or clone

Use the repository as a GitHub template, or clone it locally.

git clone https://github.com/nikhilsawantse/india-map-studio.git
cd india-map-studio

python -m http.server 8000

Open http://localhost:8000/starter/.

<india-svg-map
  id="my-map"
  src="../assets/maps/india-states.svg"
  aria-label="Interactive map of India"
></india-svg-map>

<script src="../map-engine.js"></script>
<script src="../india-svg-map.js"></script>

const map = document.querySelector("#my-map");

map.addEventListener("india-map:selectionchange", event => {
  console.log(event.detail.id);
});

Continue with the focused example library or try the India location finder. The complete Markdown guide includes the remaining next steps.