Develop Reference

OpenLayers move and rescale image ol.interaction.Draw

In my app I wrote an ol.interaction.Draw code that allow me to draw a circle everytime I click on one map panel, and this circle work good for me because I can move, rotate and rescale proportionally it. This is my code:
map.addInteraction(new ol.interaction.Modify({
features: this.features,
deleteCondition: function (event) {
return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
}
}));
this.draw = new ol.interaction.Draw({
features: this.features,
type: 'Circle',
draggable:true;
});
this.draw.on('drawstart', function () {
this.features.clear();
}, this);
this.map.addInteraction(this.draw);
But I would like to draw an image (e.g. with the source media/image/landscape.png), instead of one circle, but with the same features (drag and drop, rotate, rescale proportionally). How I could do it?

You would probably want to draw circles but style them using your png as an icon. Scaling would be based on the circle radius. Circle geometry doesn't include rotation but by using a geometryFunction in the interaction you could set a rotation and use that to rotate the icon (the angle needs to be adjusted depending on which edge or corner of the icon is used for the rotation).
var white = [255, 255, 255, 1];
var blue = [0, 153, 255, 1];
var width = 3;
styles = [
new ol.style.Style({
fill: new ol.style.Fill({
color: [255, 255, 255, 0.5]
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: white,
width: width + 2
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: blue,
width: width
})
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: width * 2,
fill: new ol.style.Fill({
color: blue
}),
stroke: new ol.style.Stroke({
color: white,
width: width / 2
})
}),
zIndex: Infinity
})
];
var treeStyle = new ol.style.Style({
image: new ol.style.Icon({
src: 'https://www.freeiconspng.com/uploads/oak-tree-icon-png-17.png'
})
});
styleFunction = function(feature, resolution) {
if (feature.getGeometry().getCenter) {
treeStyle.setGeometry(new ol.geom.Point(feature.getGeometry().getCenter()));
treeStyle.getImage().setRotation(feature.getGeometry().get('rotation'));
treeStyle.getImage().setScale(feature.getGeometry().getRadius()/(150*resolution));
return treeStyle;
} else {
return styles;
}
}
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source,
style: styleFunction
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
var draw = new ol.interaction.Draw({
source: source,
type: 'Circle',
geometryFunction: function(coordinates, geometry) {
var center = coordinates[0];
var last = coordinates[1];
var dx = center[0] - last[0];
var dy = center[1] - last[1];
var radius = Math.sqrt(dx * dx + dy * dy);
var rotation = Math.PI - Math.atan2(dy, dx);
geometry = geometry || new ol.geom.Circle(center, radius);
geometry.setCenter(center);
geometry.setRadius(radius);
geometry.set('rotation', rotation);
return new ol.geom.Circle(center, radius);
},
style: styleFunction
});
map.addInteraction(draw);
<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>
<div id="map" class="map"></div>

OpenLayers. How to refresh cluster?

