maplibre-gl

Maplibre: Do not send request to glyphs and not working with plugin: "maplibre-gl-measures"


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/


Solution

  • To solve the problem with the plugin, follow the link