I'd like to use the OpenLayers 3 rotation interaction on a browser running under Linux. This allows the map to be rotate by dragging whilst pressing Alt and Ctrl. This works fine on Windows, however not in Redhat 6u2 and likely other distributions as the Alt key is reserved for X-Windows drag Window behaviour.
Firstly I customized the DragRotate with ol.events.condition.shiftKeyOnly, which worked, but conflicted with the zoom-box functionality, i.e. draws a blue zoom box whilst rotating.
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})],
target: 'map',
view: new ol.View({
center: [-25860000, 4130000],
zoom: 10
}),
interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
condition: ol.events.condition.shiftKeyOnly
})])
});
I'd like to retain the shift-drag for the zoom box and use some other key/combination, maybe 'R+Shift'? I've tried to customize the condition. See my JSFiddle
var customCondition = function(mapBrowserEvent) {
return false; // TODO
};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})],
target: 'map',
view: new ol.View({
center: [-25860000, 4130000],
zoom: 10
}),
interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
condition: customCondition
})])
});
I can't find anything in the API about implementing custom conditions other than ol.events and MapBrowserEvent documentation. Using a debugger I can't find any attributes in the structure or nested originalEvent that contains a keycode etc.
How can I implement the customCondition function to detect when a given key is pressed during the drag?
Is there any other way of implementing a drag rotate that works in Linux
Here is a custom condition - Ctrl + Shift:
ol.events.condition.custom = function(mapBrowserEvent) {
var browserEvent = mapBrowserEvent.originalEvent;
return (browserEvent.ctrlKey && browserEvent.shiftKey);
};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})],
target: 'map',
view: new ol.View({
center: [-25860000, 4130000],
zoom: 10
}),
interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
condition: ol.events.condition.custom
})])
});
Related
I cannot assign polygon property to the area I want on the map in my project that I have created with open layers and angular
My method that I have created my map and then call in ngOnit()
IntilazeMapParsel() {
this.view = new View({
center: [3876682.9740679907, 4746346.604388495],
zoom: 6.5,
// minZoom:5.8
});
console.log("mao")
this.mapParsel = new Map({
view:this.view,
layers: [
new Tile({
source: new XYZ({
url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}',
}),
zIndex: -5444
}),
],
target: 'ol-map-parsel'
});
}
Here is the code I wrote because I want to show the multypolygon value on my map.
I don't understand why it doesn't appear on the map, I would appreciate it if you could help.
as my title assert
I would like to add a new "Burning" level of type stamen to my OpenLayers map. With others layer i.e watercolor/toner atc, it work, but not with Burning.
My code for doing this is:
var stamenLayers = new ol.layer.Group({
title: 'Stamen',
layers: [
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'burning' // toner terrain toner-lite watercolor <-- this work
})
}),
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'terrain-labels'
})
})
]
});
I wanna change the url of my ol3 map source. I've tryed using things such as map.set or map.getlayers().set or whatever but I can't seem to find a way to access my source object. Here's the code:
function init() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'PIXELS',
tileGrid: mapTileGrid,
url: loc
})
})
],
view: new ol.View({
projection: ol.proj.get('PIXELS'),
extent: mapExtent,
maxResolution: mapTileGrid.getResolution(0)
})
});
map.getView().fit(mapExtent, map.getSize());
console.log(map.get("layergroup").get("layers").get("url"));
map.get("layergroup").get("layers").set("url",loc);
}
What's a way to change the url property and reload the layer ?
I also tried using the setSource function as in the following answer : here
but it seems to not work (can't setSource of undefined).
try the following
function init() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'PIXELS',
tileGrid: mapTileGrid,
url: loc
})
})
],
view: new ol.View({
projection: ol.proj.get('PIXELS'),
extent: mapExtent,
maxResolution: mapTileGrid.getResolution(0)
})
});
map.getView().fit(mapExtent, map.getSize());
//get alll the layers exist on your map
var layers = map.getLayers();
//lets assume you want to set the url for the first layer found
layers[0].getSource().setUrl(loc);
}
I have a ol 3.10.1 map where the goal is to redraw the features of a layer dynamically. On the road to get there, I'm using the source.clear() function. The strange thing is that the source.clear() actually clear the features from the layer at the current zoom level, but while zooming in or out the features are still there. Am I using the source.clear() function the correct way? Please find bellow the code snippet which I'm using for testing purposes.
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'Point': [new ol.style.Style({
image: image
})]};
var styleFunction = function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
var CITYClusterSource = new ol.source.Cluster({
source: new ol.source.Vector({
url: 'world_cities.json',
format: new ol.format.GeoJSON(),
projection: 'EPSG:3857'
}),
})
var CITYClusterLayer = new ol.layer.Vector({
source: CITYClusterSource,
style: styleFunction
});
setTimeout(function () { CITYClusterSource.clear(); }, 5000);
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
CITYClusterLayer
],
view: new ol.View({
center: ol.proj.transform([15.0, 45.0], 'EPSG:4326', 'EPSG:3857'),
zoom:3
})
});
I'm using the setTimout() function to have the features visible for some seconds, before they are supposed to be cleared.
Please advice.
UPDATE: http://jsfiddle.net/jonataswalker/ayewaz87/
I forgot, OL will load your features again and again, for each resolution. So if you want to remove once and for all, use a custom loader, see fiddle.
Your source is asynchronously loaded, so set a timeout when it's ready:
CITYClusterSource.once('change', function(evt){
if (CITYClusterSource.getState() === 'ready') {
// now the source is fully loaded
setTimeout(function () { CITYClusterSource.clear(); }, 5000);
}
});
Note the once method, you can use on instead of it.
I am trying to load a map from my geoserver in a webpage, when it loads it almost doubles itself. The first map is a preview from the geoserver admin page, the second is how it loads it when pulled up on a webpage.
I ended up figuring it out by adding some properties into the layers here is my code:
mapInit: function() {
var _this = this;
this.map = new ol.Map({
target: 'mapdiv', //element to render in
interactions: ol.interaction.defaults({
shiftDragZoom: false,
altShiftDragRotate: false,
dragPan: false
}),
controls: ol.control.defaults({
attributionOptions: ({
collapsible: true
})
}).extend([ new ol.control.ScaleLine() ]),
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://***.**.**.***:8080/geoserver/Global/wms',
params: {'LAYERS': 'Global Map', 'TILED': true},
noWrap: true, //<----added this
wrapX: false //<----added this
}),
//constrain the extent of the servable tiles to only 1 world's coordinates.
extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34] //<----added this
})
],
Openlayers uses a tile system and the map will continually repeat itself in a web browser to ensure constant coverage and a seamless view that fills the screen/div. The easiest way to focus in on a specific area is with a zoom level.
var map = new OpenLayers.Map("mapdiv");
map.setCenter(new OpenLayers.LonLat(yourLong, yourLat), zoomLevel);
The code above would center on a specific area with a given zoom level as an int value. There are other ways to set the bounds and zoom here:
http://dev.openlayers.org/docs/files/OpenLayers/BaseTypes/Bounds-js.html