OpenLayers and Google Maps – Using OpenLayers to Add Layers from Google Maps and Mapserver

google mapsmapserveropenlayersopenlayers-2

I am beginner in OpenLayers and am starting with the www.openlayers.org documents, which use OpenLayers 3 to teach the basics of OpenLayers. Now, I would like to add layers from Google Maps and Mapserver, but I can't find that in the documents.

I have found many site related to my questions, but all of them use different syntax that I guess are related to OpenLayers 2.

for a beginner would you recommend ol3 or ol2 ?
if you recommend ol3, where I can find what's new in ol3 syntax?

Best Answer

If you have to work with a Google base map, OpenLayers 2 will satisfy your needs. As stated in an OpenLayers 3 issue by @ahocevar,

There will be no ol.source.GoogleMaps, unless Google change their policy and allow direct access to their map tiles.

Your only chance to use Google wiht OpenLayers 3 is to make a base map without any controls with Google Maps API, then put an ol.Map instance on the top of it. You have to synchronize the zoom levels and the viewport of the two DOM elements. You can find an example here.

@John Barça's detailed answer on the differences of the two OpenLayers libraries tells everything you have to know about them in the beginning. IMO, you should go with OpenLayers 3, because it will overgrow OL2 very soon. Try to consult with OL3's API, if you're stuck.

If you run into a problem, which you can't resolve with the API or the mailing lists, don't hesitate to share it on GIS StackExchange, the community will try to help you out.

Related Solutions

[GIS] Stylized map workflow: Illustrator to Google Maps / OpenLayers

If your data is dynamic and changes frequently, don't fix your style in rasters. Have you considered using SLD (Styled Layer Descriptor)? There is a cookbook from GeoServer with nice examples here:

http://blog.geoserver.org/2010/04/09/sld-cookbook/

If you don't want to code SLD but need a WYSIWYG editor, there is Styler from OSGeo (though I have not yet worked with it seriously):

http://projects.opengeo.org/styler/

OpenLayers 3 – Setting Layer Visibility

Aragon, your answer pointed me in the right direction. Below is my final unclean code for adding layers to an array and then controling them.

In a javascript file I initialized the map and used a function to toggle visibility as follows:

//Layer array
var layersArray = [];

//Map view (Initial location)
var view = new ol.View2D({
// the view's initial state
center: ol.proj.transform([*Lat*,*Long*], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
});

/*  Map Initialization  */
function initializeMap(){

var esribase = new ol.layer.Tile({
preload: Infinity,
  source: new ol.source.XYZ({
    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
  })
});

var poly1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly1.setVisible(false);

var poly2 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly2.setVisible(false);

var poly3 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly3.setVisible(false);

layersArray.push(esribase); //0
layersArray.push(poly1); //1
layersArray.push(poly2); //2
layersArray.push(poly3);//3

var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
  units: ol.control.ScaleLineUnits.METRIC
})
]),
renderer: ol.RendererHint.CANVAS,
target: 'map',
layers: layersArray,

view:view
});
}

// Layer visibility function
function layerswitch(evt){
layersArray[evt.value].setVisible(evt.checked);
}

In the HTML I used simple checkboxes (example of poly1 toggle):

<input  style='cursor:pointer' type="checkbox" value="1" onclick="javascript:layerswitch(this)" class="Cpoly1" name="poly1check" id="poly1check"/><label id="poly1checkLabel" for="poly1check">Polygon 1 Layer Switcher</label>

Best Answer

Related Solutions

[GIS] Stylized map workflow: Illustrator to Google Maps / OpenLayers

OpenLayers 3 – Setting Layer Visibility

Related Question