Hilfe bei JS

[4_Vs]

Hallo zusammen,

ich bräuchte etwas Unterstützung ... ich möchte mir mit Hilfe von OSM, OKAPI und OC eine Cachekarte basteln und habe das prinzip jetzt auch schonmal verstanden, allerdings werde ich aus dem JavaScript fetzen den ich habe nicht wirklich schlau.

Code: Alles auswählen

function addMarker(layer, lon, lat, popupContentHTML) {
 
    var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
    var feature = new OpenLayers.Feature(layer, ll); 
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(150, 50) } );
    feature.data.popupContentHTML = popupContentHTML;
    feature.data.overflow = "hidden";
 
    var marker = new OpenLayers.Marker(ll);
    marker.feature = feature;
 
    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);
 
    layer.addMarker(marker);
    map.addPopup(feature.createPopup(feature.closeBox));
}

Diese paar Zeilen legen einen Marker an eine hier in einer anderen Datei festgelegten Stelle. Allerdings wird standardmäßig ein PopUp neben dem Marker geöffnet, dies möchte ich allerdings nur durch einen Klick auf den marker öffnen und nicht automatisch offen haben.

Aufgerufen wird der Marker in der Datei, die die Karte zeichnet

Code: Alles auswählen

addMarker(layer_markers, 8.3533, 50.3363, popuptext001);

Kann mir einer helfen?

Danke
Michael

[4_Vs]

Sorry,

vielleicht besser das ganze Javascript, welches die Karte zeichnet ...

Code: Alles auswählen

<script type="text/javascript">
//<![CDATA[

var map;
var layer_mapnik;
var layer_tah;
var layer_markers;

function drawmap() {
    // Popup und Popuptext mit evtl. Grafik
    var popuptext001="<font color=\"black\"><a href=\"https://youtu.be/XVLB-hsEgks\">Hasselbach #1</a></font>";
	var popuptext002="<font color=\"black\"><a href=\"https://youtu.be/XVLB-hsEgks\">Irrsee</a></font>";

    OpenLayers.Lang.setCode('de');
    
    // Position und Zoomstufe der Karte
    var lon = 11.074;
    var lat = 48.933;
    var zoom = 8;

    map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.PanZoomBar()],
        maxExtent:
            new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                    20037508.34, 20037508.34),
        numZoomLevels: 18,
        maxResolution: 156543,
        units: 'meters'
    });

    layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"), 
    	                                          visibility: true, displayInLayerSwitcher: false });

    map.addLayers([layer_mapnik, layer_markers]);
    jumpTo(lon, lat, zoom);
 
    // Position des Markers
    addMarker(layer_markers, 8.3533, 50.3363, popuptext001);
	addMarker(layer_markers, 13.3008, 47.8872, popuptext002);

}

//]]>
    </script>

[flopp]

Ich würde lieber Leaflet statt OpenLayers nehmen ([url=http://leafletjs.com/]http://leafletjs.com/[/url]). Ist schicker und einfacher.

Guck dir mal der Quelltext von [url=http://leafletjs.com/examples/quick-start-example.html]http://leafletjs.com/examples/quick-start-example.html[/url] an, da wird eine Karte mit Leaflet gezeichnet und verschiedene Objekte eingefügt (Marker, Polygon, usw).

[4_Vs]

[quote="flopp"]
Ich würde lieber Leaflet statt OpenLayers nehmen ([url=http://leafletjs.com/]http://leafletjs.com/[/url]). Ist schicker und einfacher.

Guck dir mal der Quelltext von [url=http://leafletjs.com/examples/quick-start-example.html]http://leafletjs.com/examples/quick-start-example.html[/url] an, da wird eine Karte mit Leaflet gezeichnet und verschiedene Objekte eingefügt (Marker, Polygon, usw).
[/quote]
Aah danke, in der Tat - das verstehe sogar ich die Grundlagen

Ich meld mich bald wieder, hab jetzt schon die ersten Frage, versuche mich aber erstmal im Studium und sammel fleißig

[4_Vs]

Räusper ... 

Lt. Beschreibung kann ich die Höhe der Karte auf 100% setzen, damit die Karte browserfüllend angezeigt wird

Code: Alles auswählen

<html>
<head>
	<title>4_Vs Opencaching-Homezone</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, height = device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=no, user-scalable=no, target-densitydpi = device-dpi" />

	<link rel="stylesheet" href="leaflet.css" />
	
	<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
	
</head>

<body>
	<div id="map" style="height: 100%"></div>

Bei mir wird hier keine Karte angezeigt. Die Karte zeichnet sich nur dann, wenn ich einen Pixelwert angebe, was den Nachteil hat, dass wenn ich einen Browser öffne und die Seite aufrufe evtl. einen Scrollbalken an der Karte habe - was natürlich unschön ist, also

Code: Alles auswählen

<div id="map" style="height: 100%"></div>

tuts nicht

Code: Alles auswählen

<div id="map" style="height: 1000px"></div>

tuts

Ideen?

Danke, danke, danke

[4_Vs]

Hiho,

ich antworte mir mal selbst:

Der Fehler war, dass ich <html> und <body> keine Größe zugewiesen hatte. Jetzt funktioert das ohne Probleme - prächtig, dann kann ich mich jetzt an die OKAPI-Anbindung machen

cya
Michael