README.md

Interaktive PLZ Karte in HTML5 & jQuery

Mit diesem Skript-Beispiel können Sie interaktive Postleitzahlenkarten, inklusive Suchergebnis des ausgewählten Gebietes, in Ihre Webseite einbinden. Für die Umsetzung wird keine serverseitige Programmiereung benötigt.

Demo

Beispiel anzeigen

Datenquelle & Format der verwendeten Karten

Die im Codebeispiel verwendeten Karten sind im SVG-Format und können nach Ihren Wünschen ausgetauscht werden. Eine große Auswahl finden Sie auf allen Ortsseiten von suche-postleitzahl.org über den Button "Verfügbare Downloads" - Die Rohdaten stammen von OpenStreetMap und können unter Einhaltung der Lizenz frei genutzt werden.

SVG Karten hinzufügen

Nachdem Sie in unserem PLZ-Verzeichnis Ihre gewünschten SVG-Karten heruntergeladen haben [Anleitung], können Sie diese ggf. umbenennen und in folgenden Ordner verschieben:

|-- plz-karte
  |-- maps
    |-- sachsen.svg
    |-- berlin.svg
  |-- ...

Danach müssen Sie die hinzugefügten Dateien dem Skript bekanntgeben, dazu öffnen Sie die Datei index.html und scrollen zum Scriptbereich:

var _maps = [
    {
        url:    './maps/sachsen.svg',
        name:   'Sachsen'
    },
    {
        url:    './maps/berlin.svg',
        name:   'Berlin'
    }
];

Dort fügen Sie der Array-Liste Ihre Karten hinzu. Die Liste wird der Reihenfolge nach in das Kartenauswahlmenü geladen - name entspricht der Linkbezeichnung im Menü und über den Parameter url wird nach Menüauswahl die angegebene SVG-Karte geladen. Das erste Objekt in der Kartenliste wird direkt beim Anwendungsstart geladen.

Suchergebnisliste

Die Ergebnisliste wird nach einem Klick auf eines der Postleitzahlengebiete angezeigt bzw. aktualisiert. Dieser Bereich wurde, mit kleiner Modifikation, aus dem schon vorhandenen PLZ-Suche Snippet entnommen.

Feedback & Anregungen

Wir würden uns sehr über Fragen und Rückmeldungen freuen

https://github.com/plzTeam/web-snippets/issues