Package Exports

react-leaflet-infowms
react-leaflet-infowms/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-leaflet-infowms) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-leaflet-infowms

You can create a URL with "GetFeatureInfo" WMS request data about a map image coordinate and get it from the click event

Requirement

Leaflet Versión

Test on leaflet 1.7.1

Demo

Installing

npm install leaflet-infowms

or using Yarn

yarn add leaflet-infowms

Getting started

import { InfoWMSTileLayer } from 'react-leaflet-infowms'
import { MapContainer, TileLayer } from 'react-leaflet'
import PropTypes from 'prop-types'
import 'leaflet/dist/leaflet.css'

const position = [57.76, 11.96]

function Map() {
  function wmsInfo(event) {
    console.log(event)
    fetch(event.url)
      .then((response) => response.json())
      .then((response) => {
        console.log(response)
      })
  }

  return (
    <MapContainer center={position} zoom={13} className='map'>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      />
      <InfoWMSTileLayer
        url='https://public-mapservice.lf.goteborg.se/geoserver/LF_Externwebb/wms?'
        params={{
          layers: 'Utrustning',
          format: 'image/png',
          transparent: true,
          attribution: 'Public Geoserver LF Goteborg City',
          feature_count: 1,
        }}
        eventHandlers={{ click: (event) => wmsInfo(event) }}
      />
    </MapContainer>
  )
}

Map.propTypes = {
  features: PropTypes.func,
}

export default Map

API reference

TODO