I am new to open layer 3 api's, I have a query : I have marked some locations and custom info window , which opens up on click of these markers. Please find fiddle here
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([78, 21]),
zoom: 2
}),
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({
layer: 'osm'
})
})]
});
Is it possible do re-size the boxes when map is zommed in and out using mouse wheel. I plan to have many more cities marked , and boxes to be drawn on click of each marker and these boxes should be opened by default, so it would cover whole map . Can I change box size depending upon zoom level.
And also which layer to set to have map without any detailed information like airports , roads etc . I want map to have basic minimalist layer ,with country boundaries and city names only.
Thanks
You can listen to the view change:resolution event and make the boxes bigger using the zoom level. Here's an example:
var view = new ol.View({
center: ol.proj.fromLonLat([78, 21])
});
var parentZoom = null;
view.on('change:resolution', function() {
var zoom = view.getZoom();
if (parentZoom !== null) {
$('#zoom').text([
'Parent zoom:',
parentZoom,
', Current zoom:',
zoom
].join(' '));
}
var width = 50 + (zoom * 10);
var height = 30 + (zoom * 10);
$('.mapDivs').width(width + 'px').height(height + 'px');
parentZoom = zoom;
}, this);
view.setZoom(2);
See it live on JSFiddle (your example updated with the above code): http://jsfiddle.net/pe7hyr0x/15/
Related
I am using OpenLayers 3.5.0 to embed a map in my website, and place a marker overlay at specific coordinates. I've also added a fullscreen control. Both work individually, but in full-screen mode the marker is no longer at the specified coordinates. It also moves around when panning instead of staying fixed to one map position.
Here's the code that sets up the map:
function map(lon, lat) {
var coords = ol.proj.fromLonLat([lon, lat], 'EPSG:3857');
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.FullScreen()
]),
layers: [ layer ],
target: 'map',
view: new ol.View({
maxZoom: 19,
zoom: 15,
center: coords
}),
interactions: ol.interaction.defaults({mouseWheelZoom:false})
});
map.addOverlay(new ol.Overlay({
position: coords,
positioning: 'bottom-center',
element: $('<img>')
.addClass('location-popover')
.attr('src', 'pin.jpg')
}));
}
Is there a way I can make the overlay play nicely in full-screen mode?
I had a similar issue with the popovers/markers being in the wrong position. Not sure if it's the same thing you're experiencing but in my case I was appending data to the page along with the markers, and this was adding a scrollbar to the window. This affected the positioning, so what I had to do was call
map.updateSize();
after I was done adding everything. After that everything lined up correctly.
I would like you use select interaction to add a feature, but the e.coordinate shows undefined.
var select = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0288D1',
width: 2
})
})
});
map.addInteraction(select);
select.on('select', function(e) {
var feat = new ol.Feature({
geometry: new ol.geom.Point(e.coordinate),
style: style1
});
alert(e.coordinate);
feat.setStyle(style1);
layerVector.getSource().addFeature(feat);
});
If someone know the reason, tell me how to get the coordinate when i click on viewer with this select interaction.
UPDATE
What you ask in comments (about listeners) can be easier if you become a friend of API Docs. In my beginning it was very hard to know them all, but the docs are much, much better so let it be your source.
Each part of OpenLayers has its own listeners, so, for instance, click at ol.Map, scroll to the "Fires:" section and you'll see the several listeners, the same with ol.View and so forth.
To get clicked coordinate inside ol.interaction.Select listener use:
select.on('select', function(evt){
var coord = evt.mapBrowserEvent.coordinate;
console.info(coord);
// ...
});
I am using OpenLayers 3.10.1 and the following code:
map.on('click', function (map, evt) {
var mouseCoords = [evt.originalEvent.offsetX, evt.originalEvent.offsetY];
alert(mouseCoords);
});
When I click as near as I can to the upper left corner of the map in IE or Chrome, I get an alert with the mouse coordinates offset from the top left corner of the map div, i.e. something sensible like [3,4].
But when I try the same things I get the mouse coordinates relative to the browser window and not the map div. Does anyone know why this is? Am I using an outdated way to find the mouse coordinates (ultimately so I can calculate which feature was clicked)?
Some alternatives:
map.on('click', function(evt){
console.info(evt.pixel);
console.info(map.getPixelFromCoordinate(evt.coordinate));
});
The following code works for me (openlayer 4.4, angular 4+)
_initMap() {
console.info("_initMap");
this.mapW = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'myMapDiv',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([this.lon, this.lat]);,
zoom: 12
})
});
const theMap = this.mapW;
// display on click
this.mapW.on('click', function(evt) {
/* // you want to detect feature click
var feature = theMap.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var fname = feature.getProperties().name;
console.info("feature clicked:" + fname);
return;
}
*/
console.info(evt.coordinate);
console.info(ol.proj.toLonLat(evt.coordinate)); // <=== coordinate projection
});
JS console results (when clicking close to Grenoble in France):
(2) [637000.3050167585, 5652336.68427412]
(2) [5.722271099853512, 45.19540527485873]
According to a book I am reading about Openlayers 3 , all I have to do, to reset the renderer is to do this in the Map initialization
renderer: 'dom'
so my code is
var map = new ol.Map({
target: 'map',
layers: [layer],
renderer: 'dom',
view: view,
});
When I load the page, the console gives no errors, but the map does not load at all. I use Openlayers 3.9.0. What is going wrong here?
Thanks
EDIT
This is all the openlayers code
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var kbz = new ol.interaction.KeyboardZoom();
var dr = new ol.interaction.DragRotateAndZoom();
var control = new ol.control.FullScreen();
var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');
var we = new ol.Overlay({
position: center,
element: document.getElementById('we')
});
var view = new ol.View({
center: center,
zoom: 6
});
var map = new ol.Map({
target: 'map',
layers: [layer],
renderer: 'dom',
view: view
});
map.addInteraction(kbz);
map.addInteraction(dr);
map.addControl(control);
map.addOverlay(we);
You have to set the size of the map target element, when using the dom renderer.
Canvas elements, which are used by the default renderer, has a default height of 150px, while normal divs don't have a default height. Setting the height of the target should make you map appear:
#map {
height: 200px;
}
I have a map with several markers that all have a label representing data at that marker point. When these markers overlap, the labels are always on top of all markers. I would like only the label for the top marker being shown. If two markers overlap right now, the label for the bottom marker still shows above the top marker. Does anyone know how to solve this problem in openlayers 3?
You can use the zIndex style property to stick labels to the marker. When working with a layer style function, the layer definition could look like this:
var style = new ol.style.Style({
text: new ol.style.Text({
text: '',
// ...
}),
image: new ol.style.Icon({
// ...
})
});
var styles = [style];
var index = 0;
var vectorLayer = new ol.layer.Vector({
style: function(feature, resolution) {
style.getText().setText(feature.get('name'));
style.setZIndex(index);
index = (index == Number.MAX_VALUE) ? 0 : index + 1;
return styles;
}
});