I am looking to integrate a swisstopo map into my angular 8 app. As I am new to angular, I am unsure how to include this example in my component:
I have tried adding the script link to my index.html file and it loads successfully. However, I am confused about where and how to add the small snippet of plain JavaScript code to make it work.
In the angular-cli.json file, I attempted to add the name of the JavaScript script but I am unsure about what steps to take to execute this script when the component is loaded.
MapViewComponent.ts
`import { Component, OnInit } from '@angular/core';`
@Component({
selector: 'app-map-view',
templateUrl: './map-view.component.html',
styleUrls: ['./map-view.component.scss']
})
export class MapViewComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
MapViewComponent.html
<div id="map" class="map"></div>
Below is a simple example provided by geo.admin:
<!doctype html>
<html lang="en">
<head>
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<title>GeoAdmin API example</title>
</head>
<body>
<h2>My first GeoAdmin map</h2>
<script src="http://api3.geo.admin.ch/loader.js?lang=en&version=4.4.2" type="text/javascript"></script>
<div id="map" class="map"></div>
<script type="text/javascript">
var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
var map = new ga.Map({
target: 'map',
layers: [layer],
view: new ol.View({
resolution: 500,
center: [2670000, 1160000]
})
});
</script>
</body>
</html>
I was hoping to see the map loaded when creating a new MapComponent.