0

I want to display a map with ngx-leaflet and use it in a web component built with Angular Elements. The problem I'm facing is that new tiles are not rendered on the screen after interacting with the map.

I've disabled zones and am running manual change detection. I do see the new tiles loaded in the network tab, but they don't appear on the screen. I've manually copied over the leaflet css to the component css file.

import { Component, OnInit, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
import { tileLayer, latLng } from 'leaflet';
import { interval } from 'rxjs';

@Component({
  selector: 'app-map-element',
  templateUrl: './map-element.component.html',
  styleUrls: ['./map-element.component.scss'],
  encapsulation: ViewEncapsulation.Emulated
})
export class MapElementComponent implements OnInit {

  options = {
    layers: [
      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 5,
    center: latLng(46.879966, -121.726909)
  };

  constructor(
    private cd: ChangeDetectorRef,
  ) { }

  ngOnInit() {
    // Manually detecting changes every second to force a rerender
    interval(1000).subscribe(
      () => this.cd.detectChanges(),
    );
  }
}

I followed this lesson for configuring Angular Elements: https://angularfirebase.com/lessons/angular-elements-advanced-techniques/

Here's a Stackblitz with the code: https://stackblitz.com/edit/map-element

pberden
  • 130
  • 3
  • 12

1 Answers1

1

Chris Engelsma has done a great tutorial series on the subject, you can view all of his four posts here

JPA
  • 164
  • 3
  • 6