Include OpenStreetMap

If you want to use OpenStreetMap instead of Google Maps, do the following:

TypoScript

Include the following Setup-TypoScript:

# Include OpenStreetMap and remove Google Maps libraries
page {
    includeJSFooterlibs {
        openLayers = https://openlayers.org/api/OpenLayers.js
        openStreetMap = https://openstreetmap.org/openlayers/OpenStreetMap.js
        openStreetMapLocal = EXT:address_manager/Resources/Public/JavaScript/Openstreetmap.js
        googleMaps =
        googleMapsHtmlMarker =
        googleMapsClustering =
    }
}

List view

• Include the OpenStreetMap copyright notice

Template file: Resources/Private/Templates/Address/List.html

<f:if condition="{settings.list.useMapOverview}">
    <f:render partial="Address/GoogleMapsConsent" arguments="{_all}" />
    <div id="map-wrapper">
        <div id="address-list-map"
             class="card"
             data-country-restriction="{settings.list.map.countryRestriction}"
             data-max-zoom="{settings.list.map.maxZoom}"
             data-clustering-active="{settings.list.map.clustering.active}"
             data-clustering-image-path="{f:uri.resource(path: '{settings.list.map.clustering.imagePath}')}"
             data-default-latitude="{settings.list.map.default.latitude}"
             data-default-longitude="{settings.list.map.default.longitude}">
            <div id="address-list-map-canvas"></div>
        </div>
        <div id="osm">© <a href="http://www.openstreetmap.org">OpenStreetMap</a>
            und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
            <a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a>
        </div>
    </div>
</f:if>

Detail view

• Include the OpenStreetMap copyright notice
• If necessary, adjust the height of the map section. To do this, replace the two places where "250px" is written, for example by "500px"

Template file: Resources/Private/Templates/Address/Show.html

<div class="{settings.show.css.class.map.wrapperOuter}">
    <f:render partial="Address/GoogleMapsConsent" arguments="{_all}" />
    <div id="map-wrapper" class="{settings.list.css.class.map.wrappe}">
        <f:variable name="tooltip"><b>{address.name}</b><br />{address.mapTooltip}</f:variable>
        <f:if condition="{address.mapLink}">
            <f:variable name="tooltip"><f:link.typolink parameter="{address.mapLink}">{tooltip}</f:link.typolink></f:variable>
        </f:if>
        <f:variable name="marker"><f:format.trim>{settings.detail.map.marker.style.{address.mapMarker}}</f:format.trim></f:variable>
        <div id="address-detail-map"
             data-tooltip="{tooltip}"
             data-zoom="{address.mapZoom}"
             data-latitude="{address.latitude}"
             data-longitude="{address.longitude}"
             data-map-marker="{marker}"
             data-map-api-key="{site.javascript.maps.apiKey}"
             class="{settings.show.css.class.map.wrapperInner}"
             style="{settings.show.css.style.map.wrapperInner}">
        </div>
    </div>
    <div id="osm">© <a href="http://www.openstreetmap.org">OpenStreetMap</a>
        und <a href="http://www.openstreetmap.org/copyright">Mitwirkende</a>,
        <a href="http://creativecommons.org/licenses/by-sa/2.0/deed.de">CC-BY-SA</a>
    </div>
</div>

Adjustments

To make individual adjustments, have a look at the script Resources/Public/JavaScript/Openstreetmap.js. You can copy this, modify it and integrate it instead of the supplied version.