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
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>
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).
ich hab meine Marker verteilt… entsprechend dem Code, den ich aus irgendeinem der Beispiele zusammengestupfelt habe und unterschiedliche Gruppen von Icons zugewiesen…
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.
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…