I dynamically add features to my cluster, however, as far as I can see clustering does not work. My layer is defined like so:
var source = new ol.source.Vector({});
var cluster = new ol.source.Cluster({
distance: 10,
source: source
});
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: "rgba(255,150,0,1)"
}),
stroke: new ol.style.Stroke({
color: "rgba(255,150,0,1)",
width: 1
}),
image: new ol.style.Circle({
radius: 1,
fill: new ol.style.Fill({
color: "rgba(255,150,0,1)"
})
}),
zIndex: 1
});
var layer = new ol.layer.Vector({
source: cluster,
style: style,
zIndex: 1
});
And I add multiple features (Point geometries) in bulk in one of my functions, which take the layer as an argument. It does it like so:
layer.getSource().clear();
layer.setVisible(true);
layer.getSource().addFeatures(features); // features is a large array of features
However, if I zoom in and zoom out, I see these pictures:
and:
On the second screen shot, you can see, that my layer shows all features and ignores clustering parameter. Why is that and how can I fix it? (PS. If it matters, I'm using the latest version of OL)

this is working fine, i updates this example with your code and added features with random values
openlayers.org/en/latest/examples/cluster.html
<!DOCTYPE html>
<html>
<head>
<title>Clustered Features</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<form>
<label>cluster distance</label>
<input id="distance" type="range" min="0" max="100" step="1" value="40"/>
</form>
<script>
var distance = document.getElementById('distance');
var source = new ol.source.Vector({
});
var cluster = new ol.source.Cluster({
distance: 10,
source: source
});
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: "rgba(255,150,0,1)"
}),
stroke: new ol.style.Stroke({
color: "rgba(255,150,0,1)",
width: 1
}),
image: new ol.style.Circle({
radius: 1,
fill: new ol.style.Fill({
color: "rgba(255,150,0,1)"
})
}),
zIndex: 1
});
var clusters = new ol.layer.Vector({
source: cluster,
style: style,
zIndex: 1
});
var map = new ol.Map({
layers: [clusters],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var count = 20000;
var features = new Array(count);
var e = 4500000;
for (var i = 0; i < count; ++i) {
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
/*features[i] =*/ source.addFeature(new ol.Feature(new ol.geom.Point(coordinates)));
}
distance.addEventListener('input', function() {
cluster.setDistance(parseInt(distance.value, 10));
});
</script>
</body>
</html>
Good Luck

Measure tool with graduation like Google Maps for OpenLayers

I need to implement a measure tool with OpenLayers, and I would like to display distance on the segment, with a smart management of the scale (a mark on the segment each 10m, then each 50m, 100m, 1km, 5km, for example...), very much like the GoogleMaps "measure distance" tool.
Is there any library doing that ? What would be the good approach to implement it ?

In short: No, I don't know any lib or class that provides what you want out of the box.
Option 1: Customize ScaleLine
ScaleLine (see api docs) has the option to provide your own render function (see code). The default implementation just calculates the distance and shows it as {number} {scale} by calling the internal function updateElement_, which then updates the ScaleLine's innerHtml.
You could theoretically replace that method and set the innerHTML yourself. That approach might limit you to the development-variant of the library, because the production code is minified and those elements (innerElement_, element_) are not marked as api.
new ol.control.ScaleLine({
render: function(mapEvent) {
// do stuff
}
});
Option 2: Use the Draw Feature with customized LineString styles
so that might be too complicated and I suggest you go for the ol.interaction.Draw feature. The Measure Example shows us how one could draw stuff while the user is drawing a line. You can combine that with custom styles on a LineString.
// TODO split the uses drawn line into segments, like this mockup
const line = new ol.geom.LineString([
[20.0, 50.0],
[30.0, 47.0],
[40.0, 47.0],
[50.0, 47.0]
]);
line.transform('EPSG:4326', 'EPSG:3857');
const lineFeature = new ol.Feature(line);
const lineSource = new ol.source.Vector({
features: [lineFeature]
});
function segmentText(coord, coord2) {
const coord_t = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326');
let coordText = coord_t[1].toFixed(0) + '/' + coord_t[0].toFixed(0);
if(coord2) {
const length = ol.Sphere.getLength(new ol.geom.LineString([coord2, coord]));
const distance = (Math.round(length / 1000 * 100) / 100) + ' km';
coordText = coordText + '\n' + distance;
} else {
coordText = coordText + '\n0';
}
return new ol.style.Text({
text: coordText,
fill: new ol.style.Fill({
color: "#00f"
}),
offsetY: 25,
align: 'center',
scale: 1,
});
}
function styleFunction(feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring style
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
})
];
function createSegmentStyle(coord, coord2, rotation) {
return new ol.style.Style({
geometry: new ol.geom.Point(coord),
image: new ol.style.Icon({
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAUSURBVBhXY1Da6MPEwMDAxMDAAAALMAEkQYjH8gAAAABJRU5ErkJggg==',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation,
scale: 4
}),
text: segmentText(coord, coord2)
})
};
const firstCoord = geometry.getFirstCoordinate();
geometry.forEachSegment(function (start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
if (firstCoord[0] === start[0] && firstCoord[1] === start[1]) {
styles.push(createSegmentStyle(start, null, rotation));
}
styles.push(createSegmentStyle(end, firstCoord, rotation));
});
return styles;
}
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.Stamen({ layer:'toner-lite' })
}),
new ol.layer.Vector({
source: lineSource,
style: styleFunction
})
],
view: new ol.View({
center: ol.proj.transform(
[35, 45], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.5.0/ol.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.5.0/ol-debug.js"></script>
<div id="map" style="height:300px"></div>

change openlayer 3 circle radius using html 5 range slider

Trying to change radius of circle using html 5 range slider but its not removing 1st circle layer but map.removeLayer not working I done this befor using openlayer 2 but its not working with openlayer 3 I added the code.
Working copy of openlayer 2
Need same in open layer 3 below is the code
IMP - Required range of slider from 1 miles to 5 miles
var features = [];
var radius = $('#range').val();
var longitude = 400000;
var latitude = 300000;
var point1 = new ol.Feature(
new ol.geom.Point([400000, 400000])
);
//console.log(point1);
//alert(radius);
//var point1 = new ol.geom.Point(400000,400000);
var circle = new ol.geom.Circle([longitude, latitude], radius);
features.push(new ol.Feature({
geometry: circle
}));
var circleSource = new ol.source.Vector({
features: features
});
var layer = new ol.layer.Vector({
source: circleSource,
style: [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})]
});
// create map
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [400000, 300000],
zoom: 2
})
});
map.addLayer(layer);
function updateTextInput(val) {
document.getElementById('range').value=val;
radius = $( "#range" ).val();
console.log(radius);
map.removeLayer(layer);
// increaseRadius(30000);
var features = [];
//var radius = 100000;
var longitude = 400000;
var latitude = 300000;
var point1 = new ol.Feature(
new ol.geom.Point([400000, 400000])
);
//alert(radius);
//var point1 = new ol.geom.Point(400000,400000);
var circle = new ol.geom.Circle([longitude, latitude], radius);
features.push(new ol.Feature({
geometry: circle
}));
var circleSource = new ol.source.Vector({
features: features
});
var layer = new ol.layer.Vector({
source: circleSource,
style: [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})]
});
map.addLayer(layer);
}
html, body {
height:100%;
width: 100%;
padding:5px;
margin:0px;
}
#map {
height:90%;
width: 95%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
<div>
<input type="range" class="slider" name="rangeInput" min="1" max="5" onchange="updateTextInput(this.value);">
<input type="text" id="range" value="1">
</div>
<div id="map"></div>

You can just change the ol.Feature#setStyle style like:
// we change this on input change
var radius = 10;
var styleFunction = function() {
return new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
stroke: new ol.style.Stroke({
color: [51, 51, 51],
width: 2
}),
fill: new ol.style.Fill({
color: [51, 51, 51, .3]
})
})
});
};
var update = function(value) {
radius = value;
feature.setStyle(styleFunction);
}
var feature = new ol.Feature(new ol.geom.Point([400000, 400000]));
feature.setStyle(styleFunction);
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
})
});
[Demo]

you don't have to remove the layer and add a new one if you want to modify the radius of you circle, you can simply use :
yourCircle.setRadius(yourNewRadius);
and make sure you are using the latest version of OL3 since this function is still experimental

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