Popup Hinweis einfügen

joergi2012 · 2020-02-19T11:51:30.000Z

Hi,

vor langer Zeit habe ich mit großer Hilfe dieses Forums den nachfolgenden Script erstellt. Dieser funktioniert soweit auch einwandfrei. Nun würde ich gerne den Script etwas erweitern. Wenn man mit dem Mauszeiger auf die Grafik “nadel.png” geht, soll zusätzlich ein kleiner tooltip mit dem Text “neuer Standort” erscheinen. Das ganze gibt es schon in dem script


OpenLayers.Layer.PopupMarker("gespeicherter Standort")

Aber ich weiß nicht, wie ich das für diesen layer auch anwenden kann. Könnt Ihr mir hier helfen?

Danke im voraus

Hier der code


<!DOCTYPE html>
<style type="text/css">
div.olControlLayerSwitcher {
right: 0px;
top: 165px;
}
div.olPopupMarker div.tooltip {
    display: none;
    background: white;
    border: 1px solid gray;
    padding: 2px;
    left: -10px;
    top: 40px;
    z-index: 10000;
    white-space: nowrap;
}
div.olPopupMarker:hover div.tooltip {
    display: block;
    z-index: 10000;
}
.olControlMousePositionDMS {
    bottom: 38.1em;
    right: 0.1em;
    background: white;
    opacity: 1.0;
    font-family: monospace;
}

.olControlMousePosition {
    bottom: 1.1em;
    right: 0.1em;
    background: white;
    opacity: 1.0;
    font-family: monospace;
}
.plus
{
position:absolute;
top:50px;
right:20px;
z-index:9999;
cursor: pointer;
border: 1px solid #000000;
width:40px;
height:40px;
background-color: #ffffff;
background-image: url(symbole/plus.png);
background-size: cover;
background-repeat: no-repeat;
}
.minus
{
position:absolute;
top:93px;
right:20px;
z-index:9999;
cursor: pointer;
border: 1px solid #000000;
width:40px;
height:40px;
background-color: #ffffff;
background-image: url(symbole/minus.png);
background-size: cover;
background-repeat: no-repeat;
}
</style>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
</head>
<body>

<div align="center">
<div style="position: relative; width:750px; height:510px; border: 1px solid #000000; background-color:#FFFFFF;">
<button class="plus" title="vergrößern" onclick="map.setCenter(map.getCenter(),map.getZoom()+1)"></button>
<button class="minus" title="verkleinern" onclick="map.setCenter(map.getCenter(),map.getZoom()-1)"></button>

<style type="text/css">.olControlAttribution { bottom: 3px!important; }</style>
<script src="OpenLayers/OpenLayers.js">
</script><script src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js">
</script>
<div id="map" style="width:750px;height:510px;"></div>
<script type="text/javascript" src="OpenLayers/OpenLayers_Map_minZoom_maxZoom_Patch.js"></script>
<script type="text/javascript" src="OpenLayers/my_panzoombar.js"></script>
<script type="text/javascript" src="OpenLayers/popupmarker.js"></script>
<script type="text/javascript" src="OpenLayers/mouseposition_dms.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.LayerSwitcher());*/
map.addControl (new OpenLayers.Control.Navigation());
map.addControl (new OpenLayers.Control.MousePosition());
map.addControl (new OpenLayers.Control.MousePositionDMS());
/*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)");
map.addLayers([layerMapnik]);
    map.addLayer (schalter=new OpenLayers.Layer.PopupMarker("gespeicherter Standort", {
        createHtmlFromData: function (data) {
            return ;
        },
        createTooltipFromData: function (data) {
            return this.html(data.name)+'<br/>' + this.html(data.entfernung);
        },
        maxTooltipWidth: 220,
        createIconFromData: function (data) {
            return new OpenLayers.Icon (data.icon, {w: data.abmessung.split(',')[0], h: data.abmessung.split(',')[1]}, {x: -10, y:-30});
        },
        location: "test.tmp"
    } ));
map.setCenter(new OpenLayers.LonLat(6.946147588315194,51.3620372).transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")), 16);
map.addLayer(new OpenLayers.Layer.Markers("neuer Standort"));
    map.addControl (new OpenLayers.Control ({

        draw: function (px) {
            this.handler = new OpenLayers.Handler.Click (this, {click: this.onclick}, {});
            this.activate();
        },

        onclick: function (ev) {
        var lonLat=this.map.getLonLatFromViewPortPx(ev.xy);
        marker.moveTo (this.map.getLayerPxFromLonLat(lonLat));
        lonLat.transform(this.map.getProjectionObject(),this.map.displayProjection);
        document.getElementById('lat').value = lonLat.lat;
        document.getElementById('lon').value = lonLat.lon;
        }
    }));
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>
</script>
</div>
<div align="center"><button onclick="schalter.setVisibility (!schalter.getVisibility());">EIN/AUS</button></div>
</div>
</body>
</html>

Andreas_Binder · 2020-02-20T21:05:36.000Z

joergi2012:

…Hier der code…

ohne dem ganzen Beiwerk “mouseposition_dms.js”, “my_panzoombar.js”, “OpenLayers_Map_minZoom_maxZoom_Patch.js”… bekomme ich deinen Code nicht ansatzweise zum Laufen.

Hast du deine Webseite irgendwo lauffähig im Internet?

Grüße
Andreas