Custom-Tools zur Kartengstaltung
Dieser Trick-Artikel ist als ein Sammelbecken für Custom-Tools gedacht. Es muss ja nicht jeder das Rad neu erfinden. Wenn ihr was Tolles habt: bitte gerne teilen.
Lies mich
Geolocation liefert nur wenige fest installierte JS-Tools mit aus, über die Karten-Elemente via Leaflet eingeblendet werden können
position
: einen einfachen roten Marker.marker
: eine Liste einfacher, blauer Marker.bounds
: rechteckiger Bereich, der die initial angezeigte Karte definiert.geojson
: ein rudimentäres geoJson-Tool
Aber: das System kann einfach erweitert werden, um die vielen verschiedenen individuellen Anforderungen passgenau zu bedienen.
Wie, dass ist in der Tool-Dokumentation
beschrieben. Im JS-Source-Code install/geolocation.js
findet man die Default-Tools; in docs/example/geolocation.js
stehen die Beispiele für Custom-Tools aus der Dokumentation, darunter
center
: Kartenmittelpunkt/Zoom-Level; ohne Marker, als Alternative zubounds
.nrmarker
: Eine Markerliste (marker
), aber mit Nummer im Marker.
Einzel-Marker mit Popup-Text
Kurzbeschreibung
Im Grunde handelt es sich um einen Position-Marker (Tool: position
). Die Klasse Geolocation.Tools.Position
wird um
einen Popup-Text erweitert. Es reicht aus, die SetValue-Methode zu überschreiben. Wurde der Position-Marker erfolgreich
angelegt (gültige Koordinaten), hängt die Methode den Popup-Text an den Marker.
Der PHP-Datensatz ist
$dataset = [
[breitengrad,längengrad], // übliche Koordinatenangabe
popup_text, // optionaler Text; ohne Text ein normaler Marker ohne Popup
marker_farbe // optional die Markerfarbe; Default: Geolocation.default.positionColor
];
Der JS-Code für das Tool
Geolocation.Tools.PositionPlus = class extends Geolocation.Tools.Position{
setValue( dataset ) {
// keine Koordinaten => Abbruch
if( !dataset[0] ) return this;
// GGf. Default-Farbe temporär ändern, normalen Position-Marker erzeugen
let color = Geolocation.default.positionColor;
Geolocation.default.positionColor = dataset[2] || Geolocation.default.positionColor;
super.setValue(dataset[0]);
Geolocation.default.positionColor = color;
// Wenn angegeben: Text als Popup hinzufügen
if( this.marker && dataset[1] ) {
this.marker.bindPopup(dataset[1]);
this.marker.on('click', function (e) {
// NOTE: ja, ist so - isPopupOpen liefert true wenn geschlossen.
if( this.isPopupOpen() ) {
this.openPopup();
} else {
this.closePopup();
}
});
}
return this;
}
};
Geolocation.tools.positionplus = function(...args) { return new Geolocation.Tools.PositionPlus(args); };
Beispiel:
use Geolocation\Mapset;
use Geolocation\Calc\Box;
use Geolocation\Calc\Point;
$konstanz = Point::byLatLng([47.658968, 9.178456]);
$bounds = Box::byInnerCircle($konstanz,5000);
echo Mapset::take()
->dataset('bounds',$bounds->latLng())
->dataset('positionplus',$konstanz->latLng())
->parse();
Markerliste mit Popup-Text
Kurzbeschreibung
Im Grunde handelt es sich um eine Marker-Liste (Tool: marker
). Die Klasse Geolocation.Tools.Marker
wird um Popup-Texte je Marker erweitert. Es reicht aus, die SetValue-Methode zu überschreiben. Wurde ein
Marker erfolgreich angelegt (gültige Koordinaten), hängt die Methode den Popup-Text an den Marker.
Der PHP-Datensatz ist
$dataset = [
[
[breitengrad,längengrad], // übliche Koordinatenangabe
popup_text, // optionaler Text; ohne Text ein normaler Marker ohne Popup
marker_farbe // optional die Markerfarbe; Default: Geolocation.default.markerColor
],
...
];
Der JS-Code für das Tool
Geolocation.Tools.MarkerPlus = class extends Geolocation.Tools.Marker{
setValue( markerArray ) {
if( this.map ) {
let map = this.map;
this.remove();
this.map = map;
}
this.marker = [];
markerArray.forEach( (data) => {
let pos = L.latLng( data[0] );
if( !pos ) return;
let marker = L.marker( pos );
if( !marker ) return;
marker.setIcon( Geolocation.svgIconPin( data[2] || Geolocation.default.markerColor ) );
if( data[1] ) {
marker.bindPopup(data[1]);
marker.on('click', function (e) {
// NOTE: ja, ist so - isPopupOpen liefert true wenn geschlossen.
if( this.isPopupOpen() ) {
this.openPopup();
} else {
this.closePopup();
}
});
}
this.marker.push( marker );
} );
if( this.map ) this.show( this.map );
return this;
}
};
Geolocation.tools.markerplus = function(...args) { return new Geolocation.Tools.MarkerPlus(args); };
Beispiel:
use Geolocation\Mapset;
use Geolocation\Calc\Box;
use Geolocation\Calc\Point;
$konstanz = Point::byLatLng([47.658968, 9.178456]);
$kressbronn = Point::byLatLng([47.586204, 9.560653]);
$friedrichshafen = Point::byLatLng([47.651695, 9.485064]);
$bounds = Box::factory([$konstanz,$friedrichshafen,$kressbronn]);
$marker = [
[$konstanz->latLng(), '<strong>Konstanz:</strong> '.$konstanz->text(Point::DMS),'DarkSeaGreen'],
[$friedrichshafen->latLng(),'<strong>Friedrichshafen:</strong> '.$friedrichshafen->text(Point::DMS),'ForestGreen'],
[$kressbronn->latLng(),'<strong>Konstanz:</strong> '.$kressbronn->text(Point::DMS)],
];
echo Mapset::take()
->dataset('bounds',$bounds->latLng())
->dataset('markerplus',$marker)
->parse();