I have a few geometries in map, the point is in polygon, I can highlight the polygon, but the point cannot be highlighted because of polygon enclose it. In new openlayers3 ol.featureoverlay has been removed, If have some ways to solve it, here is an example.
I updated that plunker to this fiddle to work against newer OL versions. It is not ready yet but perhaps it does what you need.
Basically I get a coefficient by comparing pointer coordinate with the coordinate of the closest feature. If this coefficient is short enough than add the feature to a ol.Collection.
To get the selected feature (for now, see https://github.com/openlayers/ol3/issues/4459) you can listen to collection changes:
collection.on('change:length', function(evt) {
if (collection.getLength() > 0) {
var feature = hoverInteraction.getFeatures().item(0);
// can be also
//var feature = collection.item(0);
}
});
Related
I have several markers in a map, I want to color the area inside the maps of a different color. I've tried L.multiPolygon , L.polygon, L.rectangle, but nothing does but I want. I guess my only option is to calculate the boundings of all the markers and draw the polygon based on these points, right ?
Here the code
<c:forEach var="marker" items="${markers}" varStatus="rowIndex">
var marker${rowIndex.index} = L.marker([${marker.lat},${marker.lng}],{icon: yellowIcon,title: '${marker.title}'}).addTo(mymap)
.bindPopup( "${marker.HTMLMarkerPopupCode}").openPopup();
storeCoordinate(${marker.lat}, ${marker.lng}, polygonPoints);
</c:forEach>
var polygon = L.polygon(polygonPoints);
polygon.setStyle({fillColor: '#0000FF'});
polygon.setStyle({color: 'red'});
polygon.setStyle({weight:1});
polygon.setStyle({fillOpacity: 0.5});
mymap.addLayer(polygon);
I would like to achieve something similar to this picture:
You can use L.Polygon as well.
Just do something like this:
var polygon = L.polygon([
marker1,
marker2,
marker3,
], {
fillColor: '#f03' // My custom color here
}
).addTo(mymap);
Not sure exactly what you are trying to achieve?
You might be interested in computing the Convex Hull of your markers area.
In that case, you should be able to find some JavaScript implementations on the Internet. E.g., you can look at how it is done in Leaflet.markercluster plugin: https://github.com/Leaflet/Leaflet.markercluster/blob/master/src/MarkerCluster.QuickHull.js
EDIT:
As for creating Convex Hull, you could also use Turf, in particular turf.convex.
Turf also provides you with plenty other functionalities, including turf.concave.
I am using openlayers-3 modify interaction to edit vector layers. When a polygon/polyline is being edited, if mouse is close to a line segment, a small circle is drawn and dragging it creates a new vertex or moves an existing vertex, depending on where on the segment I was hovering.
Now, sometimes this is very difficult to understand if I am hovering on an existing vertex, or on middle of a segment. I have thought about two solutions to the problem:
Highlight the segment I am hovering with a different style so that I
can see its edges.
When hovering on an vertex, style the small
circle with a different style.
Is there a way to achieve any of the two?
It can be done changing the interaction condition like:
var selectPointerMove_Highlight = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
map.addInteraction(selectPointerMove_Highlight);
I have an online example.
Is it possible to make the symbolizer of a feature be a polygon?
Openlayers 3 has a ol.style.Circle and ol.style.RegularShape symbolizers for example. Is there something equivalent to a hypothetical ol.style.Polygon? Whereby you could make a dynamic symbolizer from multiple points?
The reason I want to do this is because I have markers on my map that are dynamically shaped depending on the data for that marker. It is possible to simply draw a ol.geom.Polygon at each point, but then they are not zoom independent. I want to have markers that are zoom independent, meaning that their size on the screen does not change when I zoom in or out.
And just to be clear, using raster images (for example in ol.style.Icon) is not possible. There are way too many markers in way too many shapes and colours in my project.
Yes, this is possible. ol.style.Style takes a geometry argument that you can use to overwrite the geometry that is used to render a feature.
var style = function(feature, resolution) {
// construct the polygon taking the resolution into account
var polygon = new ol.geom.Polygon(...);
return [
new ol.style.Style({
geometry: polygon,
stroke: ...
fill: ...
}),
];
};
Also see this question: Drawing a Speed Leader line in OpenLayers
I was wondering if there is a way to get the bounding box of not the complete layer, but only the part of the layer that is visible in the current zoom level of the map?
So, I need to get the screen coordinates of the bounding box of the layer drawn on the screen. I could not find a way to achieve this.
EDIT:
Unfortunately this is not solving my problem. This is exactly the point that I got to latest and in some cases it is not working. Since stackoverflow does not allow me to upload images because of my reputation I will try to describe:
Imagine that I have a path which is crossing the screen almost parallel to y axis, however outside the screen it is at least x-axis long. In this case the solution proposed will return min and max screen coordinates for x axis, where it needs to be a short interval that it is crossing the screen. In a way I need the bounding box of the visible part of the layer.
EDIT 2:
Thank you all for your answers. I tried to use "getFeaturesInExtent" function, but I get an error saying: "Uncaught TypeError: undefined is not a function". I am using the latest OpenLayers which is version 3.4.0. I suppose I am getting this error because this function is not implemented in this version.
The way I am using is the following:
var mapExtent = map.getView().calculateExtent(map.getSize());
var features = result.getSource().getFeaturesInExtent(mapExtent);
What kind of solution do you suggest for me? (I tried to use master version downloading ZIP from: https://github.com/openlayers/ol3, but the map did not work in this case.)
Thanks again!
I think the only things what you need is the extent of the view and the extent of the layer and the ol.extent.getIntersection() Function.
You can get the Extent of the current View by f.ex
map.getView().calculateExtent(map.getSize());
The global extent of your layer by
`layer.getExtent()`.
And the intersecting Extent with.
ol.extent.getIntersection(extent1, extent2,opt_extent)
Should return the intersecting extent of the current view and your layer. Be aware that not all mentioned functions are stable.
I found the solution in the following:
var mapExtent = map.getView().calculateExtent(map.getSize());
var intersectedFeatures = [];
for (var i = 0; i < points.length; i++){
if(ol.extent.containsCoordinate(mapExtent, points[i]))
intersectedFeatures.push(points[i]);
}
var visibleLayerExtent = ol.extent.boundingExtent(intersectedFeatures);
Thank you all for the help!
Is there a way to get Mapbox.js tooltips to show when you're hovering over a marker without following the mouse around? I just want it to stay put when I hover.
I am using the following code on my map:
var map = L.map("impact-map")
.setView([20, 80], 3)
.addLayer(L.mapbox.tileLayer("hotchkissmade.in_impact", {
detectRetina: true
}));
var myGridLayer = L.mapbox.gridLayer('hotchkissmade.in_impact').addTo( map );
var myGridControl = L.mapbox.gridControl(myGridLayer, {
follow: true
}).addTo( map );
I am using the follow:true from the example here.
Disclaimer: I know there may be more flexibility outside of gridControl but I like having my tooltips from Tilemill as I don't want to load the data in the browser twice, since I'm basing the tooltip data off the layer making the markers on my map in Tilemill
This isn't possible with a gridControl - you can have tooltips either follow the mouse or stay in a specific location, but unlike L.mapbox.featureLayer, there is no actual marker, polygon, or feature you're hovering over - the geometry is not pushed to the client - so, there would be no 'anchor' for the tooltip to stay on.