Nana's Plush Muppet

    @mappedin/mappedin-js
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    Mappedin Web SDK

    Resources

    Usage

    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.FloatingLabels.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="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.16/mappedin.css"
    		/>
    	</head>
    	<body>
    		<div data-key="" id="mappedin-map"></div>
    		<style>
    			body,
    			html,
    			#mappedin-map {
    				width: 100%;
    				height: 100%;
    			}
    		</style>
    		<script src="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.16/mappedin.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.FloatingLabels.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>Mappedin Sample</title>
    		<meta name="viewport" content="width=device-width,initial-scale=1" />
    		<link rel="icon" href="favicon.ico" />
    		<link
    			rel="stylesheet"
    			href="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.16/esm/renderer/index.css"
    		/>
    	</head>
    	<body>
    		<div id="mappedin-map"></div>
    		<style>
    			body,
    			html,
    			#mappedin-map {
    				width: 100%;
    				height: 100%;
    				position: relative;
    			}
    		</style>
    		<script type="module">
    			import {
    				getVenue,
    				showVenue
    			} from 'https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.16/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.FloatingLabels.labelAllLocations();
    			}
    			document.addEventListener('DOMContentLoaded', init);
    		</script>
    	</body>
    </html>

    Using get-venue or navigator modules without the renderer

    Both get-venue and navigator packages 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);

    Keywords

    none

    Install

    npm i @mappedin/mappedin-js@5.0.0

    Version

    5.0.0

    License

    UNLICENSED

    Unpacked Size

    5.62 MB

    Total Files

    22

    Last publish

    Collaborators

    • mappedin-ops