Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

SuSchulze · 2012-06-01 08:42:09

Hallo

ich schreib gerade meine Bachelorarbeit(Medieninformatik) in Kooperation eines Vereins der Berliner Industriekultur und erstelle eine Map mit OpenStreetMap auf der verschiedene Routen(farblich getrennt) mit verschiedenen Attraktionen zB Museen, Werke, Restaurants..(durch Ikon getrennt) dargestellt werden sollen.

Momentan bin ich an einem Punkt angekommen bei dem ich nicht weiss wie ich das realisieren soll.
Ich möchte per Checkboxen POIs einblenden bzw. ausblenden gutes Beispiel ist http://wheelmap.org/ so stell ich mir das ca vor.

Jedoch fehlt mir der Ansatz wie ich die Punkte, die ich momentan aus einer Datenbank auslese einschränke.
Ob ich das per css(display:none) über Klassen regeln soll oder if schleifen oder sonst wie.

Hier noch mein Code wie ich momentan die Punkte aus der Datenbank lese und aufrufe.
Bisher hab ich eine Tabelle in der die Punkte mit ihren Koordinaten und Texten sind und eine Tabelle für die Routen mit den zugehörigen IconBildern.
und rufe die addMarker function pro row in der PunkteTabelle auf.

<body>

<?php

include("connect.php");
$query = mysqli_query($db, "SELECT * FROM punkte t2 LEFT JOIN route t1 ON t2.route=t1.id");

$routeT2 = mysqli_query($db, "SELECT * FROM $route")
OR die("Error: ".mysqli_error($db));

$marker = "";

while($row = mysqli_fetch_array($query)) {
	
	$lat = $row['lat'];
	$lon = $row['lon'];
	$name=$row['name'];
	$text=$row['text'];
	$strasse=$row['strasse'];
	$jahr=$row['jahr'];
	$routeP=$row['icon'];
	
		
	$marker .= "addMarker($lon, $lat, \"$name\", \"$text\", \"$strasse\",$jahr, \"$routeP\"); \n";
	
} 
?>

<form action="input_radio.htm">
  <p>Routen wählen:</p>
  <p>
  <?php
  	while($row3 = mysqli_fetch_array($routeT2)){
    	 echo "<input type=\"radio\" name=\"route\" value=".$row3['name']."> <img src=".$row3['icon']."> <br> \n";
    }
   ?>
   </p>
</form>


<div id="map" ></div>

<script type="text/javascript">
var map;


map = new OpenLayers.Map ("map");

map.displayProjection = new OpenLayers.Projection("EPSG:4326");

map.addControl (new OpenLayers.Control.LayerSwitcher({'baseLblTitle':"Capas Base",'dataLblTitle':"Datos"}));

map.addLayer (new OpenLayers.Layer.OSM.Mapnik("Mapnik"));

var markers = new OpenLayers.Layer.Markers('Dummy');

map.addLayer(markers);



//----------------------------------------------------------------------------
//	addMarker-Funktion
//----------------------------------------------------------------------------

function addMarker(lon, lat, name, text, strasse, jahr, routeP){
	
    var lonLat = new OpenLayers.LonLat(lon, lat).
    	transform(new OpenLayers.Projection("EPSG:4326"),
		map.getProjectionObject());
		
    var feature = new OpenLayers.Feature(markers, lonLat);
    
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {'autoSize': true,'maxSize': new OpenLayers.Size(300,200) } );//PopUp
    
    feature.data.popupContentHTML = "<b>" + name + "</b> <br /> <i> " + strasse +"</i> <br />"+ text + "<br /> Im " + jahr + " eröffnet." ;//text
    feature.data.overflow = "auto";
	
    var marker=feature.createMarker();
	
    var icon = new OpenLayers.Icon(routeP); //Bild
    var marker = new OpenLayers.Marker(lonLat, icon);
    

    var markerClick = function(evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);

    markers.addMarker(marker);
	}

	<?php print $marker; ?>

	map.setCenter(new OpenLayers.LonLat(13.41,52.52) // Center of the map 
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
          ), 11 // Zoom level
        );


	</script>
</body>
</html>

Ich bin für jede Art Hilfe Dankbar
SuSchulze

!i! · 2012-06-01 11:26:06

