Skip to main content
Version: 5.0

Using Angular

On CodeSandbox​

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

Mappedin JS 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.