Tooltip Fenster ändern und POIS an bzw ausschalten

joergi2012 · 2012-02-20 02:13:41

Hi,

ich habe mit Eurer Hilfe den nachfolgenden Script geschrieben, der auch einwandfrei funktioniert. Es gibt aber zwei Dinge, die mich stören:

1. Der Tooltip ist zu groß. Ich benötige zudem nur einen Tooltip, der nur beim überfahren eines POIS erscheint und sich an der Größe des Textes orientiert. Ein Aufruf per Mausklick ist nicht gewünscht. Netzwolf hat so etwas ähnliches programmiert unter http://www.netzwolf.info/kartografie/op … t2_tooltip Aber leider blicke ich da nicht ganz durch

2. Ist es möglich, per Button in der Karte alle Pois an bzw. wieder anzuschalten? Wenn ja, wie!

Danke im voraus für Eure Hilfe

<?php
$lat=51.20418118214776;
$long=7.1737611293792725;
$uk1=$long-0.04200;
$uk2=$lat-0.02700;
$uk3=$long+0.04200;
$uk4=$lat+0.02700;
$ja1 = file_get_contents('http://nominatim.openstreetmap.org/search?viewbox='.$uk1.','.$uk2.','.$uk3.','.$uk4.'&bounded=1&format=json&polygon=0&addressdetails=1&q=schule&limit=999');
$jb1 = json_decode($ja1);
$ja2 = file_get_contents('http://nominatim.openstreetmap.org/search?viewbox='.$uk1.','.$uk2.','.$uk3.','.$uk4.'&bounded=1&format=json&polygon=0&addressdetails=1&q=kindergarten&limit=999');
$jb2 = json_decode($ja2);
$ja3 = file_get_contents('http://nominatim.openstreetmap.org/search?viewbox='.$uk1.','.$uk2.','.$uk3.','.$uk4.'&bounded=1&format=json&polygon=0&addressdetails=1&q=supermarkt&limit=999');
$jb3 = json_decode($ja3);
$a=0;
$anzahl=count($jb1);
while ($a<$anzahl)
{
if ($jb1[$a]->address->school=="")
{
$art="Schule";
}
else
{
$art=$jb1[$a]->address->school;
}
$ic1=$jb1[$a]->lat."\t".$jb1[$a]->lon."\t \t".$art."\tsymbole/school.png\t32,37\t-16,-18\n";
$schule=$schule.$ic1;
$a++;
}
$a=0;
$anzahl=count($jb2);
while ($a<$anzahl)
{
if ($jb2[$a]->address->kindergarten=="")
{
$art="Kindergarten";
}
else
{
$art=$jb2[$a]->address->kindergarten;
}
$ic1=$jb2[$a]->lat."\t".$jb2[$a]->lon."\t \t".$art."\tsymbole/kgarten.png\t32,37\t-16,-18\n";
$kgarten=$kgarten.$ic1;
$a++;
}
$a=0;
$anzahl=count($jb3);
while ($a<$anzahl)
{
if ($jb3[$a]->address->supermarket=="")
{
$art="Supermarkt";
}
else
{
$art=$jb3[$a]->address->supermarket;
}
$ic1=$jb3[$a]->lat."\t".$jb3[$a]->lon."\t \t".$art."\tsymbole/smarket.png\t32,37\t-16,-18\n";
$smarkt=$smarkt.$ic1;
$a++;
}
$poi="lat\tlon\ttitle\tdescription\ticon\ticonSize\ticonOffset\n".$schule.$kgarten.$smarkt;
$datei = fopen("daten.txt", "w");
fwrite($datei,$poi);
fclose($datei);
?>
<div align="center">
<style type="text/css">.olControlAttribution { bottom: 3px!important; }</style>
<script src="http://www.openlayers.org/api/OpenLayers.js">
</script><script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js">
</script><div id="map" style="width:500px;height:340px;">
</div>
<script type="text/javascript" src="OpenLayers_Map_minZoom_maxZoom_Patch.js"></script>
<script type="text/javascript" src="my_panzoombar.js"></script>
<script type="text/javascript">
var map;
function showMap()
{
map = new OpenLayers.Map("map",
{
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
units: "m",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [],
minZoom:12,
maxZoom:18
});
map.addControl (new OpenLayers.Control.Attribution());
map.addControl (new OpenLayers.Control.Navigation());
map.addControl (new OpenLayers.Control.PanZoomBar({minZoom: 12}));
OpenLayers.Marker.defaultIcon = function () {
    return new OpenLayers.Icon ("symbole/nadel.png", {w:35, h:41}, {x: -10, y:-30});
};
var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik (updated weekly)");
var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
map.addLayers([layerMapnik]);
var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"./daten.txt",
                      projection: map.displayProjection
                    });
