Hey everybody.

I work with GeoServer using Apache Tomcat in NetBeans. What i want is using OpenStreetMap as base map. i search in some forums and i found that i have to add this code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>OpenLayers map preview</title> <link rel="stylesheet" type="text/css" href="http://localhost:8080/geoserver/openlayers/theme/default/style.css"/> <style type="text/css"> / General settings / body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: small; } / Toolbar styles / #toolbar { position: relative; padding-bottom: 0.5em; display: none; }

        #toolbar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #toolbar ul li {
            float: left;
            padding-right: 1em;
            padding-bottom: 0.5em;
        }

        #toolbar ul li a {
            font-weight: bold;
            font-size: smaller;
            vertical-align: middle;
            color: black;
            text-decoration: none;
        }

        #toolbar ul li a:hover {
            text-decoration: underline;
        }

        #toolbar ul li * {
            vertical-align: middle;
        }

        /* The map and the location bar */
        #map {
            clear: both;
            position: relative;
            width: 512px;
            height: 365px;
            border: 1px solid black;
        }

        #wrapper {
            width: 512px;
        }

        #location {
            float: right;
        }

        #options {
            position: absolute;
            left: 13px;
            top: 7px;
            z-index: 3000;
        }

        /* Styles used by the default GetFeatureInfo output, added to make IE happy */
        table.featureInfo, table.featureInfo td, table.featureInfo th {
            border: 1px solid #ddd;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            font-size: 90%;
            padding: .2em .1em;
        }

        table.featureInfo th {
            padding: .2em .2em;
            font-weight: bold;
            background: #eee;
        }

        table.featureInfo td {
            background: #fff;
        }

        table.featureInfo tr.odd td {
            background: #eee;
        }

        table.featureInfo caption {
            text-align: left;
            font-size: 100%;
            font-weight: bold;
            padding: .2em .2em;
        }
    </style>
    <!-- Import OpenLayers, reduced, wms read only version -->
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js" type="text/javascript">
    </script>
    <script defer="defer" type="text/javascript">
        var map;
        var mapnik;
        var lonlat;
        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';
            if(pureCoverage) {
                document.getElementById('filterType').disabled = true;
                document.getElementById('filter').disabled = true;
                document.getElementById('antialiasSelector').disabled = true;
                document.getElementById('updateFilterButton').disabled = true;
                document.getElementById('resetFilterButton').disabled = true;
                document.getElementById('jpeg').selected = true;
                format = "image/jpeg";
            }

            var bounds = new OpenLayers.Bounds(
                -6.92433643341064, 33.9211540222168,
                -6.7672119140625, 34.0333366394043
            );

            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.0006137676537037,
                projection: "EPSG:900913",
                units: 'm'
            };
            map = new OpenLayers.Map('map', options);
            mapnik = new OpenLayers.Layer.OSM();

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

            // setup single tiled layer
            untiled = new OpenLayers.Layer.WMS(
                "Region_Rabat:routes - Untiled", "http://localhost:8080/geoserver/Region_Rabat/wms",
                {
                    LAYERS: 'Region_Rabat:routes',
                    STYLES: '',
                    format: format
                },
                {
                   singleTile: true, 
                   ratio: 1, 
                   isBaseLayer: true,
                   yx : {'EPSG:900913' : false}
                } 
            );

          lonlat = new OpenLayers.LonLat(-6.588, 33.571).transform(
        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
        new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
      );
            map = new OpenLayers.Map("map",{
            layers:[mapnik,tiled,untiled],
            center: cent,
            zoom: 10
        });

            // 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);

            // wire up the option button
            var options = document.getElementById("options");
            options.onclick = toggleControlPanel;

            // 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: 'Region_Rabat:routes',
                    WIDTH: map.size.w,
                    HEIGHT: map.size.h,
                    format: format,
                    styles: map.layers[0].params.STYLES,
                    srs: map.layers[0].params.SRS};

                // handle the wms 1.3 vs wms 1.1 madness
                if(map.layers[0].params.VERSION == "1.3.0") {
                    params.version = "1.3.0";
                    params.j = parseInt(e.xy.x);
                    params.i = parseInt(e.xy.y);
                } else {
                    params.version = "1.1.1";
                    params.x = parseInt(e.xy.x);
                    params.y = parseInt(e.xy.y);
                }

                // merge filters
                if(map.layers[0].params.CQL_FILTER != null) {
                    params.cql_filter = map.layers[0].params.CQL_FILTER;
                } 
                if(map.layers[0].params.FILTER != null) {
                    params.filter = map.layers[0].params.FILTER;
                }
                if(map.layers[0].params.FEATUREID) {
                    params.featureid = map.layers[0].params.FEATUREID;
                }
                OpenLayers.loadURL("http://localhost:8080/geoserver/Region_Rabat/wms", params, this, setHTML, setHTML);
                OpenLayers.Event.stop(e);
            });
        }

        // sets the HTML provided into the nodelist element
        function setHTML(response){
            document.getElementById('nodelist').innerHTML = response.responseText;
        };

        // shows/hide the control panel
        function toggleControlPanel(event){
            var toolbar = document.getElementById("toolbar");
            if (toolbar.style.display == "none") {
                toolbar.style.display = "block";
            }
            else {
                toolbar.style.display = "none";
            }
            event.stopPropagation();
            map.updateSize()
        }

        // Tiling mode, can be 'tiled' or 'untiled'
        function setTileMode(tilingMode){
            if (tilingMode == 'tiled') {
                untiled.setVisibility(false);
                tiled.setVisibility(true);
                map.setBaseLayer(tiled);
            }
            else {
                untiled.setVisibility(true);
                tiled.setVisibility(false);
                map.setBaseLayer(untiled);
            }
        }

        // Transition effect, can be null or 'resize'
        function setTransitionMode(transitionEffect){
            if (transitionEffect === 'resize') {
                tiled.transitionEffect = transitionEffect;
                untiled.transitionEffect = transitionEffect;
            }
            else {
                tiled.transitionEffect = null;
                untiled.transitionEffect = null;
            }
        }

        // changes the current tile format
        function setImageFormat(mime){
            // we may be switching format on setup
            if(tiled == null)
              return;

            tiled.mergeNewParams({
                format: mime
            });
            untiled.mergeNewParams({
                format: mime
            });
            /*
            var paletteSelector = document.getElementById('paletteSelector')
            if (mime == 'image/jpeg') {
                paletteSelector.selectedIndex = 0;
                setPalette('');
                paletteSelector.disabled = true;
            }
            else {
                paletteSelector.disabled = false;
            }
            */
        }

        // sets the chosen style
        function setStyle(style){
            // we may be switching style on setup
            if(tiled == null)
              return;

            tiled.mergeNewParams({
                styles: style
            });
            untiled.mergeNewParams({
                styles: style
            });
        }

        // sets the chosen WMS version
        function setWMSVersion(wmsVersion){
            // we may be switching style on setup
            if(wmsVersion == null)
              return;

            if(wmsVersion == "1.3.0") {
               origin = map.maxExtent.bottom + ',' + map.maxExtent.left;
            } else {
               origin = map.maxExtent.left + ',' + map.maxExtent.bottom;
            }

            tiled.mergeNewParams({
                version: wmsVersion,
                tilesOrigin : origin
            });
            untiled.mergeNewParams({
                version: wmsVersion
            });
        }

        function setAntialiasMode(mode){
            tiled.mergeNewParams({
                format_options: 'antialias:' + mode
            });
            untiled.mergeNewParams({
                format_options: 'antialias:' + mode
            });
        }

        function setPalette(mode){
            if (mode == '') {
                tiled.mergeNewParams({
                    palette: null
                });
                untiled.mergeNewParams({
                    palette: null
                });
            }
            else {
                tiled.mergeNewParams({
                    palette: mode
                });
                untiled.mergeNewParams({
                    palette: mode
                });
            }
        }

        function setWidth(size){
            var mapDiv = document.getElementById('map');
            var wrapper = document.getElementById('wrapper');

            if (size == "auto") {
                // reset back to the default value
                mapDiv.style.width = null;
                wrapper.style.width = null;
            }
            else {
                mapDiv.style.width = size + "px";
                wrapper.style.width = size + "px";
            }
            // notify OL that we changed the size of the map div
            map.updateSize();
        }

        function setHeight(size){
            var mapDiv = document.getElementById('map');

            if (size == "auto") {
                // reset back to the default value
                mapDiv.style.height = null;
            }
            else {
                mapDiv.style.height = size + "px";
            }
            // notify OL that we changed the size of the map div
            map.updateSize();
        }

        function updateFilter(){
            if(pureCoverage)
              return;

            var filterType = document.getElementById('filterType').value;
            var filter = document.getElementById('filter').value;

            // by default, reset all filters
            var filterParams = {
                filter: null,
                cql_filter: null,
                featureId: null
            };
            if (OpenLayers.String.trim(filter) != "") {
                if (filterType == "cql") 
                    filterParams["cql_filter"] = filter;
                if (filterType == "ogc") 
                    filterParams["filter"] = filter;
                if (filterType == "fid") 
                    filterParams["featureId"] = filter;
            }
            // merge the new filter definitions
            mergeNewParams(filterParams);
        }

        function resetFilter() {
            if(pureCoverage)
              return;

            document.getElementById('filter').value = "";
            updateFilter();
        }

        function mergeNewParams(params){
            tiled.mergeNewParams(params);
            untiled.mergeNewParams(params);
        }
    </script>
