Using Angular

On CodeSandbox

The fastest way to get started experimenting with Mappedin Web SDK and Angular is to fork the Mappedin Angular Template on CodeSandbox.

Mappedin Web SDK v5 is available as @mappedin/mappedin-js in NPM.

Local Development

To begin building locally, create a project using the Angular CLI. If you haven't already, follow the official Angular workspace guide to setup your local environment and install the CLI. Then, initialize a new project and add @mappedin/mappedin-js.

ng new mappedin-angular-app
cd mappedin-angular-app
yarn add @mappedin/mappedin-js

Next, you'll need to make a couple configuration changes to the project for performance and compability with the mappedin-js package.

Configuration

Open tsconfig.json and add the compiler option "skipLibCheck": true like the code below. This flag turns off typechecking for imported packages. Without it your new Mappedin project will fail to compile.

"compilerOptions": {
  "skipLibCheck": true,
  // ...other compiler options
}

In angular.json add a reference to mappedin.css in the build "styles" array. This CSS file is essential for styling the labels and additional layers of the map.

"styles": [
  "src/styles.css",
  "node_modules/@mappedin/mappedin-js/lib/mappedin.css"
],

Rendering the Map

With project setup complete, you can begin updating the app component to attach the MapView instance.

In app.component.html add a simple HTML element with a #app variable declaration so we can target it.

<div id="app" #app></div>

Also, add a few lines of CSS to app.component.css to position our map and span it the whole page.

#app {
	height: 100%;
	width: 100%;
	position: relative;
}

Finally, update app.component.ts. Use the ViewChild decorator to select the "app" div in your template HTML, and in ngOnInit attach the MapView to that element.

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { getVenue, showVenue } from '@mappedin/mappedin-js';

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/docs/demo-keys-and-maps/
const options = {
	venue: 'mappedin-demo-mall',
	clientId: '5eab30aa91b055001a68e996',
	clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
};

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
	@ViewChild('app', { static: false }) mapEl!: ElementRef<HTMLElement>;

	async ngOnInit(): Promise<void> {
		const venue = await getVenue(options);
		const mapView = await showVenue(this.mapEl.nativeElement, venue);
	}
}

Result

In your terminal, start your Angular app with yarn start.

You should now see a rendering of the Mappedin Demo Mall in your Angular app, like the CodeSandbox example below.