You are not logged in.

Announcement

*** NOTICE: forum.openstreetmap.org is being retired. Please request a category for your community in the new ones as soon as possible using this process, which will allow you to propose your community moderators.
Please create new topics on the new site at community.openstreetmap.org. We expect the migration of data will take a few weeks, you can follow its progress here.***

Pages: 1

#1 2013-08-22 07:16:47

Ambrose66
Member
Registered: 2013-08-22
Posts: 9

Problem mit Openlayers mit eigenem Controlpanel

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/acce … panel.html.
Nach Antworten gesucht habe ich ewig, probiert auch vieles, bekomme es aber nicht hin sad.
Vielleicht hat von Euch jemand eine Idee, wo der Fehler liegt und kann mir bitte helfen. Vielen Dank schon einmal im voraus.

Gruss
Ambrose

<!DOCTYPE html>
<html lang='en'>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">
<head>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <title>ReisePlaner</title>
    <meta http-equiv="content-type"  content="text/html; charset=iso-8859-1" />
    <meta name="content-language" content="en" />
    <meta name="author"           content=" " />
    <meta name="publisher"        content=" " />
    <meta name="copyright"        content=" " />
    <meta name="keywords"         content=" " />
    <meta name="description"      content=" " />
    <meta name="page-topic"       content=" " />
    <meta name="page-type"        content=" " />
    <meta name="language"         content="Deutsch" />
    <meta name="revisit"          content="After 30 days" />
    <meta name="robots"           content="INDEX,FOLLOW" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./theme/default/style.css"/>
    <link rel="stylesheet" type="text/css" href="./theme/default/google.css"/>

    <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>

<!-- externe mapserver und service -->
    <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>

<script>
// OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;  How many times should we try to reload an image before giving up?
var map;
function init() {
    var lon = 102.0315;
    var lat = 15.80681;
    var zoom = 6;
    var proj = "EPSG:900913";
    var displproj ="EPSG:4326";
    //var proj4326 = new OpenLayers.Projection("EPSG:4326");
    //var projmerc = new OpenLayers.Projection("EPSG:900913");

    poiimg = new Array(
        "../_libs/imgpois/accommodation_alpinehut.p.0092DA.32.png"
    );


    var resolutions =[78271.516950000005, 39135.758475000002, 19567.879237500001, 9783.9396187500006, 4891.9698093750003, 2445.9849046875001, 1222.9924523437501, 611.49622617187504, 305.74811308593752, 152.87405654296876, 76.43702827148438, 38.21851413574219, 19.109257067871095, 9.5546285339355475, 4.7773142669677737, 2.3886571334838869, 1.1943285667419434, 0.59716428337097172, 0.29858214168548586];
    var maxresolution =156543.0339;

    var bounds = "-20037508.34, -20037508.34,20037508.34, 20037508.34";
    var options = {
        projection: new OpenLayers.Projection(proj), displayProjection: new OpenLayers.Projection(displproj), units: "m",minZoomLevel: 10, minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
        resolutions :resolutions,maxResolution: maxresolution,
        maxExtent: new OpenLayers.Bounds(bounds),
        maxExtent: world,
        controls: [
            new OpenLayers.Control.Navigation(),new OpenLayers.Control.LayerSwitcher({ascending:true, roundedCorner:true}),new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.Attribution(),new OpenLayers.Control.Permalink(),new OpenLayers.Control.MousePosition({
                prefix: displproj + ' (lon | lat) ',
                separator: ' | ',emptyString: ''}),new OpenLayers.Control.KeyboardDefaults(),new OpenLayers.Control.ScaleLine()]};
    map = new OpenLayers.Map('mapdiv', options);

     // base maps
    var wms_layer_map = new OpenLayers.Layer.WMS('OSGeo WMS','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers: 'basic'},{transitionEffect: 'resize'},{isBaseLayer: true});
    var gwc_layer_map = new OpenLayers.Layer.WMS("OpenGeo Global Imagery WMS","http://maps.opengeo.org/geowebcache/service/wms",{layers: "bluemarble"},{transitionEffect: 'resize'},
        {tileOrigin: new OpenLayers.LonLat(-180, -90)});
    var layer_layerMapnik  = new OpenLayers.Layer.OSM("Mapnik");
    var layer_layerCyclemap = new OpenLayers.Layer.OSM.CycleMap("Cyclemap");
    var google_hybrid = new OpenLayers.Layer.Google("Hybrid",{type: google.maps.MapTypeId.HYBRID});
    var google_physical = new OpenLayers.Layer.Google("Physical",{type: google.maps.MapTypeId.TERRAIN});
    var google_satellite = new OpenLayers.Layer.Google("Satellite",{type: google.maps.MapTypeId.SATELLITE});
    var google_streets = new OpenLayers.Layer.Google("Streets");

    //layers
    var wms_layer_labels = new OpenLayers.Layer.WMS('Locations','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers: 'clabel,ctylabel,statelabel',transparent: true},{transitionEffect: 'resize'},{opacity:0.5});
    wms_layer_labels.setVisibility(false);
    var vlayer = new OpenLayers.Layer.Vector('Eigener Vector Layer');
    //vectors kann als superset alles was markers auch kann. - http://forum.openstreetmap.org/viewtopic.php?id=9655

    //Add layers
    map.addLayers([layer_layerMapnik,layer_layerCyclemap,google_hybrid,google_streets,google_physical,google_satellite,wms_layer_labels,wms_layer_map,gwc_layer_map]);

    vlayer = new OpenLayers.Layer.Vector( "Editable" );
    map.addLayer(vlayer);

    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([
        zb,
        new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path,
            {title:'Draw a feature', text: 'Draw'}),
        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"
    });
    // parent control must be added to the map
    map.addControl(nav);
    panel.addControls([nav.next, nav.previous]);

    map.addControl(panel);
    panel.activate;

    var overview_map = new OpenLayers.Control.OverviewMap({layers: [layer_layerMapnik.clone()]});
    map.addControls([overview_map,new OpenLayers.Control.KeyboardDefaults()]);
    var centerLonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection(displproj), map.getProjectionObject());
    map.setCenter (centerLonLat, zoom);


    if (!map.getCenter()) map.zoomToMaxExtent();
    map.events.register("click", map, function(e) {
        //doubleclick muss noch abgefangen werden
        var position = this.events.getMousePosition(e);
        src = poiimg[2];

        var size = new OpenLayers.Size(24, 24);
        var icon = new OpenLayers.Icon(src,    size);
        var lonlat = map.getLonLatFromPixel(position);
       //var lonlatTransf = lonlat.transform(map.getProjectionObject(), new OpenLayers.Projection(proj));
        //var lonlat = lonlatTransf.transform(new OpenLayers.Projection(proj), map.getProjectionObject());
        var markerslayer = new OpenLayers.Layer.Markers( "Markers" );
        markerslayer.addMarker(new OpenLayers.Marker(lonlat, icon));
        map.addLayer(markerslayer);
    });

//################################################################################


} // ende init

