I'm using openlayers in react project. And trying to draw a polygon. When i compelete to draw, polygon is removing. I believe clicking to added coordinate is causing that. But cannot find any solution.
i follow this article for creating map. and this example for drawing polygon.
here is my map component:
<MapWrapper center={fromLonLat(DEFAULT_CENTER)} zoom={ZOOM}>
<MapLayers>
<MapTileLayer source={new OSM()} />
</MapLayers>
<Controls>
<ZoomControl />
<FullScreenControl />
</Controls>
</MapWrapper>and this is my map wrapper component:
const MapWrapper = ({ center, zoom, children }) => {
const mapRef = useRef();
const [map, setMap] = useState();
const source = new VectorSource({ wrapX: false });
//----------------ON COMPONENT MOUNT
useEffect(() => {
let options = {
view: new ol.View({ zoom, center }),
layers: [],
controls: [],
overlays: [],
};
let mapObject = new ol.Map(options);
mapObject.setTarget(mapRef.current);
setMap(mapObject);
return () => mapObject.setTarget(undefined);
}, [zoom, center]);
//------------ DRAWING POLYGON -----------------
useEffect(() => {
if (!map) return;
let draw = new Draw({
source: source,
type: "Polygon",
});
map.addInteraction(draw);
}, [map]);
return (
<MapContext.Provider value={{ map }}>
<div className="map-container"
ref={mapRef}
>
{children}
</div>
</MapContext.Provider>
);
};