Switch branches/tags
Nothing to show
Find file History
Latest commit 068326d Sep 13, 2016
Permalink
..
Failed to load latest commit information.
data update data Jan 3, 2016
js first commit Dec 11, 2015
maps first commit Dec 11, 2015
README.md Update README.md Sep 13, 2016
index.html Update index.html Sep 13, 2016
screenshot.png add sreenshot Dec 11, 2015

README.md

Interaktive PLZ Karte in HTML5 & jQuery

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

Demo

Beispiel anzeigen

Interaktive PLZ Karte

Datenquelle & Format der verwendeten PLZ-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 PLZ-Karten 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