//################################################################################
$(document).ready(function(){
      init(); // statt <body> onload='init();'
    window.addEventListener("offline", function(e) {onlinecheck();}, false);
    window.addEventListener("online", function(e) {onlinecheck();}, false);
    onlinecheck();
})

function onlinecheck() {
    var online = window.navigator.onLine;
    if (online) {
        $('#networkstatus').css('background-color','#008040');
        $('#onlinestatus').css('background-color','#008040');
        $('#onlinestatus').css('value','Online');


        // alert("Connected to network");
    } else {
        $('#networkstatus').css('background-color','#FF4D00');
        $('#onlinestatus').css('background-color','#FF4D00');
        $('#onlinestatus').css('value','Offline');
        alert("Offline mode,\nno network connection availiable now!");
    }
}

//################################################################################

</script>
</head>
<body>
<div id="wrapper">
  <div id="main">
    <div id="sidebar">
        <div id="haeder">
            <h1 id="progname"> Travel Planner</h1>
<!--          <input id="onlinestatus" value="Offline" type="text" name="olname" disabled/> -->
        </div>   <!-- ende header -->
    </div>  <!-- ende sidebar -->
    <div id="panel"></div>
    <div id="mapdiv" ></div>
   </div> <!-- ende main -->

<div id="footer">
    <p> created by ...</p>
</div> <!-- ende footer -->
</div> <!-- ende wrapper -->
</body>
</html>

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;}

Offline

#2 2013-08-22 08:33:54

tunnelbauer
Member
Registered: 2012-01-13
Posts: 1,011
Website

Re: Problem mit Openlayers mit eigenem Controlpanel

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?

Grüße
Thomas

Offline

#3 2013-08-22 11:17:15

Ambrose66
Member
Registered: 2013-08-22
Posts: 9

Re: Problem mit Openlayers mit eigenem Controlpanel

Hallo Thomas,

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

Gruss
Ambrose

Offline

#4 2013-08-22 11:49:29

tunnelbauer
Member
Registered: 2012-01-13
Posts: 1,011
Website

Re: Problem mit Openlayers mit eigenem Controlpanel

Ambrose66 wrote:

Hallo Allerseits,
Vielleicht hat von Euch jemand eine Idee, wo der Fehler liegt und kann mir bitte helfen. ....

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...)

Grüße
Thomas

Offline

#5 2013-08-23 07:53:28

Ambrose66
Member
Registered: 2013-08-22
Posts: 9

Re: Problem mit Openlayers mit eigenem Controlpanel

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

Offline

#6 2013-08-23 07:56:19

Ambrose66
Member
Registered: 2013-08-22
Posts: 9

Re: Problem mit Openlayers mit eigenem Controlpanel

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

Gruss
Ambrose

Offline

#7 2013-08-23 08:02:01

Ambrose66
Member
Registered: 2013-08-22
Posts: 9

Re: Problem mit Openlayers mit eigenem Controlpanel

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

Offline

Pages: 1

Board footer

Powered by FluxBB