Loading...
Skip navigation
Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.

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 = typo3conf/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.useMapOverview}">
    <f:render partial="Address/GoogleMapsConsent" section="{settings.framework}" 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-style="{settings.list.map.style}"
             data-marker-width="{settings.list.map.marker.width}"
             data-marker-height="{settings.list.map.marker.height}"
             data-clustering-active="{settings.list.map.clustering.active}"
             data-clustering-image-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="address-detail-map-wrapper" style="width: 100%;height: 250px">
    <f:render partial="Address/GoogleMapsConsent" section="{settings.framework}" arguments="{_all}" />
    <div id="map-wrapper">
        <div id="address-detail-map"
             data-tooltip="{address.name}"
             data-zoom="{address.mapZoom}"
             data-style="{settings.detail.map.style}"
             data-latitude="{address.mapLatitude}"
             data-longitude="{address.mapLongitude}"
             data-map-marker="{am:variable.get(name: 'settings.list.map.marker.style.{address.mapMarker}')}"
             data-marker-width="{settings.detail.map.marker.width}"
             data-marker-height="{settings.detail.map.marker.height}"
             style="width: 100%; height: 250px;"></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>

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.

Contact request

You can contact us at any time

Stop! Playing in the meantime?
Stop! Playing in the meantime?
Stop! Playing in the meantime?

Stop! Playing in the meantime?

Break the highscore

Press Start
Contact request
Screenreader label
Security question
S8M_________LDD______
8_K____4____F_Z___62Q
YQ3___XF1___7_S______
__M____4____Z_M___7RZ
4SO_________J1Y______