CODEWITHSUNDEEP
javascriptreactjsmaplibre-gl
Jan D.M.
Jan D.M.

Reputation: 2682

How to change style of React-Maplibre map?

I have a file map.tsx where a React-Maplibre map is defined as follows:

<Map
    initialViewState={{
      longitude: 5.4118,
      latitude: 46.8345,
      zoom: 10
    }}
    mapStyle="https://tiles.openfreemap.org/styles/bright"
  >
   <ChangeFunctionality />
</Map>

As you can see, the ChangeFunctionality element is added to the Map. It is defined as follows:

import { useEffect } from "react";
import { useMap } from "@vis.gl/react-maplibre";
import { DESIGN } from "../design";

export default function ChangeFunctionality() {
  const { current: map } = useMap();

  useEffect(() => {
    if (!map) return;


    let layer = map.style.stylesheet.layers.find(layer => layer.id === "highway-shield-non-us");
    
    if (layer) {
      layer.visibility = "none";
    }

  }, [DESIGN.showLabels]);

  return (
    <div></div>
  );
}

My main question is: Is it possible to change the current style of the Map component? By changing, I mean toggling the visibility of highway shields for example. I tried to do this in the ChangeFunctionality component, but it does not seem to work. Is there a better way to achieve what I want?

Upvotes: 1

Views: 114

Answers (1)

younes_khosravi
younes_khosravi

Reputation: 69

I was searching for these issue and find these documents. hope it's helpful. maptiler-gl-style

Upvotes: 0

Related Questions