caf59eea8f
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.
66 lines
1.7 KiB
JavaScript
66 lines
1.7 KiB
JavaScript
// NOCOMPILE
|
|
// This example uses the GMapx v3 API, which we do not have an exports file for.
|
|
goog.require('ol.Map');
|
|
goog.require('ol.View2D');
|
|
goog.require('ol.interaction');
|
|
goog.require('ol.interaction.DragPan');
|
|
goog.require('ol.layer.Vector');
|
|
goog.require('ol.proj');
|
|
goog.require('ol.source.GeoJSON');
|
|
goog.require('ol.style.Fill');
|
|
goog.require('ol.style.Stroke');
|
|
goog.require('ol.style.Style');
|
|
|
|
|
|
var gmap = new google.maps.Map(document.getElementById('gmap'), {
|
|
disableDefaultUI: true,
|
|
keyboardShortcuts: false,
|
|
draggable: false,
|
|
disableDoubleClickZoom: true,
|
|
scrollwheel: false,
|
|
streetViewControl: false
|
|
});
|
|
|
|
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);
|