Settings
Mapplic provides a broad spectrum of configuration possibilities through a wide range of settings.
| Name | Setting | Description |
|---|---|---|
| Fullscreen | fullscreen | Position of the fullscreen button: top-left, top-right, bottom-left, bottom-right or undefined to disable fullscreen. |
| Hover tooltip | hoverTooltip | Enable the tooltip on hover. |
| Hover about | hoverAbout | Display about location property in hover tooltip, if enabled. |
| Deeplinking | deeplinking | Enable location deeplinking by the use of the location query parameter. |
| Padding | padding | Add an extra padding (in pixels) around the map when zoomed all the way out. |
| Scroll top | scrollTop | In portrait mode, the vertical scroll offset is helpful when there's a static header. It ensures the map scrolls into view without being covered by the header. |
| Accessibility | accessibility | Enhance the overall accessibility of the map. |
Responsivity
It is possible to configure a distinct layout at an unlimited number of breakpoints.
| Property | Key | Description |
|---|---|---|
| Name | name * | Unique layer name, also used as a CSS class. |
| Below | below | When the size falls below the specified pixel breakpoint, the settings will take effect. |
| Portrait | portrait | Whether to use the portrait or landscape (sidebar) directory mode. |
| Sidebar | sidebar | Width of the sidebar in pixels, only applied when portrait mode is turned off. |
| Type | type | Wheter to use the list or grid display type. |
| Column | column | Number of columns in the directory. |
| Container | container | Height of the map container in pixels. In the absence of a specified height, the container's height will be automatically calculated to maintain the map file's aspect ratio. |
| Element | element | Height of the component in portrait mode (map container + directory below the map) |
The breakpoint name will be added to the component as CSS class, so it can also be used for custom styling.
For example, if you wanted to hide the layer switcher control on mobile, the following custom CSS could be used.
.mobile .mapplic-layer-switcher {
display: none;
}Zoom and pan
Zooming and panning are essential features of Mapplic that enhance the user experience by providing improved visibility over static, fixed-size maps.
Turning off zooming is also possible when the map is sufficiently clear and does not require any enlargement.
| Name | Setting | Description |
|---|---|---|
| Max zoom | maxZoom | Maximum zoom level of the map, 1 is the fit scale (map fits within the container). |
| Reset button | resetButton | Position of the reset button: top-left, top-right, bottom-left, bottom-right or undefined to disable the reset button. |
| Zoom buttons | zoomButtons | Position of the +/- buttons: top-left, top-right, bottom-left, bottom-right or undefined to disable zoom buttons. |
| Mousewheel | mouseWheel | Enable/disable mousewheel zooming. |
| Shift key | mouseWheelShift | Require Shift key pressed for mousewheel zooming. |
| Close reset | closeReset | Automatically reset zoom when closing a location (losing focus). |
Translations
You can translate or replace certain default UI strings such as 'More,' 'Search,' or 'Clear all' using these options.
At present, multi-lingual maps are not available. However, localization can be achieved by creating and configuring translated versions of the original map.