Problem mit Openlayers mit eigenem Controlpanel

Communities Deutschland (Germany)
1

Hallo Allerseits,

bin ein typischer Anfänger mit den wahrschein typischen Problemen. Nicht nur OL, auch HTML und CSS. Gestern habe ich den ganzen Tag versucht, ein eigenes Controlpanel hinzubekommen, so wie bei dem Beispiel
http://openlayers.org/dev/examples/accessible-panel.html.
Nach Antworten gesucht habe ich ewig, probiert auch vieles, bekomme es aber nicht hin :(.
Vielleicht hat von Euch jemand eine Idee, wo der Fehler liegt und kann mir bitte helfen. Vielen Dank schon einmal im voraus.

Gruss
Ambrose

ReisePlaner 
<script type='text/javascript' src='../_libs/js/jquery-ui/jquery-1.9.1.js'></script>
<script type='text/javascript' src='../OpenLayers-2.13/OpenLayers.js'></script>
<script type='text/javascript' src='../_libs/js/OpenStreetMap.js'></script>
<script type='text/javascript' src="../_libs/js/proj4js/lib/proj4js-combined.js"></script>

<script src="http://maps.google.com/maps/api/js?sensor=false&v=3.2"></script>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>

Travel Planner

created by ...

CSS:
html, body {font-family: sans-serif; height: 100%; width: 100%; padding:0; margin: 0; background-color:#00008B;}

#wrapper {
height: 100%;
}

div {cursor:default;}
div#sidebar {width:25%; height: 100%; padding-left: 0.4em;overflow: hidden;}
div#mapdiv {width:75%; height: 100%;right:0;top:0;position:fixed;}

#sidebar {
margin: 0 0 0 0;
padding: 0 0 0 0;
/width: 100%;/
}

#haeder {
margin-right: 0.4em;
}

#progname{
float: left;
color:#FFFF74;
}

#onlinestatus{
color:#007070;
background-color:#FF8F8F;
/visibility: hidden;/
border: solid #FF8F8F 2px;
text-align: center;
width:4em;
float: right;
margin-top: 0.4em;
}

#menu{
clear:left;

}

#footer {
position: absolute;
float: left;
bottom: 0px;
left: 0.4em;
font-size: xx-small;
color:#FFFF74;
}

