Mitgliederkarte für eigenes Forum auf Basis OSM

[wernerz2]

Hi,

ich hoffe mal, dass das Thema, auch wenn es sich nicht um Fehler oder so handelt hier richtig ist.

Ss gibt ja diese schöne Karte hier:
http://usergroups.openstreetmap.de/

Da es für die Mitglieder meines Motorradforum sehr wichtig wäre eine Mitgliederkarte zu haben, bin ich nun auf die Idee gekommen, eine solche Karte wie die obige zu basteln.

nur wie?

Wäre echt nett, wenn mir hier jemand ein paar tips geben könnte, wie ich eine solche karte in ein Forum einbauen kann.
idealerweise so, dass die user selbst ihren Standort eintragen können.

Ich erwarte natürlich nicht, dass mir hier einen den fertigen Code zur Verfügung stellt (wogegen ich natürlich nichts hätte )
aber ein paar Anregungen wie man in eine OSM-Karte Standorte einträgt wären ganz nett.

Die Seiten dann noch in Deutsch, wären die Krönung.

Danke im Voraus

Gruß Werner

[toc-rox (Klaus)]

Möglicherweise bringt dich dies weiter: http://umap.openstreetmap.fr/de/

[wernerz2]

Hi toc-rox,

nach richtiger Benutzung der Suchfunktion bin ich da auch drauf gestoßen.
Dann auch noch auf Leaflet.

Das Problem an allen diesen Lösungen, ich habe noch nichts gefunden, bei dem ich mit Rechten arbeiten kann. Sodass User z.B. ihre eigenen Koordinaten eintragen können, bzw. ich als Admin, Karten mit verschiedenen Ebenen anlegen kann und man die Ebenen abhängig von Rechten sieht.

Trotzdem schon mal Danke.

Gruß Werner

[toc-rox (Klaus)]

Am besten wäre es, wenn du zunächst einmal alle deine Anforderungen beschreibst.

[Harald_Hartmann]

“Rechteverwaltung” ist meistens irgendwas eigen gestricktes … oder man nutzt entsprechende Plugins/Components in Joomla oder WordPress Installationen. Letztendlich muss man ja die “Standorte” ja auch noch irgendwo Speichern, usw. Das Anzeigen mit leaflet dürfte bei der ganzen Geschichte das geringste Problem sein.

[wernerz2]

Hi,
ich habe jetzt schon ziemlich viel gesucht, befürchte aber, dass alle Lösungen die meine Anforderungen erfüllen, mein Programmierhorizont bei weitem übersteigen. Ursprünglich, wollte ich eine Karte mit meinem Forum verknüpfen. Dies hätte aber bedeutet, dass ich ein komplexes Rechtesystem abbilden muss, da ja jeder User nur seinen eigenen Eintrag editieren können soll. Aber ich als Admin müsste als Einträge editieren.

Dann wäre eine zweite Ansicht noch gewünscht gewesen, bei der Gäste zwar Standorte von Mitglieder sehen, aber ohne zusätzliche Daten und dazu noch allgemeine Lokationen mit Metadaten.

Das alles hört sich heftig komplex für mich an, und wie die Erfahrung zeigt, haben alle Entwickler von solchen Mitgliederkarten über kurz oder lang die Pflege aufgegeben, da die permanenten Anpassungen an die Forensoftware dann irgendwann zu viel wird.

Daher bin ich jetzt auf die Idee gekommen, Forendaten und Kartendaten getrennt zu verwalten. mit OSM-karten kann ich mir sicher sein, dass ich eine zukunftsfähige Lösung habe.
Ich baue mir also zwei getrennte Karten:
Variante 1 hat alle Informationen die ich benötige. In den Metadaten zu den Markern ist ein Link auf den User im Forum enthalten. Dazu noch alle anderen Lokationen mit den Metadaten. Diese Karte binde ich in eine Passwort geschützte Seite meines Forums ein.

Variante 2 ist die gleiche Karte, aber mit abgespeckten Daten. Also zwar der Ort, wo ein Mitglied wohnt, aber kein Name oder dergleichen. Diese Karte wird auf der Webseite eingebunden, aber ohne Passwortschutz.

Da ich die Daten nicht händisch auf den beiden Karten pflegen möchte, bräuchte ich ein Datei in der ich die Daten pflege, und die ich dann einfach importieren kann. KML müsste ja dafür gehen. Oder gibt es da was besseres?

