2

I am working with OpenLayers library on React

My first question is how to avoid distortion while resizing map width and height,

The second issue is when I am changing with/height each time it creates a new map. I know that issue is happening because of initializing new Map each time.

How can resize map without initializing new Map?

import React, { useEffect, useState } from 'react';
import * as ol from 'openlayers';
import { layers_collection, vw } from '../map - constants/map-tools';
import { Button, Input, TextField } from '@material-ui/core';
import MapSource from './map-source';

const initMap = () => {
   return (new ol.Map({
      target: 'map',
      layers: layers_collection,
      view: vw,
   }));
};

var map = initMap()

const OpenLayerMap = () => {
   const [currentWidth, setWidth] = useState<string>("400")

   useEffect(() => {
      initMap()
      map.updateSize()
   });


   return (
      <>
         <Button variant="contained" color="primary" onClick={() => {
               setWidth("400")
         }}>
            400
      </Button>
         <Button variant="contained" color="primary" onClick={() => {
               setWidth("800")
         }} >
            800
     </Button>
         <div id="map" style={{width: `${currentWidth}px`}} >
            <MapSource />
         </div>
      </>
   );
};

export default OpenLayerMap;
  • 1
    Why do you call initMap and updateSize at the same time? You only need to call updateSize when the container size of the map changes. – Chase Choi Nov 20 '19 at 0:35
  • Thank you for responding, – Elvin Nov 21 '19 at 12:32
1

I have solved that issue, the init map is related through use effect, I just give a condition for an initialising map at once and update map size each time

import React, { useEffect, useState } from 'react';
import * as ol from 'openlayers';
import { layersCollections, view } from '../map - constants/map-tools';
import { Button, TextField } from '@material-ui/core';
import MapSource from './map-source';
var map: ol.Map;

const initMap = () => {
   map = new ol.Map({
      target: 'map',
      layers: layersCollections,
      view: view,
   });
};


const OpenLayerMap = () => {
   const [currentWidth, setWidth] = useState<number | string>(800)
   const [isMounted, setIsMounted] = useState<boolean>(false);


   useEffect(() => {
      if (isMounted) {
         map.updateSize()
      } else {
         setIsMounted(true);
         initMap()
      }
   },
   );
   return (
      <>
         <Button variant="contained" color="primary" onClick={() => {
            setWidth(400)
         }}
          size = "small">
            400
      </Button>
         <Button variant="contained" color="primary" onClick={() => {
            setWidth(800) 
         }} 
         size = "small"
         >
            800
     </Button>

         <div id="map" style={{ height: 400, width: currentWidth }}>
            <MapSource />
         </div>
      </>
   );
};

export default OpenLayerMap;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.