Options
All
  • Public
  • Public/Protected
  • All
Menu

Mappedin Web SDK - v4.0.7

Mappedin Web Renderer

How to use

In ES6 modular apps, using NPM

npm install @mappedin/mappedin-js

or

yarn add @mappedin/mappedin-js

import { getVenue, showVenue, E_SDK_EVENT } from '@mappedin/mappedin-js';
import '@mappedin/mappedin-js/lib/index.css';

async function init() {

    const venueData = await getVenue(
        {
            clientId: '<clientId>',
            clientSecret: '<clientSecret>',
            venue: '<venue>'
        });

    const mapView = await showVenue(document.getElementById('mappedin-map'), venueData);
    mapView.labelAllLocations();
    mapView.addInteractivePolygonsForAllLocations();
    mapView.on(E_SDK_EVENT.POLYGON_CLICKED, (polygon) => {
        console.log(`Polygon with id ${polygon.id} clicked!`);
    });
}
document.addEventListener('DOMContentLoaded', init);

In the browser

Usage in the browser requires adding a script and link tags that point at the CDN.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Sample</title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="icon" href="favicon.ico" />
        <link rel="stylesheet" href="<MAPPEDIN_URL>/iife/index.css" />
    </head>
    <body>
        <div data-key="" id="mappedin-map"></div>
        <style>
            body,
            html,
            #mappedin-map {
                width: 100%;
                height: 100%;
            }
        </style>
        <script src="<MAPPEDIN_URL>/iife/index.js"></script>
        <script>
            async function init() {
                const venue = await Mappedin.getVenue(
                    {
                        clientId: '<clientId>',
                        clientSecret: '<clientSecret>',
                        venue: '<venue>'
                    });
                const mapView = await Mappedin.showVenue(
                    document.getElementById('mappedin-map'),
                    venue
                );
                mapView.labelAllLocations();
            }
            document.addEventListener('DOMContentLoaded', init);
        </script>
    </body>
</html>

In the browser (ESM)

The Mappedin SDK supports ESM (EcmaScriptModules), meaning we can import files directly right in the script tag.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Sample</title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="icon" href="favicon.ico" />
        <link rel="stylesheet" href="<MAPPEDIN_URL>/esm/renderer/index.css" />
    </head>
    <body>
        <div data-key="" id="mappedin-map"></div>
        <style>
            body,
            html,
            #mappedin-map {
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="module">
            
            import { getVenue, showVenue } from '<MAPPEDIN_URL>/esm/renderer/index.js';
            
            async function init() {
                const venue = await getVenue(
                    {
                        clientId: '<clientId>',
                        clientSecret: '<clientSecret>',
                        venue: '<venue>'
                    });
                const mapView = await showVenue(
                    document.getElementById('mappedin-map'),
                    venue
                );
                mapView.labelAllLocations();
            }
            document.addEventListener('DOMContentLoaded', init);
        </script>
    </body>
</html>

Using get-venue or navigator modules without the renderer

Both get-venue and navigator can be used separately, without loading the renderer. This is useful for applications that need access to Mappedin API data and/or Directions engine, but without needing a renderer.

import getVenue from '@mappedin/mappedin-js/lib/esm/get-venue';

async function init() {

    const venueData = await getVenue(
        {
            clientId: '<clientId>',
            clientSecret: '<clientSecret>',
            venue: '<venue>'
        });
}
document.addEventListener('DOMContentLoaded', init);