Autor Thema: Hilfe bei JS  (Gelesen 1316 mal)

Offline 4_Vs

  • Vereinsmitglied
  • Vereinsmitglied
  • Large
  • *
  • Beiträge: 3158
  • Freier Cacher
    • vaahsen.de
Hilfe bei JS
« am: 22. September 2015, 13:04:38 »
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.

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
addMarker(layer_markers, 8.3533, 50.3363, popuptext001);
Kann mir einer helfen?

Danke
Michael
Whenever I try to plan something, it doesn't seems to work out. So why plan, it only leads to disappointment! (Eddie van Halen)

Offline 4_Vs

  • Vereinsmitglied
  • Vereinsmitglied
  • Large
  • *
  • Beiträge: 3158
  • Freier Cacher
    • vaahsen.de
Re: Hilfe bei JS
« Antwort #1 am: 22. September 2015, 13:08:24 »
Sorry,

vielleicht besser das ganze Javascript, welches die Karte zeichnet ...
<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>
Whenever I try to plan something, it doesn't seems to work out. So why plan, it only leads to disappointment! (Eddie van Halen)

Offline flopp

  • Vereinsmitglied
  • Normal
  • *
  • Beiträge: 1010
  • OC-Clean-Team/Support/Entwicklung
    • Flopps Tolles Blog
Re: Hilfe bei JS
« Antwort #2 am: 22. September 2015, 15:25:28 »
Ich würde lieber Leaflet statt OpenLayers nehmen (http://leafletjs.com/). Ist schicker und einfacher.

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

Offline 4_Vs

  • Vereinsmitglied
  • Vereinsmitglied
  • Large
  • *
  • Beiträge: 3158
  • Freier Cacher
    • vaahsen.de
Re: Hilfe bei JS
« Antwort #3 am: 22. September 2015, 16:17:36 »
Ich würde lieber Leaflet statt OpenLayers nehmen (http://leafletjs.com/). Ist schicker und einfacher.

Guck dir mal der Quelltext von http://leafletjs.com/examples/quick-start-example.html an, da wird eine Karte mit Leaflet gezeichnet und verschiedene Objekte eingefügt (Marker, Polygon, usw).
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 :)
Whenever I try to plan something, it doesn't seems to work out. So why plan, it only leads to disappointment! (Eddie van Halen)

Offline 4_Vs

  • Vereinsmitglied
  • Vereinsmitglied
  • Large
  • *
  • Beiträge: 3158
  • Freier Cacher
    • vaahsen.de
Re: Hilfe bei JS
« Antwort #4 am: 22. September 2015, 17:16:53 »
Räusper ...  :-[

Lt. Beschreibung kann ich die Höhe der Karte auf 100% setzen, damit die Karte browserfüllend angezeigt wird
<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
<div id="map" style="height: 100%"></div>tuts nicht
<div id="map" style="height: 1000px"></div>tuts

Ideen?

Danke, danke, danke :)
Whenever I try to plan something, it doesn't seems to work out. So why plan, it only leads to disappointment! (Eddie van Halen)

Offline 4_Vs

  • Vereinsmitglied
  • Vereinsmitglied
  • Large
  • *
  • Beiträge: 3158
  • Freier Cacher
    • vaahsen.de
Re: Hilfe bei JS
« Antwort #5 am: 22. September 2015, 18:07:55 »
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
Whenever I try to plan something, it doesn't seems to work out. So why plan, it only leads to disappointment! (Eddie van Halen)