We Keep Coding

Openlayers set exact same scale as background-layer to all features

I used OpenLayers in Angular2 to show a custom SVG-image as a background map. This works perfectly and I can zoom and scroll across my map.
Now I implemented Features (also svg) and put them all in a seperate Vector-Layer above the map. They are all shown but when I zoom, they get resized weird.
When I zoom out, the Features are getting bigger, when I zoom in the features are getting smaller. I would like to have them always in the same size, so that they are getting smaller when I zoom out (as if it would be static content on the map).
I tried with an extra style-function and experimented by recalculation the scale of the current style of the feature. But I did not get this to work.
So my question ist: How do I put another Layer with Features above an existing layer and when zooming out everything gets smaller?
Am I doing something wrong? Do I need Projections? I am quite new to Openlayers.
Thanks in advance!
A minimal code example, the SVG-Points are getting bigger and bigger when zooming out (same problem at the OL code example: Official Code Example: When Zooming out, the marker gets as big as a whole country or continent....
let center = ol.proj.transform([8.30368, 47.05243], 'EPSG:4326', 'EPSG:3857');
let style = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0, 0],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
src: '/assets/images/test.svg',
imgSize: [50, 50],
size: [50, 50],
scale: 1.0
})
});
let iconFeature = new ol.Feature({
geometry: new ol.geom.Point(center)
});
iconFeature.setStyle((resolution) => {
return [iconStyle];
});
this.featureArray.push(iconFeature);
let vectorSource = new ol.source.Vector({
features: this.featureArray
});
let extent = [0, 0, 1024, 968];
let projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
// load vector layer for dynamic elements
let vectorLayer = new ol.layer.Vector({
source: vectorSource,
projection: projection,
imageExtent: extent
});
this.layerArray.push(vectorLayer);
// basic setup
this.map = new ol.Map({
renderer: 'canvas',
layers: this.layerArray,
view: new ol.View({
center: center,
zoom: 16,
minZoom: 1,
maxZoom: 26,
})
});

You mean something like https://codepen.io/anon/pen/WOmqmN?&editors=1110?
That requires a style function as style, where you scale the icon according to the resolution:
function(feature, resolution) {
style.getImage().setScale(16000 / resolution);
}
16000 ist the resolution at which the icon size should be the icon image's original size.
Also note that the ol.layer.Vector instance is configured with
updateWhileAnimating: true,
updateWhileInteracting: true
to make sure the icon size is updated whenever the resolution changes.

Issue with layer rotation via compose hooks

I'm developing a tool to rotate a static image layer and I'm currently facing an issue on mobile.
Static image layer must rotate around a specific point. I use precompose and postcompose hooks in order to alter canvas and make the rotation.
It works great on desktop but i don't understand what is going on on mobile (Android Chrome or FF).
jsFiddle : https://jsfiddle.net/wuty2m9v/7/
/* Vars */
const center = ol.proj.transform([1.44, 43.603], "EPSG:4326", "EPSG:3857")
const imgSize = [400, 267]
const imgExtent = [center[0], center[1], center[0] + imgSize[0], center[1] + imgSize[1]]
let rotation = 45
/* Init map */
const map = new ol.Map({
target: 'map',
view: new ol.View({
zoom: 16,
center,
}),
layers: [
// Map tiles layer
new ol.layer.Tile({
source: new ol.source.OSM()
}),
// Feature layer
new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(center),
}),
],
}),
}),
],
})
/* Init image layer */
const imgLayer = new ol.layer.Image({
opacity: 0.7,
source: new ol.source.ImageStatic({
url: "https://pbs.twimg.com/profile_images/685220121598660608/2uZUdcS1.jpg",
imageExtent: imgExtent,
})
})
imgLayer.on("precompose", evt => {
const pixel = map.getPixelFromCoordinate(center)
const ctx = evt.context
ctx.save()
ctx.translate(pixel[0], pixel[1])
ctx.rotate(rotation * Math.PI / 180)
ctx.translate(-pixel[0], -pixel[1])
})
imgLayer.on("postcompose", evt => {
const ctx = evt.context
ctx.restore()
})
map.addLayer(imgLayer)
On desktop, image rotate correctly around the point. Drag the map : point and image follow the map.
On mobile, image doesn't rotate correctly around the point, it is made around the canvas origin, canvas translations don't look good. Drag the map to watch the chaos :)

