2

I have the following code to diplay a WMS layer (in Geoserver) with an OL basemap:

var extent3857 = [-6016334, -2369948, -5843698, -2271608];

var projection3857 = new ol.proj.Projection({
code: 'EPSG:3857',
extent: extent3857,
units: 'm'
});

var baselayer = new ol.layer.Tile({
source: new ol.source.OSM()
});

var wms = new ol.layer.Image({
    extent: extent3857,
    source: new ol.source.ImageWMS({
        url: 'http://localhost:8080/geoserver/Prada/wms?',
        params: {'LAYERS': 'Prada:Pradaria', 'STYLE': 'grass'},
        serverType: 'geoserver'
        })
    });

var map = new ol.Map({
    layers: [baselayer, wms],
    target: 'map',
    view: new ol.View({
        center: [-5930030, -2316645],
        zoom: 10
    })
});

And it works fine, the thing is I want to change/replace the basemap for Googlemap. How can I configure the WMS or put the googlemaps as basemap?. There's multiple non-update info sadly (openlayers-2, googlemap-v2, etc.).

Improve this question

2 Answers 2

Reset to default
1

From the osm-google example (http://dev.openlayers.org/examples/osm-google.html)

var map;

function init() {
    map = new OpenLayers.Map({
        div: "map",
        projection: new OpenLayers.Projection("EPSG:900913")
    });

    var osm = new OpenLayers.Layer.OSM();            
    var gmap = new OpenLayers.Layer.Google("Google Streets");

    map.addLayers([osm, gmap]);

    map.addControl(new OpenLayers.Control.LayerSwitcher());

    map.setCenter(
        new OpenLayers.LonLat(10.2, 48.9).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()
        ), 
        5
    );
}

Note that you need to include the googlemaps api in your js. I'd guess

baselayer = new ol.Layer.Google("Google Streets");

is what we are after.

Improve this answer
2
1

If you mean to use google maps as base , there is old Documentation (i.e GMaps V2) provided by Geoserver. The doc can be found Here : http://docs.geoserver.org/stable/en/user/tutorials/georss/georss.html

Now since Google maps has migrated to V3 . So, I can provide how to do it in V3 of google maps.

 <!DOCTYPE html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="//maps.googleapis.com/maps/api/js?v=3&client=<PUT-YOUR-KEY-HERE>" type="text/javascript">
</script>
</head>
<body onload="load()" onunload="GUnload()">
    test <div id="map" style="width: 800px; height: 600px"></div>
</body>
    <script type="text/javascript">
function load() {
  var map = new google.maps.Map(
    document.getElementById('map'), {
      center: new google.maps.LatLng(25.6728, 76.6961),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

var georssLayer = new google.maps.KmlLayer({
url: 'http://localhost:8080/geoserver/wms/reflectlayers=topp:states&format=rss'
 });
georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', load);
</script>
</html>

I assume that geoserver is running locally on port 8080. Please put your Client Id for Google Maps This will add geoserver layer on Google maps.

Simply Save this as .html file and run it using Apache Server.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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