how to use openstreet map data

0

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
11●2●2●4
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
One Answer:
-3

GeoFabrik is a company which specializes in working with OpenStreetMap. They provide a variety of free extracts in shapefile and raw OSM format on their download website. The advantage of downloading GeoFabrik data is that it is updated every day, and it’s easy and reliable. One disadvantage is that the data is extracted by country, and not all countries are available.

permanent link

answered 19 May, 06:27

Smith%20Hennry's gravatar image

Smith Hennry
-6●1
accept rate: 0%

3

How does that answer relate to the question and are you aware you are answering to a 6 year old problem?

(19 May, 08:24) TZorn

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

learn more about Markdown

Question tags:

×294
×9
×1

question asked: 23 Apr '14, 15:43

question was seen: 7,163 times

last updated: 19 May, 08:24

Related questions

get a style of openstreet map

Is it OpenStreetMap or Open Street Maps?

[closed] How to integrate openstreet map in my site?

Maps for We-Travel?

[closed] How do I recover my account details?

I see some nodes on the map, but I can't find them in Planet.osm. Why?

Problem with some name tags in Bulgarian map

Image corrupt or truncated

[closed] How to show KML in OSM with automatically refresh ?

How do I use OpenStreetMap tiles as a WMS background in JOSM?

about | faq | privacy | contact

powered by OSQA