2

My map is implemented using MapLibre GL, but this issue also happens with Google Maps API or Mapbox GL.

I have the following ReactJS component:

import React, { useRef, useEffect } from "react";
import maplibregl from "maplibre-gl";
import map_style from "./style/style.json";

export default function Map() {
  const mapContainer = useRef(null);
  const map = useRef(null);

  useEffect(() => {
    if (map.current) return; //stops map from intializing more than once
    map.current = new maplibregl.Map({
      container: mapContainer.current,
      style: map_style,
      center: [12, 26],
    });
  });

  return (
      <div
        ref={mapContainer}
        className="my-map"
        style={{ height: 500, width: 500 }}
      />
  );
}

The above code renders the map, but I do not want a fixed height and width. I need to apply different styles depending on parent DOM elements, screen sizes, etc.

Problem is, right now if I assign a width and height in my CSS file, it's not being applied to the map. On the other hand, if I remove or change the syntax of style={{ height: 500, width: 500 }} in my ReactJS component, the map fails to display.

How can I style with CSS in this scenario?

Fabian
  • 229
  • 3
  • 8

2 Answers2

1

The map library needs to read the container dimensions to compute the inner view.

As long as you provide explicit size, possibly through className, you should be fine.

Most mapping libraries also offer some API to request a re-read of the container dimensions, so that the view can be adjusted when the container is revealed or changes size (possibly for responsiveness). In the case of MapLibre GL JS, see resize() map method:

Resizes the map according to the dimensions of its container element.

Checks if the map container size changed and updates the map if it has changed. This method must be called after the map's container is resized programmatically or when the map is shown after being initially hidden with CSS.

ghybs
  • 47,565
  • 6
  • 74
  • 99
  • could you elaborate with a code example on how to make this work? I am not having any success with the ```resize()``` method for resizing according to the dimensions of the map container element set in my CSS file – Fabian Jan 06 '23 at 22:17
  • If you could share a [mcve], and ideally a live demo as well (e.g. using StackBlitz or CodeSandbox), that would enable be more relevant. – ghybs Jan 07 '23 at 01:09
  • I got it to work with ```resize()```. thank you for your answer. – Fabian Jan 07 '23 at 14:43
0

A solution to get the map to render according to the parent div styling is to change the following code:

style={{ height: 500, width: 500 }}

to:

style={{ height: null, width: null }}

Now the map renders according to CSS styling for its related div.

Fabian
  • 229
  • 3
  • 8