Allow setting map height to percentage value (D8)

The attached patch should accomplish this issue request, keeping in mind that in case of percent the leaflet Map won't show up if the wrapper / container element height is not defined ...

Please test and review, for incoming commit into dev.

I applied the patch and its working as it should (the % is showing in the views options and generates the corresponding code as the map element markup):

min-width: 150px;
height: 50%;
position: relative;

The problem is that even if the wrapper / container element height is defined (500px in my case), the map is not showing. I've found that im getting better results if the height of the element can be removed all togheter so i have the freedom to use the wrapper element to 'control' its height. Can it be accomplished?.

#rsbarbano with this new patch you should be able to accomplish what you are requesting simply leaving the Height Input element Empty. The Leaflet Map element will be rendered without any height property, as you requested.
From what I checked in this case the Leaflet Map won't extend its height to its parent container height, and won't show up anyway (opposite form your assumption).
Let me know if it works as you would, instead.

#AdamEvertsson of course you should define the parent container height somehow, adding an height provided class to it (for instance), even with injected js ...

IMHO this NULL or Percentage Height property is not giving clear & predictable results, so I would be persuaded not to commit any of the posted patch unless a positive test and review is given to this patch, or a new better one is provided (and properly reviewed). Personally, due to unclear requirements, I am stopping supporting further this request ...

sorry. Patch #5 had errors. Consider this #6 patch instead ...

Using patch #6 did the trick.
It has one problem though.

Trying to set a percentage in the height wont show the map. The other combinations work (px in both height and width, px in heigth and % in width). Leaving both blank also works theming the css for example .leaflet-container { width: 100%; height: 500px; }.

I think the fail when using % in the height refers to limitations of the css but not sure. Overall great patch. Thanks a lot #itamair

good. I am closing this then.
The #6 patch is going to be committed into dev, and is becoming part of the new 8.x-1.21, being now released.

This commit results in a pretty major regression causing the map to display without a height and appear invisible. The cause is use of the wrong settings variables on https://git.drupalcode.org/project/leaflet/blob/8.x-1.x/src/Plugin/Field... -- should be $settings. The default should probably be NULL to let the 400px default height take effect:

$map_height = !empty($settings['height']) ? $settings['height'] . $settings['height_unit'] : NULL;

Can confirm that 1.21 causes the map to be heightless and appear invisible.
The proposed change in #21 resolved the issue.

thanks @ahebrank ... yes there was a bug in the LeafletDefaultFormatter.
The following fix it:

-    $map_height = !empty($this->options['height']) ? $this->options['height'] . $this->options['height_unit'] : '';
+    $map_height = !empty($settings['height']) ? $settings['height'] . $settings['height_unit'] : '';

Deployed a new 8.x-1.22 version with it.

This doesnt seem to work if the map is a view.

I have tried leaving the height blank and also setting it to 100%, with the parent container height set to 800px - the map does not display.

besides the height you need to make sure that the parent container has a proper "position" attribute.

If I set the following:

.view-content {
 position: relative;
 height: 800px;
}

the Leaflet % height settings works as expected ...

Just reporting on this... I recently updated to Drupal 10.3 and Leaflet 10.2.18 and my view maps were not showing. After some tinkering, I discovered the only way I could get them to show again was to:
1. Unset the height value in the view (leaving it blank)
2. Change the height CSS style to ".view-content>.leaflet-container" instead of ".view-content"

E.g., in my case I changed this:

.view-map>.view-content {
  position: relative;
  height: calc(100vh - 200px);
}

To this:

.view-map>.view-content>.leaflet-container {
  position: relative;
  height: calc(100vh - 200px);
}