I have demo project from Angular. I create one page and one components map-layout
for maplibre-gl-js.
Then i install plugin maplibre-gl-measures.
This is my code from exmaple
import MeasuresControl from 'maplibre-gl-measures'
@Component({
selector: "app-map-layout",
templateUrl: "./map-layout.component.html",
standalone: true,
styleUrls: ["./map-layout.component.css"]
})
export class MapLayoutComponent implements OnInit{
ngOnInit(): void {
const map: maplibregl.Map = new maplibregl.Map({
container: 'map', // container id
style: {
version: 8,
sources: {
osm: {
type: "raster",
tiles: ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
tileSize: 256,
attribution: "© OpenStreetMap Contributors",
maxzoom: 19
}
},
glyphs: "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
layers: [
{
id: "osm",
type: "raster",
source: "osm"
}
]
},
center: [-8, 40], // starting position [lng, lat]
zoom: 15 // starting zoom
});
console.log('map', map)
map.addControl(new MeasuresControl(), "top-left");
}
}
Then i added new control from maplibre-gl-measures and he partially works. I see button, he paint lines or polygon but i not see total area or length. image example The mistake is that maplibre-gl does not send request to glyphs at the specified address as in the example.
Please, help! What am I doing wrong?
I tried to use local glyphs. Also not worked. Unfortunately maplibre-gl not used glyphs, but when open example it`s working https://github.com/jdsantos/maplibre-gl-measures https://jdsantos.github.io/demos/maplibre-gl-measures/
To solve the problem with the plugin, follow the link