CODEWITHSUNDEEP
javascriptcssangularsassleaflet
Sumama Waheed
Sumama Waheed

Reputation: 3609

Angular 2 Leaflet Tiles huge gaps

Using the same configuration outside of my Angular 2 application, leaflet loads fine, but this is what happens in Angular 2:

If I move the map, different tiles load, but the same problem persists.

html:

<div class="leaflet-maps" id="map"></div>

component:

    let el = this._elementRef.nativeElement.querySelector('.leaflet-maps');

    let map = L.map("map", {
        zoomControl: false,
        center: L.latLng(37.8, -96),
        zoom: 5,
        minZoom: 4,
        maxZoom: 19
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

I've loaded the leaflet css file through:

styleUrls: ['./maps.component.scss']

Where I pasted the contents of leaflet css

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,

....

enter image description here

Upvotes: 2

Views: 914

Answers (2)

sai kiran
sai kiran

Reputation: 567

Add the below CSS link in your index.html. this will resolve tiles issue

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

Upvotes: 0

Sumama Waheed
Sumama Waheed

Reputation: 3609

This fixed my problem:

import { Component, ViewEncapsulation} from '@angular/core';

@Component({
    selector: 'maps',
    templateUrl: 'maps.component.html',
    styleUrls: ['./maps.component.scss'],
    encapsulation: ViewEncapsulation.None  // <--
})

Upvotes: 3

Related Questions