Develop Reference

Using Openlayers ImageCanvas canvasFunction to draw over features from another source

I'm working on some custom drawing tools that will apply very specific styling most easily created and drawn directly to a canvas. I'm having a difficult time figuring out how to align coordinates to pixels correctly and anchor it to the map.
I also can't figure out how to draw anything on the ImageCanvas before -180 (or probably >360 for that matter) , short of directly modifying the canvas's transform in a pre/post render, but I couldn't quite get that working right either.
In the fiddle below, I have two line features added to a vector source. One is drawn from -180,0 to 0,0 and the other from -400,0, to -300,0 .
There's a red line displayed below the first line feature, which is drawn by the ImageCanvas, but it's in the wrong place, and zooming in/out, or translating/panning the map causes it to move about. The red line should cover the blue line.
There's no red line visible for the second line feature. It seems to have something to do with the transform, but I'm not sure.
I've tried adding the extent to the projection object, and that did seem to change things, but it wasn't clear what should go there in my case.
fiddle: https://jsfiddle.net/jroetman/fqsh2z46/51/
const extent = [-400, -85, 400, 85]
const textent = ol.proj.transformExtent(
extent,
"EPSG:4326",
"EPSG:3857"
)
const canvas = document.createElement("canvas");
const vsource = new ol.source.Vector({ wrapX: false });
const vlayer = new ol.layer.Vector({source: vsource})
const pixProj = new ol.proj.Projection({
code: "pixel-projection",
units: "pixels",
})
const points = [[extent[0],0], [extent[0] + 100,0]].map(p => ol.proj.transform(p, "EPSG:4326", "EPSG:3857"))
const points2 = [[-180,0], [0,0]].map(p => ol.proj.transform(p, "EPSG:4326", "EPSG:3857"))
vsource.addFeature(new ol.Feature(new ol.geom.LineString(points)))
vsource.addFeature(new ol.Feature(new ol.geom.LineString(points2)))
var ic = new ol.source.ImageCanvas({
ratio: 1,
canvasFunction: (extent, resolution, pixelRatio, size, projection) => {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let f of vsource.getFeatures()) {
const coords = f.getGeometry().getCoordinates();
const pixel1 = this.map.getPixelFromCoordinate(coords[0]);
const pixel2 = this.map.getPixelFromCoordinate(coords[1]);
ctx.save();
ctx.beginPath();
ctx.moveTo(pixel1[0],pixel1[1]);
ctx.lineTo(pixel2[0],pixel2[1]);
ctx.closePath();
ctx.strokeStyle = "red";
ctx.stroke()
ctx.restore()
}
return canvas;
},
projection: pixProj
});
var imageLayer = new ol.layer.Image({
className: "annotate",
source: ic,
zIndex: 100
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vlayer,
imageLayer
],
view: new ol.View({
projection: "EPSG:3857",
minZoom: 2.75,
center: [-50000,-300000],
zoom: 6,
extent:textent
}),
});

Updated/working version created by John Robinson. Thank You!
https://jsfiddle.net/8anhd2vb/
Original posting
Ok, I worked around this issue, and simplified things a bit. I'd still be interested in understanding how to work with the ImageCanvas more, but for now....
I was able to draw directly on canvas of the vector layer itself in its "postrender"
using vlayer.getRenderer().context
https://jsfiddle.net/jroetman/fqsh2z46/95/
const extent = [-400, -85, 400, 85]
const textent = ol.proj.transformExtent(
extent,
"EPSG:4326",
"EPSG:3857"
)
const canvas = document.createElement("canvas");
const vsource = new ol.source.Vector({ wrapX: false });
const vlayer = new ol.layer.Vector({source: vsource})
const points = [[extent[0],0], [extent[0] + 100,0]].map(p => ol.proj.transform(p, "EPSG:4326", "EPSG:3857"))
const points2 = [[-50,0], [0,0]].map(p => ol.proj.transform(p, "EPSG:4326", "EPSG:3857"))
vsource.addFeature(new ol.Feature(new ol.geom.LineString(points)))
vsource.addFeature(new ol.Feature(new ol.geom.LineString(points2)))
vlayer.on('postrender', (e) => {
var ctx = vlayer.getRenderer().context;
for (let f of vsource.getFeatures()) {
const coords = f.getGeometry().getCoordinates();
const pixel1 = ol.render.getRenderPixel(e,map.getPixelFromCoordinate(coords[0]));
const pixel2 = ol.render.getRenderPixel(e,map.getPixelFromCoordinate(coords[1]));
ctx.save();
ctx.beginPath();
ctx.moveTo(pixel1[0],pixel1[1] );
ctx.lineTo(pixel2[0],pixel2[1]);
ctx.closePath();
ctx.strokeStyle = "red";
ctx.stroke()
ctx.restore()
}
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vlayer,
],
view: new ol.View({
projection: "EPSG:3857",
minZoom: 2.75,
center: ol.proj.transform([-10,-5],"EPSG:4326","EPSG:3857"),
zoom: 5,
extent:textent
}),
});

