Revisions to How change size of Map in Leaflet v3 React (Inmutable properties)

Improved formatting

Source Link

537
4
19

import { MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'


export const GeographicView = (props) => {
    const SetHeightOnChange = ({ height }) => {
        const map = useMap();
        useEffect(() => {
          if (map != null) {
            map.invalidateSize();
          }
        }, [map, height]);
        const mapContainer = map.getContainer();
        mapContainer.style.cssText = `height: ${height}; width: 100%; position: relative;`;

        return null;
    }

    return (
          <MapContainer
            style={{ height: props.height || "80vh", width: "100%" }}
            center={props.centroid}
            zoom={8}
            scrollWheelZoom={false}
          >
            <SetHeightOnChange height={props.height || "80vh"} />
            <TileLayer
              attribution="Google Maps Satellite"
              url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
            />
            <Polyline
              key={index}
              positions={props.shape.vertices}
              pathOptions={{
                color: legend.find(item => item.value === props.shape.legend)?.color || "blue",
              }}
            />
      </MapContainer>
    )
}


import { MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'


export const GeographicView = (props) => {
    const SetHeightOnChange = ({ height }) => {
        const map = useMap();
        useEffect(() => {
          if (map != null) {
            map.invalidateSize();
          }
        }, [map, height]);
        const mapContainer = map.getContainer();
        mapContainer.style.cssText = `height: ${height}; width: 100%; position: relative;`;

        return null;
    }

    return (
          <MapContainer
            style={{ height: props.height || "80vh", width: "100%" }}
            center={props.centroid}
            zoom={8}
            scrollWheelZoom={false}
          >
            <SetHeightOnChange height={props.height || "80vh"} />
            <TileLayer
              attribution="Google Maps Satellite"
              url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
            />
            <Polyline
              key={index}
              positions={props.shape.vertices}
              pathOptions={{
                color: legend.find(item => item.value === props.shape.legend)?.color || "blue",
              }}
            />
      </MapContainer>
    )
}

import { MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'


export const GeographicView = (props) => {
    const SetHeightOnChange = ({ height }) => {
        const map = useMap();
        useEffect(() => {
          if (map != null) {
            map.invalidateSize();
          }
        }, [map, height]);
        const mapContainer = map.getContainer();
        mapContainer.style.cssText = `height: ${height}; width: 100%; position: relative;`;

        return null;
    }

    return (
          <MapContainer
            style={{ height: props.height || "80vh", width: "100%" }}
            center={props.centroid}
            zoom={8}
            scrollWheelZoom={false}
          >
            <SetHeightOnChange height={props.height || "80vh"} />
            <TileLayer
              attribution="Google Maps Satellite"
              url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
            />
            <Polyline
              key={index}
              positions={props.shape.vertices}
              pathOptions={{
                color: legend.find(item => item.value === props.shape.legend)?.color || "blue",
              }}
            />
      </MapContainer>
    )
}


import { MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'


export const GeographicView = (props) => {
    const SetHeightOnChange = ({ height }) => {
        const map = useMap();
        useEffect(() => {
          if (map != null) {
            map.invalidateSize();
          }
        }, [map, height]);
        const mapContainer = map.getContainer();
        mapContainer.style.cssText = `height: ${height}; width: 100%; position: relative;`;

        return null;
    }

    return (
          <MapContainer
            style={{ height: props.height || "80vh", width: "100%" }}
            center={props.centroid}
            zoom={8}
            scrollWheelZoom={false}
          >
            <SetHeightOnChange height={props.height || "80vh"} />
            <TileLayer
              attribution="Google Maps Satellite"
              url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
            />
            <Polyline
              key={index}
              positions={props.shape.vertices}
              pathOptions={{
                color: legend.find(item => item.value === props.shape.legend)?.color || "blue",
              }}
            />
      </MapContainer>
    )
}

added 1 character in body

Source Link

edited Jul 5 at 0:48

Esnyan

1
1

Hooman's answer worked for me, but when changing width the lines and polygons were not rendering well, so the updated solution for me to change height and width was this:

import { MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'


export const GeographicView = (props) => {
    const SetHeightOnChange = ({ height }) => {
        const map = useMap();
        useEffect(() => {
          if (map != null) {
            map.invalidateSize();
          }
        }, [map, height]);
        const mapContainer = map.getContainer();
        mapContainer.style.cssText = `height: ${height}; width: 100%; position: relative;`;

        return null;
    }

    return (
          <MapContainer
            style={{ height: props.height || "80vh", width: "100%" }}
            center={props.centroid}
            zoom={8}
            scrollWheelZoom={false}
          >
            <SetHeightOnChange height={props.height || "80vh"80vh"} />
            <TileLayer
              attribution="Google Maps Satellite"
              url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
            />
            <Polyline
              key={index}
              positions={props.shape.vertices}
              pathOptions={{
                color: legend.find(item => item.value === props.shape.legend)?.color || "blue",
              }}
            />
      </MapContainer>
    )
}

Hooman's answer worked for me, but when changing width the lines and polygons were not rendering well, so the updated solution for me to change height and width was this:

import { MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'


export const GeographicView = (props) => {
    const SetHeightOnChange = ({ height }) => {
        const map = useMap();
        useEffect(() => {
          if (map != null) {
            map.invalidateSize();
          }
        }, [map, height]);
        const mapContainer = map.getContainer();
        mapContainer.style.cssText = `height: ${height}; width: 100%; position: relative;`;

        return null;
    }

    return (
          <MapContainer
            style={{ height: props.height || "80vh", width: "100%" }}
            center={props.centroid}
            zoom={8}
            scrollWheelZoom={false}
          >
            <SetHeightOnChange height={props.height || "80vh} />
            <TileLayer
              attribution="Google Maps Satellite"
              url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
            />
            <Polyline
              key={index}
              positions={props.shape.vertices}
              pathOptions={{
                color: legend.find(item => item.value === props.shape.legend)?.color || "blue",
              }}
            />
      </MapContainer>
    )
}

Hooman's answer worked for me, but when changing width the lines and polygons were not rendering well, so the updated solution for me to change height and width was this:

import { MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'


export const GeographicView = (props) => {
    const SetHeightOnChange = ({ height }) => {
        const map = useMap();
        useEffect(() => {
          if (map != null) {
            map.invalidateSize();
          }
        }, [map, height]);
        const mapContainer = map.getContainer();
        mapContainer.style.cssText = `height: ${height}; width: 100%; position: relative;`;

        return null;
    }

    return (
          <MapContainer
            style={{ height: props.height || "80vh", width: "100%" }}
            center={props.centroid}
            zoom={8}
            scrollWheelZoom={false}
          >
            <SetHeightOnChange height={props.height || "80vh"} />
            <TileLayer
              attribution="Google Maps Satellite"
              url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
            />
            <Polyline
              key={index}
              positions={props.shape.vertices}
              pathOptions={{
                color: legend.find(item => item.value === props.shape.legend)?.color || "blue",
              }}
            />
      </MapContainer>
    )
}

added 9 characters in body

Source Link

edited Jul 5 at 0:48

Esnyan

1
1

Hooman's answer worked for me, but when changing width the lines and polygons were not rendering well, so the updated solution for me to change height and width was this:

import { MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'


export const GeographicView = (props) => {
    const SetHeightOnChange = ({ height }) => {
        const map = useMap();
        useEffect(() => {
          if (map != null) {
            map.invalidateSize();
          }
        }, [map, height]);
        const mapContainer = map.getContainer();
        mapContainer.style.cssText = `height: ${height}; width: 100%; position: relative;`;

        return null;
    }

    return (
          <MapContainer
            style={{ height: props.height || "80vh", width: "100%" }}
            center={props.centroid}
            zoom={8}
            scrollWheelZoom={false}
          >
            <SetHeightOnChange height={props.height || "80vh} />
            <TileLayer
              attribution="Google Maps Satellite"
              url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
            />
            <Polyline
              key={index}
              positions={props.shape.vertices}
              pathOptions={{
                color: legend.find(item => item.value === props.shape.legend)?.color || "blue",
              }}
            />
      </MapContainer>
    )
}

Hooman's answer worked for me, but when changing width the lines and polygons were not rendering well, so the updated solution for me to change height and width was this:

import { MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'


export const GeographicView = (props) => {
    const SetHeightOnChange = ({ height }) => {
        const map = useMap();
        useEffect(() => {
          if (map != null) {
            map.invalidateSize();
          }
        }, [map, height]);
        const mapContainer = map.getContainer();
        mapContainer.style.cssText = `height: ${height}; width: 100%; position: relative;`;

        return null;
    }

    return (
          <MapContainer
            style={{ height: props.height || "80vh", width: "100%" }}
            center={props.centroid}
            zoom={8}
            scrollWheelZoom={false}
          >
            <SetHeightOnChange height={props.height} />
            <TileLayer
              attribution="Google Maps Satellite"
              url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
            />
            <Polyline
              key={index}
              positions={props.shape.vertices}
              pathOptions={{
                color: legend.find(item => item.value === props.shape.legend)?.color || "blue",
              }}
            />
      </MapContainer>
    )
}

Hooman's answer worked for me, but when changing width the lines and polygons were not rendering well, so the updated solution for me to change height and width was this:

import { MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'


export const GeographicView = (props) => {
    const SetHeightOnChange = ({ height }) => {
        const map = useMap();
        useEffect(() => {
          if (map != null) {
            map.invalidateSize();
          }
        }, [map, height]);
        const mapContainer = map.getContainer();
        mapContainer.style.cssText = `height: ${height}; width: 100%; position: relative;`;

        return null;
    }

    return (
          <MapContainer
            style={{ height: props.height || "80vh", width: "100%" }}
            center={props.centroid}
            zoom={8}
            scrollWheelZoom={false}
          >
            <SetHeightOnChange height={props.height || "80vh} />
            <TileLayer
              attribution="Google Maps Satellite"
              url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
            />
            <Polyline
              key={index}
              positions={props.shape.vertices}
              pathOptions={{
                color: legend.find(item => item.value === props.shape.legend)?.color || "blue",
              }}
            />
      </MapContainer>
    )
}

Source Link

created Jul 5 at 0:43

Esnyan

1
1

Loading

Collectives™ on Stack Overflow

Return to Answer