You'll need to take into account the pixel ratio when doing transforms. The pixels you get from map.getPixelFromCoordinate are css pixels. To get canvas pixels, you need to multiply them by ol.has.DEVICE_PIXEL_RATIO:
ctx.translate(pixel[0] * ol.has.DEVICE_PIXEL_RATIO, pixel[1] * ol.has.DEVICE_PIXEL_RATIO);
and
ctx.translate(-pixel[0] * ol.has.DEVICE_PIXEL_RATIO, -pixel[1] * ol.has.DEVICE_PIXEL_RATIO);
See https://jsfiddle.net/wuty2m9v/8/ for an updated version of your JSFiddle.

If you are interesting in drawing images on a OL3 map, take a look at the ol.source.GeoImage I've published on GitHub: http://viglino.github.io/ol3-ext/examples/map.geoimage.html
With your example: https://jsfiddle.net/Viglino/cqL17a3y/
/* Init image layer */
const imgLayer = new ol.layer.Image({
opacity: 0.7,
source: new ol.source.GeoImage({
url: "https://pbs.twimg.com/profile_images/685220121598660608/2uZUdcS1.jpg",
imageCenter: center,
imageScale: [1,1],
imageRotate: rotation*Math.PI/180,
projection: 'EPSG:3857',
})
})
Regards

OL3, pixel based zoomify with vector overlay incorrectly offset

Asked at GIS, but nothing forthcoming, hoping someone here might have ideas. Sorry for the cross post. Am updating a project from OL2, where what I'm attempting worked fine. Project isn't a map, it's images of text documents converted to zoom tiles.
Added a vector layer of polygons that represent the coordinates of terms/phrases in text found in the OCR text.
This fiddle shows a page with highlighting for 3 hits on the term "texas". Note the position of the terms is correct on one axis, but simply too high on the screen. Again, same pixel coords worked in OL2.
Excerpt from fiddle:
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: source
}),
new ol.layer.Vector({
source: vectorSource,
style: styleFunction
})
],
target: 'zoom',
view: new ol.View({
projection: proj,
constrainRotation: 0,
center: imgCenter,
zoom: 0,
// constrain the center: center cannot be set outside
// this extent
extent: [0, -imgHeight, imgWidth, 0]
})
});
Problem seems to be related to the projection, extent, or centering. Any help here would be greatly appreciated.

It seems you're using wrong coordinates. I made a fiddle which you can draw a box around a text and you'll see the coordinates on top.
So if you change for example your coordinates to:
var geojsonObject = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'MultiPolygon',
'coordinates': [
[[[1849.90, -2385.40], [1849.90, -2619.07], [2258.83, -2619.07], [2258.83, -2385.40]]]
]
}
}
]
};
The polygon will be where you want.

OpenLayers 3: Trying to add image underlay to a vector layer