Openlayers dateline crossing linestring disappears

I am working on openlayers, there is an issue when I try to add a linestring on the map which crosses the dateline several times.
To display the linestring across two worlds in the continuous segment I have added a function HandleDateline() which returns me modified (shifted either to left or right world) coordinates.
However, when you zoom-in on the left world to current settled view the linestring disappears. Also if you try to move the map to left, the line goes away.
The weird thing is if the line crosses more than 1 time, linestring on left worlds disappears otherwise same happens for right worlds. Too observe that, remove either first 3 or last 3 points from datelinecrossing[] which I will be posting down.
I am expecting a continuous linestring crossing the international dateline without any issues like disappearing.
If there is a better approach to this, I am open to all ideas.
Here is the bin : ol dateline problem

You have to split the lines crossing the dateline programmatically at the dateline.
var points = [
[-170, -10],
[170, 0],
[-170, 10]
];
var vectorSource = new ol.source.Vector();
vectorSource.addFeature(createFeature(points));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
width: 2,
color: "red"
})
})
});
var osmLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [osmLayer, vectorLayer],
target: document.getElementById("map"),
view: new ol.View({
center: ol.proj.transform([180, 0], "EPSG:4326", "EPSG:3857"),
zoom: 3
})
});
var graticule = new ol.Graticule({
strokeStyle: new ol.style.Stroke({
color: "rgba(255,120,0,0.9)",
width: 1.5,
lineDash: [0.5, 4]
}),
showLabels: true
});
graticule.setMap(map);
// -------------------------------------------------
function createFeature(points) {
var pointsSplitted = [];
var pointsArray = [];
pointsSplitted.push(points[0]);
var lastLambda = points[0][0];
for (var i = 1; i < points.length; i++) {
var lastPoint = points[i - 1];
var nextPoint = points[i];
if (Math.abs(nextPoint[0] - lastLambda) > 180) {
var deltaX = xToValueRange(nextPoint[0] - lastPoint[0]);
var deltaY = nextPoint[1] - lastPoint[1];
var deltaXS = xToValueRange(180 - nextPoint[0]);
var deltaYS;
if (deltaX === 0) {
deltaYS = 0;
} else {
deltaYS = deltaY / deltaX * deltaXS;
}
var sign = lastPoint[0] < 0 ? -1 : 1;
pointsSplitted.push([180 * sign, nextPoint[1] + deltaYS]);
pointsArray.push(pointsSplitted);
pointsSplitted = [];
pointsSplitted.push([-180 * sign, nextPoint[1] + deltaYS]);
}
pointsSplitted.push(nextPoint);
lastLambda = nextPoint[0];
}
pointsArray.push(pointsSplitted);
var geom = new ol.geom.MultiLineString(pointsArray);
geom.transform("EPSG:4326", "EPSG:3857");
var feature = new ol.Feature({
geometry: geom
});
return feature;
}
function xToValueRange(x) {
if (Math.abs(x) > 180) {
var sign = x < 0 ? -1 : 1;
return x - 2 * 180 * sign;
} else {
return x;
}
}
html,
body,
#map {
width: 100%;
height: 100%;
overflow: hidden
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<body>
<div id="map" class="map" tabindex="0"></div>
</body>

