Skip to content

Instantly share code, notes, and snippets.

@here-devblog-gists

here-devblog-gists/app.component.html

Created August 24, 2018 18:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save here-devblog-gists/5c0e9416acb965574f50571198ab3d63 to your computer and use it in GitHub Desktop.
Save here-devblog-gists/5c0e9416acb965574f50571198ab3d63 to your computer and use it in GitHub Desktop.
Download ZIP
HERE Map with Angular
Raw
app.component.html
<div #map style="width: 1280px; height: 768px"></div>
Raw
app.component.ts
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
declare var H: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
private platform: any;
@ViewChild("map")
public mapElement: ElementRef;
public constructor() {
this.platform = new H.service.Platform({
"app_id": "APP-ID-HERE",
"app_code": "APP-CODE-HERE"
});
}
public ngOnInit() { }
public ngAfterViewInit() {
let defaultLayers = this.platform.createDefaultLayers();
let map = new H.Map(
this.mapElement.nativeElement,
defaultLayers.normal.map,
{
zoom: 10,
center: { lat: 37.7397, lng: -121.4252 }
}
);
}
}
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HERE with Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment