How can I change the standard blue color and size of points in openlayers 3?
I do like this:
while (lats.length > 0) {
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lons.shift(), lats.shift()], 'EPSG:4326', 'EPSG:3857'))
})
]
})
});
map.addLayer(layer);
}
If I add styles then either nothing changes, or everything does not work. How to add styles here?
this is answer:
var vectorSource = new ol.source.Vector({
//create empty vector
});
var styleGreen = new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: 'green'
})
})
});
while (lats.length > 0) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lons.shift(), lats.shift()], 'EPSG:4326', 'EPSG:3857'))
});
vectorSource.addFeature(iconFeature);
}
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleGreen
});
map.addLayer(vectorLayer);
Related
i can display json lat and lon in map but i want draw lines between two selected points.
like this Here
here i can click all place in Map but i want enable click only displayed points only.
i used this link to display my points Link2 now i want draw lines between two points
<script>
var flickrSource = new ol.source.Vector();
function flickrStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
}),
}),
text: new ol.style.Text({
text: feature.getGeometryName(),
fill: new ol.style.Fill({color: 'blue'}),
stroke: new ol.style.Stroke({color: 'white', width: 1}),
offsetX: 0,
offsetY: 15
}),
});
return [style];
}
var flickrLayer = new ol.layer.Vector({
source: flickrSource,
style: flickrStyle
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 3
});
var source = new ol.source.Vector({wrapX: false});
var map = new ol.Map({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
function successHandler(data) {
var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
data.items.forEach(function(item) {
var feature = new ol.Feature(item);
feature.setGeometryName(item.name);
var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);
flickrSource.addFeature(feature);
});
}
</script>
Get the co-ordinates of this two points and draw LineString
var thing = new ol.geom.LineString(points);
var featurething = new ol.Feature({
name: "Thing",
geometry: thing
});
flickrSource.addFeature(featurething);
var flickrSource = new ol.source.Vector();
var data = {
"items": [{
name: 'geo1',
longitude: "0.0",
latitude: "0.0"
}, {
name: 'geo1',
longitude: "5.0",
latitude: "5.0"
}]
};
function flickrStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
}),
}),
text: new ol.style.Text({
text: feature.getGeometryName(),
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: 'white',
width: 1
}),
offsetX: 0,
offsetY: 15
}),
});
return [style];
}
var flickrLayer = new ol.layer.Vector({
source: flickrSource
//style: flickrStyle
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = ol.proj.transform([0.0, 0.0], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 5
});
var source = new ol.source.Vector({
wrapX: false
});
var map = new ol.Map({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
function successHandler(data) {
var points = [];
data.items.forEach(function(item) {
var point = ol.proj.transform([parseFloat(item.longitude), parseFloat(item.latitude)], 'EPSG:4326', 'EPSG:3857');
points.push(point);
var geometry = new ol.geom.Point(point);
var feature = new ol.Feature({
name: item.name,
geometry: geometry
});
flickrSource.addFeature(feature);
var thing = new ol.geom.LineString(points);
var featurething = new ol.Feature({
name: "Thing",
geometry: thing
});
flickrSource.addFeature(featurething);
});
}
successHandler(data);
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js"></script>
<div id="map"></div>
Here is the code...
Here is the vector source, layers and map:
// Vector source of data points
var flickrSource = new ol.source.Vector();
// Style function for the data points
function flickrStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
})
}),
text: new ol.style.Text({
text: feature.getGeometryName(),
fill: new ol.style.Fill({color: 'blue'}),
stroke: new ol.style.Stroke({color: 'white', width: 1}),
offsetX: 0,
offsetY: 15
})
});
return [style];
}
// Layers
var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
var flickrLayer = new ol.layer.Vector({
source: flickrSource,
style: flickrStyle
});
// MAP
var map = new ol.Map({
target: 'map',
layers: [osmLayer, flickrLayer],
view: new ol.View({
center: ol.proj.transform([0, 20], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
Then here is the data points and placing them on the map:
// Data points
var data = {
"items": [{
name: 'p1',
longitude: "0.0",
latitude: "0.0"
}, {
name: 'p2',
longitude: "50.0",
latitude: "50.0"
}, {
name: 'p3',
longitude: "50.0",
latitude: "-50.0"
}]
};
// Placing data points on the map
function placePoints(data) {
var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
data.items.forEach( function(item) {
// for each item of data points we create feature geometry
// with coords contained in data and add them to the source
var feature = new ol.Feature(item);
feature.setGeometryName(item.name);
var coordinate = transform(
[parseFloat(item.longitude), parseFloat(item.latitude)]
);
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);
flickrSource.addFeature(feature);
} );
}
placePoints(data); // do the stuff of placing points
And then the interaction for drawing the lines between points:
// select interaction working on "click"
var mySelectInteraction = new ol.interaction.Select({
condition: ol.events.condition.click,
multi: false
});
// init coords of line to draw between points
var pointA = null;
var pointB = null;
// Interaction on points for drawing lines between
mySelectInteraction.on('select', function(e) {
if (e.selected.length === 0) {
// clicking nothing, so reset points coords
pointA = null;
pointB = null;
}
else {
// Feature clicked and its coords
var feature = e.target.getFeatures().item(0);
var coords = feature.getGeometry().getCoordinates();
// Definition of coords points
if (pointA === null) { pointA = coords; }
else { pointB = coords; }
if ( pointA !== null && pointB !== null) {
var LinesSource = new ol.source.Vector();
var LinesLayer = new ol.layer.Vector({ source : LinesSource });
map.addLayer( LinesLayer );
// Line construction
LinesSource.addFeature( new ol.Feature({
geometry : new ol.geom.LineString( [pointA, pointB] )
}) );
// Reset points for next drawing
pointA = null;
pointB = null;
}
}
});
map.addInteraction(mySelectInteraction);
Works great for me!
How do I draw an arrow over a vector layer in Openlayers 3 map?
I tried creating an arrow using canvaselement but don't know how to draw it over the ol3 map.
A canvas element is not necessary. You can take the arrow example from the Openlayers site and add 2 custom LineString elements instead of the icon. You already have in the example the rotation angle in radians and the event where you should add your code.
Hopefully the following snippet does the trick:
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({
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);
var lineStr1 = new ol.geom.LineString([end, [end[0] - 200000, end[1] + 200000]]);
lineStr1.rotate(rotation, end);
var lineStr2 = new ol.geom.LineString([end, [end[0] - 200000, end[1] - 200000]]);
lineStr2.rotate(rotation, end);
var stroke = new ol.style.Stroke({
color: 'green',
width: 1
});
styles.push(new ol.style.Style({
geometry: lineStr1,
stroke: stroke
}));
styles.push(new ol.style.Style({
geometry: lineStr2,
stroke: stroke
}));
});
return styles;
};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: source,
style: styleFunction
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: ('LineString')
}));
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/>
<div id="map" class="map" tabindex="0"></div>
This is another customization of the Openlayers line-arrow Example.
It uses a RegularShape instead of an image. The arrow will keep its size independent of the current map zoom.
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({
color: '#000',
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);
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(end),
image: new ol.style.RegularShape({
fill: new ol.style.Fill({color: '#000'}),
points: 3,
radius: 8,
rotation: -rotation,
angle: Math.PI / 2 // rotate 90°
})
}));
});
return styles;
};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: source,
style: styleFunction
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: ('LineString')
}));
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/>
<div id="map" class="map" tabindex="0"></div>
I need to add a marker on my map when I call the method addMarker(long, lat).
The only example I have found is this one in the OpenLayers example list, but it adds only one marker in a specific place.
I need to be able to call my method anytime I need and pass the coordinates (the general idea is to have a simple menu where the user can type the long and lat and click a submit button and the marker is drawn on the map).
In the example, if I got it right, they created a feature and its style, then created a layer to draw the icon and initialized the map using that layer.
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
target: document.getElementById('map'),
view: new ol.View2D({
center: [0, 0],
zoom: 3
})
});
I believe I can create an array of features, something like that(an example I saw here):
var iconFeatures=[];
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconFeature1 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-73.1234, 45.678], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island Two',
population: 4001,
rainfall: 501
});
iconFeatures.push(iconFeature);
iconFeatures.push(iconFeature1);
Here is my method so far:
class map{
private markerFeatures = [];
//receive an array of coordinates
public addMarkers(markers: Array<Marker>): void {
for (var i in markers) {
var markFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([markers[i].long, markers[i].lat], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
this.markerFeatures.push(markFeature);
}
}
}
But nothing happened when I did that.
Obs: I created the map, the layer and called the method.
I'm using OL v3.7
Assuming you have a layer containing a vector source, you just need to add one more step to your addMarkers function:
myVectorSource.addFeatures(markerFeatures);
Is there any elegant method to add shadow markers to a loop of icons in OpenLayers 3 ?
I'm struggling with adding shadows to an icon in ol3...and there is no consistent materials about this matter.
Try (with example styles):
var iconStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
snapToPixel: false,
fill: new ol.style.Fill({
color: 'rgba(77,135,254,0.4)'
})
}),
zIndex: 1
});
var shadowStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0,0,0,0.5)',
width: 6
}),
zIndex: 0
});
iconFeature.setStyle([iconStyle, shadowStyle]);
and then:
var iconSource = new ol.source.Vector(); // create an empty source
var icon = new ol.geom.Point(
// your point
);
var iconFeature = new ol.Feature({ // create a feature
geometry: icon
});
iconSource.addFeature(iconFeature); // add the feature to the source
var iconLayer = new ol.layer.Vector({ // create a layer with that source
source: iconSource
});
map.addLayer(iconLayer); // add the layer to the map
I've been trying the new version (3) of Open Layers. I've modified the icon feature example slightly, so it would show a polygon. I've been searching, reading and trying for a couple of hours, but can't figure out what I'm doing wrong.
I don't want to use geoJSON, because I want to dynamically add and remove features.
This is the code I have so far:
<script type="text/javascript">
var point1 = ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857');
var point2 = ol.proj.transform([35.41, 9.82], 'EPSG:4326', 'EPSG:3857');
var point3 = ol.proj.transform([33.41, 11.82], 'EPSG:4326', 'EPSG:3857');
var polyFeat = new ol.Feature({
geometry: new ol.geom.Polygon([point1, point2, point3])
});
var polyStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 2
})
});
polyFeat.setStyle(polyStyle);
var vectorSource = new ol.source.Vector({
features: [polyFeat]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
})
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
</script>
Why is the polygon not showing?
Two small things to solve your issue:
First, it's recommended to close a polygon, so declare a fourth point with same coordinates as the first.
var point4 = ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857');
Then, your geometry new ol.geom.Polygon([point1, point2, point3]) should be new ol.geom.Polygon([[point1, point2, point3, point4]])
The important fact here is not the point4 addition but to transform your array point to an array of array of points. See the API that says OpenLayers 3 ol.geom.Polygon constructor expects an Array.<Array.<ol.Coordinate>> expected.