Map Local

v0.0.0

The local map consists of a map-image (.png or better, .svg) and markers. Note that in the map-image, water area's must be transparent.

On smaller screen-sizes it will show location details as a summary below the map. Next to each detail a button exists to point to the accompanying pin. If the card scrolled is out of view (on top side) it will scroll to the top of the card.

On larger screen-sizes markers can be hovered and the location details are presented in a box nearby the pin.
The position of the box depends on available space.

Amsterdam

Teva Amsterdam

Driving instructions

Groningen

Teva Groningen

Driving instructions

Maastricht

Teva Maastricht

Driving instructions

The markup #

The data-pin-left and data-pin-top attributes contain offset values for the pin-location on the map image.
The values are set in percentages of image width and height, respectively.

The markup can be inserted in container elements. (for example .container)

When using an .svg as map image, please remove width and height properties from the svg-element.

<!-- Map Local  -->
<div class="vi-map-local">
  <div class="vi-map-local__map vi-pattern--random-neutral">
    <img src="/assets/images/maps/country.svg" alt="The Netherlands">
  </div>
  <div class="vi-map-local__markers">
    <div class="vi-map-local__marker" data-pin-left="47.2" data-pin-top="44.4">
      <div class="vi-map-local__marker-head">
        <h4>Amsterdam</h4>
        <div class="vi-map-local__marker-subtitle">
          Teva Amsterdam
        </div>
      </div>
      <div class="vi-map-local__marker-foot">
        <a href="#link-to-driving-instructions">
          Driving instructions
        </a>
      </div>
    </div>
    <div class="vi-map-local__marker" data-pin-left="62" data-pin-top="16">
      <div class="vi-map-local__marker-head">
        <h4>Groningen</h4>
        <div class="vi-map-local__marker-subtitle">
          Teva Groningen
        </div>
      </div>
      <div class="vi-map-local__marker-foot">
        <a href="#link-to-driving-instructions">
          Driving instructions
        </a>
      </div>
    </div>
    <div class="vi-map-local__marker" data-pin-left="54.9" data-pin-top="94.7">
      <div class="vi-map-local__marker-head">
        <h4>Maastricht</h4>
        <div class="vi-map-local__marker-subtitle">
          Teva Maastricht
        </div>
      </div>
      <div class="vi-map-local__marker-foot">
        <a href="#link-to-driving-instructions">
          Driving instructions
        </a>
      </div>
    </div>
  </div>
</div>

Allowed colors #

The country should be displayed in one of the following colors:

#09E259
#F56F7C
#E9CE3B

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheet is used to display the example(s).

Download Container Stylesheet

JavaScript #

The following javascript is required to display this component.

Download Map Local JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  28 June 2022 - Fix Automatic scroll after click (might need some refinements)
  28 June 2022 - Fix scrollparent detector
  17 June 2022 - Disables hidden buttons and links peaking through.
  17 June 2022 - Removed obsolete tabindex to prevent outline outside viewport
  Scroll card into view


Added

  Reviewed A11Y support
  PBS Support
  Initial draft