BoundaryCanvas in LeafLet with Typescript

Viewed 12

I can't get BoundaryCanvas to work in my pbiviz project.

Q.: What do I need??

A.: That only Brazil appears on the map. the rest of the map is gray or white including oceans...

my imports are like this:

import brazil from "../assets/brasil.json";
import * as leaflet from "leaflet";
--
import 'leaflet-boundary-canvas';
^*but in this one the following error occurs:
"/MapLeaflet/node_modules/leaflet-boundary-canvas/src/BoundaryCanvas.js' implicitly has a type 'any'"

the default code:

export class Visual implements IVisual {

private target: HTMLElement;
private settings: VisualSettings;
private map: leaflet.Map;
 constructor(options: VisualConstructorOptions) {
    this.target = options.element;
    this.brasil = brazil; --Here I have the GeoJson
    
    if (typeof document !== "undefined") {
     this.map = new leaflet.Map(this.target);

So what I've already tried and it doesn't work:

npm i leaflet-boundary-canvas

const geoJSON = this.brasil;
      const osm = leaflet.TileLayer.boundaryCanvas(
             --                    ^^^^^^^^^^^^^^^
             --"Property 'boundaryCanvas' does not exist in type 'typeof TileLayer'"
             --
        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        {
          boundary: geoJSON
        }
      );
      map.addLayer(osm);

and

this.map = new leaflet.Map(this.target);
      leaflet
        .tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          bounds: this.brasil,
        })
        .addTo(this.map);

and

const test = new leaflet.TileLayer(
        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        {
          bounds: this.brasil,
        }
      );
      test.addTo(this.map);

nothing worked.

0 Answers
Related