currently i have a vector map displayed using a KML file as the vector source.
what i want to do is have an image underlay this vector map.
The map is an indoor floormap, the image is the exact same as the vector map only there is more details in it, text written on it etc. What i need is for the map image to underlay the vector map so that the walls of the vector map align perfectly with the walls of the image. This can happen because the KML was created by tracing on top of the images using QGIS.
so far ive been able to have the KML vector map and png image appear on the map, but they are not alligned with each other and are not the same size. This is what i need help with!
here some code for what i currently have:
create the map, no layers yet (maps selected from dropdown boxes)
var map = new ol.Map({
layers: [],
target: 'floormap',
interactions: ol.interaction.defaults({mouseWheelZoom:false}),
view: new ol.View({
center: [0, 0],
zoom: 19,
minZoom: 15,
maxZoom: 30
})
});
add selected map (KML) to map
map.removeLayer(vector);
vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: MAPS_URL + maps[map_id],
format: new ol.format.KML()
})
});
map.addLayer(vector);
setMapExtent(vector);
now i tried to add the image, which works but its not alligned
// this part here i feel may be the problem,
// i just copied and pasted from an example om openlayers.org,
// i dont actually know much about the extent and how to match it to
// the vector map
var extent = [0,0,1024,684];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
image = new ol.layer.Image({
source: new ol.source.ImageStatic({
attributions: [
new ol.Attribution({
html: '© xkcd'
})
],
url: MAPS_URL + images[map_id],
projection: projection,
imageExtent: extent
})
});
map.addLayer(image);
the setMapExtent method
function setMapExtent(vectorMap) {
var vectorSource = vectorMap.getSource();
var listenerKey = vectorSource.on('change', function () {
if (vectorSource.getState() === 'ready') {
var extent = vectorSource.getExtent();
map.getView().fitExtent(extent, map.getSize());
vectorSource.unByKey(listenerKey);
}
});
}
at this point i have a vector map with an image sitting way above the map, and the image seems to be smaller too.
Can anyone help me with this issue?
*** Solution! ***
a working solution, although probably not the best way to do it, but it works none the less.
var map = new ol.Map({
layers: [],
target: 'floormap',
interactions: ol.interaction.defaults({mouseWheelZoom:false}),
view: new ol.View({
center: [0, 0],
zoom: 19,
minZoom: 15,
maxZoom: 30
})
});
add new map layer
map.removeLayer(vector);
vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: MAPS_URL + maps[map_id],
format: new ol.format.KML()
})
});
map.addLayer(vector);
setMapExtent(vector);
// call image adding function pass in vector
// to get its extend
addImage(vector);
the addImage function
function addImage(vectorMap) {
var vectorSource = vectorMap.getSource();
// listen for one change on the vector to get the extent of it
// for use in setting the image extent. tried to use on.('load')
// but it didnt work
var listenerKey = vectorSource.once('change', function () {
var extent = vectorSource.getExtent();
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
image = new ol.layer.Image({
source: new ol.source.ImageStatic({
attributions: [],
url: MAPS_URL + images[map_id],
projection: projection,
imageExtent: extent
})
});
// remove vector layer else they keep stacking up
map.removeLayer(vector);
// add image
map.addLayer(image);
// re-add vector only push so it goes above the image
map.getLayers().push(vector);
});
}
seems to work pretty well! can anyone help me with layer ordering?

Your static image must be georeferenced correctly with the view's projection.
Default view's projection is EPSG:3857 (Spherical Mercator)., the extent of this projection is [-20026376.39, -20048966.10, 20026376.39, 20048966.10]
In your code you specify a projection in pixels for your static layer. You need to use the view's projection, something like this :
// Here the extent of your layer in EPSG:3857 -> [minx, miy, max, mayy]
var extent = [-10000000, -10000000, 10000000, 10000000];
image = new ol.layer.Image({
source: new ol.source.ImageStatic({
attributions: [
new ol.Attribution({
html: '© xkcd'
})
],
url: MAPS_URL + images[map_id],
imageSize: [1024, 684], // Don't forget the image size here
imageExtent: extent
})
});
map.addLayer(image);
Update:
For layer ordering if you want your vector layer on top use push:
http://openlayers.org/en/v3.8.2/apidoc/ol.Collection.html#push
map.getLayers().push(vector)

Openlayers 3 - Issue using a polygon as a background

I am developing a solution that uses Openlayers 3 to display static images of text documents that have been converted from PDFs. Some of my documents are black text on a white background - the page I'm displaying openlayers on is also black, as is the map background - so the document is invisible.
My current solution is to draw a white filled polygon at the same extent as the image being loaded but behind the text - essentially providing a white background for the extent I'm interested in.
The problem is when I pan around, the polygon is constantly redrawing, causing some undesirable effects. See this jsFiddle for an example.
Is there an alternative way of setting the background colour of a layer or is there a setting that will prevent the polygon from flickering.
CSS
body{
background-color:black;
}
HTML
<div id="map" class="map"></div>
Javascript
var imgURL = 'http://i.stack.imgur.com/9C8Xu.png';
var extent = [0,0,488,198];
var projection = new ol.proj.Projection({
units: 'pixels',
extent: extent
});
//A polygon that will represent a white background
var polyFeature = new ol.Feature({
geometry: new ol.geom.Polygon([
[
[0, extent[1]],
[0, extent[3]],
[extent[2], extent[3]],
[extent[2], extent[1]]
]
])
});
//A base layer to hold the polygon feature
var baseLayer = new ol.layer.Image({
source: new ol.source.ImageVector({
source: new ol.source.Vector({
features: [polyFeature]
}),
style: new ol.style.Style({
fill: new ol.style.Fill({color: 'white'})
})
})
});
var docLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: imgURL,
imageExtent: extent
})});
// build the map
var map = new ol.Map({
layers:[baseLayer,docLayer],
target: 'map',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
zoom: 2.5
})
});