OpenStreetMap: Koordinaten statt Adresse

Hallo zusammen!

Möchte gerne Geokoordinaten statt einer Adresse für das Generieren einer OpenStreetMap angeben. Nutze das Theme "Canvas" aus dem ContaoThemesShop von Thomas Kampmeier (er ist vor wenigen Monaten leider plötzlich und unerwartet gestorben, ich hätte ihn natürlich gerne persönlich gefragt :().

Im Template "cts_ctsopenstreetmap.html5" wird die Konfiguration durch Setzen der Variable "myConfig" generiert:

Code:

---

<script>
    var containerId    = 'ctsosm_<?php echo $this->id; ?>';
    var osmcontainer    = $('#' + containerId);
    var myConfig        = <?php echo json_encode($data); ?>;

---

Im Quellcode der Seite wird sieht das dann z.B. so aus:

Code:

---

<script>
    var containerId    = 'ctsosm_6340';
    var osmcontainer    = $('#' + containerId);
    var myConfig        = {"ctsmapheight":{"value":"50","unit":"vh"},"map_zoom":"13","wheel_zoom":"1","osm_street_1":"Philosophenweg 23","osm_postal_1":"47051","osm_city_1":"Duisburg","osm_country_1":"Deutschland","ctsmapbutton":"Karte ansehen","ctsosmprivacynoteyes":"1","map_confirmation":"7","ctsosmprivacynote":"&lt;p>Bitte hier klicken klicken, damit die Karte geladen wird.&lt;\/p>\n&lt;p>Es werden ggf. pers\u00f6nliche Date wie die IP-Adresse \u00fcbermittelt, damit die Karte geladen werden kann.&lt;\/p>\n&lt;p>Mit dem Klick erkl\u00e4ren Sie sich ausdr\u00fccklich damit einverstanden!&lt;\/p>"};

---

Statt der Adresse wie "Philosophenweg 23", "47051" und "Duisburg" würde ich nun gern die Koordinaten eingeben, denn meine Location liegt in der Pampa, und die postalische Adresse führt nicht zum gewünschten Ergebnis.

Hat jemand eine Idee?

geht das Script auch noch weiter?

Jo, so isses :):

Template:

Code:

---

<script>
    var containerId    = 'ctsosm_<?php echo $this->id; ?>';
    var osmcontainer    = $('#' + containerId);
    var myConfig        = <?php echo json_encode($data); ?>;

    jQuery(document).ready(function($) {
        var elem = null;

        if (Cookies.get('ctsosmclicked') !== '1') {
            $('#loadMapButton').one('click', function (elem) {
                // Laden der Karte nach dem Klick.
                loadOsmScript(containerId, myConfig, elem);
            });
        } else {
            // Initiale Laden der Karte, wenn der Cookie gesetzt ist.
            loadOsmScript(containerId, myConfig, elem);
        }
    });
</script>

---

Quellcode:

Code:

---

<script>
    var containerId    = 'ctsosm_6340';
    var osmcontainer    = $('#' + containerId);
    var myConfig        = {"ctsmapheight":{"value":"50","unit":"vh"},"map_zoom":"13","wheel_zoom":"1","osm_street_1":"Philosophenweg 23","osm_postal_1":"47051","osm_city_1":"Duisburg","osm_country_1":"Deutschland","ctsmapbutton":"Karte ansehen","ctsosmprivacynoteyes":"1","map_confirmation":"7","ctsosmprivacynote":"&lt;p&#62;Bitte hier klicken klicken, damit die Karte geladen wird.&lt;\/p&#62;\n&lt;p&#62;Es werden ggf. pers\u00f6nliche Date wie die IP-Adresse \u00fcbermittelt, damit die Karte geladen werden kann.&lt;\/p&#62;\n&lt;p&#62;Mit dem Klick erkl\u00e4ren Sie sich ausdr\u00fccklich damit einverstanden!&lt;\/p&#62;"};

    jQuery(document).ready(function($) {
        var elem = null;

        if (Cookies.get('ctsosmclicked') !== '1') {
            $('#loadMapButton').one('click', function (elem) {
                // Laden der Karte nach dem Klick.
                loadOsmScript(containerId, myConfig, elem);
            });
        } else {
            // Initiale Laden der Karte, wenn der Cookie gesetzt ist.
            loadOsmScript(containerId, myConfig, elem);
        }
    });
</script>

---

