Design system 1.0 | Stad Brugge

3.7 #Organisms.Map Map

Map organism (uses https://leafletjs.com/).

Example

Map Osm

This is a demo description for this marker

tag 1

tag 2

tag 3

Highlight

This is a demo description for this marker

tag 1

tag 2

tag 3

Highlight

Installation notes

If you want to use the map component, don't forget to load the css in the head of your application:


          <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin="" />

Custom icons

There are a bunch of custom icons already available in the dist folder (./dist/img/static/markers).
If you want to add your own custom markers, it is important that you would do it as follows:

Upload .png files with a 63x63px dimension.
Make sure to upload a hover state .png icon with the same dimensions (63x63px).

Blue icons (leisure, cfo, sector, press):

Monument
Bed
Camera
Drink
Location
Map
Parking sign
Restaurant
Heart

Red icons (convention bureau):

Monument
Bed
Camera
Drink
Location
Map
Parking sign
Restaurant
Heart

Markup: lib/components/styleguide/organisms/map-osm.html

<section class="container map js-map-osm pt-large pb-large" data-id="map-osm">
  <div class="row">
    <div class="col-12">
      <h2 class="pb-medium">Map Osm</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div class="map__markers">
        <div class="map__marker js-map-osm-marker"
             data-lat="50.989246"
             data-lon="3.703037"
             data-icon="./dist/img/static/markers/blue/location.png"
             data-icon-hover=" ./dist/img/static/markers/blue/location-hover.png"
             data-title="This is a demo titel"
             data-id="null">
          <div class="map__marker__hidden js-map-osm-marker-desc">
            <div class="wysiwyg">
              <p>
                This is a demo description for this marker
              </p>
            </div>
          </div>
          <div class="map__marker__hidden js-map-osm-marker-tags">
            <div class="tags">
              <div class="tag">tag 1</div>
              <div class="tag">tag 2</div>
              <div class="tag">tag 3</div>
            </div>
          </div>
          <div class="map__marker__hidden js-map-osm-marker-highlight">
            <!-- You can add two color values to the class: 'blue' or 'red', the default color is darkgrey -->
            <div class="card__highlight blue">
              Highlight
            </div>
          </div>
        </div>
        <div class="map__marker js-map-osm-marker"
             data-lat="51.229404"
             data-lon="3.34472"
             data-icon="./dist/img/static/markers/red/monument-red.png"
             data-icon-hover="./dist/img/static/markers/red/monument-red-hover.png"
             data-title="Demo Marker"
        >
          <div class="map__marker__hidden js-map-osm-marker-img">
            <img src="https://picsum.photos/530/250" alt="marker-image">
          </div>
          <div class="map__marker__hidden js-map-osm-marker-desc">
            <div class="wysiwyg">
              <p>
                This is a demo description for this marker
              </p>
            </div>
          </div>
          <div class="map__marker__hidden js-map-osm-marker-tags">
            <div class="tags">
              <div class="tag">tag 1</div>
              <div class="tag">tag 2</div>
              <div class="tag">tag 3</div>
            </div>
          </div>
          <div class="map__marker__hidden js-map-osm-marker-highlight">
            <div class="card__highlight">
              Highlight
            </div>
          </div>
        </div>
      </div>
      <div id="map-osm" class="map__container js-map-osm-container"></div>
    </div>
  </div>
</section>
<section class="container pb-large">
  <div class="row">
    <div class="col-12">
      <h3 class="pt-small pb-small">Installation notes</h3>
      <div class="wysiwyg">
        <p>
          If you want to use the map component, don't forget to load the css in the head of your application: <br>
        </p>
        <code>
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.9.2/dist/leaflet.css&quot; integrity=&quot;sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=&quot; crossorigin=&quot;&quot; /&gt;
        </code>
      </div>
    </div>
  </div>
</section>

<section class="container">
  <div class="row">
    <div class="col-12">
      <h3 class="pt-small pb-small">Custom icons</h3>
      <div class="wysiwyg">
        <p>
          There are a bunch of custom icons already available in the dist folder (./dist/img/static/markers). <br>
          If you want to add your own custom markers, it is important that you would do it as follows:<br>
        </p>
        <ul class="pb-small">
          <li>
            Upload .png files with a 63x63px dimension.
          </li>
          <li>
            Make sure to upload a hover state .png icon with the same dimensions (63x63px).
          </li>
        </ul>
        <p><strong>Blue icons (leisure, cfo, sector, press):</strong></p>
      </div>
      <ul class="row gy-4">
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/blue/monument.png" alt="monument marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/monument-hover.png" alt="monument marker hover" />
            </div>
            <span class="kss__icon__name">Monument</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/blue/bed.png" alt="bed marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/bed-hover.png" alt="bed marker hover" />
            </div>
            <span class="kss__icon__name">Bed</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/blue/camera.png" alt="camera marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/camera-hover.png" alt="camera marker hover" />
            </div>
            <span class="kss__icon__name">Camera</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/blue/drink.png" alt="drink marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/drink-hover.png" alt="drink marker hover" />
            </div>
            <span class="kss__icon__name">Drink</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/blue/location.png" alt="location marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/location-hover.png" alt="location marker hover" />
            </div>
            <span class="kss__icon__name">Location</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/blue/map.png" alt="map marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/map-hover.png" alt="map marker hover" />
            </div>
            <span class="kss__icon__name">Map</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/blue/parking-sign.png" alt="parking-sign marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/parking-sign-hover.png" alt="parking-sign marker hover" />
            </div>
            <span class="kss__icon__name">Parking sign</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/blue/restaurant.png" alt="restaurant marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/restaurant-hover.png" alt="restaurant marker hover" />
            </div>
            <span class="kss__icon__name">Restaurant</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/heart.png" alt="heart marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/heart-hover.png" alt="heart marker hover" />
            </div>
            <span class="kss__icon__name">Heart</span>
          </div>
        </li>
      </ul>
      <div class="wysiwyg pt-small">
        <p><strong>Red icons (convention bureau):</strong></p>
      </div>
      <ul class="row gy-4">
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/red/monument-red.png" alt="monument marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/monument-red-hover.png" alt="monument marker hover" />
            </div>
            <span class="kss__icon__name">Monument</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/red/bed-red.png" alt="bed marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/bed-red-hover.png" alt="bed marker hover" />
            </div>
            <span class="kss__icon__name">Bed</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/red/camera-red.png" alt="camera marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/camera-red-hover.png" alt="camera marker hover" />
            </div>
            <span class="kss__icon__name">Camera</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/red/drink-red.png" alt="drink marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/drink-red-hover.png" alt="drink marker hover" />
            </div>
            <span class="kss__icon__name">Drink</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/red/location-red.png" alt="location marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/location-red-hover.png" alt="location marker hover" />
            </div>
            <span class="kss__icon__name">Location</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/red/map-red.png" alt="map marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/map-red-hover.png" alt="map marker hover" />
            </div>
            <span class="kss__icon__name">Map</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/red/parking-sign-red.png" alt="parking-sign marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/parking-sign-red-hover.png" alt="parking-sign marker hover" />
            </div>
            <span class="kss__icon__name">Parking sign</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/red/restaurant-red.png" alt="restaurant marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/restaurant-red-hover.png" alt="restaurant marker hover" />
            </div>
            <span class="kss__icon__name">Restaurant</span>
          </div>
        </li>
        <li class="col-6 col-md-2">
          <div class="kss__icon kss__icon--marker">
            <div class="kss__icon__marker">
              <img src="./dist/img/static/markers/star.png" alt="heart marker"/>
              <img class="kss__icon__marker__hover" src="./dist/img/static/markers/star-hover.png" alt="heart marker hover" />
            </div>
            <span class="kss__icon__name">Heart</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</section>

Source: ../client/lib/components/map-osm/_map.scss, line 1