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.