Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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 untiled;
        var tiled;
        var pureCoverage = false;


        // 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: enter image description here

Thank you for reading and helping!

share|improve this question
    
Please let me know the solution of above problem.. Thanks in advance.. –  user6214 Mar 4 '12 at 19:21
    
Sorry, i'm trying –  Tony Mar 5 '12 at 1:52
add comment

1 Answer 1

In such cases, something I would recommend you is that first of check your images path is true or not. with writing this to "http://localhost:8080/geoserver/openlayers/img/marker.png". are you getting the true result? or you can use firebug net option if your images or script are loaded or not.

second is that get your marker features for markers are added or not.

and last thing on your app go to full extent and then add your marker to 0,0 for latlong settings...

markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon.clone())); 

i hope it helps you

share|improve this answer
    
Thank you ! The first : My images path is true (i1133.photobucket.com/albums/m591/tvquang_dn/marker.jpg). Second, i followed this page:(dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/…) .The last thing, i added your code but it does not change. –  Tony Mar 2 '12 at 16:16
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.