Working together for the ultimate brand experience

Royal Canin Design Language

Maps

The Google Maps mockup below is for illustration purposes only. Royal Canin markets use differing map services and therefore the assets required to build maps with Design Language assets and styling are provided here without any implementation specific instructions.

Map example

Location pin

The location pin is provided with an example tooltip. Styles and data should be replicated as closely as possible.

Location Pin

The location pin is provided with an example tooltip. Styles and data should be replicated as closely as possible.

Trusted partner

Coffee and Beagle

Otley Old Road, Horsforth,
4.0 mi . Leeds
Open now . Closes at 20:00
+44 (0) 113 258 7788
<div>
  <h4 class="rc-espilon">Location Pin</h4>
  <p>The location pin is provided with an example tooltip. Styles and data should be replicated as closely as possible.</p>
  <div title="Top" data-tooltip-placement="top" data-tooltip="top-tooltip" class="rc-margin-top--md rc-text--center">
    <div class="rc-map-location__icon">
      <svg width="24" height="32">
        <path d="M12 15c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4m0-15C5.383 0 0 5.109 0 11.388c0 5.227 7.216 16.08 9.744 19.47A2.793 2.793 0 0 0 12 32c.893 0 1.715-.416 2.256-1.142C16.784 27.468 24 16.615 24 11.388 24 5.109 18.617 0 12 0" fill="#E2001A" fill-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  <div id="top-tooltip" class="rc-tooltip">
    <div class="rc-tooltip rc-text--left rc-padding--xs" id="map-tooltip" style="display:block;">
      <div class="rc-margin-bottom--md--mobile rc-margin-bottom--sm--desktop">
        <span>Trusted partner</span>
        <h4 class="rc-delta">Coffee and Beagle</h4>
        <span>Otley Old Road, Horsforth,</span>
        <br />
        <span>4.0 mi . Leeds</span>
        <br />
        <span>Open now . Closes at 20:00</span>
        <br />
      </div>
      <a href="#" class="rc-styled-link rc-margin-bottom--md--mobile rc-margin-bottom--md--desktop">+44 (0) 113 258 7788</a>
      <div class="rc-button-link-group rc-padding-right--md--desktop">
        <a class="rc-btn rc-btn--two rc-btn--sm" href="#/">Get directions</a>
        <p>
          <a class="rc-styled-link--external" href="#/"> Visit website</a>
        </p>
      </div>
    </div>
  </div>
</div>

Copied!

Cluster pin

The cluster pin is provided as a .png file. Please right click to simply download this. Cluster badge should only be used for integration on maps to show multiple results in a single location at wider levels of zoom. Where possible this should be used to override any default cluster styling.

<img src="/assets/images/maps/map-cluser.png" />

Copied!

Location pin

Basic map marker is provided as a .png file. Please right click to simply download this. This pin should be used to show specific location.

<img src="/assets/images/maps/map-marker.png" />

Copied!

Default browser/map system marker

That is a default browser marker. Used here just for presentational purpose. It can vary, depends on the browser or map system that is implemented.

<img src="/assets/images/maps/map-default-marker.png" />

Copied!