Reusable JavaScript API

IndiaMapEngine

Load an SVG, discover its features, manage selection and hover state, and connect page-specific behavior through bubbling DOM events.

Public API version 1.0.0. Read the stability contract for compatibility and deprecation rules.

Quick start

<div id="map"></div>
<script src="../map-engine.js"></script>
<script>
  const map = new IndiaMapEngine({
    mount: "#map",
    src: "../assets/maps/india-states.svg",
    featureSelector: ".map-region",
    featureKey: "slug"
  });

  map.on("selectionchange", event => {
    console.log(event.detail.id);
  });

  map.load();
</script>

Configuration

mountRequired element or selector receiving the SVG. src / svgTextFetch a map or render supplied SVG source. featureSelectorFeature selector; defaults to .map-region. featureKeyDataset key or callback returning a stable ID. dataKeyMetadata key used when the feature key is a callback. dataArray, object, or Map joined to features by ID. interactive / keyboardPointer and keyboard behavior switches. sanitizeRemoves executable embedded SVG content by default.

Methods

load, render, refresh, select, clearSelection, hover, setData, getSelectedId, getFeatureElement, getFeatures, on, and destroy.

Events

Listen for india-map:mapload, maperror, featureenter, featuremove, featureleave, featurefocus, featureblur, featureselect, featureactivate, selectionchange, and datachange.

Web Component

<india-svg-map
  src="../assets/maps/india-states.svg"
  selected="maharashtra"
></india-svg-map>

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

The component supports src, selected, disabled, feature-selector, and feature-key. For the complete reference, read the repository API document.