Adding a marker with openlayers/geoserver

Question

My name's Tony. I'm from vietnam. I want to add a marker in webgis with openlayers/geoserver. Here is my code :

    <!-- Import OL CSS, auto import does not work with our minified OL.js build -->
     <link rel="stylesheet" type="text/css" href="http://localhost:8080/geoserver/openlayers/theme/default/style.css"/>
    <!-- Basic CSS definitions -->
    <style type="text/css">
    /* General settings */
    body {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: small;
    }

    /* The map and the location bar */
    #map {
        clear: both;
        position: relative;
        width: 1350px;
        height: 600px;
        border: 0px solid black;
    }

    </style>

    <!-- Import OpenLayers, reduced, wms read only version -->
    <script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js" type="text/javascript">
    </script>
    <script defer="defer" type="text/javascript">
    var map;

    var tiled;

    // pink tile avoidance
    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
    // make OL compute scale according to WMS spec
    OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

    function init(){
        // if this is just a coverage or a group of them, disable a few items,
        // and default to jpeg format
        format = 'image/png';

        var bounds = new OpenLayers.Bounds(
            143.83482400000003, -43.648056,
            148.47914100000003, -39.573891
        );
        var options = {
            controls: [],
            maxExtent: bounds,
            maxResolution: 0.01814186328125,
            projection: "EPSG:4326",
            units: 'degrees'
            };
        map = new OpenLayers.Map('map', options);

        // setup tiled layer
        tiled = new OpenLayers.Layer.WMS(
            "Geoserver layers - Tiled", "http://localhost:8080/geoserver/wms",
            {
                LAYERS: 'tasmania',
                STYLES: '',
                format: format,
                tiled: true,
                tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
            },
            {
                buffer: 0,
                displayOutsideMaxExtent: true,
                isBaseLayer: true,
                yx : {'EPSG:4326' : true}
            } 
        );

        map.addLayers([tiled]);

        // build up all controls
        map.addControl(new OpenLayers.Control.PanZoomBar({
            position: new OpenLayers.Pixel(2, 15)
        }));
        map.addControl(new OpenLayers.Control.Navigation());
        map.addControl(new OpenLayers.Control.Scale($('scale')));
        map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
        map.zoomToExtent(bounds);

        //marker
        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);

        var size = new OpenLayers.Size(21,25);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
        var icon = new OpenLayers.Icon('http://localhost:8080/geoserver/openlayers/img/marker.png', size, offset);
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(146.83482400000003, -42.648056),icon));
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(146.47914100000003, -41.573891),icon.clone()));

        // support GetFeatureInfo
        map.events.register('click', map, function (e) {
            document.getElementById('nodelist').innerHTML = "Loading... please wait...";
            var params = {
                REQUEST: "GetFeatureInfo",
                EXCEPTIONS: "application/vnd.ogc.se_xml",
                BBOX: map.getExtent().toBBOX(),
                SERVICE: "WMS",
                INFO_FORMAT: 'text/html',
                QUERY_LAYERS: map.layers[0].params.LAYERS,
                FEATURE_COUNT: 50,
                Layers: 'tasmania',
                WIDTH: map.size.w,
                HEIGHT: map.size.h,
                format: format,
                styles: map.layers[0].params.STYLES,
                srs: map.layers[0].params.SRS};

            OpenLayers.loadURL("http://localhost:8080/geoserver/wms", params, this, setHTML, setHTML);
            OpenLayers.Event.stop(e);
        });
    }


    </script>
</head>
<body onload="init()">
<h1 id="title">Markers Layer Example</h1>
<div id="map"> 
</div>

</body>

---

The problem I am having is that it will not show a marker,just a webmap and I don't known why. Here is what my webmap looks like:

----http://i.stack.imgur.com/OWZtP.jpg---

My images path is true http://i1133.photobucket.com/albums/m591/tvquang_dn/marker.jpg

I followed this page

http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/OpenLayers/Marker-js.html to write my code. Thank you very much for reading and helping.

Answer 1

I found the solution for your problem. Its because by default openlayer.js file which is present in geoserver is 171 kb which is not helpful in much of the openlayers operation like marker pop up etc... Therefore u need to get a perfect OpenlLayer.js file which around more than 300kb from openlayer website.

Your code is perfect no need to change anything. Just change the script source which is currently

TO

It will work for sure.. Regards, Gaurav