Skip to main content

BlockStrap Documentation

BS > Map

Block Description

The BS > Map Block is an integral component of the BlockStrap suite that allows you to integrate and display responsive, interactive maps on your web pages. This block is equipped to handle two leading mapping technologies: Google Maps and OpenStreetMap, thereby providing flexibility and choice for your mapping needs.

Block Features

By using the BS > Map Block, you can specify an address to be displayed on the map, control the zoom level, and select the view of the map. The block provides different aspect ratios, ensuring the map’s responsive nature across different device screen sizes. Moreover, it comes with an array of customizable options for styling and advanced settings for fine-tuning the block’s visibility and interaction.

Block Options

Content

bs-map-content-9918370
  • Map
    • MAP SOURCE (Dropdown): Choose your desired map provider – Google Maps or OpenStreetMap.
    • ADDRESS (Text Input): Key in the specific address you wish to showcase on the map.
    • MAP ZOOM (Dropdown): Control the initial zoom level of the map to decide the amount of area to be displayed.
    • MAP VIEW (Dropdown): Select the map’s viewing mode, which could be a roadmap, satellite view, etc.
    • RESPONSIVE RATIOS (Dropdown): Set the responsive ratio from options like 4×3, 16×9, 21×9, or 1×1 to ensure optimal display on different screen sizes.

Style

bs-map-styles-6292735
  • Map Styles
    • RESPONSIVE WIDTH (Dropdown): Adjust the map width to make it responsive. The options range from auto to fractions (1/12 to 12/12) of the total width.

Advanced

bs-map-advanced-8661009
bs-map-advanced-2-4780261
  • Wrapper Styles
    • Margins: Define the outer spacing (top, right, bottom, and left) of the map block.
    • Padding: Customize the inner spacing (top, right, bottom, and left) of the map block.
    • BORDER COLOR (Dropdown): Choose a border color from your theme’s palette.
    • SHADOW (Dropdown): Apply a shadow effect to the map block for a 3D visual impact.
    • POSITION (Dropdown): Set the positioning of the map block (static, relative, absolute, fixed, or sticky).
    • DISPLAY (Dropdown): Define the display nature of the map block (block, inline, inline-block, flex, inline-flex, grid, or inline-grid).
  • Image Mask
    • MASK (Dropdown): Apply a mask to the map block for enhanced creative possibilities.
  • Visibility Conditions
    • BLOCK VISIBILITY (Modal): Set the conditions that determine the map block’s visibility.
  • Advanced
    • ADDITIONAL CSS CLASS(ES) (Text Input): Enter custom CSS classes for additional stylizations. Remember to separate multiple classes with spaces.
Feedback