Use the map component to show one or more locations on a map.
A map can consist of the following parts:
There should be at least one map layer. There can also be multiple map layers. In the latter case, the map layer switch button should be included.
The legend shows what data layers can be seen on the map. The legend can be expanded or collapsed. By default, the legend is collapsed. The data layers are shown using an accordion with multiple expandable items. Each item contains a list of data layers using checkboxes. By selecting or deselecting the checkboxes, the corresponding data layers are shown or hidden.
Location markers represent locations on the map from the data layers that are currently visible.
When location markers are too close to each other in a way that they overlap or the cannot be clicked or tapped independently anymore, a cluster is shown with the numer of locatoin markers that overlap. When zooming in, the cluster will be hidden and the individual location markers will be shown. When zooming out, the cluster will be shown again.
Next to the location markers and the clusters, also the current location of the user is shown. This is only the case if the user has explicitely approved the website to use the current location.
The search address function allows to enter an address to zoom and center in the map on the location of that address.
The zoom/in out buttons let the user zoom in or zoom out the map.
The current location button lets the user zoom and center the map on the current location. This is only possible after the user has explicitely approved the website to use the current location.
The fullscreen toggle button toggles fhe fullscreen mode of the map on or off.
The distance marker shows has a certain fixed with in pixels and shows the real distance that it corresponds with on the map to show the scale of the map.
The switch visible map layer button lets the user switch map layers. This is only applicable when there are multiple map layers.
The example styling is based on a default implementation of an Open Layers based map. As a result our selectors and SASS are not as clearly as envisioned.
Use the styling in this styleguide as an example or use it in conjunction with the gent_base_theme and the dg_maps module (a closed source Drupal 8 module developed at Digipolis Gent) to achieve optimal results.
The styling will be refactored, in sync with subsequent releases of the DG Maps module.
<!--
This is not a real map!
Do not use this template, it is just an example.
-->
<dl class="styleguide">
<dt>Map example</dt>
<dd>
{% include '@image' with {
src: '/styleguide/img/stock/map_gent.png' | path,
alt_text: '',
ratio: null
} %}
</dd>
<dt>Map example with popup</dt>
<dd>
{% include '@image' with {
src: '/styleguide/img/stock/map_gent_open.png' | path,
alt_text: '',
ratio: null
} %}
</dd>
</dl>
<!--
This is not a real map!
Do not use this template, it is just an example.
-->
<dl class="styleguide">
<dt>Map example</dt>
<dd>
<figure><img src="../../styleguide/img/stock/map_gent.png" alt="" /></figure>
</dd>
<dt>Map example with popup</dt>
<dd>
<figure><img src="../../styleguide/img/stock/map_gent_open.png" alt="" /></figure>
</dd>
</dl>
/* No context defined for this component. */