gut, ... nun braucht man das Script wo "loadOsmScript" drinn steht - wird sicher über javascript geladen

Herrlich, vielen Dank für den Tipp!

In Zeile 270 des folgenden Skripts (unter system/modules/ctselemgen/assets/js/openstreetmap.js gefunden) ist die Defaultmitte der Karte definiert. Hier habe ich nun hardcodiert die gewünschten Koordinaten eingetragen. Nur der Marker fehlt noch, ich gehe davon aus, dass ich das dann auch noch finde.

Besten Dank für die schnelle Hilfe!

Code:

---

'use strict';
/**
 * @author      pfroch <info@easySolutionsIT.de>
 * @copyright  e@sy Solutions IT 2019
 * @license    EULA
 * @package    generator4
 * @version    1.0.0
 * @since      23.09.19 - 09:58
 */


/* ================================================================================ */


/**
 * Sortier die Felder des CTE mit dem Adresswerten den entsprechenden Eigenschaften zu.
 * @class AddressesSorter
 * @param myConfig
 * @constructor
 */
function AddressesSorter(myConfig) {

    /**
    * Felder mit Adressdaten
    * @type {*[]}
    */
    var addressFields  = ['street', 'postal', 'city', 'country'];

    /**
    * Felder mit Metadaten
    * @type {*[]}
    */
    var metaFields      = ['notice', 'marker'];

    /**
    * Sortiert die Felder der einzelnen Adressen.
    * @returns {[]}
    */
    this.sort = function (){
        var addresses = [];

        for (var fieldName in myConfig) {
            if (myConfig.hasOwnProperty(fieldName) && 0 === fieldName.indexOf('osm_')) {
                var fieldValue  = myConfig[fieldName];
                var pieces      = fieldName.split('_');
                var index      = pieces[pieces.length - 1];

                if (addresses[index] === undefined) {
                    addresses[index]            = {};
                    addresses[index]['address'] = {};
                    addresses[index]['meta']    = {};
                }

                if (fieldValue !== undefined) {
                    if (-1 !== $.inArray(pieces[1], addressFields)) {
                        addresses[index]['address'][pieces[1]] = fieldValue;
                    } else if (-1 !== $.inArray(pieces[1], metaFields)) {
                        addresses[index]['meta'][pieces[1]] = fieldValue;
                    }
                }
            }
        }

        return addresses;
    }
}


/* ================================================================================ */


/**
 * Initialisiert die Karte.
 * @class MapInitializer
 * @param containerId
 * @constructor
 */
function MapInitializer(containerId) {

    /**
    * Initialisiert die Karte.
    * @param zoom
    * @param centerPoint
    * @returns {*}
    */
    this.init = function (zoom, centerPoint, wheelZoom) {
        var map = L.map(containerId, {zoom: zoom, center: centerPoint, scrollWheelZoom: wheelZoom});

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        return map;
    };
}


/* ================================================================================ */


/**
 * Kümmert sich um die Marker und Positionen der Map.
 * @class PositionHandler
 * @constructor
 */
function PositionHandler() {

    /**
    * Fügt der Karte einen Marker hinzu.
    * @param lon
    * @param lat
    * @param text
    * @param customIcon
    * @param map
    */
    this.addPostionToMap = function (lon, lat, text, customIcon, map) {
        // Decode entities:
        var notice      = $('<div>').html(text).text();
        var settings    = {};

        if (customIcon !== '') {
            var iconSettings = L.icon({
                iconUrl: customIcon,
                iconSize: [41,41],
                iconAnchor: [18, 41],
                popupAnchor:  [4, -40]
            });

            // open-close, sonst wird nichts eingefügt.
            L.marker([lat, lon], {icon: iconSettings}).addTo(map).bindPopup(notice).openPopup().closePopup();
        } else {
            // open-close, sonst wird nichts eingefügt.
            L.marker([lat, lon]).addTo(map).bindPopup(notice).openPopup().closePopup();
        }
    };

    /**
    * Setzt den Mittelpunkt der Karte.
    * @param coordinates
    * @param zoom
    * @param map
    */
    this.setMapCenter = function (coordinates, zoom, map) {
        var count = coordinates.length;
        var lon = 0;
        var lat = 0;

        for (var cor in coordinates) {
            if (coordinates.hasOwnProperty(cor)) {
                lon += parseFloat(coordinates[cor][0]);
                lat += parseFloat(coordinates[cor][1]);
            }
        }

        lon = lon / count;
        lat = lat / count;

        map.setView([lat, lon], zoom);
    };
}


