x

Tooltip Fenster ändern und POIS an bzw ausschalten


  1. Tooltip Fenster ändern und POIS an bzw ausschalten · joergi2012 (Gast) · 20.02.2012 02:13 · [flux]

    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>
    

    • Re: Tooltip Fenster ändern und POIS an bzw ausschalten · joergi2012 (Gast) · 20.02.2012 04:43 · [flux]

      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.


    • Re: Tooltip Fenster ändern und POIS an bzw ausschalten · Netzwolf (Gast) · 25.02.2012 16:26 · [flux]

      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.

      [h5 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!
      [h5 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);
      

      [h5 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.


    • Re: Tooltip Fenster ändern und POIS an bzw ausschalten · Stefanie24 (Gast) · 07.10.2013 14:27 · [flux]

      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?


    • Re: Tooltip Fenster ändern und POIS an bzw ausschalten · Netzwolf (Gast) · 07.10.2013 15:27 · [flux]

      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


    • Re: Tooltip Fenster ändern und POIS an bzw ausschalten · Stefanie24 (Gast) · 07.10.2013 20:11 · [flux]

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