Skip to main content

MlWMSLoader

The MlWmsLoader component serves as a Web Map Service (WMS) loader in a React application, handling the loading of WMS capabilities and managing the representation of WMS layers on a map. This component integrates with a MapLibre instance, utilizing several hooks and components for its operations.

Visit the storybook for a complete list of properties & documentation.

Functionality:​

  • WMS Capabilities Loading: It loads WMS capabilities from a URL provided as url property. This includes parsing the getCapabilities XML document from the WMS server and handling any potential errors in this process.

  • Layer Management: The component dynamically creates and manages MlWmsLayer components for each layer offered by the WMS, based on the loaded capabilities. Layers can be toggled visible or invisible.

  • Feature Information Retrieval: If enabled, the component will register click handlers on the map, handle getFeatureInfo requests and display the results in a popup. This allows users to click on the map to retrieve information about features from WMS layers. This functionality is optional and can be activated or deactivated.

  • UI Interaction: It renders as a LayerListFolder with a list of layers with checkboxes to toggle their visibility, and supports custom actions such as deleting a layer or retrieving feature information. This way it integrates well with the LayerList component. The UI also accommodates custom buttons as part of the list items.

  • Map Interaction: The component can optionally zoom to the extent of the WMS layer after loading getCapabilities.

  • Attribution Handling: It handles attributions for each layer, aggregating them based on visibility and layer properties.

Basic Usage​

<MlWmsLoader
  url={"https://magosm.magellium.com/geoserver/wms"}
  zoomToExtent={true}
/>

https://mapcomponents.github.io/react-map-components-maplibre/?path=/docs/mapcomponents-mlwmsloader--example-config