ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Simplify the google-map example

Browse Source 
By creating the ol3 map div in the html, there is no need any
more to wait for the custom GMaps control to append the ol3 map
to its parent. This also fixes an issue that sometimes prevented
the ol3 map to appear, when the GMaps tiles were loaded before
the custom control's div was appended to its parent.
This commit is contained in:
ahocevar
2014-03-02 15:56:21 +01:00
parent c3cad6b6fa
commit caf59eea8f
2 changed files with 50 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
examples/google-map.js
View File

@@ -12,9 +12,7 @@ goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
var gmap = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(0, 0),
zoom: 1,
var gmap = new google.maps.Map(document.getElementById('gmap'), {
disableDefaultUI: true,
keyboardShortcuts: false,
draggable: false,
@@ -23,52 +21,45 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
streetViewControl: false
});
var olmap = document.createElement('div');
olmap.style['width'] = '100%';
olmap.style['height'] = '100%';
gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olmap);
google.maps.event.addListenerOnce(gmap, 'tilesloaded', function() {
var vector = new ol.layer.Vector({
source: new ol.source.GeoJSON({
url: 'data/geojson/countries.geojson',
projection: 'EPSG:3857'
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
})
})
});
var center = gmap.getCenter();
var map = new ol.Map({
layers: [vector],
interactions: ol.interaction.defaults({
altShiftDragRotate: false,
dragPan: false,
touchRotate: false
}).extend([new ol.interaction.DragPan({kinetic: false})]),
renderer: 'canvas',
target: olmap,
view: new ol.View2D({
center: ol.proj.transform([center.lng(), center.lat()],
'EPSG:4326', 'EPSG:3857'),
zoom: gmap.getZoom()
})
});
var view = map.getView().getView2D();
view.on('change:center', function() {
var center = ol.proj.transform(view.getCenter(),
'EPSG:3857', 'EPSG:4326');
gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
});
view.on('change:resolution', function() {
gmap.setZoom(view.getZoom());
});
var view = new ol.View2D();
view.on('change:center', function() {
var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
});
view.on('change:resolution', function() {
gmap.setZoom(view.getZoom());
});
var vector = new ol.layer.Vector({
source: new ol.source.GeoJSON({
url: 'data/geojson/countries.geojson',
projection: 'EPSG:3857'
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
})
})
});
var olMapDiv = document.getElementById('olmap');
var map = new ol.Map({
layers: [vector],
interactions: ol.interaction.defaults({
altShiftDragRotate: false,
dragPan: false,
touchRotate: false
}).extend([new ol.interaction.DragPan({kinetic: false})]),
renderer: 'canvas',
target: olMapDiv,
view: view
});
view.setCenter([0, 0]);
view.setZoom(1);
olMapDiv.parentNode.removeChild(olMapDiv);
gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);