Ronny Schrader

In der modernen Logistik und Auftragsverwaltung sind präzise Karten mit mehreren Aufträgen ein unverzichtbares Werkzeug. Doch was passiert, wenn mehrere Aufträge dieselbe Geoposition teilen? Zu unterscheiden sind diese Marker nur über die Label. Diese zeigen in diesem Projekt die Auftragsnummer an. Ist diese unleserlich, dann ist klar, das liegen mehrere Marker übereinander. Unser jüngstes Projekt konzentrierte sich auf die Visualisierung solcher Szenarien, einschließlich der farblichen Hervorhebung und Gruppierung überlappender Marker sowie der optimierten Datenübertragung an externe Systeme wie FileMaker, in unserem Fall ausschließlich FileMaker.

Herausforderung

Das Ziel war es, eine dynamische Google Maps-Anwendung zu entwickeln, die: 1. Mehrere Aufträge darstellt, auch wenn sie die gleiche Position haben. Gleiche Positionen bedeuten, wir haben die gleichen Geo-Daten bzw. Hausnummer, Straße und PLZ sind identisch. 2. Farbcodierungen für solche „überlappenden“ Marker nutzt, um sie besser erkennbar zu machen. 3. Detaillierte Informationen über jeden Auftrag in einem Infowindow anzeigt. 4. Die optimierte Reihenfolge der Aufträge nahtlos an FileMaker überträgt.

Unsere Lösung

1 Marker-Anpassung für überlappende Geodaten

Wir haben eine Kartenfunktion implementiert, die doppelte Marker an derselben Position erkennt und diese farblich hervorhebt. Dabei haben wir: • Einen blauen Marker für Einzelaufträge verwendet. • Grüne Marker eingeführt, um überlappende Positionen zu kennzeichnen.

Zusätzlich zeigt ein Infowindow bei Klick auf einen Marker alle zugehörigen Auftragsnummern an. Über die angezeigten Auftragsnummer können per Klick, alle relevanten Daten innerhalb von FileMaker aufgerufen werden.

2 Optimierung der Datenübertragung

Wir haben die Datenübertragung so optimiert, dass nur relevante Informationen gesendet werden. Im Vorfeld wurde schon durch ein PHP-Script eine Vorauswahl getroffen. Dieses kann natürlich auch direkt über FileMaker erfolgen: • Origin: Die Startposition wurde durch die echte Auftrags-ID ersetzt. • Waypoints: Es wurden maximal neun Wegpunkte übergeben. • Destination: Das Ziel wurde als letzter Punkt hinzugefügt.

3 Dynamische Gruppierung

Durch die Implementierung einer Map-Datenstruktur wurden überlappende Marker gesammelt und in einem einzigen Marker angezeigt. Der Tooltip zeigt auf Wunsch alle zugehörigen Aufträge an.

Technische Highlights

Marker mit Farbcodierung

const markerColor = location.ids.length > 1 ? '#00FF00' : '#4285F4'; // Grün für mehrere IDs
const markerLabel = location.ids.length > 1 ? 'Mehrere' : location.label;

const marker = new google.maps.Marker({
    position: location.position,
    map: map,
    label: {
        text: markerLabel,
        color: '#000',
        fontSize: '12px',
        fontWeight: 'bold',
    },
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8,
        fillColor: markerColor,
        fillOpacity: 1,
        strokeColor: '#FFF',
        strokeWeight: 2,
        labelOrigin: new google.maps.Point(0, -5),
    },
});

Unser InfoWindows mit mehreren Auftragsnummer:

const contentString = `
    

        Auftragsnummern:

        ${location.ids.map(id => `
            
               Auftrag ${id}
            
        `).join('
')}

        Anlagen:
 ${location.facilities}

    
`;

marker.addListener('click', () => {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
});

Optimierte Reihenfolge an FileMaker senden, dort werden die Daten in Reihenfolge gebracht und können weiter verarbeitet werden.

function sendToFileMaker() {
    if (optimizedOrder.length > 0) {
        const originId = ;
        const updatedOrder = [originId, ...optimizedOrder.slice(1)];
        const filemakerUrl = `fmp://$/Deine Datei?script=DeinFMScript¶m=${encodeURIComponent(updatedOrder.join('\n'))}`;
        window.location.href = filemakerUrl;
    } else {
        alert('Die Route ist noch nicht optimiert. Bitte warten.');
    }
}

Die Datenübergabe erfolgt wie immer in der Art -deine_url_de/maps.php?json=true&origin=52.5212262,13.3340740 &destination=52.5070279,13.345529 &waypoints=52.4897075,13.3290075|52.4902317,13.355636|52.5037865,13.3271369|52.504083,13.3386575&auftrag=24501|24510|24547|24551|24573|24580&facilities=6039|1940|4540|5036|6634|6545 Zusammenstellen der Daten erfolgt über Schleifen, SQL oder Listen die per Referenzen die richtigen Daten enthalten.

Wie in den letzten Beiträgen schon beschrieben, nutzen wir ein WebViewer in FileMaker.

Fazit

Unsere Lösung zeigt, wie smarte Anpassungen in Visualisierungen und Datenübertragungen den Unterschied machen können. Mit farblich abgestimmten Markern, informativen Pop-ups und cleveren Datenstrukturen haben wir nicht nur die Benutzerfreundlichkeit auf ein neues Level gehoben, sondern auch die Effizienz der Prozesse ordentlich gepusht.