I need to group the points to show on my map, with Openlayers.
I'm following the example http://viglino.github.io/ol-ext/examples/animation/map.animatedcluster.html.
I was able to change it so that my layer is a WFS layer. In the following image, I have two layers, however, they do not group both together, but separately. In the part highlighted in red, we can see a green and an orange grouping very close together, each referring to a layer. How do I make clustering occur for all layers that are shown on the map?
I had already made a post a few months ago about this example Openlayers: cluster with different layers
Another thing, layer layer has a different style. I would like to keep this style, when the cluster is selected and/or when there is only one point in the cluster. Any tips?
[EDIT]
// Cluster Source
var clusterSource1=new ol.source.Cluster({
distance: 60,
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return urlGeoserver + 'wfs?service=WFS&' +
'version='+versionGeoserver+'&request=GetFeature&typename=geo:MyLAYER1&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'all=' + extent.join(',') + ',EPSG:4326';
},
strategy: ol.loadingstrategy.all
})
});
// Animated cluster layer
var clusterLayer1 = new ol.layer.AnimatedCluster({
name: 'Cluster1',
source: clusterSource1,
animationDuration: 700,
style: getStyle
});
var clusterSource2=new ol.source.Cluster({
distance: 60,
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return urlGeoserver + 'wfs?service=WFS&' +
'version='+versionGeoserver+'&request=GetFeature&typename=geo:MyLAYER2&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'all=' + extent.join(',') + ',EPSG:4326';
strategy: ol.loadingstrategy.all
})
});
var clusterLayer2 = new ol.layer.AnimatedCluster({
name: 'Cluster2',
source: clusterSource2,
animationDuration: 700,
style: getStyle
});
map.addLayer(clusterLayer1);
map.addLayer(clusterLayer2);
Thanks
This is how I would solve this. You will have all the Features from different sources in one feature-collection. Each feature is being tagged, so you don't have different layers. You set a property to distinguish your features. If you want to remove a "layer", you just remove the feature from the source, if it's there else push it back. Hope this is what you want.
https://jsfiddle.net/komarara/8jbzL019/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.map {
height: 100%;
width: 100%;
}
html,
body {
height: 100%
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.11.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.11.0/css/ol.css">
</head>
<body>
<Button onClick="handleVisibilityLayer1()">Layer1</Button>
<Button onClick="handleVisibilityLayer2()">Layer2</Button>
<div id="map" class="map"></div>
<script type="text/javascript">
let source;
let featureCollection = [];
document.addEventListener("DOMContentLoaded", function () {
drawMap();
});
function handleVisibilityLayer1(){
for(const feature of featureCollection){
const layerId = feature.get('layer');
if(layerId === 'layer1' && source.hasFeature(feature)){
source.removeFeature(feature);
} else if(layerId === 'layer1' && !source.hasFeature(feature)){
source.addFeature(feature);
}
}
}
function handleVisibilityLayer2(){
for(const feature of featureCollection){
const layerId = feature.get('layer');
if(layerId === 'layer2' && source.hasFeature(feature)){
source.removeFeature(feature);
} else if(layerId === 'layer2' && !source.hasFeature(feature)){
source.addFeature(feature);
}
}
}
function drawMap() {
const feature1 = new ol.Feature({
geometry: new ol.geom.Point([818131.46, 5846162.87]),
layer: 'layer1',
});
const feature2 = new ol.Feature({
geometry: new ol.geom.Point([818130.46, 5846162.87]),
layer: 'layer1',
});
const feature11 = new ol.Feature({
geometry: new ol.geom.Point([818131.46, 5846161.87]),
layer: 'layer2',
});
const feature22 = new ol.Feature({
geometry: new ol.geom.Point([818130.46, 5846161.87]),
layer: 'layer2',
});
featureCollection = [feature1, feature2, feature11, feature22];
source = new ol.source.Vector({
features: featureCollection,
});
const clusterSource = new ol.source.Cluster({
source: source,
});
const styleCache = {};
const clusterLayer = new ol.layer.Vector({
source: clusterSource,
style: function (feature) {
const size = feature.get('features').length;
let style = styleCache[size];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff',
}),
fill: new ol.style.Fill({
color: '#3399CC',
}),
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff',
}),
}),
});
styleCache[size] = style;
}
return style;
},
});
const osmLayer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: '© OpenStreetMap',
})
});
map = new ol.Map({
target: 'map',
layers: [
osmLayer,
clusterLayer
],
view: new ol.View(),
});
map.getView().fit(source.getExtent());
}
</script>
</body>
</html>
I have several layers and I can choose one or more to show on the map. In the picture, I am twice,
each with a different tag.
Each layer has a corresponding source, which is a WFS.
var layer 1 = new ol.layer.Vector({
source: new ol.source.Vector({
//code })
})
When you click on any point, it shows a popup with the specific layer information.
What I want? Group this information to avoid polluting the map. I already developed with Leaflet, but I'm not
with Openlayers.
In Brochure I used L.markerClusterGroup.layerSupport
I started a test, following the code http://viglino.github.io/ol-ext/examples/animation/map.animatedcluster.html.
and I even posted my initial test code, but it didn't group data from different layers, I didn't give sequential
in upcoming changes.
[EDIT]
How to add features from one source to another? Is not working
// Cluster Source
var clusterSource_=new ol.source.Cluster({
distance: 40,
source: new ol.source.Vector()
});
// Animated cluster layer
var clusterLayer_ = new ol.layer.AnimatedCluster(
{ name: 'Cluster',
source: clusterSource_,
style: getStyle
});
map.addLayer(clusterLayer_);
var teste = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent) {
return urlGeoserver + 'wfs?service=WFS&' +
'version='+versionGeoserver+'&request=GetFeature&typename=geo:MYLAYER1&' +
'outputFormat=application/json&srsname=EPSG:4326&' +
'all=' + extent.join(',') + ',EPSG:4326';
},
strategy: ol.loadingstrategy.all
})
var features = teste.getFeatures();
alert(features.length); //this alerts '0', but there's more than 10 features!!
clusterSource_.getSource().clear();
clusterSource_.getSource().addFeatures(teste.getSource().getFeatures());
Multi-Layer with only one Cluster-Source/Layer. I'm just pushing all features to one array. However, this is just a proof of concept, at a certain amount of features, you will get performance issues, so there is room for improvement.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.map {
height: 100%;
width: 100%;
}
html,
body {
height: 100%
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.13.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.13.0/css/ol.css">
</head>
<body>
<input type="checkbox" onChange="handleLayerVisibility('layer1', this.checked)">Layer1</input>
<input type="checkbox" onChange="handleLayerVisibility('layer2', this.checked)">Layer2</Checkbox>
<div id="map" class="map"></div>
<script type="text/javascript">
let intermediateClusterSource;
const feature1 = new ol.Feature({
geometry: new ol.geom.Point([818131.46, 5846162.87]),
layer: 'layer2'
});
const feature2 = new ol.Feature({
geometry: new ol.geom.Point([818130.46, 5846162.87]),
layer: 'layer2'
});
const feature3 = new ol.Feature({
geometry: new ol.geom.Point([818131.46, 5846161.87]),
layer: 'layer2'
});
const feature4 = new ol.Feature({
geometry: new ol.geom.Point([818130.46, 5846161.87]),
layer: 'layer2'
});
const featureCollection = [feature1, feature2, feature3, feature4];
document.addEventListener("DOMContentLoaded", function () {
drawMap();
});
function handleLayerVisibility(layerId, checked){
for(const feature of featureCollection){
const id = feature.get('layer');
if(id !== layerId){
continue;
}
if(checked){
intermediateClusterSource.addFeature(feature);
} else {
intermediateClusterSource.removeFeature(feature);
}
}
}
function drawMap() {
const source1 = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection, success, failure) {
var proj = projection.getCode();
var url = 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
'outputFormat=application/json&srsname=' + proj;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
var onError = function() {
source1.removeLoadedExtent(extent);
failure();
}
xhr.onerror = onError;
xhr.onload = function() {
if (xhr.status == 200) {
var features = source1.getFormat().readFeatures(xhr.responseText);
for(const [index, feature] of features.entries()){
const geometry = feature.getGeometry();
if(geometry instanceof ol.geom.SimpleGeometry){
if(index < 100){
const coords = geometry.getCoordinates()[0][0][0];
if(coords && coords.length === 2){
const feat = new ol.Feature({
geometry: new ol.geom.Point(coords),
layer: 'layer1'
});
featureCollection.push(feat);
}
}
}
}
success(features);
} else {
onError();
}
}
xhr.send();
},
});
const layer1 = new ol.layer.Vector({
id: 'layer1',
source: source1,
})
const source2 = new ol.source.Vector({
features: [feature1, feature2, feature3, feature4]
})
const layer2 = new ol.layer.Vector({
id: 'layer2',
source: source2,
visible: false,
})
intermediateClusterSource = new ol.source.Vector();
const clusterSource = new ol.source.Cluster({
source: intermediateClusterSource,
});
const styleCache = {};
const clusterLayer = new ol.layer.Vector({
source: clusterSource,
style: function (feature) {
const size = feature.get('features').length;
let style = styleCache[size];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff',
}),
fill: new ol.style.Fill({
color: '#3399CC',
}),
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff',
}),
}),
});
styleCache[size] = style;
}
return style;
},
});
const osmLayer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: '© OpenStreetMap',
})
});
map = new ol.Map({
target: 'map',
layers: [
osmLayer,
layer1,
layer2,
clusterLayer
],
view: new ol.View({
projection: 'EPSG:3857',
zoom: 1,
center: [0,0],
}),
});
}
</script>
</body>
</html>
Related
I'm trying to render some extra features on map using openlayers. The features can be fetched from the opensensemap API, but for some reason they are not rendered. As I am completely new to openlayers, and dont know much javascript either, I hope for some help.
live code: https://ttnkn.github.io/map/pax/
var GeoStyle = {
'Point': new ol.style.Style({
image: new ol.style.Icon({
src: '../img/bike.png',
scale: 0.075,
})
}),
'Circle': new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.4)'
}),
stroke: ol.style.Stroke({
color: '#3399CC',
width: 1.25
}),
radius: 5
})
};
function GeoStyleFunc (feature,resolution) {
return GeoStyle[feature.getGeometry().getType()];
}
var VectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'https://api.opensensemap.org/boxes?bbox=9.118815,47.653129,9.228427,47.698786&format=geojson&exposure=mobile',
});
var VectorTile = new ol.source.XYZ({
url: 'http://tile.memomaps.de/tilegen/{z}/{x}/{y}.png ',
attributions: 'Map © OSM | Tiles © MeMoMaps | Data © OpenSenseMap'
});
var map = new ol.Map({
target: document.getElementById('map'),
layers: [
new ol.layer.Tile({
source: VectorTile
}),
new ol.layer.Vector({
source: VectorSource,
style: GeoStyleFunc
})
],
controls: ol.control.defaults({ zoom: true, attribution: true }),
view: new ol.View({
center: ol.proj.fromLonLat([9.173, 47.672]),
zoom: 15,
maxZoom: 17,
minZoom: 13
})
});
var url = 'https://api.opensensemap.org/statistics/idw?bbox=9.118815,47.653129,9.228427,47.698786&phenomenon=Temperatur&gridType=hex&cellWidth=2';
fetch(url).then(value => {
value.json().then(value => {
var featureJson = value.data.featureCollection;
var features = (new ol.format.GeoJSON()).readFeatures(featureJson);
var vectorSourceHEX = new ol.source.Vector({
features: features,
projection: ol.proj.get('EPSG:4326')
});
var vectorLayer = new ol.layer.Vector({
source: vectorSourceHEX,
// style: GeoStyleFunc
});
map.addLayer(vectorLayer);
});
}, error => { console.log(error) });
The projection option isn't used in vector sources. If you use readFeatures you must transform the data to the view projection (when you construct a source with a url that is done automatically).
var features = (new ol.format.GeoJSON()).readFeatures(featureJson, {
dataProjection: 'EPSG:4326',
featureProjection: map.getView().getProjection()
});
var vectorSource = new ol.source.Vector({
features: features,
});
I'm trying to make a LineString which has arrows in the end of each line to show direction of the route. I use an example from the official site: https://openlayers.org/en/latest/examples/line-arrows.html
The example code creates arrows by user's drawing, but I need arrows for given LineString.
My code contains icons for end and finish of the route.
When I use
'route': new ol.style.Style({
stroke: new ol.style.Stroke({
width: 6, color: [23, 120, 22, 0.6]
})
}),
in styles, my code works. But when I put style for Linestring from the example, it gives me an error saying "Uncaught TypeError: c.Y is not a function".
Here is my code:
var points = [
[76.8412, 43.2245], [76.8405, 43.2210], [76.8479, 43.2200], [76.8512, 43.2220]
];
var route = new ol.geom.LineString(points);
route.transform('EPSG:4326', 'EPSG:3857');
var routeFeature = new ol.Feature({
type: 'route',
geometry: route
});
var startMarker = new ol.Feature({
type: 'icon-a',
geometry: new ol.geom.Point(ol.proj.fromLonLat(points[0]))
});
var endMarker = new ol.Feature({
type: 'icon-b',
geometry: new ol.geom.Point(ol.proj.fromLonLat(points[points.length - 1]))
});
var styles = {
'route': function(feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'img/icon-a.png'
})
})
];
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({
src: 'https://openlayers.org/en/v4.6.3/examples/data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation
})
}));
});
return styles;
},
'icon-a': new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'img/icon-a.png'
})
}),
'icon-b': new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'img/icon-b.png'
})
})
};
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [routeFeature, startMarker, endMarker]
}),
style: function(feature) {
return styles[feature.get('type')];
}
});
var center = ol.proj.fromLonLat([76.8512, 43.2220]);
var map = new ol.Map({
target: document.getElementById('map'),
view: new ol.View({
center: center,
zoom: 15,
minZoom: 2,
maxZoom: 19
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
]
});
#map {
/* just for testing purposes */
width: 100%;
min-width: 100px;
max-width: 500px;
margin-top: 50px;
height: 50px;
}
<link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
<div id="map"></div>
Firstly, you can use ol-debug.js instead of ol.js, which is uncompressed and helps debugging. The exception you get is
TypeError: style.getImage is not a function (Line 30443)
You get that error because your styles object is mixed: some styles are functions, some are plain Style objects.
You might think that OL can handle both, and you are normally right. However, you provide a function to vectorLayer, so OL detects that you provided a function and calls it. The return value of that function is expected to be a style object. But for route, that returns a function instead!
So when OL calls
style: function(feature) {
return styles[feature.get('type')];
}
It gets styles for the types icon-a, icon-b, but an function for route.
You need to enhance your style function to handle that special case:
style: function(feature) {
const myStyle = stylesMap[feature.get('type')];
if (myStyle instanceof Function) {
return myStyle(feature);
}
return myStyle;
}
PS: Using the same name for a variable twice (styles) is bad practice and can lead to weird bugs.
Here is the runnable example:
var points = [
[76.8412, 43.2245],
[76.8405, 43.2210],
[76.8479, 43.2200],
[76.8512, 43.2220]
];
var route = new ol.geom.LineString(points);
route.transform('EPSG:4326', 'EPSG:3857');
var routeFeature = new ol.Feature({
type: 'route',
geometry: route
});
var startMarker = new ol.Feature({
type: 'icon-a',
geometry: new ol.geom.Point(ol.proj.fromLonLat(points[0]))
});
var endMarker = new ol.Feature({
type: 'icon-b',
geometry: new ol.geom.Point(ol.proj.fromLonLat(points[points.length - 1]))
});
var stylesMap = {
'route': function(feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'img/icon-a.png'
})
})
];
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({
src: 'https://openlayers.org/en/v4.6.5/examples/data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation
})
}));
});
return styles;
},
'icon-a': new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'img/icon-a.png'
})
}),
'icon-b': new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'img/icon-b.png'
})
})
};
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [routeFeature, startMarker, endMarker]
}),
style: function(feature) {
const myStyle = stylesMap[feature.get('type')];
if (myStyle instanceof Function) {
return myStyle(feature);
}
return myStyle;
}
});
var center = ol.proj.fromLonLat([76.8512, 43.2220]);
var map = new ol.Map({
target: document.getElementById('map'),
view: new ol.View({
center: center,
zoom: 15,
minZoom: 2,
maxZoom: 19
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
]
});
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#map {
/* just for testing purposes */
width: 100%;
height: 100%;
}
<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" />
<script src="https://openlayers.org/en/v4.6.5/build/ol-debug.js"></script>
<div id="map"></div>
I am trying to display a map with markers. I want the ability to click these markers such that extra information can be displayed (similiar to the way it works in google earth). I have the map and the markers (or features) but can not get the "popup" with extra information to work.
The JS:
function init(){
var northSeaLonLat = [4.25, 52.05];
var centerWebMercator = ol.proj.fromLonLat(northSeaLonLat);
var tileLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
markerLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [], projection: 'EPSG:3857' }) });
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(3),
projection: 'EPSG:4326',
undefinedHTML: ' ',
className: 'custom-mouse-position',
target: document.getElementById('custom-mouse-position'),
})
]),
layers: [tileLayer, markerLayer],
target: 'map',
view: new ol.View({
projection: 'EPSG:3857',
center: centerWebMercator,
zoom: 7
})
});
// Add marker
var circle = new ol.style.Style({
image: new ol.style.Circle({
radius: 4,
fill: new ol.style.Fill({
color: 'rgba(200,0,0,0.9)',
}),
stroke: new ol.style.Stroke({
color: 'rgba(100,0,0,0.9)',
width: 2
})
})
});
coordinates = [[4.25, 52.05], [4.21, 52.01], [4.29, 52.29], [5.25, 52.05], [4.25, 51.05]];
for (i = 0; i < coordinates.length; i++) {
var feature = new ol.Feature(
new ol.geom.Point(ol.proj.transform(coordinates[i], 'EPSG:4326', 'EPSG:3857'))
);
feature.description = 'Coordinates: '+coordinates[i][0]+','+coordinates[i][1]+'\nBla';
feature.setStyle(circle);
markerLayer.getSource().addFeature(feature);
}
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
popup.setPosition(evt.coordinate);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('description')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
}
The code I got from an example on the website: http://openlayers.org/en/v3.11.1/examples/icon.html
It works there but I can't get my version to work. Any idea why?
popover isn't part of OpenLayers but contained in Bootstrap: http://getbootstrap.com/javascript/#popovers
Also see the OpenLayers example on overlays: https://openlayers.org/en/latest/examples/overlay.html
With OpenLayers 3, how can I specify a minimum cluster size so that clusters with 5 map markers or less will not get clustered, but will instead display the individual map markers? Is there a way to do this within the cluster layer's ol.layer.Vector object?
let clusterSource = new ol.source.Cluster({
distance: CLUSTER_DISTANCE,
source: features
});
let clusterLayer = new ol.layer.Vector({
source: source,
style: function(feature, resolution) { }
});
You can check in the code how many features are there. If you have too many, you can create a cluster source based on the vector source you already have to add it a to a new vector layer. If not, a vector layer can be created with your existing vector source.
Since there is no method to set the source dynamically to a layer, your vector layer should be created with the desired source. If you want to see how it works with more than 5 features, just uncomment the commented lines.
var features = [
new ol.Feature({
geometry: new ol.geom.Point([0,0])
}),
new ol.Feature({
geometry: new ol.geom.Point([100000,500000])
}),
new ol.Feature({
geometry: new ol.geom.Point([500000,100000])
}),
new ol.Feature({
geometry: new ol.geom.Point([5000000,1000000])
}),
new ol.Feature({
geometry: new ol.geom.Point([1000000,500000])
})
/*,new ol.Feature({
geometry: new ol.geom.Point([1800000,800000])
})*/
],
source = new ol.source.Vector({
features: features
});
var layer;
if (features.length > 5) {
var clusterSource = new ol.source.Cluster({
distance: parseInt(40, 10),
source: source
});
var styleCache = {};
layer = new ol.layer.Vector({
source: clusterSource,
style: function(feature) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#AAA'
}),
fill: new ol.style.Fill({
color: '#DDD'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#B144FF'
})
})
});
styleCache[size] = style;
}
return style;
}
});
} else {
layer = new ol.layer.Vector({
source: source
});
}
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
target: 'clusterMap',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<div id="clusterMap" class="map"></div>
How to show hide markers (P icon) using circle points (something like point1.distanceTo(point2))
need to show markers If markers comes inside the circle another hide it (currently changing circle radius through slider)
// we change this on input change
var radius = 10;
longitude = 400000;
latitude = 300000;
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) {
// $('#range').val() = value;
radius = value;
vectorLayer.setStyle(styleFunction);
// $('#range').val(value)
// document.getElementById('range').value=value;
}
var feature = new ol.Feature(new ol.geom.Point([longitude, latitude]));
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
}),
style: styleFunction
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
crossOrigin: ''
})
});
// icon marker start here
var iconFeature5 = new ol.Feature({
geometry: new ol.geom.Point([longitude, latitude]),
name: 'Missing Person',
population: 4000,
rainfall: 500
});
var vectorSource5 = new ol.source.Vector({
features: [iconFeature5]
});
var vectorLayer5 = new ol.layer.Vector({
source: vectorSource5
});
var iconStyle5 = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://cloud.githubusercontent.com/assets/41094/2833021/7279fac0-cfcb-11e3-9789-24436486a8b1.png'
}))
});
iconFeature5.setStyle(iconStyle5);
// 2nd marker
longitude1 = 100000;
latitude1 = 100000;
var iconFeature1 = new ol.Feature({
geometry: new ol.geom.Point([longitude1, latitude1]),
name: 'Missing Person',
population: 4000,
rainfall: 500
});
var vectorSource1 = new ol.source.Vector({
features: [iconFeature1]
});
var vectorLayer1 = new ol.layer.Vector({
source: vectorSource1
});
iconFeature1.setStyle(iconStyle5);
var map = new ol.Map({
layers: [rasterLayer,vectorLayer,vectorLayer5,vectorLayer1],
target: document.getElementById('map'),
view: new ol.View({
center: [400000, 400000],
zoom: 4
})
});
html, body, #map {
height: 100%;
overflow: hidden;
}
.input {
margin: 5px 0;
}
<script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script>
<div class="input">
<input type="range" id="range" min="10" max="50" onchange="update(this.value)">
<input type="text" id="range" value="10">
</div>
<div id="map" class="map"></div>
Since you are using a Point and not an actual circle geometry, as you said distanceTo is probably the solution for this, you have to add it in your update function :
var wgs84Sphere = new ol.Sphere(6378137);
var update = function(value) {
// $('#range').val() = value;
radius = value;
vectorLayer.setStyle(styleFunction);
if(wgs84Sphere.haversineDistance(feature.getGeometry().getCoordinates(),iconFeature5.getGeometry().getCoordinates())<=radius){
vectorLayer5.setVisible(true);
}
else{
vectorLayer5.setVisible(false);
}
if(wgs84Sphere.haversineDistance(feature.getGeometry().getCoordinates(),iconFeature1.getGeometry().getCoordinates())<=radius){
vectorLayer1.setVisible(true);
}
else{
vectorLayer1.setVisible(false);
}
}