Wenn der Ansatz aus Sicht der Profis hier Sinn macht, stellen sich mir folgende Fragen für die Umsetzung:
a) Muss ich für mein Vorhaben die Karten in meine Webseite integrieren, oder kann ich hier auf Online-Karten wie umap oder so zurück greifen? Es muss halt sicher gestellt sein, dass niemand (außer über meinen Forumslink) Zugriff auf die Seite erhält, wegen den Userdaten.
b) Kann man alle über kml importierten Daten auch in einem Rutsch wieder löschen? Ich muss ja vor jedem Import, weil ein neuer User dazu gekommen ist oder sich eine Adresse geändert hat die alten Daten löschen.

Das war es glaube ich schon, oder habe ich noch was vergessen?
Wie ihr an meinen fragen seht, bin ich ziemlicher Laie was Kartendaten angeht.
Schon mal vielen Dank im Voraus für eure Hilfe.

Gruß Werner

[Harald_Hartmann]

@wernerz2

Da ich die Daten nicht händisch auf den beiden Karten pflegen möchte, bräuchte ich ein Datei in der ich die Daten pflege, und die ich dann einfach importieren kann. KML müsste ja dafür gehen. Oder gibt es da was besseres?

1. Würdest du die Daten als Datei auf dem Webspace ablegen, könnte sie auch Jedermann öffentlich einsehen!
2. Du müsstest da schon mit einer Datenbank arbeiten - wenn du eine Umkreissuche anbieten willst, dann sogar eine spezielle! - und dir die Daten jeweils per AJAX Query aus deinem Backend (php, perl, java, was auch immer das dann ist) holen und mit Leaflet anzeigen.
3. KML ist aus Googlezeiten. Mittlerweile hat sich GeoJSON als offenes Format etabliert.

@wernerz2

a) Muss ich für mein Vorhaben die Karten in meine Webseite integrieren, oder kann ich hier auf Online-Karten wie umap oder so zurück greifen? Es muss halt sicher gestellt sein, dass niemand (außer über meinen Forumslink) Zugriff auf die Seite erhält, wegen den Userdaten.

UMap kann das definitiv nicht so in der Tiefe und Breite mit den Berechtigungen, da gibt’s eher nur allgemein Lesen/Schreiben.

@wernerz2

b) Kann man alle über kml importierten Daten auch in einem Rutsch wieder löschen? Ich muss ja vor jedem Import, weil ein neuer User dazu gekommen ist oder sich eine Adresse geändert hat die alten Daten löschen.

Nicht nötig, siehe 1. und 2.

PS: Und wie schon oben mal geschrieben, das mit der Karte und die Daten dort anzeigen ist definitiv das kleinste Problem.

[gormo]

@wernerz2

Ich baue mir also zwei getrennte Karten:
Variante 1 hat alle Informationen die ich benötige. In den Metadaten zu den Markern ist ein Link auf den User im Forum enthalten. Dazu noch alle anderen Lokationen mit den Metadaten. Diese Karte binde ich in eine Passwort geschützte Seite meines Forums ein.

Variante 2 ist die gleiche Karte, aber mit abgespeckten Daten. Also zwar der Ort, wo ein Mitglied wohnt, aber kein Name oder dergleichen. Diese Karte wird auf der Webseite eingebunden, aber ohne Passwortschutz.

Da ich die Daten nicht händisch auf den beiden Karten pflegen möchte, bräuchte ich ein Datei in der ich die Daten pflege, und die ich dann einfach importieren kann. KML müsste ja dafür gehen. Oder gibt es da was besseres?

Ich würde dir auch GeoJSON empfehlen. Da gibts dann auch Online-Editoren für, z.B. geojson.io, da kannst du deine Daten reinpasten, verändern und wieder rauskopieren, und als Datei auf deinen Webspace legen.

Dann die GeoJSON-Datei in Leaflet einlesen und anzeigen. Leaflet hat wirklich gute Tutorials, wie sowas gehen kann.

Zu deiner Zwei-Karten-Lösung würde ich empfehlen, dass du deine full-Karte (mit Forumslinks) als Hauptinstanz nimmst, und die light-Karte daraus automatisch erzeugst. Du musst ja nur Properties aus dem GeoJSON löschen. Das geht mit ein paar Zeilen JavaScript (foreach-Schleife über alle Features, dann jeweils “delete properties[‘geheimeDaten’]”). Siehe ganzer Code unten.

Dann legst du deine light-Karte ebenfalls auf deinen Webspace.

Leaflet kann übrigens für nicht zu große Datenmengen auch “wunderbar” Umkreissuche, siehe ab hier: https://github.com/csessig86/leaflet-markers-within-radius/blob/master/js/script.js#L35 .

