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-appcd mappedin-angular-appyarn 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/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.