OpenStreetMap einbinden

Wenn Du OpenStreetMap statt Google Maps verwenden möchtest, dann gehst Du wie folgt vor:

TypoScript

Füge folgendes Setup-TypoScript ein:

# 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:ddress_manager/Resources/Public/JavaScript/Openstreetmap.js
        googleMaps =
        googleMapsHtmlMarker =
        googleMapsClustering =
    }
}

Listendarstellung

• Füge den OpenStreetMap Copyright-Hinweis ein.

Template-Datei: Resources/Private/Templates/Address/List.html

<div class="{settings.list.css.class.map.wrapperOuter}">
    <f:render partial="Address/GoogleMapsConsent" arguments="{_all}" />
    <div id="map-wrapper" class="{settings.list.css.class.map.wrapper}">
        <div id="address-list-map"
             class="{settings.list.css.class.map.wrapperInner}"
             style="{settings.list.css.style.map.wrapperInner}"
             data-country-restriction="{settings.list.map.countryRestriction}"
             data-max-zoom="{settings.list.map.maxZoom}"
             data-map-api-key="{site.javascript.maps.apiKey}"
             data-map-id="{site.javascript.maps.mapId}"
             data-clustering-active="{settings.list.map.clustering.active}"
             data-clustering-image-path="{f:uri.resource(path: '{settings.list.map.clustering.imagePath}')}"
             data-clustering-image-extension="{settings.list.map.clustering.imageExtension}"
             data-clustering-text-color="{settings.list.map.clustering.textColor}"
             data-clustering-text-size="{settings.list.map.clustering.textSize}"
             data-clustering-width="{settings.list.map.clustering.width}"
             data-clustering-height="{settings.list.map.clustering.height}"
             data-default-latitude="{settings.list.map.default.latitude}"
             data-default-longitude="{settings.list.map.default.longitude}">
            <div id="address-list-map-canvas"
                 class="{settings.list.css.class.map.canvas}"
                 style="{settings.list.css.style.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>
</div>

Detaildarstellung

• Füge den OpenStreetMap Copyright-Hinweis ein.
• Passe ggf. die Höhe des Kartenausschnitts an, ersetze dazu die beiden Stellen an denen "250px" steht z. B. durch "500px"

Template-Datei: 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}"
             data-map-id="{site.javascript.maps.mapId}"
             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>

Anpassungen

Um individuelle Anpassungen an der Darstellung zu machen, schaue Dir das Script Resources/Public/JavaScript/Openstreetmap.js an. Du kannst dieses kopieren, modifizieren und statt der mitgelieferten Version einbinden.