Hallo SuSchulze, herzlich willkommen bei OSM
Das Thema klingt ja spannend, wenn du magst kannst du das auch hier noch eintragen: http://wiki.openstreetmap.org/wiki/Research Der gute Moenk hatte mal vor einiger Zeit etwas ähnliches gemacht für den Tourismus und dabei auf eine PostGIS Datenbank aufgesetzt.

In deinem Fall würde ich vorschlagen, dass du deinen Code etwas besser trennst. Da ist zum einen dann dein HTML Client, der die Darstellung der Layer mit OpenLayers macht und auf der anderen Seite dein Server, der mit PHP Anfragen auf die Datenbank macht. Der Server URL gibst du dann einfach ein Parameter mit, dass anzeigt was du haben willst (etwa connect.php?pois=museen) und der macht dann dafür Suchanfragen und liefert die zurück. So kann man später auch problemlos einen anderen Client (etwa eine App) anschließen.
Du könntest das auch per Styling so machen, dass nur die POIs gemalt werden, die auch aktiviert sind, aber das ist bei großen Datenmengen nicht so schön, weil sehr rechenintensiv.

moenk · 2012-06-01 14:21:11

Moin,

pro POI sollte ein Layer verwendet werden. Hinter jeden Layer liegt dann eine PHP-Datei mit Parameter, der die Daten zu diesem Layer erzeugt. Oder anders: Schließe mich den Worten meines Vorredners an.

YAPIS verwendet z.B. einen GeoRSS-Feed für die Karte: http://yapis.geoclub.de/?id=9&lang=de

Den Code kannst Du so verwenden, der LayerSwitcher ist schon da, nur wirst Du mehrere Layer laden wollen.

Der PHP-Code zum GeoRSS-Feed ist trivial und Google liefert auch Beispiele.

LG,

-moenk

SuSchulze · 2012-06-01 14:31:59

Danke das hört sich schon mal super an.

Muss ich bei der Trennung des Codes etwas beachten?
htmlClient == html + script
server == php und sql
richtig?
Wie kann ich der URL ein Parameter mitgeben?
Kennst du eine gute Seite oder ein Tutorial wo der Aufbau von Webapplikationen erläutert wird?

Vielen Dank

moenk · 2012-06-01 14:52:09

Schulze,

der Client ist fertig, das ist die Seite von YAPIS mit OpenLayers, die kannste Dir klauen, letztlich ist das bei mir auch nur ein Example mit kleinen Änderungen. Musst also nun nur noch auf Server-Seite das was Du da jetzt hast anpassen so dass es GeoRSS rausgibt, in der Art wie hier: http://stackoverflow.com/questions/5645 … eorss-feed

LG,

-moenk

SuSchulze · 2012-06-01 19:47:49

Ok, ich habe schon etwas mehr verstanden. Was mich aber noch beschäftigt bei dem Beispiel von http://wheelmap.org/. Wie funktioniert es das man mehrere Kategorien und "Farben" beliebig kombinieren kann in der Anzeige.

Sie haben es aufgeteilt in grün, gelb, rot, grau und dazu kann man sich beliebig die POI's ein / ausblenden.

Wie 1 Filter mit POI's funktioniert habe ich verstanden und komme hier auch weiter. Aber wie funktioniert das in der Kombination? Habt Ihr eine Idee?

SuSchulze

viw · 2012-06-02 09:31:06

Du musst einfach einen zweiten Filter erstellen und den entstehenden Layer einbinden. Wenn du dann Layer 1 und 2 anschaltest ist es die Kombination und wenn du nur jeweils einen anschaltest ist es keine Kombination sondern einzeln.
Die Farben kannst du über die Attribute ändern. Dafür gibt es sicher JS Variablen und Funktionen die du gezielt in Openlayers ansprechen kannst.

ikonor · 2012-06-03 10:31:40

Ich hab mir aus Interesse mal den wheelmap.org Source angeschaut. Dort wird ein Vector Layer mit BBOX und Filter Strategy für alle POIs verwendet. Alle POIs im Ausschnitt werden im GeoJSON Format übertragen, die Filterung nach Kategorie erfolgt client-seitig. Für jede deaktivierte Kategorie wird ein Filter.Comparison.NOT_EQUAL_TO erzeugt, diese werden über ein Filter.Logical.AND kombiniert.

Zu jedem POI wird die passende Icon URL schon vom Server als Attribut mitgeliefert. Im Style wird das per context Funktion dem externalGraphic zugewiesen, das ginge aber auch einfacher per Attribute Replacement.

