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:
'© <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