Google Maps and Openlayers 3 integration example - google-maps

Question

I'm using the Open Layers 3 example located at...
http://openlayers.org/en/v3.0.0/examples/google-map.html
...and I have had some success.
The problem I am running into is getting my OL3 vector and MapServer layers to be projected correctly over the web-Mercator Google Map.
I have used the example as a template but it has not worked.
Currently all MapServer and Vector layers are projected as ESPG:4326 but need to be in Web-Mercator to line up with the under lying google map.
Any help is greatly appreciated!!

Answer 1

You could try the OL3-Google-Maps library, one that combines the use of Google Maps API and OpenLayers together, and see if it fits your needs.
It's not a perfect solution, so be sure to read about the Limitations of the library.

Answer 2

The actual answer that I have implemented is here...
If this helps you please up-vote it to off-set the down-votes this received.
http://openlayers.org/en/v3.0.0/examples/google-map.html
If you need to use google imagery in you OpenLayers map this is the way to do it.
If you are using SPA MVC AngularJS architecture make sure that you make your call to the google API in your page early enough and notice that this example loads both a google div and a OpenLayers div then combines them at the end of loading...so if anything errors or stops the loading process after initialization you will see two div's the google div first and the OpenLayers div under it...once all errors are resolved and you process is able to execute ...
olMapDiv.parentNode.removeChild(olMapDiv);
gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);
you will see the maps combined.
If you are transforming data from EPSG:4326 to EPSG:3857 you will want to change your view projection to...
var view = new ol.View({
projection: 'EPSG:3857',
// make sure the view doesn't go beyond the 22 zoom levels of Google Maps
maxZoom: 21
});
and you will also want to transform and data points you have coming in, I did it like this...
*shape = data points from data base
var geoJsonObj = {
'type': 'Feature',
'geometry': JSON.parse(shape),
'name': 'YourName',
'id': YourName.YourID
}
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geoJsonObj, { defaultDataProjection: "EPSG:4326", featureProjection:"EPSG:3857"})
});
YourLayer = new ol.layer.Vector({
title: YourName.YourID,
source: vectorSource,
id: YourName.YourID,
name: 'YourName',
label: response.DataList[key].Label,
fill: response.DataList[key].Color,
stroke: defaultStrokeHex,
style: function (feature, resolution) {
var text = resolution * 100000 < 10 ? response.DataList[key].Label: '';
if (text != "") {
styleCache[text] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
text: text,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 3
})
}),
fill: new ol.style.Fill({
color: Utility.convertHex(response.DataList[key].Shade, '0.5')
})
})];
}
else if (text == "") {
styleCache[text] = [new ol.style.Style({
fill: new ol.style.Fill({
color: Utility.convertHex(response.DataList[key].Shade, '0.5')
})
})
]
} return styleCache[text];
}
});
There is obviously more than you need in the vector layer example above.
...an addendum to the code above
If you want the ability to turn off the satellite imagery layer below you vector data or map-server layers you can not combine the "olmap" and "gmap" div so comment those lines out and add this style to both you "gmap" and "olmap" div's
<div id="gmap" style="padding: 0px; width: 100vw; height: 90vh;z-index: 0; position:absolute"></div>
<div id="olmap" style="padding: 0px; width: 100vw; height: 90vh;z-index: 1; position:absolute"></div>
the only difference being the "z-index" and now you will have control to set the visibility on your "gmap" div dynamically...