Ein Update zu meinem Artikel von neulich: „The Events Calendar“ mit OpenStreetMaps statt Google Maps.

Es hat quasi alles geklappt mit der im Artikel beschriebenen OpenStreetMap. Nur lagen manche Marker und Adressen extrem daneben, z.B. mitten in den USA, westlich von Sardinien im Meer oder auch in Zentralafrika. Dabei liegen die Orte eindeutig im schönen Rheinhessen. Was stimmt hier also nicht?

Das Problem trat sowohl auf der im ersten Artikel beschriebenen Events-Calendar-Seite als auch bei einer anderen WebSite auf, die die Adressen einfach aus einer selbst erstellten Dartenbank holt. Egal was man tut…es ist immer irgendwas nicht ok.

Offensichtlich ist es so, daß der Geocoder von Google Maps (also der Service, der aus einr Adresse Koordinaten macht) in letzter Zeit unzuverlässig geworden ist. Etwa seit Mai 2018, als dort zwingend Kreditkartendaten und strengere Regeln für die Benutzung eingeführt wurden (wieder ein Grund mehr, auf OpenStreetMaps umzustellen).

Deshalb habe ich folgende Lösung programmiert:

• Ein neues Custom Field erstellt, und „latlng“ genannt.

Dazu muß man rechts oben im WP-Admin auf Optionen gehen und „Benutzerdefinierte Felder“ anwählen. Beim ersten Mal muß man „neues Feld“ auswählen und ihm den Namen „latlng“ geben. Beim nächsten Mal existiert latlng dann schon, das muß man dann in der Liste auswählen.

• Jetzt für einen betroffenen, falsch angezeigten Ort die richtigen Koordinaten herausfinden, auf https://www.openstreetmap.org.

Links oben den Ort suchen. In der dann erscheindenden Karte die richtige Adresse lokalisieren, dann mit der rechten Maustaste dahin klicken und „Adresse anzeigen“ wählen. Jetzt erscheinen links die Koordinaten. Toll, gell?

• Die Koordinaten komplett kopieren (etwa „49.7427,8.2378“), mitsamt dem Komma, und in das Feld latlng eintragen. Seite / Beitrag dann speichern.

Adresse stimmt jetzt, jetzt nur noch die Anzeige von Adresse auf Koordinaten umstellen, wenn dieses Feld gefüllt ist.

• Die in der functions.php vorhandene Funktion, die den [leaflet-map]-Shortcode erzeugt, etwas erweitern.

Ich gehe mal davon aus, daß die Adresse bekannt ist, etwa in der Art oder so ähnlich:

$address .= $strasse." ".$hausnummer.", ".$plz." ".$ort;

dann wäre die Version mit funktionierendem Geocoder z.B. folgende:

$sc  = "[leaflet-map address='".$address."' tileurl='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png' zoom=14]";
$sc .= ' [leaflet-marker address="'.$address.', DE" '.$icon.']';
$sc .= $address.'[/leaflet-marker]';

muß jetzt geändert werden zu

$latlng = get_post_meta($post->ID, 'latlng');
if ($latlng) {
$latlng = explode(",", $latlng[0]);
$sc = '[leaflet-map lat='.$latlng[0].' lng='.$latlng[1].' tileurl="https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png" zoom=14]';
$sc .= ' [leaflet-marker lat="'.$latlng[0].'" lng="'.$latlng[1].'" '.$icon.']';
$sc .= esc_html($address);
$sc .= '[/leaflet-marker]';
}
else {
$sc = "[leaflet-map address='".$address."' tileurl='https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png' zoom=14]";
$sc .= ' [leaflet-marker address="'.$address.', DE" '.$icon.']';
$sc .= $address.'[/leaflet-marker]';
}

Jetzt stimmts 🙂

Ein sehr beliebtes Kalender-Plugin ist The Events Calendar…auch schon in der kostenlosen Basisversion wunderbar und meistens ausreichend.

Man kann auch automatisch Google Maps einbinden. Das kann aber datenschutzrechtlich problematisch sein, denn eingebundene GoogleMaps benutzen viele viele Cookies und viele Tracker, um den Besucher der WebSite zu identifizieren und nachzuverfolgen. Das sollte man abschalten!

Eine Möglichkeit, OpenStreetMaps statt Google Maps einzubinden sucht man vergeblich. Auch der Support vom Events Calendar ist da eher lustlos: „Danke für deine Anfrage. Im Moment machen wir ganz viele Sachen, und evtl. ist dieses Feature auch schon dabei. Ansonsten schreib das doch einfach auf die Wishlist. Wir melden uns bei dir wann wir uns dransetzen.“ Tja…das Thema ist seit 4 Jahren in der Wishlist, und niemand hat sich je drangesetzt.

Also…setze ich mich halt mal dran 🙂

1. Zuerst braucht man natürlich einen installierten  The Events Calendar mit mindestens einer Veranstaltung, die eine Adresse hat („Schnitzelbacher Straße 77a, 66321 Schmutzweiler“ z.B.). Jetzt im Admin-Bereich beiVeranstaltungen -> Einstellungen -> Allgemein -> Karteneinstellungen -> Google Karte aktivieren -> ankreuzen.Klar, dann kommt jetzt eine GoogleMap, aber die ist auch gleich wieder weg.
2. Jetzt das Plugin Leaflet Map installieren. Das bindet wunderschöne OpenStreetMaps ein, mit wählbarem Stil (Wasserfarben etc.) und ist ganz leicht mit [shortcode] steuerbar.
3. Jetzt muß man dem Events Calender nur noch sagen, daß er einen anderen Atlas nehmen soll:
   1. Die Datei the-events-calendar\src\views\modules\map.php finden
   2. und so wie oben in der Datei beschrieben  ins Theeme-Verzeichnis kopieren
      [your-theme]/tribe-events/modules/map.php
   3. Jetzt nur noch im Code ein paar Zeilen ändern. Das hier:
      
      $style = apply_filters( 'tribe_events_embedded_map_style', "height: $height; width: $width", $index );
      ?>
      <div id="tribe-events-gmap-<?php echo esc_attr( $index ) ?>" style="<?php echo esc_attr( $style ) ?>" aria-hidden="true"></div><!-- #tribe-events-gmap-<?php esc_attr( $index ) ?>

      ändern in

      $address = tribe_get_address( $venue_id ).", ".tribe_get_zip( $venue_id )." ".tribe_get_city( $venue_id ).", ".tribe_get_country( $venue_id );
$shortcode  = '[leaflet-map address="'.$address.'" zoom="15" fit_markers="1"]';
echo do_shortcode($shortcode);
?>


Fertig 🙂 Wer will kann bei der Karte jetzt noch mit diversen Shortcodes Aussehen und Verhalten ändern…