Addons by Reinos

Appearance

Consent (GDPR) ​

When a map is loaded, the browser of the visitor connects to the tile provider (OpenStreetMap, Google Maps, ...) and sends the IP address of the visitor. In the EU that can need the consent of the visitor. With the consent gate a map shows a placeholder until the visitor allows it, and nothing is loaded from the provider before that. (from v5.0.0)

{exp:reinos_maps:map consent="click"}
    {maps:add_marker address="Domplein, Utrecht"}
{/exp:reinos_maps:map}

See the examples. The default for all maps is the Consent setting in the CP, the consent param of a map overrides it.

The modes ​

The map shows a placeholder with a button. When the visitor clicks it, all maps on the page that wait are loaded, and the choice is remembered in the browser (localStorage), so the maps on the next pages load directly. Use consent:remember="no" to ask on every page.

Uses the consent of ExpressionEngine. Maps adds its own consent request, reinos_maps:maps, that you find in the CP under Settings → Consent Requests. When the visitor granted it, the map is loaded directly; until then the placeholder is shown, and its button loads the maps of this page only.

Let visitors grant the consent with the consent form of ExpressionEngine, e.g. on your privacy page:

{exp:consent:form consent="reinos_maps:maps"}
    {consents}
        <label><input type="checkbox" name="{consent_short_name}" value="y" {if consent_granted}checked{/if}> {consent_title}</label>
        <p>{consent_request}</p>
    {/consents}
    <button type="submit">Save</button>
{/exp:consent:form}

Use your own consent request with consent="ee:my_request".

WARNING

With consent="ee" the consent is checked when the page is built. A page cache (e.g. the static page cache of ExpressionEngine or a CDN) would show the page of another visitor, use consent="click" or a cookie banner on cached pages.

The placeholder ​

By default the placeholder has a text and a button. Change them with:

consent:text="This map is loaded from [provider]. When you load it, your IP address is sent to [provider]." [OPTIONAL]
consent:button="Load map" [OPTIONAL]

[provider] is the name of the provider of the first tile, e.g. OpenStreetMap or Google Maps.

Or write the placeholder yourself with the {maps:consent} tag pair inside the map tag. A button (or link) with data-maps-consent-accept loads the maps:

{exp:reinos_maps:map consent="click" tiles="google_maps_roadmap"}
    {maps:consent}
        <img src="/images/map-preview.jpg" alt="">
        <p>This map comes from Google Maps. <a href="/privacy">Privacy</a></p>
        <button type="button" data-maps-consent-accept>Show the map</button>
    {/maps:consent}
    {maps:add_marker address="Domplein, Utrecht"}
{/exp:reinos_maps:map}

The placeholder fills the map (.maps-consent, with .maps-consent__text and .maps-consent__button for the default one) and is removed when the map loads. It gets the dark style with theme="dark".

Google Maps and Apple Maps ​

The scripts of Google Maps and Apple Maps (from the HTML header tag) wait for the consent as well when a map on the page has a consent gate. Use the same consent for all maps on a page: a map without consent on that page doesn't get these scripts before the consent either.

With a cookie banner (Cookiebot, CookieYes, Complianz, ...) call REINOS_MAPS.consent() when the visitor accepts the category of the maps. It loads all maps that wait, whatever their mode. The banner remembers the choice, so call it on every page, e.g. with Cookiebot:

js
window.addEventListener('CookiebotOnAccept', function () {
    if (Cookiebot.consent.preferences) {
        REINOS_MAPS.consent();
    }
});

Or with CookieYes:

js
document.addEventListener('cookieyes_consent_update', function (event) {
    if (event.detail.accepted.includes('functional')) {
        REINOS_MAPS.consent();
    }
});

Use consent="click" with consent:remember="no" on these maps, so only the banner remembers the choice.

Tile proxy ​

With the tile proxy the tiles come from your own server, so the visitor doesn't connect to the tile provider at all.

Javascript ​

Call
REINOS_MAPS.consent()Load all maps that wait. Returns a promise.
REINOS_MAPS.consent(true, { remember: true })The same, and remember it for consent="click"
REINOS_MAPS.consent(false)Withdraw the consent of consent="click" (the maps that are loaded stay)
REINOS_MAPS.hasConsent()Whether the visitor gave the consent of consent="click"

The maps:consent event is fired on the document when the maps are loaded. Until a map is loaded, the Javascript API calls for it wait, like a lazy map.