Hier noch ein paar Links dazu:
http://openlayers.org/dev/examples/dyna … layer.html
http://forum.openstreetmap.org/viewtopi … 57#p206657
http://docs.openlayers.org/library/feature_styling.html

Gruß,
Norbert

SuSchulze · 2012-07-28 16:35:57

Hey Danke noch mal für eure Hilfe.
Hier noch mal kurz meine Lösung:
Ich hab jetzt mehrere Layer angelegt, die werden mit einem eigenem LayerSwitcher(checkbox) ein- und ausgeblendet, in dem ich per onchange eine Methode aufrufe der ich den Layer und das inputElement übergebe.

Aufgerufene Funktion:

function toggleControl(element,layer){
        		 layer.setVisibility(element.checked);
 }

SuSchulze · 2012-07-28 16:57:15

Aber wie das immer so ist entstehen auch schnell wieder neue Fragen.
Momentan sitz ich an der Darstellung von Netzen bzw Linien.

Ich bin soweit das ich Linien per LineString erzeuge.

so:

        	var style =
        	{
            	strokeColor: "#00FF00",
            	strokeOpacity: 0.7,
            	strokeWidth: 3,
            	pointRadius: 3
        	};
        
        	// Define the line 
        	var points = new Array(
  				new OpenLayers.Geometry.Point(13.390623271265,52.497756730585).transform(epsg4326, epsg900913),
   				new OpenLayers.Geometry.Point(13.406244456567,52.498357636882).transform(epsg4326, epsg900913),
   				new OpenLayers.Geometry.Point(13.418217837608,52.499036912374).transform(epsg4326, epsg900913),
       			new OpenLayers.Geometry.Point(13.427916705406,52.499193666767).transform(epsg4326, epsg900913),
        		new OpenLayers.Geometry.Point(13.441349208151,52.500944052847).transform(epsg4326, epsg900913),
        		new OpenLayers.Geometry.Point(13.444353282249,52.500865678842).transform(epsg4326, epsg900913),
        		new OpenLayers.Geometry.Point(13.449073970115,52.505228285909).transform(epsg4326, epsg900913)
			);
		

        	// create a line feature from a list of points
        	var lineString = new OpenLayers.Geometry.LineString(points);
        	var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style);
			U1.addFeatures([lineFeature]);

Das stellt die U1 in Berlin grob dar.

Mein 1.Problem wenn die LineString in der Karte ist funktionieren meine PopUp Texte von den Markern nicht mehr.
Das heißt beim klicken auf einen Marker passiert nix mehr und wenn ich die Linie ausblende funktioniert es wieder.

Mein 2. Problem ist das die Netze durch ein Formular in die Datenbank eingetragen werden sollen .. das mag so funktionieren bei einfachen Linien(mit wenigen Punkten) aber bei komplexen Netzen wird das schwierig (jeden einzelnen Punkt eintragen).

Welche Möglichkeiten hätte ich noch?
Gibt es sowas das ich ein komplettes Bild als Layer benutzen kann sodass nur ein Bild in die Datenbank geladen wird und das ein einzelner Layer ist der über die Karte gelegt wird an einer bestimmten Position, denk gerade an ein png ? (sollte auch zoombar sein)
Oder ist bei komplexen Daten wie Netzen nur das tracken per GPS-Gerät sinnvoll?

Vielen Dank schon mal im vorraus

SuSchulze · 2012-07-28 17:28:28

Erstes Problem hat sich soebend gelöst. Ich muss erst die Vector Layer adden und dann die Marker dann funktioniert, dass auch mit den PopUp Texten wieder.

ikonor · 2012-07-30 16:14:02

SuSchulze wrote:

Mein 2. Problem ist das die Netze durch ein Formular in die Datenbank eingetragen werden sollen .. das mag so funktionieren bei einfachen Linien(mit wenigen Punkten) aber bei komplexen Netzen wird das schwierig (jeden einzelnen Punkt eintragen).

Kannst Du näher erläutern, was genau das Problem ist?

Meinst Du mit "jeden einzelnen Punkt eintragen" manuell Koordinaten einzugeben? Mit OpenLayers kann man auch grafisch Linien erzeugen.

