OpenLayers map with Google layer zoom issue
Using OpenLayers and a Google layer - when zooming in and out there is a lag on the points being drawn.
by wild_kappa
HTML
<script src="https://maps.google.com/maps/api/js?v=3.2&sensor=false&region=GB"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<div style="width:500px; height:500px" id="map"></div>
JavaScript
//
// data
//
geoJSONdata = {
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Point",
"coordinates": [
-2.2158382424639407,
51.92890260160341
]
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
-3.8887305450462444,
51.13235843741363
]
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
-2.216374795791103,
52.98176876560241
]
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
-3.5090384944753708,
52.3539850188594
]
}
}
]
};
//
// main code
// n.b. libraries set via jsfiddle 'External Resources' are as follows:
// google maps api v3.2
// open layers v 2.13.1
//
var map = new OpenLayers.Map('map');
var google_terrain = new OpenLayers.Layer.Google(
"Google Terrain",
{type: google.maps.MapTypeId.TERRAIN}
);
// define a new layer
var multi_point_layer = new OpenLayers.Layer.Vector("Multi Points");
// convert projection of our data - Google <-> OpenLayers
var geojson_format = new OpenLayers.Format.GeoJSON({
'internalProjection': new OpenLayers.Projection("EPSG:900913"), //google
'externalProjection': new OpenLayers.Projection("EPSG:4326") //open layers
});
// read in our geoJSON and add points to our layer
var features = geojson_format.read(geoJSONdata);
multi_point_layer.addFeatures(features);
// add map and point layers to the map
map.addLayers([google_terrain, multi_point_layer]);
// set centre (don't forget to transform) and inital zoom
map.setCenter(
new...