Open Layers, Marker und Java-Funktionen?

Hallo,

ich möchte mir eine Karte mit Openlayers basteln und hab mir aus diversen Beispielen was zusammengestupfelt.
Das klappt schon recht gut…aber bei Feinheiten geht es mit grobem html und mit noch viel gröberem bzw. eigentlich ohne java-Kenntnisse kaum vorwärts.

Ich hab eine Karte mit Markern, die man anklicken kann, es öffnet sich ein Popup mit Infos aus textfile.txt

So weit so schön :slight_smile:

Wo kann ich die Grösse des Popups verkleinern/anpassen?
Wie kann ich ein X zum schliessen ergänzen? Geht aktuell bei erneutem Klick auf den Marker.

Hoffe der Code hilft… ?


<html>
<head>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
 <div id="mapdiv"></div>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
 
    var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"./textfile.txt",
                      projection: map.displayProjection
                    });
    map.addLayer(pois);
 


    //Set start centrepoint and zoom    
    var lonLat = new OpenLayers.LonLat( 10.500000 ,50.600000 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
    var zoom=7;
    map.setCenter (lonLat, zoom);  
 


  </script>



</body></html>

Danke vorab für jede DAU-Hilfe :smiley:

Java-Kenntnisse brauchst Du keine, schlimmstenfalls JavaScript-kenntnisse. (das sind 2 unterschiedliche Dinge)

JS-Kenntnisse benötigst Du hier aber auch nicht, sondern CSS-Kenntnisse. CSS ist das Ding, was Farben, Grössen und dergleichen auf Webseiten festlegt.
Die Grösse der Popups legt man gewöhnlich in
.leaflet-popup-content-wrapper
an. Davon ist aber abzuraten, weil diese Popups eher dynamisch sind, sie wachsen mit der Grösse des Inhalts.
x zum Schliessen ist egtl. Standard-funktion, da hast Du wahrscheinlich irgendwas angepasstes.

Dein Code hilft hier nicht weiter, um genaueres zu sagen, bräuchte es den genauen output/webseite.

Schau dir mal die nebenan genannten Beispiele an. Und das übliche Mantra bei Fragen zu OpenLayers 2: Fang nichts neues damit an, sondern nimm Leaflet (können hier mehr Leute) oder wenigstens eine neue Version von OL (da können hier eher nicht so viele helfen, glaub ich).

Grüße
Max

Danke für die Antworten. Mir scheint… leaflet war ein gutes Stichwort, ich versuch mich mal am einlesen… :slight_smile:

Genial, vielen Dank nochmal :slight_smile: :slight_smile: :slight_smile:
Mit den Beispielen/ Tutorials… selbst für DAUs zu machen. :top:

Läuft. :sunglasses:

Hallo, der DAU bzgl. Leaflet nochmal :smiley:

ich hab meine Marker verteilt… entsprechend dem Code, den ich aus irgendeinem der Beispiele zusammengestupfelt habe und unterschiedliche Gruppen von Icons zugewiesen…

L.marker([51.1, 11.7], {icon: stIcon}).bindPopup("<a href=2010/a.html target=inhalt>23. Treffen 2010</a>").addTo(mymap);

Soweit alles prima :slight_smile:

Preisfrage:
Ich hätte über dem Marker/ der Grafik gerne einen Text überblendet. Dauerhaft und ständig.

Wie geht em?

Danke für jede Hilfe :slight_smile:

Am einfachsten wahrscheinlich mit einem https://leafletjs.com/reference-1.7.1.html#divicon.

Danke… und wie kommt der Text dann dazu?

Na da, wo du sonst dein stIcon definierst. Das Objekt, das du dem L.divIcon mitgibst, insbesondere den HTML-Part davon kannst du so definieren, wie du möchtest. Stylen ganz nach Bedarf.

So ähnlich (ungetestet…):


var stIcon = L.divIcon({className: 'my-div-icon', html: '<p>Dein Text</p><img src="dein Icon" />'});

L.marker([51.1, 11.7], {icon: stIcon}).bindPopup("<a href=2010/a.html target=inhalt>23. Treffen 2010</a>").addTo(mymap);

Sorry ich hab da echt keine Übung. :roll_eyes:

im wesentlichen sieht es bei mir so aus…


var BundeslandIcon = L.Icon.extend({
    options: {
        shadowUrl: 'ayy.png',
        iconSize:     [20, 31],
        shadowSize:   [15, 20],
        iconAnchor:   [10, 31],
        shadowAnchor: [0, 20],
        popupAnchor:  [0, -31]
    }
});



var bbIcon = new BundeslandIcon({iconUrl: 'abb.png'}),
    bwIcon = new BundeslandIcon({iconUrl: 'abw.png'}),
    thIcon = new BundeslandIcon({iconUrl: 'ath.png'});
    //...



L.marker([48.2, 9.9], {icon: bwIcon}).bindPopup("<a href=2001/a.html target=inhalt>2. Treffen 2001</a>").addTo(mymap);

und diverse weitere Marker, die ich eben durchnummerieren möchte. Gerne händisch. Nur wo bekomme ich da div-icon und html-Text unter?
Ich weiss, dass ich hier eher falsch bin mit der Fragerei, aber die Leaflet-Dokumentation ist mit nur rudimetären JS-Kenntnissen und auf englisch 'n bissel schwierig… :confused:

Für jeden erläuternden Link dankbar,
Motabi :slight_smile:

Schau mal, ob du mit meinen kleinen Demos was anfangen kannst (Rechtsklick > Seitenquelltext anzeigen).

mit divIcon
mit tooltip permanent über icon

Ne Einführung in JS / Leaflet kann ich aus Zeitgründen leider nicht geben, da musst du dich durch die Dokus kämpfen.

Top. Ich versuche durchzusteigen. :sunglasses:
Ist halt ganz anders aufgebaut… :open_mouth: ung 10x komplexer :o:o

Sollst du auch garnicht, Danke! :slight_smile:

(Komme wieder…)

ich schon wieder… knappe halbe Stunde :smiley:

Wieso geht beim Bsp. tooltip das Popup bei [0,0] auf, bei divIcon aber bei etwa [0,40]?

popupAnchor: [0, -40] 

??

dann sollte es doch runter gehen, oder?

Wenn ich das einbaue (0,-40), dann bleiben bei mir Icon und popup unverändert, aber die Textoverlays 1+2 wandern jeweils nach rechts… Häh?

weil beim Beispiel “tooltip” der popupAnchor gar nicht festgelegt wurde. Das hab ich eben noch eingefügt.

Die Werte in den ganzen Anchor-Werten, Standard ist [0,0], bedeuten:

erster Wert im Array ist für horizontal. Negativ > weiter nach “links”
zweiter Wert im Array ist für vertikal. Negativ > weiter nach “oben”

popupAnchor und tooltipAnchor sind unterschiedliche Angaben für unterschiedliche Sachen :smiley: