GoogleMaps integration: Refactoring: JavaScript so weit es geht aus d…

…em PHP Source entfernt und in js/einsatzverwaltung-gmaps.js ausgelagert.

[einsatzliste] um Parameter googlemaps=ja/nein erweitert, um am Seitenanfang eine Karte mit allen Einsätzen anzuzeigen.

src/Frontend/ReportList.php

@@ -107,6 +107,13 @@ class ReportList
  */
  private $splitMonths;
 
+ /**
+ * Gibt an, ob eine Google-Map mit den Einsätzen angezeigt wird
+ *
+ * @var bool
+ */
+ private $showMap;
+
  /**
  * In diesem String wird der HTML-Code für die Liste aufgebaut
  *
@@ -151,6 +158,7 @@ private function constructList($reports, $args)
  // Argumente auswerten
  $defaults = array(
  'splitMonths' => false,
+ 'showMap' => false,
  'columns' => array(),
  'linkToVehicles' => $this->options->getBoolOption('einsatzvw_list_fahrzeuge_link'),
  'linkToAddForces' => $this->options->getBoolOption('einsatzvw_list_ext_link'),
@@ -159,11 +167,13 @@ private function constructList($reports, $args)
  'showHeading' => true,
  'compact' => false,
  );
+
  $parsedArgs = wp_parse_args($args, $defaults);
 
  // Variablen setzen
  $this->compact = (bool) $parsedArgs['compact'];
  $this->splitMonths = (bool) $parsedArgs['splitMonths'] && !$this->compact;
+ $this->showMap = (bool) $parsedArgs['showMap'] && !$this->compact;
  $this->columns = $this->utilities->sanitizeColumnsArray($parsedArgs['columns']);
  $this->numberOfColumns = count($this->columns);
  $this->linkToVehicles = (true === $parsedArgs['linkToVehicles']);
@@ -185,6 +195,21 @@ private function constructList($reports, $args)
  $this->beginTable(false);
  $this->insertTableHeader();
  }
+
+ if( $this->options->isGMapActivate() != "" && $this->showMap) {
+ $latLon = explode(",", $this->options->getGMapDefaultPos() );
+ $mapstring = "<style>#map-canvas {height: 300px; margin-bottom: 30px; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);}</style>";
+ $mapstring .= "<div class='einsatzliste-map'>";
+ $mapstring .= "<div id='map-canvas'></div>";
+ $mapstring .= "</div>";
+ $mapstring .= "<div style='clear:both'></div>";
+ $mapstring .= "<script>";
+ $mapstring .= "google.maps.event.addDomListener(window, 'load', initializeMap(" . $latLon[0] . ", " . $latLon[1] . ", 10));";
+ $mapstring .= "</script>";
+
+ echo "$mapstring";
+ }
+
  /** @var IncidentReport $report */
  foreach ($reports as $report) {
  $timeOfAlerting = $report->getTimeOfAlerting();
@@ -265,6 +290,7 @@ private function beginTable($year)
  if ($this->showHeading && $year !== false) {
  $this->string .= '<h2>Eins&auml;tze '.$year.'</h2>';
  }
+
  $this->string .= '<table class="' . self::TABLECLASS . '"><tbody>';
  }
 
@@ -320,7 +346,17 @@ private function insertRow($report)
  }
  $this->string .= '</td>';
  }
+ if( $this->options->isGMapActivate() && $this->showMap && $report->getGmapsLocation() != "") {
+ $latLon = explode(",", $report->getGmapsLocation());
+ $timeOfAlerting = $report->getTimeOfAlerting();
+ $infoContent = '<h1>' . get_the_title($report->getPostId()) . '</h1><p>' . $timeOfAlerting->format('d.m.Y H:i') . '</p><p>' . $report->getLocation() . '</p>';
+ $marker = '<script>';
+ $marker .= 'addMarker( ' . $latLon[0] . ', ' . $latLon[1] . ' , "' . $infoContent . '" )';
+ $marker .= '</script>';
+ $this->string .= $marker;
+ }
  $this->string .= '</tr>';