</head>
<body onload="init()">

<p>My HTML page with an embedded map</p>

    <div id="toolbar" style="display: none;">
        <ul>
            <li>
                <a>WMS version:</a>
                <select id="wmsVersionSelector" onchange="setWMSVersion(value)">
                    <option value="1.1.1">1.1.1</option>
                    <option value="1.3.0">1.3.0</option>
                </select>
            </li>
            <li>
                <a>Tiling:</a>
                <select id="tilingModeSelector" onchange="setTileMode(value)">
                    <option value="untiled">Single tile</option>
                    <option value="tiled">Tiled</option>
                </select>
            </li>
            <li>
                <a>Transition effect:</a>
                <select id="transitionEffectSelector" onchange="setTransitionMode(value)">
                    <option value="">None</option>
                    <option value="resize">Resize</option>
                </select>
            </li>
            <li>
                <a>Antialias:</a>
                <select id="antialiasSelector" onchange="setAntialiasMode(value)">
                    <option value="full">Full</option>
                    <option value="text">Text only</option>
                    <option value="none">Disabled</option>
                </select>
            </li>
            <li>
                <a>Format:</a>
                <select id="imageFormatSelector" onchange="setImageFormat(value)">
                    <option value="image/png">PNG 24bit</option>
                    <option value="image/png8">PNG 8bit</option>
                    <option value="image/gif">GIF</option>
                    <option id="jpeg" value="image/jpeg">JPEG</option>
                </select>
            </li>
            <li>
                <a>Styles:</a>
                <select id="imageFormatSelector" onchange="setStyle(value)">
                    <option value="">Default</option>
                </select>
            </li>
            <!-- Commented out for the moment, some code needs to be extended in 
                 order to list the available palettes
            <li>
                <a>Palette:</a>
                <select id="paletteSelector" onchange="setPalette(value)">
                    <option value="">None</option>
                    <option value="safe">Web safe</option>
                </select>
            </li>
            -->
            <li>
                <a>Width/Height:</a>
                <select id="widthSelector" onchange="setWidth(value)">
                    <!--
                    These values come from a statistics of the viewable area given a certain screen area
                    (but have been adapted a litte, simplified numbers, added some resolutions for wide screen)
                    You can find them here: http://www.evolt.org/article/Real_World_Browser_Size_Stats_Part_II/20/2297/
                    --><option value="auto">Auto</option>
                    <option value="600">600</option>
                    <option value="750">750</option>
                    <option value="950">950</option>
                    <option value="1000">1000</option>
                    <option value="1200">1200</option>
                    <option value="1400">1400</option>
                    <option value="1600">1600</option>
                    <option value="1900">1900</option>
                </select>
                <select id="heigthSelector" onchange="setHeight(value)">
                    <option value="auto">Auto</option>
                    <option value="300">300</option>
                    <option value="400">400</option>
                    <option value="500">500</option>
                    <option value="600">600</option>
                    <option value="700">700</option>
                    <option value="800">800</option>
                    <option value="900">900</option>
                    <option value="1000">1000</option>
                </select>
            </li>
            <li>
                <a>Filter:</a>
                <select id="filterType">
                    <option value="cql">CQL</option>
                    <option value="ogc">OGC</option>
                    <option value="fid">FeatureID</option>
                </select>
                <input type="text" size="80" id="filter"/>
                <img id="updateFilterButton" src="http://localhost:8080/geoserver/openlayers/img/east-mini.png" onClick="updateFilter()" title="Apply filter"/>
                <img id="resetFilterButton" src="http://localhost:8080/geoserver/openlayers/img/cancel.png" onClick="resetFilter()" title="Reset filter"/>
            </li>
        </ul>
    </div>
    <div id="map">
        <img id="options" title="Toggle options toolbar" src="http://localhost:8080/geoserver/options.png"/>
    </div>
    <div id="wrapper">
        <div id="location">location</div>
        <div id="scale">
        </div>
    </div>
    <div id="nodelist">
        <em>Click on the map to get feature info</em>
    </div>
</body>

</html>

Thank you for your help.

asked 23 Apr '14, 15:43

yassine10's gravatar image

yassine10
11224
accept rate: 0%

edited 25 Apr '14, 03:30

What's the error? What doesn't work? Are you aware that you need OpenLayers when using this code example?

(23 Apr '14, 16:18) scai ♦

yeah i have a file openlayers in my project that contains a openlayers.js !! what i want is to have a base map to my layers !! when i run the project it showed just my layer without a base map...i don't know if you get what i want

(23 Apr '14, 17:00) yassine10

I download teh OpenLayers library and add it in the same directory to my project !! am i wrong in something ?

(23 Apr '14, 19:24) yassine10
2

Can you upload your project to some freehoster or share your project URL for further analysis? That would make things way easier for everyone.

(23 Apr '14, 20:59) mmd

when i run the project, it shows just the layer that i have in GeoServer !! what i want now is to show it with a base map OpenStreet Maps...

(23 Apr '14, 23:11) yassine10
Be the first one to answer this question!
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×266
×9
×1

question asked: 23 Apr '14, 15:43

question was seen: 6,598 times

last updated: 25 Apr '14, 08:05

powered by OSQA