/* ================================================================================ */


/**
 * Kümmert sich um die Verarbeitung der Adressen.
 * @class AdressHandler
 * @constructor
 */
function AdressHandler() {

    /**
    * Array mit den Koordinaten der einzelnen Marker, für die Berechnung des Mittelpunkts der Karte.
    * @type {Array}
    */
    var coordinates = [];

    /**
    * Formatier die Adresse für die Umwandlung in die Koordinaten.
    * @param address
    * @returns {string}
    */
    function formatAdressforQuery(address) {
        var place  = '';

        for (var fieldName in address) {
            if (address.hasOwnProperty(fieldName)) {
                place += address[fieldName] + ' ';
            }
        }

        if (0 !== place.length) {
            place = place.substring(0, place.length - 1);
        }

        return place;
    }

    /**
    * Lädt die Koordinaten der übergebenen Adresse.
    * @param address
    * @param map
    */
    function loadCoordinates(map, address) {
        var format  = 'json';
        var place  = formatAdressforQuery(address['address']);

        if ('' !== place) {
            $.ajax({
                url: 'https://nominatim.openstreetmap.org/search',
                method: 'get',
                data: {'q': place, 'format': format, 'addressdetails': 1},
                async: false,
                success: function (results) {
                    if (typeof (results) == 'object' && results.length > 0) {
                        var lon        = results[0].lon;
                        var lat        = results[0].lat;
                        var notice      = address['meta']['notice'];
                        var PosHandler  = new PositionHandler();
                        var marker      = '';

                        if (address['meta']['marker'] !== undefined && address['meta']['marker'][0] !== undefined) {
                            marker = address['meta']['marker'][0];
                        }

                        PosHandler.addPostionToMap(lon, lat, notice, marker, map);
                        coordinates.push([lon, lat]);  // Koordinaten für Berechnung des Mittelpunkt speichern.
                    }
                }
            });
        }
    }

    /**
    * Ruft das Laden der Koordinaten für jede Adresse einzeln auf.
    * @param addresses
    * @param map
    * @param zoom
    */
    this.generateLocations = function (map, addresses, zoom) {
        for (var index in addresses) {
            if (addresses.hasOwnProperty(index) &&
                addresses[index].hasOwnProperty('address') &&
                addresses[index]['address'] !== null
            ) {
                loadCoordinates(map, addresses[index]);
            }
        }

        var PosHandler = new PositionHandler();
        PosHandler.setMapCenter(coordinates, zoom, map);
    }
}


/* ================================================================================ */


/**
 * Funktion für die Initialisierung der Karte.
 * @param containerId
 * @param myConfig
 */
function loadOsmScript(containerId, myConfig, elem) {
    var osmcontainer    = $('#' + containerId);
    var Sorter          = new AddressesSorter(myConfig);
    var addresses      = Sorter.sort();
    var zoom            = myConfig['map_zoom'];
    var defaultCenter  = [52.516270, 13.377688];  // Default-Center: Brandenburger Tor!
    var cookieExpires  = myConfig['map_confirmation'];
    var wheelZoom      = myConfig['wheel_zoom'];

    if (cookieExpires === undefined) {
        cookieExpires = 10; // Vorgabewert für die Ablaufzeit der Cookies
    }

    if (zoom === undefined || zoom > 18) {
        // Default für die Zoomstufe setzen, wenn kein Wert gefunden wurde oder die Zoomstufe zu groß ist!
        zoom = 15
    }

    if (elem !== null && elem !== undefined) {
        Cookies.set('ctsosmclicked', '1', { expires: parseInt(cookieExpires) });
    }

    if (Cookies.get('ctsosmclicked') === '1') {
        osmcontainer.empty();
        var Initializer = new MapInitializer(containerId);
        var map = Initializer.init(zoom, defaultCenter, wheelZoom);
        var AdressHand = new AdressHandler();
        AdressHand.generateLocations(map, addresses, myConfig['map_zoom']);
    }
}

---

@Georg Wir haben den contao-themes-shop.de von der Familie Kampmeier übernommen. Support und Weiterentwicklung sind somit gesichert. Ich bin diese Woche noch im Urlaub. Falls keine Lösung findest, melde dich gerne nächste Woche.

Gruß Stefan


Gesendet von iPhone mit Tapatalk