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
(ist aber wohl kein API Property)