/*#titelname{ float:left;}
#onlinestatus{float: right; right: 0; text-align: center; padding-top: 0.3em; padding-bottom: 0.3em; border: none; font-size: medium}
*/
div.olControlMousePosition {position: relative; right: 3px; top: 0em; display: block; font-size: smaller;color:#FFFF74;background-color:#00008B; padding: 0.2em;height:1em;}
.olControlPermalink {right: 3px; bottom: 1em; display: block;position: absolute; font-size: xx-small; padding: 0.2em;color:#00008B;}
.olControlAttribution {right: 3px; bottom: 0em; position: absolute; display: block;font-size: xx-small; padding: 0.2em;color:#00008B;}

.olControlLayerSwitcher {position: absolute; top: 25px; right: 0px; font-weight: bold; margin-top: 3px; margin-left: 3px;margin-bottom: 3px;
font-size: medium;color: #FFFF74;width: auto;}
.olControlLayerSwitcher .layersDiv {padding-top: 5px;padding-left: 10px;padding-bottom: 5px; padding-right: 1em; width: 100%; height: 100%;background-color:#00008B;}
.olControlLayerSwitcher .layersDiv .baseLbl, .olControlLayerSwitcher .layersDiv .dataLbl .dataLal {margin-top: 3px; margin-left: 3px; margin-bottom: 3px}
.olControlLayerSwitcher .layersDiv .baseLayersDiv, .olControlLayerSwitcher .dataLayersDiv {padding-left: 1em;padding-bottom: 0.4em;}
.olControlLayerSwitcher .maximizeDiv, .olControlLayerSwitcher .minimizeDiv {top: 5px; right: 0px;}

.olControlOverviewMapContainer {position: absolute;bottom: 1em;right: 0px;}
.olControlOverviewMapElement {padding: 10px 18px 10px 10px;background-color:#00008B;border: solid 2px #00008B}
.olControlOverviewMapMinimizeButton {right: 0px; bottom: 80px;cursor: pointer;}
.olControlOverviewMapMaximizeButton {right: 0px; bottom: 80px;cursor: pointer;}
.olControlOverviewMapExtentRectangle {overflow: hidden;background-image: url(“img/blank.gif”);cursor: move;border: 2px dotted red;}
.olControlOverviewMapRectReplacement {overflow: hidden;cursor: move;background-image: url(“img/overview_replacement.gif”);background-repeat: no-repeat;background-position: center;}

.olControlScaleLine {display: block; position: absolute; left: 1em; bottom: 0px;font-size: medium; color: #00008B;margin-bottom:0px;}
.olControlScaleLineTop {padding: 2px; border: solid 2px #00008B; border-top: none; text-align: center; }
.olControlScaleLineBottom {padding: 2px; border: solid 2px #00008B; border-top: none; text-align: center; }

.olControlPanel button {
position: relative;
float: left;
left:0px;
z-index:999;
top:0px;
display: block;
margin: 2px;
border: 1px solid;
padding: 0 5px;
height: 35px;
width: 35px;
border-radius: 4px;
background-color: white;
overflow: visible; /* needed to remove padding from buttons in IE */
}/border-radius: 4px;/
.olControlPanel button span {padding-left: 25px;}
.olControlPanel button span:first-child {padding-left: 0;display: block;position: absolute;left: 2px;}

.olControlPanel .olControlDrawFeatureItemActive span:first-child {background-image: url(“./img/draw_line_on.png”);height: 22px;width: 24px;top: 5px;}
.olControlPanel .olControlDrawFeatureItemInactive span:first-child { background-image: url(“./img/draw_line_off.png”);height: 22px;width: 24px;top: 5px;}
.olControlPanel .olControlZoomBoxItemInactive span:first-child { background-image: url(“…/img/drag-rectangle-off.png”);height: 29px;width: 29px;top: 2px;}
.olControlPanel .olControlZoomBoxItemActive span:first-child { background-image: url(“…/img/drag-rectangle-on.png”);height: 29px;width: 29px;top: 2px;}
.olControlPanel .olControlZoomToMaxExtentItemInactive span:first-child {background-image: url(“…/img/zoom-world-mini.png”);height: 18px;width: 18px;top: 8px;}
.olControlPanel .navHistory span:first-child {background-image: url(“./img/navigation_history.png”);height: 24px;width: 24px;top: 4px;}
.olControlPanel .navHistoryPreviousItemActive span:first-child {background-position: 0 0;}
.olControlPanel .navHistoryPreviousItemInactive span:first-child {background-position: 0 -24px;}
.olControlPanel .navHistoryNextItemActive span:first-child {background-position: -24px 0;}
.olControlPanel .navHistoryNextItemInactive span:first-child { background-position: -24px -24px;}
.olControlZoomOutItemInactive {background:url(poiimp[0]) no-repeat;border:2px solid #232323;float:left;height:18px;margin-right:5px;width:18px;}

2

Du baust nach deinen “meta”-Angaben Stylesheets ein. Wo kommen die her? Diese Pfade sind relativ und müssten somit auf deinem Server liegen - tun sie das?
Und gleich danach kommen 4 scripts - die liegen auch auf deinem Server, oder nicht?

3

Hallo Thomas,

die Dateien liegen bei mir auf dem Server. Daran liegt es nicht.

Gruss
Ambrose

4

Nach deiner vorhergehenden Antwort kann ich jetzt nur noch sagen: Der Fehler liegt ganz einfach in zu wenigen Informationen…

Ich kann nicht überprüfen was du umgesetzt hast, geschweige denn, dass ich weiß was bei dir nicht klappt und wo du hinwillst. Ich weiß nur, dass dein Notation, welche mitten im Text mit “CSS:” eingeleitet wird entweder nur Text ausgibt (aber keine Style-Sheet definiert) oder aber dein ganzer geposteter Code ein einziges Durcheinander ist.

Es wäre hilfreich, wenn du dir einen Webspace suchst und uns das Ganze dort zeigtst - und vor allem uns mitteilst was nicht klappt bzw. was du erreichen willst.

(Ich habe das Beispiel von OL bei mir offline nachgebaut und es läuft ohne Probleme…)

5

Hallo Thomas,

stimmt, es ist verwirrend. “CSS:” ist nur ein Kommentar, hier leider nicht zu erkennen.

Die Idee mit der Webspace ist prima. Kannst Du da etwas empfehlen?

Mit den Button (Text und Icon) möchte ich zwischen verschiedenen Modi umschalten:

  1. “normale Navigation”

  2. “Marker” mit den Funktionen
    a) Marker setzen bei Click auf Karte (derzeit mach eich das mit Layer.Markers, irgendwo habe ich gelesen, dass ginge als auch als Vectorlayer)

    • Formlar öffnen
    • beim Öffnen
      • soll an Hand der Koordinaten in einer Postgres-DB ermittelt werden, wo der Ort liegt (Country, Province, District etc. )
      • Listboxen gefüllt werden mit Daten aus Postgres (POI-Haupt-/Sub-Kategorien - Einfügen des dazugehörenden Icons in das Formular)
    • in dem Formular möchte ich Daten eingeben und in DB speichern, sowie Koordinaten und Kategorie-ID
    • Marker setzen
      b) Formlar öffnen bei Klick auf vorhanden Marker (in dem Formular sollen Daten aus Postgres eingelesen werden)

  3. “Linie” als Vectorlayer mit den Funktionen
    a) Linie einfügen, Anfangs- und Endpunkte müssen vorhandene Marker sein, Zwischenpunkte sind möglich (ohne Marker)

    • Formular öffnen, um Daten einzugeben
      Daten speichern in Postgres
      b) Formlar öffnen bei Klick auf vorhanden Linie
    • Formular öffnen mit Daten aus Postgres sowie Löschfunktion-Button

Gruss
Ambrose

6

Sorry, meine Antwort ist an tunnelbauer. Danke für Deine!

Gruss
Ambrose

7

PS: Ich vermute, dass hier irgendwo der Fehler liegt, möglicherweise passen die Klassen in CSS nicht zu den Objekten (mir fehlt da noch der Überblick, wass alles mit OpenLayers.Control definiert werden kann und wie die Klassen dazu heisen - oder ob die selbst zu definieren sind):

zb = new OpenLayers.Control.ZoomBox({title: "Zoom box: zoom clicking and dragging",text: "Zoom"});
var panel = new OpenLayers.Control.Panel({defaultControl: zb,
    createControlMarkup: function(control) {
        var button = document.createElement('button'),
            iconSpan = document.createElement('span'),
            textSpan = document.createElement('span');
        iconSpan.innerHTML = '&nbsp;';button.appendChild(iconSpan);
        if (control.text) {textSpan.innerHTML = control.text;}
        button.appendChild(textSpan);
        return button;}
});
panel.addControls([new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent",text: "World"})]);
nav = new OpenLayers.Control.NavigationHistory({
    previousOptions: {title: "Go to previous map position",text: "Prev"},
    nextOptions: {title: "Go to next map position",text: "Next"},displayClass: "navHistory"});
map.addControl(nav);
navtb =	new OpenLayers.Control.NavToolbar({title:"Navigate",text: "Nav"}),
panel.addControls([nav.next, nav.previous,navtb]);
panel.addControls([new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path,{title:'Draw features', text: 'Draw'})]);
panel.addControls([new OpenLayers.Control.ModifyFeature(vlayer, OpenLayers.Handler.Path,{title:'Modify features', text: 'Modify'})]);

map.addControl(panel);

.olControlPanel .olControlDrawFeatureItemActive {width:24px;height:24px;background-image: url(./img/draw_line_on.png);}
.olControlPanel .olControlDrawFeatureItemInactive {width:24px;height:24px;background-image: url(./img/draw_line_off.png);}
.olControlPanel .olControlZoomToMaxExtentItemInactive {width:20px;height:20px;background-image: url(./img/zoom-world-mini.png);}
.olControlNavigationHistory {background-image: url(./img/navigation_history.png);background-repeat: no-repeat;width: 24px;height: 24px;}
.olControlNavigationHistoryPreviousItemActive {background-image: url(./img/view_previous_on.png);background-repeat: no-repeat;width: 24px;height: 24px;}
.olControlNavigationHistoryPreviousItemInactive {background-image: url(./img/view_previous_off.png);background-repeat: no-repeat;width: 24px;height: 24px;}
.olControlNavigationHistoryNextItemActive {background-image: url(./img/view_next_on.png);background-repeat: no-repeat;width: 24px;height: 24px;}
.olControlNavigationHistoryNextItemInactive {background-image: url(./img/view_next_off.png);background-repeat: no-repeat;width: 24px;height: 24px;}

Gruss
Ambrose