Besser wäre per Router (z.B. http://www.openrouteservice.org/) eine gpx oder kml Datei je Linie zu erzeugen und diese auf den Server/in die DB zu laden. Wenn das wirklich der Benutzer können soll, dann z.B. per File Upload.

Falls das beschilderte Fußgänger-Routen sind (bzw. werden sollen), die vor Ort nachvollziehbar sind, dann könnten die ja evtl. auch als Routen-Relation in OSM erfasst werden?

SuSchulze wrote:

Welche Möglichkeiten hätte ich noch?
Gibt es sowas das ich ein komplettes Bild als Layer benutzen kann sodass nur ein Bild in die Datenbank geladen wird und das ein einzelner Layer ist der über die Karte gelegt wird an einer bestimmten Position, denk gerade an ein png ? (sollte auch zoombar sein)

Üblicherweise werden Rasterkarten (Bilder) von einem Renderer wie Mapnik auf dem Server erzeugt und als png Kacheln ausgeliefert, einfacher geht es mit Maperitive. Die Grundlage sind dann aber auch Vektordaten.

SuSchulze wrote:

Oder ist bei komplexen Daten wie Netzen nur das tracken per GPS-Gerät sinnvoll?

Bei OSM werden GPS Spuren normalerweise nur als Hintergrund zum "Abmalen" verwendet, die eigentlichen Vektordaten werden im Editor von Hand erfasst.

Gruß,
Norbert

SuSchu · 2012-07-31 09:46:53

Danke, für die Erläuterung.
Ich werd es mal mit dem draw feature ausprobieren,
da ich nicht immer Fußgänger oder Straßen einzeichnen muss.

SuSchu · 2012-07-31 10:04:26

Wie und als was(LineString/MultiLineString/Array an Punkten) bekomme ich die gemalten Punkte bei einem drawFeature?

ikonor · 2012-07-31 12:05:10

SuSchu wrote:

Wie und als was(LineString/MultiLineString/Array an Punkten) bekomme ich die gemalten Punkte bei einem drawFeature?

Hängt vom Handler ab, Handler.Path erzeugt einen LineString. Das DrawFeature erstellt aber immer ein Feature.Vector, das ein Geometry vom entsprechenden Typ enthält.

Die Punkte kann man z.B. so erhalten:

drawFeature.featureAdded=function(feature) {
    console.log(feature.geometry.getVertices().join(', '));
}

Ein Feature kann aber auch in ein bestimmtes Format, z.B. GeoJSON, gewandelt werden, siehe Vector Formats Example

SuSchu · 2012-07-31 13:07:40

LineString ist ja schonmal super.

Es funktioniert auch schonmal so:

for(var key in controls) {
                	controls[key].featureAdded=function(feature) {
   				 		console.log(feature.geometry.getVertices().join(', '));
					}
			controls[key].onComplete=function(feature){
						console.log(feature.geometry.getVertices().join(', '));
					}
}

cool

hmmm aber kann man dann noch eine id bekommen damit man die features unterscheiden kann?

Und ach weißt du ob es ein searchfield gibt für Openstreetmaps, die ich in meine Karte einbinden könnte?
Damit man nicht erst ewig zoomen muss um etwas in die Karte zu zeichnen?

ikonor · 2012-07-31 13:37:32

SuSchu wrote:

hmmm aber kann man dann noch eine id bekommen damit man die features unterscheiden kann?

feature.id (ist aber wohl kein API Property)

SuSchu wrote:

Und ach weißt du ob es ein searchfield gibt für Openstreetmaps, die ich in meine Karte einbinden könnte?
Damit man nicht erst ewig zoomen muss um etwas in die Karte zu zeichnen?

Such mal hier im Forum nach "Nominatim", wurde erst kürzlich wieder erwähnt.

Announcement

#1 2012-06-01 08:42:09

Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#2 2012-06-01 11:26:06

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#3 2012-06-01 14:21:11

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#4 2012-06-01 14:31:59

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#5 2012-06-01 14:52:09

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#6 2012-06-01 19:47:49

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#7 2012-06-02 09:31:06

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#8 2012-06-03 10:31:40

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#9 2012-07-28 16:35:57

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#10 2012-07-28 16:57:15

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#11 2012-07-28 17:28:28

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#12 2012-07-30 16:14:02

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#13 2012-07-31 09:46:53

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#14 2012-07-31 10:04:26

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#15 2012-07-31 12:05:10

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#16 2012-07-31 13:07:40

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

#17 2012-07-31 13:37:32

Re: Industriekultur in Berlin - Punkte ein-und ausblenden über Checkbox

Board footer