Wenn der Ansatz aus Sicht der Profis hier Sinn macht, stellen sich mir folgende Fragen für die Umsetzung:
a) Muss ich für mein Vorhaben die Karten in meine Webseite integrieren, oder kann ich hier auf Online-Karten wie umap oder so zurück greifen? Es muss halt sicher gestellt sein, dass niemand (außer über meinen Forumslink) Zugriff auf die Seite erhält, wegen den Userdaten.

Eigener Webspace.

b) Kann man alle über kml importierten Daten auch in einem Rutsch wieder löschen? Ich muss ja vor jedem Import, weil ein neuer User dazu gekommen ist oder sich eine Adresse geändert hat die alten Daten löschen.

Du hast nach meinem Ansatz ja keine Dinge, die du importieren müsstest. Deine Hauptkarte ist eh immer die aktuellste Version, und die light-Karte schmeißt du jedes Mal weg und machst sie neu, wenn sich die Hauptkarte(=Haupt-Geojson-Daten) ändern.

Hier der ganze Code für das Löschen einzelner Properties aus dem GeoJSON, inclusive Ein- und Ausgabe.
Der eigentliche Teil ist davon nur

jsonIn = JSON.parse($("#inputJSON").val());
for(i=0;i<jsonIn.features.length;i++) {
  $("#deleteProps").val().split(",").forEach(function(delete_this_prop) {
    delete jsonIn.features[i].properties[delete_this_prop];
  });
            
}
$("#outputJSON").text( JSON.stringify(jsonIn, null, 2));

Demo: https://bl.ocks.org/gormo-osm/0fc8904edad6b58a6fa0178ad6b10c92

[wernerz2]

@gormo: man super, das ist ja mal eine Anleitung.
Da werde ich wenn es wieder regnet ja ordentlich was zu tun haben. Jetzt fahr ich erstmal Moped solange das Wetter schön ist.

Daher kann es etwas dauern, bis ich Feedback gebe ob ich es hin bekommen habe, bzw. doofe Fragen stelle, weil ich irgendwo wieder hänge (wie ich mich kenne).

Aber schon mal Daumen hoch für die nette Unterstützung hier.

Danke gruß Werner

[Harald_Hartmann]

Nochmal der deutliche Hinweis: bei gormos Lösung liegt trotzdem die komplette GeoJSON Datei mit ALLEN Daten öffentlich für jeden einseh- und abrufbar auf dem Webserver!

@gormo: du kannst mich gerne berichtigen.

[gormo]

@Harald Hartmann

Nochmal der deutliche Hinweis: bei gormos Lösung liegt trotzdem die komplette GeoJSON Datei mit ALLEN Daten öffentlich für jeden einseh- und abrufbar auf dem Webserver!

Ja, das ist so. Aber ich dachte, er wollte die “große” Datei mit allen Informationen in ein geschütztes Unterverzeichnis legen. Aber ja, klar, die liegt dann da offen rum, und jeder der das Passwort hat, kann mit einem Request alle Daten abziehen.

Das Problem hätte man nicht, wenn man eine Datenbank nutzt.

[wernerz2]

Hi Leute,
bin tatsächlich etwas weiter gekommen.
habe jetzt einige Testdaten in zwei json-Dateien aufgeteilt. (habe mir ein Excel makro geschrieben, dass mir json-kompatible Dateien erzeugt und diese auch bei http://geojsonlint.com/ getestet.)

Soweit schon mal alles OK.
Dann habe ich leaflet auf der Homepage includiert und mir ein karte gebastelt.
Habe dann auch im Internet eine Anleitung gefunden, wie man .json dateien in leaflet einbindet.
Das sieht dann so aus:
Im header:

<script src="http://.../treffen.js" type="text/javascript"></script>
<script src="http://.../user.js" type="text/javascript"></script>

Und dann einfach

        L.geoJson(treffen).addTo(map);
		L.geoJson(user).addTo(map);

Soweit funktioniert das alles.

Aber jetzt habe ich noch zwei offene Baustellen:
a) ich möchte natürlich unterschiedliche Marker für unterschiedliche Gruppen an Punkten, ich habe bisher nur noch keine Möglichkeit gefunden, wie ich den Punkten (so wie ich sie aufrufe) diese Attribute mitgeben kann. Alle Beispiele die ich gefunden habe, beziehen sich immer auf einzelne Marker, nie auf Dateien.
b) Ich habe auch Anleitungen zu overlays und baselayer gefunden. Das funktioniert auch mit den beispielen, aber wie ich einer json-Datei als overlay einbinden kann, habe ich auch noch nirgends gefunden.

Ich weiß auch gar nicht, ob Ihr mir hier weiter helfen könnt, oder ob die Fragen nicht zu spezifisch sind und ich mir ein Leaflet Forum suchen sollte?

Danke schon mal gruß Werner