+
  }
 
  /**

src/einsatzverwaltung-admin.php

@@ -132,7 +132,14 @@ public function enqueueEditScripts($hook)
  Core::VERSION
  );
 
- wp_enqueue_script( 'einsatzvw_GoogleMap' );
+ if($this->options->isGMapActivate())
+ {
+ wp_enqueue_script( 'einsatzvw_GoogleMap' );
+ wp_enqueue_script(
+ 'einsatzverwaltung-gmap',
+ $this->core->scriptUrl . 'einsatzverwaltung-gmaps.js'
+ );
+ }
  }
 
  /**
@@ -262,70 +269,20 @@ private function echoGMap($location)
  }
  else
  {
- $latLon = array("","");
+ $latLon = explode(",",$this->options->getGMapDefaultPos());
  }
- $DeflatLon = explode(",",$this->options->getGMapDefaultPos());
 
  echo '<tr><td>';
  echo '<label for="einsatzverwaltung_location">Koordinate</label>';
  echo '</td><td style="width: 100%;">';
  echo '<input type="text" id="einsatzverwaltung_location" name="einsatzverwaltung_location" value="' . $location . '" size="20" readonly/>';
- echo '<a class="button" id="einsatzverwaltung_get_location"><i class="fa fa-map-marker"></i></a>';
+ echo '<a class="button" id="einsatzverwaltung_get_location" onClick="geocodeAddress(document.getElementById(\'einsatzverwaltung_einsatzort\').value , \'einsatzverwaltung_location\')"><i class="fa fa-map-marker"></i></a>';
  echo '</td></tr>';
  echo '<tr><td colspan="2">';
  echo '<div id="map-canvas" style="height: 400px;"></div>';
  echo '</td></tr>';
  echo '<script>';
- echo 'function initializeMap() {';
- echo 'var defLat = "' . $DeflatLon[0] . '";';
- echo 'var defLon = "' . $DeflatLon[1] . '";';
- echo 'var latlon = new google.maps.LatLng(defLat, defLon);';
- echo 'var mapOptions = {';
- echo 'zoom: 13,';
- echo 'center: latlon,';
- echo 'scaleControl: true';
- echo '};';
- echo 'map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);';
- echo 'var lat = "' . $latLon[0] . '";';
- echo 'var lon = "' . $latLon[1] . '";';
- echo 'if( lat != "" && lon != "" ) {';
- echo 'setMarker( new google.maps.LatLng(lat, lon), map );';
- echo '}';
- echo 'var geocoder = new google.maps.Geocoder();';
- echo 'document.getElementById("einsatzverwaltung_get_location").addEventListener("click", function() {';
- echo 'var address = document.getElementById("einsatzverwaltung_einsatzort").value;';
- echo 'if( address ) {';
- echo 'geocodeAddress(geocoder, map, address);';
- echo '} else {';
- echo 'alert("Keine Addresse angegebenen: " + status);';
- echo '}';
- echo '});';
- echo '}';
- echo 'function setMarker( position, resultsMap ) {';
- echo 'var marker = new google.maps.Marker({';
- echo 'map: resultsMap,';
- echo 'position: position,';
- echo 'draggable: true,';
- echo 'scaleControl:true';
- echo '});';
- echo 'resultsMap.setCenter(marker.getPosition());';
- echo 'document.getElementById("einsatzverwaltung_location").value=marker.getPosition().toUrlValue();';
- echo 'marker.addListener("drag", function(){';
- echo 'document.getElementById("einsatzverwaltung_location").value=marker.getPosition().toUrlValue();';
- echo '});';
- echo '}';
- echo 'function geocodeAddress(geocoder, resultsMap, address) {';
- echo 'geocoder.geocode({"address": address}, function(results, status) {';
- echo 'if (status === google.maps.GeocoderStatus.OK) {';
- echo 'var location = results[0].geometry.location;';
- echo 'setMarker( location, resultsMap);';
- echo 'resultsMap.setZoom(16);';
- echo '} else {';
- echo 'alert("Konnte Position nicht ermitteln: " + status);';
- echo '}';
- echo '});';
- echo '}';
- echo 'google.maps.event.addDomListener(window, "load", initializeMap);';
+ echo ' google.maps.event.addDomListener(window, "load", initializeMap(' . $latLon[0] . ', ' . $latLon[1] . '));';
  echo '</script>';
  }
 

src/einsatzverwaltung-frontend.php

@@ -69,7 +69,15 @@ public function enqueueStyleAndScripts()
  Core::VERSION
  );
  wp_add_inline_style('einsatzverwaltung-frontend', ReportList::getDynamicCss());
- wp_enqueue_script( 'einsatzvw_GoogleMap' );
+
+ if($this->options->isGMapActivate())
+ {
+ wp_enqueue_script( 'einsatzvw_GoogleMap' );
+ wp_enqueue_script(
+ 'einsatzverwaltung-gmap',
+ $this->core->scriptUrl . 'einsatzverwaltung-gmaps.js'
+ );
+ }
  }
 
  /**
@@ -164,36 +172,16 @@ public function getEinsatzberichtMap($post)
  if($this->options->isGMapActivate() && $location)
  {
  $latLon = explode(",",$location);
+
  $mapstring = "<style>#map-canvas {height: 300px; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);}</style>";
- //$mapstring .= "<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyD2R-hm2pLaedH1YOlBs2uQwQn8xfK_hgo'></script>";
- $mapstring .= "<script>";
- $mapstring .= "var map;";
- $mapstring .= "function initialize() {";
- $mapstring .= " var latLon = new google.maps.LatLng(" . $latLon[0] . "," . $latLon[1] . ");";
- $mapstring .= " var mapOptions = {";
- $mapstring .= " zoom: 13,";
- $mapstring .= " center: latLon";
- $mapstring .= " };";
- $mapstring .= " map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); ";
- $mapstring .= " var marker = new google.maps.Marker({";
- $mapstring .= " map: map,";
- $mapstring .= " position: latLon";
- $mapstring .= " });";
- $mapstring .= " var contentString = '" . $report->getLocation() . "';";
- $mapstring .= " var infowindow = new google.maps.InfoWindow({";
- $mapstring .= " content: contentString";
- $mapstring .= " });";
- $mapstring .= " marker.addListener('click', function() {";
- $mapstring .= " infowindow.open(map, marker);";
- $mapstring .= " });";
- $mapstring .= " infowindow.open(map, marker);";
- $mapstring .= "}";
- $mapstring .= "google.maps.event.addDomListener(window, 'load', initialize);";
- $mapstring .= "</script>";
  $mapstring .= "<div class='einsatzliste-map'>";
  $mapstring .= "<div id='map-canvas'></div>";
  $mapstring .= "</div>";
  $mapstring .= "<div style='clear:both'></div>";
+ $mapstring .= "<script>";
+ $mapstring .= "google.maps.event.addDomListener(window, 'load', initializeMap(" . $latLon[0] . ", " . $latLon[1] . "));";
+ $mapstring .= "addMarker( " . $latLon[0] . ", " . $latLon[1] . ", '" . $report->getLocation() . "', true )";
+ $mapstring .= "</script>";
 
  return "<p>$mapstring</p>";
  }
@@ -239,8 +227,13 @@ public function renderContent($content)
 
  $header = $this->getEinsatzberichtHeader($post, true, true);
  $content = $this->prepareContent($content);
+ $map = "";
+ if($this->options->isGMapActivate())
+ {
+ $map = $this->getEinsatzberichtMap($post);
+ }
 
- return $header . $this->getEinsatzberichtMap($post) . '<hr>' . $content;
+ return $header . $map . '<hr>' . $content;
  }
 
 

src/einsatzverwaltung-shortcodes.php

@@ -60,6 +60,7 @@ public function einsatzliste($atts)
  'jahr' => $currentYear,
  'sort' => 'ab',
  'monatetrennen' => 'nein',
+ 'googlemaps' => 'nein',
  'link' => 'title',
  'limit' => -1,
  'options' => ''
@@ -102,6 +103,7 @@ public function einsatzliste($atts)
  $reports,
  array(
  'splitMonths' => ($shortcodeParams['monatetrennen'] == 'ja'),
+ 'showMap' => ($shortcodeParams['googlemaps'] == 'ja'),
  'columns' => $this->options->getEinsatzlisteEnabledColumns(),
  'columnsWithLink' => $columnsWithLink,
  'linkEmptyReports' => $linkEmptyReports,

src/js/einsatzverwaltung-gmaps.js

@@ -0,0 +1,63 @@
+var map;
+var marker
+
+function initializeMap(lat, lon, zoom) {
+ if(!zoom) {
+ zoom = 13;
+ }
+ var latLon = new google.maps.LatLng(lat, lon);
+ var mapOptions = {
+ zoom: zoom,
+ center: latLon
+ };
+ map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
+}
+
+function setAdminMarker( position, locationField ) {
+ if (marker && marker.setPosition) {
+ // if the marker already exists, move it (set its position)
+ marker.setPosition(position);
+ } else {
+ marker = new google.maps.Marker({
+ map: map,
+ position: position,
+ draggable: true,
+ scaleControl:true
+ });
+ }
+ map.setCenter(marker.getPosition());
+ document.getElementById(locationField).value=marker.getPosition().toUrlValue();
+ marker.addListener("drag", function(){
+ document.getElementById(locationField).value=marker.getPosition().toUrlValue();
+ });
+}
+
+function geocodeAddress( address, locationField ) {
+ var geocoder = new google.maps.Geocoder();
+ geocoder.geocode({"address": address}, function(results, status) {
+ if (status === google.maps.GeocoderStatus.OK) {
+ var location = results[0].geometry.location;
+ setAdminMarker( location, locationField );
+ map.setZoom(16);
+ } else {
+ alert("Konnte Position nicht ermitteln: " + status);
+ }
+ });
+}
+
+function addMarker( lat, lon , infoContent, showContent ) {
+ var latLon = new google.maps.LatLng(lat, lon);
+ var newMarker = new google.maps.Marker({
+ map: map,
+ position: latLon,
+ });
+ var infowindow = new google.maps.InfoWindow({
+ content: infoContent
+ });
+ newMarker.addListener('click', function() {
+ infowindow.open(map, newMarker);
+ });
+ if(showContent) {
+ infowindow.open(map, newMarker);
+ }
+}