I'm writing a directive that controls OpenLayers 3 map. The problem arises when I want to add two layers. For example KML layer and GeoJSON layer. Map then does not work smoothly. You can only zoom but do not move it. Here my code, can you see something you can refactoring?
This is view:
<openlayer geojson-data="['file.geojson']" kml-data="['file.kml']"></openlayer>
and this is piece of code:
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
and after initial my map I check if scope exist and do some code, ex.:
if(scope.geojsonData) {
setMapGeo();
}
if(scope.kmlData) {
setMapKML();
}
and these are the two methods:
function setMapKML() {
var KMLLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: scope.kmlData,
format: new ol.format.KML()
})
});
map.addLayer(KMLLayer);
}
function setMapGeo() {
var geoJsonLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: scope.geojsonData,
format: new ol.format.GeoJSON()
})
});
map.addLayer(geoJsonLayer);
}
Maybe in the code I'm doing something wrong? The problem is that it adds two layers to one map?
EDIT I do not think it depends on the size of the data. For example, if I add a layer marker is the situation also takes place.
var vectorMarker = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 1,
scale: 0.07,
src: 'marker.png'
}))
})
});
map.addLayer(vectorMarker);
var point = new ol.geom.Point(ol.proj.transform([33.33, 19.22], 'EPSG:4326', 'EPSG:3857'));
var iconFeature = new ol.Feature({
geometry: point
});
vectorSource.addFeature(iconFeature);