Mapbox not loading geojson in Framework

Community Help
1

I’m trying to load a geojson in mapbox in Framework. The mapbox styles load but the geojson doesn’t. Here’s the code. TIA.


const div = display(document.createElement("div"));
div.style = "height: 600px;";

const map = new mapboxgl.Map({
  container: div,
  accessToken: // replace with your token, "pk.…"
  style: mapa,
  center: [-74.0021, 4.931333],
  zoom: 16,
  minZoom: 9,
  scrollZoom: true
  });
  // true for mouse

  map.on("load", () => {
  // Add a data source containing GeoJSON data.
  map.addSource("cuadros", {
    type: "geojson",
    data: cuadros
  });

  map.addLayer({
    id: "cuadros",
    type: "fill",
    source: "cuadros", // reference the data source
    layout: {},
    paint: {
      "fill-opacity": 0.7,
      "fill-color": "red"
    }
  });

invalidation.then(() => map.remove());
  });
2

Hey @gcoch,

Are you able to console.log() your geojson before you use it with Mapbox?

3

Hi, Paul. Thanks for reaching out. I got it to work and it had nothing to do with with the mapbox code, but rather with the file. Working now and happy to report Mapbox works just fine inside the .md file. Haven’t tried turning it into a componenet.

3 Likes