Simplifying HandleDateline so all coordinates are either in the western part of the normal world or the eastern part of the left world seems to fix it (so if the geometry crosses the date line the extent starts in the left world)
function HandleDateline(array) {
for (var i = 0; i < array.length ; i++) {
if (array[i][0] > 0) {
array[i][0] -= 360;
}
}
}
However in worlds to the right the points west of the dateline then appear to be rendered below to linestring, while those east of the dateline are above it. Moving HandleDateline(datelinecrossing); above datelinecrossing.forEach fixes that.
You might also want to consider using a multipoint geometry for the points (unless you need them to be individually selectable).
HandleDateline(datelinecrossing);
var pdlcrossing = new ol.Feature({
geometry: new ol.geom.MultiPoint(datelinecrossing).transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(pdlcrossing);
var dlcrossing = new ol.Feature({
geometry: new ol.geom.LineString(datelinecrossing).transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(dlcrossing);
There is still a problem zooming in west of the dateline in the worlds on the right, so I think there will need to be two sets of each geometry, one offset to the left and another 360 degrees to the right:
function PlotGeometries(datelinecrossing){
var pgeom = new ol.geom.MultiPoint(datelinecrossing);
var pdlcrossing = new ol.Feature({
geometry: pgeom.clone().transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(pdlcrossing);
pgeom.translate(360,0);
var pdlcrossing2 = new ol.Feature({
geometry: pgeom.transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(pdlcrossing2);
var geom = new ol.geom.LineString(datelinecrossing);
var dlcrossing = new ol.Feature({
geometry: geom.clone().transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(dlcrossing);
geom.translate(360,0);
var dlcrossing2 = new ol.Feature({
geometry: geom.transform('EPSG:4326', 'EPSG:3857')
});
drawingSource.addFeature(dlcrossing2);
}

Just set an extent to the map view for the part of the world you're working on.

OpenLayers3 Custom Map Resize Markers on Zoom

I was recently tasked with creating the map for my Wurm Online game alliance. I crafted a genius SVG-based overlay over a static image of an in-game map. Basically it takes data from a spreadsheet and renders Villages as colored circles on the map.
However, we have members all the over the map, so went about to seeing how I could create a zoom-able web-based map of our lands. The game admins give us a map dump every year or thereabouts, so we can create custom map applications however we feel. I downloaded the recent map dump for the island/server I care about, Xanadu.
The Xanadu dump is a 62MB PNG with a resolution of 8192 x 8192 pixels. I found a tile making program (MapTiler version 7), and I went about creating tiles. After the tiles are done rendering, the program itself creates HTML files with embedded JavaScript all programatically. It gave me a head start with OpenLayers3.
I was able to re-calculate Village coordinates and cobble together a zoom-able tiled map with Village circles. Needless to say, I was very happy when I got my custom OpenLayers3 map. (Working example: http://jackswurmtools.com/Content/Static/map.html)
The way I got it set up, each map "decoration" or colored circle is its own Vector.
The chief complaint from my fellow gamers about my zoom-able map, is that the color Village circles are too big zoomed out, yet too small when zoomed in.
I've tried all kinds of things, but I have yet to find the right examples. I'm used to finding and transforming SVG elements based on events, but the OP3 canvas rendering is NOT obvious to me in the DOM.
Some of my questions are:
How can I detect when my map has been zoomed? Is there some callback I'm missing?
And when a zoom is detected, how can I iterate through all my vectors and update a circle radius.
// jacks fully zoomable xanadu map
var data =
[{
X: "6744",
Y: "-2355.75",
Name: "Amish Creek",
Villagers: ["Aniceset", "Fulano"],
BackColor: "Aquamarine",
LandMarkType: "Member"
}, {
X: "6808.75",
Y: "-2265.125",
Name: "Amish Estates",
Villagers: ["Aniceset", "Villagers"],
BackColor: "Purple",
LandMarkType: "Member"
}];
console.log(data);
var mapExtent = [0.00000000, -8192.00000000, 8192.00000000, 0.00000000];
var mapMinZoom = 0;
var mapMaxZoom = 5;
var mapMaxResolution = 1.00000000;
var tileExtent = [0.00000000, -8192.00000000, 8192.00000000, 0.00000000];
var mapResolutions = [];
for (var z = 0; z <= mapMaxZoom; z++) {
mapResolutions.push(Math.pow(2, mapMaxZoom - z) * mapMaxResolution);
}
var mapTileGrid = new ol.tilegrid.TileGrid({
extent: tileExtent,
minZoom: mapMinZoom,
resolutions: mapResolutions
});
var features = [];
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'PNGMAP',
tileGrid: mapTileGrid,
url: "http://jackswurmtools.com/Content/Static/{z}/{x}/{y}.png"
})
}),
],
view: new ol.View({
zoom: 4,
center: [6602.375, -2250.3125],
projection: ol.proj.get('PNGMap'),
maxResolution: mapTileGrid.getResolution(mapMinZoom)
}),
});
map.getView();
map.on('singleclick', function(evt) {
var coord = evt.coordinate;
console.log(coord);
$("#coord-overlay").html("[" + coord[0] + ", " + coord[1] + "]");
});
// zoom stuff?
// add layers via JSON iteration
renderSVG(data);
drawLines();
function renderSVG(data) {
var vectorSource = new ol.layer.Vector({});
console.log(map.getView().getZoom());
jQuery.each(data, function() {
var fill = new ol.style.Fill({
color: this.BackColor
});
var stroke = new ol.style.Stroke({
color: [180, 0, 0, 1],
width: 1
});
var style = new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
stroke: stroke,
radius: map.getView().getZoom() * 5,
opacity: 0.7
}),
fill: fill,
stroke: stroke,
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
text: this.Name,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
var point_feature = new ol.Feature({});
var point_geom = new ol.geom.Point([this.X, this.Y]);
point_feature.setGeometry(point_geom);
var vector_layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [point_feature],
})
});
vector_layer.setStyle(style);
map.addLayer(vector_layer);
});
}
function drawLines() {
var stroke = new ol.style.Stroke({
color: [255, 0, 0, 1],
width: 6
});
var style = new ol.style.Style({
fill: null,
stroke: stroke,
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
text: "Sandokhan / Wargasm Canal",
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
var line_feature = new ol.Feature({});
var coords = [
[6607.5, -1921],
[6894, -1921]
];
var layerLines = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.LineString(coords, 'XY'),
name: 'Line',
})]
})
});
layerLines.setStyle(style);
map.addLayer(layerLines);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.js" type="text/javascript"></script>
<div id="map"></div>
<div id="coord-overlay">[6612, -2252]</div>
<input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="layer.setOpacity(this.value)">

