I am using OpenLayers to draw point features on a map with a cluster strategy.
strategy = new OpenLayers.Strategy.Cluster();
clusters = new OpenLayers.Layer.Vector("Clusters", {
strategies: [strategy],
styleMap: new OpenLayers.StyleMap({
"default": style,
"select": {
fillColor: "#ff0000",
strokeColor: "#ffbbbb"
}
})
});
[.......]
clusters.addFeatures(features);
I'm also using a SelectFeature to select the point features on my map.
select = new OpenLayers.Control.SelectFeature(
clusters, {
clickout: false,
toggle: false,
hover: false
}
);
map.addControl(select);
select.activate();
clusters.events.on({"featureselected": clickPoint});
When the user selects a clustered Feature a popup appears with a list of containing features to select. When he selects one of these the popup closes and the clustered feature remains selected.
Now comes the problem. I want to be able click on the clustered feature so the popup appears again. The only thing I'm able to do is to set toggle:true but then the feature gets unselected.
Is there a way to trigger an event when the user clicks on a selected Feature?
Thx in advance,
illy
To solve this problem I overwrite unselectAll as:
mySelectControl.unselectAll = function(options) {
OpenLayers.Control.SelectFeature.prototype.unselectAll.apply(
mySelectControl, arguments);
if (options && options.except) {
var myReselecteFeature = options.except;
... your code to show the popup of myReselecteFeature ...
}
};
You may be interested to look at this example:
http://jorix.github.com/OL-FeaturePopups/examples/feature-popups.html
It is a control that does this you do and a little more. For example keeps the selection after zooming using clusters.
NOTE: The default behavior is not what you are looking for but can be customized.
You could also unSelect your feature when the feature is selected. For me it was the shortest way to achieve for the click event for the feature. Also set the toggle flag to true to fire unselect event in case of clicks.
var pdfFeatureSelector = new OpenLayers.Control.SelectFeature(pdfLayer,{
clickout: true,
multiple: true,
toggle: true,
autoActivate: true,
onSelect: function(){
OpenLayers.Control.SelectFeature.prototype.unselectAll.apply(
pdfFeatureSelector);//unselect the feature when it is selected
}
});
Related
I have a HERE Maps map displayed on a simple webpage with a multiselect dropdown and a couple of buttons. I'm using the contextmenu event to show a context menu on right-click, like so:
var map = new H.Map(
document.getElementById('mapContainer'),
maptypes.raster.normal.map,
{
zoom: 12,
center: { lat: -33.81, lng: 150.78 },
pixelRatio: window.devicePixelRatio || 1,
engineType: H.map.render.RenderEngine.EngineType.P2D
}
);
...
// an H.map.Polygon object we prepared earlier
polygonObject.addEventListener("contextmenu", handleContextMenu)
...
function handleContextMenu(evt) {
// Don't do anything if the map itself is right-clicked/long-pressed
if (evt.target === map) {
return;
}
if (evt.target instanceof H.map.Polygon) {
// Polygon-specific context menu items
evt.items.push(new H.util.ContextItem({ label: "ABC123" }));
evt.items.push(H.util.ContextItem.SEPARATOR);
evt.items.push(new H.util.ContextItem({ label: "Do something", callback: function () { doSomething(evt) } }));
}
}
This works fine, displays a context menu when a polygon object is right-clicked, and dismisses itself if somewhere else on the map is tapped. However, the context menu doesn't dismiss if the user clicks or interacts with another element on the page outside the map.
I wasn't able to find any documentation on how to achieve this behaviour, and the example that HERE Maps uses also doesn't dismiss the context menu if somewhere outside the map is clicked. Is there any way to dismiss the context menu on a map, either programmatically or automatically if another page element is interacted with?
It's a little bit hacky, but you can manually remove the context menu from the DOM by finding a div with the h_context_menu class in the page, and removing it. This may have some unintended side effects with the UI class, but seems to work OK from my brief testing.
Using JQuery:
$("div.h_context_menu").remove()
Using ES6:
document.querySelector("div.h_context_menu").remove()
Using vanilla JavaScript (compatible with Internet Explorer):
var el = document.querySelector("div.h_context_menu");
el.parentNode.removeChild(el);
I'm trying to create a more custom dropdown for adding all the toolbar buttons under it when toolbarXS is activated (all the missing icons in the XS should be under the more dropdown.
unfortunately the docs aren't that clear and outputting only text options which does nothing besides showing.
i was wondering if anybody could help in how to do it.
i.e
// define annotation button for imagePopup
$.FroalaEditor.DefineIcon('annotationIcon', { NAME: 'pencil'}); // the icon
$.FroalaEditor.RegisterCommand('annotation', { // the button
title: 'Annotation',
icon: 'annotationIcon',
undo: true, // Save the button action into undo stack.
focus: true, // Focus inside the editor before the callback.
showOnMobile: true, // Show the button on mobile or not.
refreshAfterCallback: true, // Refresh the buttons state after the callback.
// Called when the button is hit.
callback: function () {
annotateImage(this);
}
})
// Define `more` dropdown button.
$.FroalaEditor.RegisterCommand('moreDropdown', {
title: 'More',
icon: 'More',
undo: true,
focus: true,
type: 'dropdown',
options: {
"annotation": 'annotation'
},
});
Thanks in advance
EDIT:
the only way i could figure out now is to use
html: function() {
return 'HTML_CODE'
}
and just write all the ul by myself which is disgusting and doesn't seem like the proper way of doing it.
Any help will be appreciated.
After talking with froala guys!
Custom popup
is a solution for implementing a popup with toolbar buttons as a dropdown.
Thanks
At the moment I have my map set up to cluster icons upon zooming out. I want to disable the ability to select clusters but allow the user to select individual markers if they zoom in. Preferably, clicking on a cluster should select each individual feature in the cluster (in their correct locations). My select code is like so:
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click,
style: selectedMarkerStyle,
addCondition: function(mapBrowserEvent){
var features = null;
map.forEachFeatureAtPixel(mapBrowserEvent.pixel, function (feature_, layer) {
features = feature_.values_.features;
});
if(features !== null && features.length > 1){
return false;
}
return true;
}
});
map.addInteraction(selectClick);
I tried to make the addCondition check if multiple features are located at the point and then stop the event however it doesn't seem to be working. At the moment clicking on a cluster selects one of the features in the cluster, in the location of the cluster, rather than the features correct location. Is there anyway to fix this?
Thanks
I have an OpenLayers map and I want users to be able to draw a box by dragging their mouse (similar to this example here, select the "select feature (0 features selected)" option first) and obtain the boundaries of the drawn box.
I can manage to draw the box using smth like below, however it won't work when there are no features in the map or no features selected, and that will certainly be the case.
new OpenLayers.Control.SelectFeature(this._layers.osm, {
multiple: true,
box: true,
hover: false,
toggleKey: 'ctrlKey',
multipleKey: 'shiftKey',
onBeforeSelect: function() {
console.log(arguments);
}
})
Is there an easy way to accomplish this in OpenLayers or should I do the heavy lifting myself by tracking mouse drags and drawing/removing polygons accordingly?
Thanks.
Try to use "boxselectionend" event of SelectFeature control (requires 2.12)
But this event not returns boundaries or the selection made, only returns a layers array.
Another option is to create the Handler.Box externally, that is what I do in some cases as:
var mySelectFeature = OpenLayers.Control.SelectFeature(...);
var myHandlerBox = new OpenLayers.Handler.Box(
mySelectFeature, {
done: function(bounds) {
OpenLayers.Control.SelectFeature.prototype.selectBox.apply(
mySelectFeature, arguments);
... your code ...
}
},
{}
);
We are using Mapfish toolbar with ExtJS3.2 in our application. Now we are trying to upgrade ExtJS3.2 to ExtJS4. But mapfish is not working with ExtJS4. So, we are using ExtJS4 toolbar, but openlayers code which is written for button in toolbar is not executing.
ExtJS4 code is:
var extoolbar = Ext.create('Ext.toolbar.Toolbar',{
border : true,
width : 100,
height : 40,
layout : hbox
});
var btn1 = {
xtype : 'button',
enableToggle : true,
tooltip : "Zoom In",
id : 'zoominbtn',
listeners : {
'click' : fucntion(){
new OpenLayers.Control.ZoomBox({
alwaysZoom : true,
draw : function(){
this.handler = new OpenLayers.Handler.Box(
this, {done: this.zoomBox}, {keyMask: this.keyMask});
}
});
}
}
};
extoolbar.add(btn1);
Here if we click on the zoom in button control is going into OpenLayers.Control.ZoomBox but the draw method is not executing. My questions are:
Is there any thing wrong in the code?
Is there any other way to approach OpenLayers with ExtJS4?
I am using MapFish too, with Ext 3.4.
First of all you have a fucntion() instead of function() :)
Then, may be I haven't understand what you want to do, but I think -IMAO- that this is not a good way to use the ZoomBox control...
You should add the ZoomBox control to the map while you create it and give the control an id, then use a listener for the toggle event like this:
listeners: {
'toggle': function(button, pressed) {
var ctrl = map.getControl('yourid');
if(pressed){
// Activate the control
ctrl.activate();
} else {
// Deactivate the control
ctrl.deactivate();
}
}
}
This way when you press the button you enable the control, and when you press it again you disable it.
Keep in mind that the ZoomBox control, once active, can also be always available by holding shift
Or you could also use GeoExt, which is really easy, like this
GeoExt.Action({
map: map,
text: "Zoom Box",
control: new OpenLayers.Control.ZoomBox()
});
But I don't know if or how GeoExt works with Ext 4
As for the point 2 of your question, I am sorry but I cannot answer that, because I have no experience with Ext 4.