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
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 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 am trying to display two layers using Openlayers 3, one is a map of Greenland, and the other one is an area of interest. Both layers are tiled.
It seems to be working, but all I get are transparent tiles, so somehow I am placing the view in an area where there is nothing. I am using a UTM 24 N projection (which is the original projection of the layers involved, so no transformation is needed).
Here is my code:
var utm24_projection = new ol.proj.Projection({
code: 'EPSG:32624',
extent: [-396882, 6394710, 1280839.6, 9750153.2],
units: 'm',
axisOrientation: 'neu'
});
ol.proj.addProjection(utm24_projection);
layer1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://www.ourmapserver.gl/geoserver/wms',
params: {'LAYERS': 'ourcompany:greenland', 'TILED': true},
serverType: 'geoserver',
})
});
layer2 = new ol.layer.Tile({
//extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.TileWMS({
url: 'http://www.ourmapserver.gl/geoserver/wms',
params: {'LAYERS': 'ourcompany:interestarea', 'TILED': true},
//projection = ol.proj.get('EPSG:32624');
serverType: 'geoserver'
})
});
var layers = [
layer1,
layer2
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
projection: utm24_projection,
center: [-48864, 7491452],
zoom: 4
})
});
It worked fine when using Web Mercator.
So I have found a solution.
First of all, I removed the extent from my projection:
var utm24_projection = new ol.proj.Projection({
code: 'EPSG:32624',
units: 'm',
axisOrientation: 'neu'
});
Then when defining the view, I only configure the projection, but no center or zoom.
Finally, I adjust the view to the map size and bounds:
map.getView().fit(bounds, map.getSize());
The map is being displayed correctly.
I think that all is in the question, i'm looking for a way to fixed the scrollable area of the map to the size of it's layer.
In my case i use a static image which has 2722 px in width and 3850 px in height.
I also check the "extent" property but i can't really anderstand how to make it work, for my purpose.
That's it, can't wait for some clues or other answers :)
Have a nice day & code.
EDIT:
var extent = [0, 0, 2722, 3850];
var projection = new ol.proj.Projection({
code: 'xcd-image',
units: 'pixels',
extent: extent
});
var map = new ol.Map({
interactions: ol.interaction.defaults({mouseWheelZoom: false, doubleClickZoom: false}),
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://www.tarsis.paris/bundles/tarsisfront/carte.png',
projection: projection,
imageExtent: extent
})
})
],
controls: [],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3
})
});
What you would like to achieve is not yet supported by OpenLayers. See this answer by one of the OL developers.
As indicated by a comment in the question referenced above, you can though restrict zoomlevels by adding the minZoom parameter. You would have to change this part of your code:
controls: [],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3
})
to this:
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 3,
minZoom: 2
})
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/