DEVELOPER DOCUMENTATION & EMBED GUIDE

Embed compliant Indian spatial maps with one line of code

Everything you need to drop responsive, high-performance interactive maps, official Survey of India administrative boundaries, and India Post DIGIPIN address lookups into any web platform or CMS.

1-Click Iframe Embed Standalone widget.js Runtime Full JavaScript API

METHOD 1: ZERO-CONFIG IFRAME

Responsive Iframe Integration

The fastest way to embed an Indian map on WordPress, Webflow, Shopify, Notion, or custom HTML without writing build steps.

embed-snippet.html

<!-- Getmp.in Responsive Spatial Map Embed -->
<iframe 
  src="https://getmp.in/?embed=true&theme=light&zoom=5" 
  width="100%" 
  height="500" 
  style="border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden;"
  loading="lazy" 
  allow="geolocation"
  title="Interactive Indian Map">
</iframe>

Supported Query Parameters

?embed=true: Minimizes controls for embedding
?theme=light|satellite|terrain|dark: Sets visual theme
?q=Delhi: Pre-searches or pins an Indian location
?zoom=5: Initial map zoom level (3 to 18)

METHOD 2: STANDALONE JAVASCRIPT RUNTIME

widget.js Script Runtime (< 16 kB)

Zero build requirements. Drop in the standalone script from CDN or host it locally for deep DOM integration.

widget-runtime.html

<!-- 1. Include the lightweight Getmp.in Widget Runtime -->
<script src="https://getmp.in/widget.js" async></script>

<!-- 2. Target Container with Declarative Attributes -->
<div 
  id="my-indian-map" 
  data-getmp-map="true" 
  data-center="20.5937,78.9629" 
  data-zoom="5" 
  data-theme="light" 
  data-search="true"
  style="width: 100%; height: 500px; border-radius: 12px;">
</div>

Lightweight Footprint

Under 16 kB gzipped bundle size. Loads asynchronously without impacting Core Web Vitals or First Contentful Paint.

Universal Compatibility

Compatible with React, Next.js, Vue, Angular, Svelte, Webflow, Framer, and pure static HTML pages.

Legal Boundary Compliance

Pre-configured with compliant Survey of India boundaries adhering strictly to the Geospatial Guidelines 2021.

METHOD 3: PROGRAMMATIC JAVASCRIPT SDK

JavaScript API & Callbacks

Interact programmatically with map instances, trigger smooth pans, drop custom media pins, and listen to reverse geocoding callbacks.

app.js

// Initialize Map Instance
const map = Getmp.createMap('#my-indian-map', {
  center: [28.6139, 77.2090], // New Delhi
  zoom: 12,
  theme: 'light',
  enableDigipin: true
});

// Add Custom Pin Marker with Card Popup
map.addMarker({
  lat: 28.6139,
  lng: 77.2090,
  title: 'Headquarters Hub',
  description: 'Connaught Place, New Delhi',
  color: '#2563eb'
});

// Listen to Click & Reverse Geocoding Events
map.on('locationSelect', (event) => {
  console.log('Selected Coordinates:', event.lat, event.lng);
  console.log('Normalized Address:', event.address);
  console.log('India Post DIGIPIN:', event.digipin);
});

INTERACTIVE TESTING

Live Spatial API Explorer

Execute real queries against our server endpoints right in your browser.

Endpoint Configuration

Select Endpoint

Request URL

Response Output HTTP 200 OK

{
  "status": "ready",
  "message": "Click 'Execute Query' to test endpoint"
}

DOWNLOAD CENTER

Official GeoJSON Datasets & Assets

Direct access to official boundary files, map templates, and developer SDK libraries.

🗺️

India National Boundary GeoJSON

Official Survey of India compliant national outline polygon.

Download GeoJSON

📍

India States & UTs GeoJSON

All 28 States and 8 Union Territories with ISO attributes.

Download States GeoJSON

📦

Standalone Widget SDK (widget.js)

Lightweight client-side script for self-hosted embed maps.

Download widget.js