0

I have a map with a maxBounds property setup, the map works fine but we are using a tile set from a third party that only gives the entire map for the UK, so I wonder if it is at all possible to constrain the map to its container div so the blank spaces that don't render remain hidden from the user?

Here is my setup:

const [viewport, setViewport] = useState({
  latitude: 53.55,
  longitude: -2.39,
  width: '100%',
  height: '450px',
  zoom: zoom,
  maxBounds: [
    [-10.76418, 49.528423],
    [1.9134116, 61.331151],
  ],
});

return (
  <ReactMapGL
    {...viewport}
    onViewportChange={(newViewport) => {
      setViewport({ ...newViewport })
    }}
    fitBounds={bounds}
    center={centre}
    mapStyle={style}
    ref={mapRef}
  >

    {* My Markers logic... *}

  </ReactMapGL>
  );

The image below shows the map as its been dragged to the top left corner, since there are not more tiles available to render you see an empty space, so I would like to constrain the map to the container div marked with the red line. enter image description here

Ricardo Sanchez
  • 4,935
  • 11
  • 56
  • 86

1 Answers1

1

You can use the maxBounds property of a map - docs here

To integrate with react-map-gl, it looks like you have to include this as part of the mapOptions object property, not as part of the viewport. As react-map-gl docs explain, the mapOptions prop of an InteractiveMap inherits from the StaticMap mapOptions prop. You might try this:

return (
  <ReactMapGL
    {...props}
    mapOptions={{
      maxBounds={[
        [-10.76418, 49.528423],
        [1.9134116, 61.331151],
      ]}
    }}
  />
);
Seth Lutske
  • 9,154
  • 5
  • 29
  • 78
  • Brilliant! that solve my issue but now I'm presented with another which is my markers are not restricted to as soon as the map stops panning the markers keep moving along, any ideas? I'm using supercluster by the way – Ricardo Sanchez Jun 29 '21 at 16:08
  • Your question doesn't include any information about your markers, so this sort of sounds like it deserves its own question. But if your area of focus is restricted to a certain bounds, why would you have any markers outside of that bounds? – Seth Lutske Jun 29 '21 at 16:10
  • They are not out of bounds they are on the map but they keep moving as I pan around and keep moving as soon as the map hits a maxBound wall, if that makes sense, you are correct I'll raise another question – Ricardo Sanchez Jun 29 '21 at 16:12
  • 1
    I think I found the solution to my problem here: https://github.com/visgl/react-map-gl/issues/786 – Ricardo Sanchez Jun 29 '21 at 16:21