Using Angular

To quickly start experimenting with the Mappedin Web SDK and Angular, click here and fork the Mappedin Angular Template on CodeSandbox.

For building locally, you can 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.

tsconfig.json
"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.

angular.json
"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.

app.component.html
<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.component.css
#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.

app.component.ts
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/api-keys/
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.

Was this page helpful?