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.

HowTo: Integrate OpenStreetMap into OpenImmo

In order to replace Google Maps with OpenStreetMap please follow these steps

  1. Create a file "OpenStreetMap.js" in your sitepackage, eg. at typo3conf/ext/sitepackage/Resources/Public/JavaScript/Openstreetmap.js You can find the sourcecode below.
  2. Overwrite the partial "GoogleMaps.html" with one in your sitepackage, eg.
    typo3conf/ext/sitepackage/Resources/Private/Extensions/Openimmo/Partials/Immobilie/Details/GoogleMaps.html

    You can find the sourcecode below. Please make sure to set the paths to your partials (see documentation chapter "Installation" --> "Configuration" for that.)

  3. Include the OpenStreetMap javascript files and deactivate the Google Maps javascript files via typoscript setup:
    # 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/theme_paperclip_child/Resources/Public/JavaScript/Openstreetmap.js
            googleMaps =
            googleMapsHtmlMarker =
            googleMapsClustering =
        }
    }

OpenStreetMap.js

var openStreetMap = {
    map: null,
    layer_mapnik: null,
    layer_tah: null,
    layer_markers: null,

    jumpTo: function (lon, lat, zoom) {
        var x = this.Lon2Merc(lon);
        var y = this.Lat2Merc(lat);
        map.setCenter(new OpenLayers.LonLat(x, y), zoom);
        return false;
    },

    Lon2Merc: function (lon) {
        return 20037508.34 * lon / 180;
    },

    Lat2Merc: function (lat) {
        var PI = 3.14159265358979323846;
        lat = Math.log(Math.tan( (90 + lat) * PI / 360)) / (PI / 180);
        return 20037508.34 * lat / 180;
    },

    addMarker: function (layer, lon, lat, popupContentHTML) {
        var ll = new OpenLayers.LonLat(this.Lon2Merc(lon), this.Lat2Merc(lat));
        var feature = new OpenLayers.Feature(layer, ll);
        feature.closeBox = true;
        feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(300, 180) } );
        feature.data.popupContentHTML = popupContentHTML;
        feature.data.overflow = "hidden";

        var marker = new OpenLayers.Marker(ll);
        marker.feature = feature;

        var markerClick = function(evt) {
            if (this.popup == null) {
                this.popup = this.createPopup(this.closeBox);
                map.addPopup(this.popup);
                this.popup.show();
            } else {
                this.popup.toggle();
            }
            OpenLayers.Event.stop(evt);
        };
        marker.events.register("mousedown", feature, markerClick);

        layer.addMarker(marker);
        //map.addPopup(feature.createPopup(feature.closeBox));
    },

    getCycleTileURL: function (bounds) {
        var res = this.map.getResolution();
        var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
        var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
        var z = this.map.getZoom();
        var limit = Math.pow(2, z);

        if (y < 0 || y >= limit)
        {
            return null;
        } else {
            x = ((x % limit) + limit) % limit;
            return this.url + z + "/" + x + "/" + y + "." + this.type;
        }
    },

    drawmap: function(dataElementId, mapElementId, zoom) {
        OpenLayers.Lang.setCode('de');

        // Set position and zoom of the map, take the data from the dataElement
        // Data attributes need to be set: lat, lon, title
        const dataElement = document.querySelector('#' + dataElementId);
        let lat = parseFloat(dataElement.dataset.latitude);
        let lon = parseFloat(dataElement.dataset.longitude);
        let popUpContentHtml = dataElement.dataset.title;

        map = new OpenLayers.Map(mapElementId, {
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326"),
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar()],
            maxExtent:
                new OpenLayers.Bounds(-20037508.34, -20037508.34,
                    20037508.34, 20037508.34),
            numZoomLevels: 18,
            maxResolution: 156543,
            units: 'meters'
        });

        layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
        layer_markers = new OpenLayers.Layer.Markers("Address", {
            projection: new OpenLayers.Projection("EPSG:4326"),
            visibility: true,
            displayInLayerSwitcher: false
        });

        map.addLayers([layer_mapnik, layer_markers]);
        this.jumpTo(lon, lat, zoom);
        this.addMarker(layer_markers, lon, lat, popUpContentHtml);
    }
}

jQuery(document).ready(function() {
    // Draw the OpenStreetMap if a map element is on this page
    if(jQuery('#openimmo-google-map-points-of-interest').length > 0) {
        openStreetMap.drawmap(
            'openimmo-google-map-points-of-interest',
            'openimmo-google-map-points-of-interest',
            15
        );
    }
    if(jQuery('#address-detail-map').length > 0) {
        openStreetMap.drawmap(
            'address-detail-map',
            'address-detail-map',
            12
        );
    }
});

GoogleMaps.html

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
     xmlns:oi="http://typo3.org/ns/CodingMs/Openimmo/ViewHelpers">
    <f:section name="Bootstrap4">

        <f:if condition="{oi:extension.loaded(extensionName: 'OpenimmoPro', then: '1', else: '0')}">
            <f:if condition="{settings.pro}">
                <f:comment>Show map, but only if coordinates are available</f:comment>
                <oi:variable.set name="map"><oi:googleMaps.detail immobilie="{immobilie}" settings="{settings}" /></oi:variable.set>
                <f:if condition="{map}">
                    <div class="row">
                        <!-- Define also an id for anchor accessibility -->
                        <div class="openimmo-details-map col-md-12" id="openimmo-detail-map">
                            <div class="card">
                                <f:if condition="1">
                                    <div class="card-body">
                                        <div class="card-title-wrapper">
                                            <h3 class="card-title"><f:translate key="tx_openimmo_label.immobilie_points_of_interest" /></h3>
                                        </div>
                                    </div>
                                </f:if>
                                <div class="openimmo-google-map-points-of-interest">
                                    <f:format.raw>{map}</f:format.raw>
                                </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>
                    </div>
                </f:if>
            </f:if>
        </f:if>

    </f:section>
</div>
Documentation
TYPO3 OpenImmo Extension

TYPO3 OpenImmo

TYPO3 OpenImmo is a real estate extension that reads in your objects via an OpenImmo import and displays them on your website.

Menu

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
A8T_________141______
__Z____W____W_____PRJ
XRS___4FQ___3XR______
M______3____Y_7___NF9
85X_________45J______