map.addLayer(pois);
map.setCenter(new OpenLayers.LonLat(<?php echo $long; ?>,<?php echo $lat; ?>).transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")), 14);
map.addLayer(new OpenLayers.Layer.Markers());
var marker = new OpenLayers.Marker(map.getCenter());
marker.events.register("mousedown", marker, function(evt)
{
OpenLayers.Event.stop(evt);
}
);
map.layers[map.layers.length-1].addMarker(marker);
}
showMap();
</script>

joergi2012 · 2012-02-20 04:43:23

Kleiner Nachtrag:

Wenn ich die Zeile

map.addControl (new OpenLayers.Control.LayerSwitcher());

einfüge, kann ich unter "my points" die Pois und meinen Standortlayer an und ausschalten. Ich möchte das ganze aber gerne über einen eigenen Button in der Karte erreichen. Durch drücken dieses Buttons, soll sich dann nur der pois Layer an und ausschalten lassen.

Netzwolf · 2012-02-25 16:26:31

Nahmd,

joergi2012 wrote:

Wenn ich die Zeile
map.addControl (new OpenLayers.Control.LayerSwitcher());
einfüge, kann ich unter "my points" die Pois und meinen Standortlayer an und ausschalten. Ich möchte das ganze aber gerne über einen eigenen Button in der Karte erreichen. Durch drücken dieses Buttons, soll sich dann nur der pois Layer an und ausschalten lassen.

Sichtbarkeit von Layern

Wenn die Variable “layer” die Referenz auf ein Layer enthält:
→ “layer.setVisibility(true)” – macht den Layer sichtbar
→ “layer.setVisibility(false)” – macht den Layer unsichtbar.
→ “layer.getVisibility() – fragt die Sichtbarkeit ab.

Daraus zusammengebaut:
→ “layer.setVisibility (!layer.getVisibility())” – toggelt die Sichtbarkeit.

So mies die OpenLayers-Doku auch sein mag, diese Methoden der Layerklasse sind da erklärt!

Zugriff auf ein Layer

Damit ein Button ein Layerobjekt aufrufen kann, muss er das Objekt erst einmal finden.
Die einfachste, allerdings etwas unsaubere Version besteht in einer globalen Variable:

// !!!! ACHTUNG: AUSSERHALB DER INITIALISIERUNGSFUNKTION!!!!
var MEINLAYER;

Die wird beim Anlegen des Layers gesetzt:

map.addLayer (MEINLAYER = new OpenLayers.Layer.XXX ([…]));

oder in zwei Schritten:

// !!!! ACHTUNG: KEIN “var” VOR DIE ZUWEISUNG!!!!
MEINLAYER = new OpenLayers.Layer.XXX ([…]);
map.addLayer (MEINLAYER);

Der Button

<button onclick="MEINLAYER.setVisibility (true);">EIN</button>

<button onclick="MEINLAYER.setVisibility (false);">AUS</button>

<button onclick="MEINLAYER.setVisibility (!MEINLAYER.getVisibility());">EIN/AUS</button>

Das war es schon.

Gruß Wolf

Edit: URL aktualisiert.

Last edited by Netzwolf (2013-10-07 14:40:05)

Stefanie24 · 2013-10-07 14:27:33

Das mag ich an deinen HowTos
Die versteht man wenigstens.
Hab zwischenzeitlich meine ganze Map auf deine Tooltip-Version umgestellt. Simple und funktioniert.

Gibt es da einen Weg die Tooltips in wenigsten zwei verschieden Farben darzustellen?

/*-----------------------------------------------------------------
/	Aussehen des Tooltips kann frei gestaltet werden
//---------------------------------------------------------------*/

div.olPopupMarkerTooltip {
	background: white;
	border: 1px solid gray;
	padding: 2px;
	left: 10px;
	top: 10px;
	font-size: 60%;
}

/*-----------------------------------------------------------------
//	Diese beiden Regeln steuern das Einblenden/ausblenden.
//	Bitte unveraendert uebernehmen.
//---------------------------------------------------------------*/

div.olPopupMarker div.tooltip {
	display: all;
}
div.olPopupMarker:hover div.tooltip {
	display: block;
}

Wenn ich das Richtig sehe ist olPopupMarker ein fixer Ausdruck. Wo ich nicht einfach hergehen kann und ein Overlay z. B. olPopupMarker2 nenne, welches dann einen eigen Style hat?
Zumindest ging das bei mir nicht.
Hast Du da eine Idee?

Netzwolf · 2013-10-07 15:27:45

Nahmd,

Stefanie24 wrote:

Gibt es da einen Weg die Tooltips in wenigsten zwei verschieden Farben darzustellen?

Ja.

Da man die Id eines Layers nicht einfach beim Erzeugen setzen kann (für Oberschlaue: kann man schon, dann muss man aber auch das <div> anlegen), braucht es diesen unschönen Umweg. Ist die Id einmal gesetzt, kann man im CSS Regeln von der Id des Layers abhängig machen.

Gruß Wolf

Stefanie24 · 2013-10-07 20:11:42

Dankeschön. Funktioniert einfacher als erträumt.
Jetzt kann Mappoint endlich einpacken!

Announcement

#1 2012-02-20 02:13:41