I am encountering an issue while working on Leaflet and Google within Angular 2. The problem lies in the Tilemill tiles not rendering properly as they are displaying in a strange order.
Here is a screenshot of the current state: https://i.stack.imgur.com/6TjvF.png
It's evident that some parts are missing and they seem to be jumbled up.
Below is the code snippet:
map.component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as L from "leaflet";
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css'],
encapsulation: ViewEncapsulation.None
})
export class MapComponent implements OnInit {
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
maxZoom: 10,
subdomains:['mt0','mt1','mt2','mt3']
});
constructor() {}
ngOnInit() {
let map = L.map("map", {
center: [48.13, 11.57],
zoom: 15,
zoomControl: true,
maxZoom: 10
}).addLayer(this.googleStreets);
map.invalidateSize();
L.control.scale().addTo(map);
}}
Here is the corresponding HTML:
<p>Map</p>
<div id="map"></div>
And here is the CSS style for the map element:
#map {
position: absolute;
height: 90%;
}