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.
Related
I am trying to label vector tile point features but they always gets cropped at the tile border. I have tried (among many other things) using the renderBuffer option with no success.
I am using OL 3.19 and the vector tiles are served with Geoserver 2.10RC1 and I get the same errors in my production environment as well as editing an Boundless example (http://suite.opengeo.org/docs/latest/dataadmin/vectortiles/index.html).
I think maybe the tiles are served correctly from Geoserver and that Openlayers somehow render and then slices the tiles before presentation but I am kind of stuck on this.
Any ideas?
Screenshot of the way it looks
And the code snippet:
<script>
var style_simple = new ol.style.Style({
fill: new ol.style.Fill({
color: '#ADD8E6'
}),
stroke: new ol.style.Stroke({
color: '#880000',
width: 1
}),
text: new ol.style.Text({
text:'LOREMIPSUM'})
});
function simpleStyle(feature) {
return style_simple;
}
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0,0],
zoom: 4
}),
layers: [new ol.layer.VectorTile({
renderBuffer:50, //doesn't matter
style:simpleStyle,
source: new ol.source.VectorTile({
tilePixelRatio: 1,
tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
format: new ol.format.MVT(),
url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/testlayer#EPSG%3A3857#pbf/{z}/{x}/{-y}.pbf'
})
})]
});
</script>
I have the same problem with ol.layer.VectorTile and text labels.
All labels are sliced on the tile boundaries.
Full example: https://jsfiddle.net/rn3qc4ca/
I asked the openlayers developers for help: https://github.com/openlayers/ol3/issues/6275
-> This is not a bug in openlayers. The mapbox tiles really repeat the label points in neighbored tiles. If you use very big fonts the label will still be cropped.
My (unimplemented) idea is to place all labels into a separate ol.layer.Vector layer. As this type of layer is not sliced into tiles it is always printed completely.
I want to do the free hand draw like this post:
openlayers3 how to always enable freehand draw
But when i use with interaction dragPan is true it's doesn't keep the draw
var map = new ol.Map({
layers: layers,
interactions: ol.interaction.defaults({
dragPan: false
}),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
My example :https://jsfiddle.net/tdf08y9x/12/
It's maybe openlayers bug.
Thanks
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]
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/
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;
}