You are looking for a resolution listener, the API docs is an excellent place:
map.getView().on('change:resolution', function(){
var zoom = map.getView().getZoom();
// your conditions
if (zoom < 10) {
// your ol.layer.Vector assuming `vector_layer` global variable
vector_layer.setStyle(style_with_another_radius);
}
});

you can listen to the moveend event for the zoom, however it is also fired when you move the map:
map.on('moveend', function(){
var radius= map.getView().getZoom() * someFactor; // or whatever +,/ ...
yourVectorVillage.setStyle(new ol.style.Circle({ radius : radius}));
// or a style of your own where you can modify the radius
});

Multiple text labels along a linestring feature

Is it possible in OpenLayers 3 to create a text label which clones multiple times along a linestring feature, depending on a scale? Something like:
Here you can see, that when we change scale label "IX Corps Blvd" appears twice. How can we implement this?

You can achieve this with style function. My code sample is about making arrows to line string (slightly different case), but I have commented parts necessary to be changed (at least):
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector();
var styleFunction = function(feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({ // apply street style here
color: '#ffcc33',
width: 2
})
})
];
geometry.forEachSegment(function(start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
// arrows
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(end),
image: new ol.style.Icon({ // Use here label, not icon.
src: 'http://openlayers.org/en/v3.17.1/examples/data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: false,
rotation: -rotation
})
}));
});
return styles;
};
var vector = new ol.layer.Vector({
source: source,
style: styleFunction
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: /** #type {ol.geom.GeometryType} */ ('LineString')
}));
Some more effort is needed to place titles in correct placements. I left this answer like this to serve a solid starting point for building your feature.
My source:
[1] http://openlayers.org/en/master/examples/line-arrows.html

How to run Graticule labels in OpenLayers 3?

I need to run Graticule labels in OpenLayers 3. I want to show and style labels of graticule with angle units. I just found this :
https://github.com/Brictarus/ol3/blob/d41eb87204e76cbf99d61915eb89b1c16c4a4e05/examples/graticule.js
But I cant get it works in my html :
var polohaMysky = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
//projection: "EPSG:4326",
className: "suradnice",
target: document.getElementById("suradnice_div"),
undefinedHTML: '0000'
})
//------//
var mierka = new ol.control.ScaleLine();
var nahlad = new ol.control.OverviewMap();
var a1 = new ol.source.OSM();
var map = new ol.Map({
renderer: 'canvas',
// Zobrazenie súradníc myšky
controls: ol.control.defaults({
attributions: false
}).extend([polohaMysky, mierka, nahlad]),
layers: [
new ol.layer.Tile({
source: a1
})
],
target: 'map',
view: new ol.View({
//projection: 'EPSG:4326',
center: ol.proj.fromLonLat([4.8, 47.75]),
zoom: 3
})
});
var lonFormatter = function(lon) {
var formattedLon = Math.abs(Math.round(lon * 100) / 100);
formattedLon += (lon < 0) ? 'W' : ((lon > 0) ? 'E' : '');
return formattedLon;
};
var latFormatter = function(lat) {
var formattedLat = Math.abs(Math.round(lat * 100) / 100);
formattedLat += (lat < 0) ? 'S' : ((lat > 0) ? 'N' : '');
return formattedLat;
};
// Create the graticule component
var graticule = new ol.Graticule({
// the style to use for the lines, optional.
strokeStyle: new ol.style.Stroke({
color: 'rgba(255,120,0,0.9)',
width: 2,
lineDash: [0.5, 4]
}),
showLabels: true,
lonLabelFormatter: lonFormatter,
lonLabelPosition: 0.05,
latLabelFormatter: latFormatter,
latLabelPosition: 0.95
});
graticule.setMap(map);
When i run this code i just see only graticule without labels. Have you any idea what is wrong ? Thanks for any help.

From latest document , seems like OL3 is not support label yet

Graticule labels are not supported in OpenLayers 3 (latest version of OL3 is 3.20.1). See OL3 API reference here: https://openlayers.org/en/v3.20.1/apidoc/ol.Graticule.html
If you need to display graticule labels consider upgrading to OpenLayers 5, which does support graticule labels. See OL5 API reference here: https://openlayers.org/en/latest/apidoc/module-ol_Graticule.html