janis/street-map-typescript
1
0
Fork 0
mirror of https://github.com/DerTyp7/street-map-typescript.git synced 2025-10-28 20:32:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

added basic map

Browse Source
This commit is contained in:
Janis Meister
2022-01-12 12:30:31 +01:00
parent e6f3a86aeb
commit d46550da9b
5 changed files with 50 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app.component.css
View File

@@ -9,4 +9,9 @@ header{
header p{
padding-top: 10px;
}
#map{
width: 100%;
height: 1000px;
}

1
src/app/app.component.html
View File

@@ -1,3 +1,4 @@
<header>
<p>{{title}}</p>
</header>
<div id="map" class="map"></div>

48
src/app/app.component.ts
View File

@@ -1,17 +1,51 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { defaults as defaultControls } from 'ol/control';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import ZoomToExtent from 'ol/control/ZoomToExtent';
import Feature from 'ol/Feature';
import Polygon from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
styleUrls: ['./app.component.css', '../../node_modules/ol/ol.css']
})
export class AppComponent implements OnInit{
title = 'Street Map';
export class AppComponent implements AfterViewInit {
title = "Street Map";
map: Map;
ngAfterViewInit() {
this.map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new View({
center: [813079.7791264898, 5929220.284081122],
zoom: 2
}),
controls: defaultControls().extend([
new ZoomToExtent({
extent: [
813079.7791264898, 5929220.284081122,
848966.9639063801, 5936863.986909639
]
})
])
});
ngOnInit(): void {
}
}

1
src/index.html
View File

@@ -6,6 +6,7 @@
<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>

2
tsconfig.json
View File

@@ -11,6 +11,8 @@
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"strictPropertyInitialization": false,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,