[fx99]

Bei OpenLayer, ein ähnliches System wie Leaflet kann man mit einer CSV Datei Punkte einbinden.
Der Inhalt der CSV Datei ist so (tab getrennt):
lat lon title description icon iconSize iconOffset

Title und Description sind (html) Texte, die im Popup angezeigt werden, icon ist der Link zu einer Graphik Datei.

Damit kann man sehr einfach und variabel Marker mit Icons und Text anzeigen lassen.

Der Befehl dazu ist
new OpenLayers.Layer.Text( “Orte2017”, { location:“./Kreta2017poiA.txt”})

Bei Leaflet sollte es etwas Ähnliches geben,

siehe z.B. https://github.com/joker-x/Leaflet.geoCSV

[wernerz2]

@fx99: schön wäre es, aber bisher habe ich noch nichts vergleichbares gefunden.
Zur Not müßte ich auf OpenLayer umswitchen, wenn das dort so einfach geht.

[fx99]

Da haben sich unsere Posts überschnitten:
siehe https://github.com/joker-x/Leaflet.geoCSV

[gormo]

@wernerz2

Aber jetzt habe ich noch zwei offene Baustellen:
a) ich möchte natürlich unterschiedliche Marker für unterschiedliche Gruppen an Punkten, ich habe bisher nur noch keine Möglichkeit gefunden, wie ich den Punkten (so wie ich sie aufrufe) diese Attribute mitgeben kann. Alle Beispiele die ich gefunden habe, beziehen sich immer auf einzelne Marker, nie auf Dateien.

Tutorial: http://leafletjs.com/examples/geojson/

Das ist etwas unintuitiv, denn du musst beim Erstellen des JSON-Layers die Funktion “pointToLayer” aufrufen.

@wernerz2

b) Ich habe auch Anleitungen zu overlays und baselayer gefunden. Das funktioniert auch mit den beispielen, aber wie ich einer json-Datei als overlay einbinden kann, habe ich auch noch nirgends gefunden.

Nimm dir das JSON-Layer als Variable und füge es dann über das LayerSwitcher-Control zu.

var jsonLayer = L.geoJSON(...); // ohne "addTo(map)"
var baseLayer = L....;

// das layercontrol zur Map hinzufügen
L.control.layers(baseLayer, [jsonLayer]).addTo(map);

Ich weiß auch gar nicht, ob Ihr mir hier weiter helfen könnt, oder ob die Fragen nicht zu spezifisch sind und ich mir ein Leaflet Forum suchen sollte?

Danke schon mal gruß Werner

Bitte. Motorradleuten die Werner heißen hilft man doch gern

[Harald_Hartmann]

Die Frage ist ja auch, was genau mit

@wernerz2

a) ich möchte natürlich unterschiedliche Marker für unterschiedliche Gruppen an Punkten, ich habe bisher nur noch keine Möglichkeit gefunden, wie ich den Punkten (so wie ich sie aufrufe) diese Attribute mitgeben kann. Alle Beispiele die ich gefunden habe, beziehen sich immer auf einzelne Marker, nie auf Dateien.

gemeint ist.

Wenn du in EINER Datei UNTERSCHIEDLICHE Gruppen an Punkten hast (z.B. Motorrad, Trike, Quad, usw.), dann wirst du wohl oder übel einzeln durch die Punkte iterieren und per Abfrage dem entsprechend (vorher erzeugten) Layer zuordnen müssen.

Wenn du natürlich PRO Gruppe an Punkten auch jeweils EINE einzelne Datei hast/erzeugst, dann wie bei gormo beschrieben.

[wernerz2]

Hi,
was für eine schwere geburt.
Aber jetzt kann ich wie von gormo beschrieben die Dateien einbinden.
Allerdings hat der Layer Aufruf nicht funktioniert. Aber mit der Syntax ging es dann:

	var baseLayers = {
		"Straßen": strassen
	};

	var overlays = {
		"Twin-Treffen": tt,
		"User": benutzer
	};

	L.control.layers(baseLayers, overlays).addTo(map);

jetzt muss ich mir mal die Funktion pointToLayer anschauen, damit ich die marker auf den einzelnen layer auch unterschiedlich einfärben kann, bzw. eigene Marker verwenden kann. Wollte ursprünglich in einer Datei mehrere Styles haben, aber das geht auch mit mehreren Dateien. Das ist kein problem.

@gromo: Ja Hartenholm war geil. Wollte dieses jahr eigentlich auch hin, aber die Preise sind mir etwas zu heftig. Kriege heute als noch gänsehaut wenn ich mir die DVD von damals anschaue.

[wernerz2]

Meine Frage hat sich erledigt.