How to reference a local layer file?

[sing78]

Hi,
I want to reference a local Layer file(layer.json) using this code:

const map = new maplibregl.Map({
container: 'map',
zoom: h.maxZoom-2,
center: [h.centerLon, h.centerLat],
style: {
version:8,
glyphs:'https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf',
sources: {
"openmaptiles": {
type: "vector",
url: "pmtiles://" + PMTILES_URL,
attribution: '© OpenStreetMap'
}
},
layers:layer.json

The layer.json file is in the same directory with the html file.However,when I load the html file ,I get "layer is not defined"

How can I use the "layers" property correctly?

Thanks

[IvanSanchez]

layers must be a JSON structure, and is part of the style. It's not a separate option to the map constructor.

You should do something like

fetch('./layers.json').then(r=>r.json()).then(layers=>{
  const map = new maplibregl.Map({
    style: {
      layers: layers
      /* rest of style stuff */
    },
    /* rest of map stuff */
  });
}

Remember to read https://developer.mozilla.org/en-US/docs/Web/API/fetch and beware the scope of your variables when doing asynchronous stuff.

[HarelM]

Converting to discussion...

[sing78]

@IvanSanchez Ivan,thank you for the answer.
I was trying to copy the layer in this code (but in a html file)
https://github.com/wcedmisten/map-demo/blob/main/pages/protomap/index.tsx
and using this layer.json file https://github.com/wcedmisten/map-demo/blob/main/data/layers.json
So,I thought it was simple to just reference the layer.json file.

I will try to use what you suggested,thanks again