Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

169
Views
Leaflet.wms request multiple times the same URL

So i'm developing a project with leaflet, but using with react doesn't have GetFeatureInfo natively, so I have to use a plugin to do the job.

my code to get the info on click the layer

  function GetFeatureInfoWms(props) {
    const { url, options, layers } = props;
    const map = useMap();

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);

    var MySource = WMS.Source.extend({
      ajax: function (url, callback) {
        $.ajax(url, {
          context: this,
          success: function (result) {
            callback.call(this, result);
          },
        });
      },
      showFeatureInfo: function (latlng, info) {
        setGetInfo(JSON.parse(info));
        map.openPopup(latlng);
      },
    });
    new MySource(url, options).getLayer(layers).addTo(map);

    return null;
  }

my component to select the position and catch the data

  const LocationMarker = ({ position }) => {
    const map = useMapEvents({
      click(e) {
        setNewPosition(e.latlng);
      },
    });

    return (
      <>
        {newPosition !== startPosition ? (
          <Popup position={position}>
            <span
              onClick={() => {
                alert(`Inscrição: ${getInfo.features[0].properties.inscricao}`);
              }}
            >
              Get data
            </span>
          </Popup>
        ) : (
          ""
        )}
      </>
    );
  };

My component to receive the url, layers and options

    <MapContainer
      className="map-container"
      center={newPosition}
      zoom={16}
      scrollWheelZoom={true}
    >
      <GetFeatureInfoWms
        url={urlBase}
        layers={layerName}
        options={{
          version: 2.0,
          format: "image/png",
          opacity: "1.0",
          crossOrigin: "application/json",
          transparent: true,
          isBaseLayer: false,
          visibility: true,
          tiled: true,
          buffer: 0,
          info_format: "application/json",
        }}
      />
      <LocationMarker position={newPosition}></LocationMarker>
    </MapContainer>

The problem is, each time I click in the map the code make multiple request with the same value, at point to break the map multiple requests network tab

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!