I recently had a good reason to use two different select interactions on the same map, and am surprised to find that the event handler for the latest applied select interaction is the only one that fires.
Both of these select interactions are using the default condition, a click.
Is there a way to make them both trigger??
Hm, im also using two select interactions and i dont have any problem. I added one to react on pointermove (like hover) and one for click and both select interaction are firing. Be aware to 'name' them different.
Naming is wrong, i just created/initialise two with different vars
//select interaction working on click
var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click,
layers: [layer]
});
// select interaction working on "pointermove"
var selectPointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
layers: [layer]
});
map.addInteraction(selectClick);
map.addInteraction(selectPointerMove);
Related
I have a single MapService with multiple layers. I'd like to utilize layer group for changing layers with radio buttons, but want to use it with the layers[] array option rather that creating a single L.esri.dynamicMapLayer etc... for each layer.
Here is a sample snippet:
var msndfd = "https://nowcoast.noaa.gov/arcgis/rest/services/nowcoast/forecast_meteoceanhydro_sfc_ndfd_time/MapServer";
var minTemp = L.esri.dynamicMapLayer({
url: msndfd,
layers: [8],
opacity: .7
});
How do we switch layers based on that layers array # such as [4,8,12,16] while using the L.control.layers(baseMaps, overlayMaps)? So each of the overlayMaps would essentially be a layer# not another dynamicMapLayer variable such as minTemp in my example above.
the way Leaflet's layers control is currently written is to add/remove layers from the map in reaction to user interaction with the checkboxes and radio buttons.
if you'd like to organize things so that choosing a different radio ensures that L.esri.dynamicMapLayer.setLayers() is called instead, you'd have to customize the control to lay out its UI differently (referencing a single base layer and an array of sublayers to toggle) and ensure that the appropriate action occurs when a new radio is selected.
existing logic for laying out the list -
Control.Layers.js#L313-L322
existing logic for responding to user interaction -
Control.Layers.js#L382-L387
my gut reaction is that you'd probably be better off accepting how the control is already designed, but i'm sure you have your reasons.
First off, I'm not trying to use Jquery for this, let's get that out of the way.
Cool, so I'm relatively new to working with vanilla JS, and I've got a page where I can click a button, and it adds a new li to a list. The new li contains a few things, but most importantly it contains it's own ul, with a few more lis, and its own button to be able to add more lis to this sub-list.
Here's what it looks like:
When you click 'add question', it successfully creates a new question with its own set of answers, and a new 'add answer' button. That button should allow adding more answers to the list, but I can't seem to bind events to the new buttons. I've made sure that they all have the same class, so ther querySelectoryAll shouldn't be a problem. The 'add answer' buttons that exist on pageload work fine, but the new ones don't seem to be seen but my code, or else are not being reassessed. Here's the code:
// Get all 'add answer' buttons
var addAnswerElement = document.querySelectorAll(".addAnswer");
// Loop through the buttons
for (var i = 0; i < addAnswerElement.length; i++) {
// TODO: make sure this works on additional add 'answer buttons', not just the first :(
addAnswerElement[i].addEventListener('click', function() {
}
Maybe this needs to be wrapped in a function that re-executes at some point? I'm just not familiar with how to do that, and haven't had luck describing to Google what or S.O. search what I'm trying to do.
Your code is run only one time, when the page loads. At that point there's only one .addAnswer element, and only it gets the event listener added. You need to run the code that attaches the event listener each time the new element is created.
I'd like to cause an ol.interaction.Select obj to 'select' a feature when the user clicks on a button which is related to that feature. I'd like to be able to reuse the event handling code I already use for when a user clicks on a feature.
Is there a way to do this with the Select interaction?
<!-- UPDATE -->
Maybe when this PR get merged we can dispatch select event. About reusing code, I guess you can solve this wrapping it on a function, and when push a feature to the collection, call your function with that feature.
<!-- End of update -->
Get the ol.interaction.Select collection and push or pop as you want:
var select = new ol.interaction.Select({
//some options
});
map.addInteraction(select);
var collection = select.getFeatures();
collection.push(some_feature);
//or push an array of features
collection.extend(some_array_features);
I am new to Fabricjs, but have been reading the docs, doing the tutorials.
It is a very powerful library. I see places where I can lock objects, but what I want to do is stay on an object I select, and not release it by clicking outside its boundaries. I am building a mobile & touch screen version and using your fingers, you tend to click outside the bounds of an object.
Basically: select an object, be able to edit, apply properties from a palette, and have a release button, so it is not released before the user is done editing it.
You can lock single elements with:
canvas.item(0).selectable = false;
But you still have the problem of losing selection on the object you are trying to edit should you click outside its bounds.
Any help is very appreciated!
If I understand you correctly, you would just need to prevent deselection of object by selecting it back again when it's deselected. This can be done via events in Fabric:
var selectedObject;
canvas.on('object:selected', function(options) {
selectedObject = options.target;
});
canvas.on('selection:cleared', function() {
canvas.setActiveObject(selectedObject);
});
I made a simple example (jsfiddle) to demonstrate this.
I have a vector Layer in Open layers. http://www.geos.ed.ac.uk/~s0825955/cgi-bin/maps6.pl
When selected it uses the selected formatting intent and also brings up a popup. I want the selected formatting to be displayed when the mouse moves over the layer, and the popup to display only when the feature is clicked.
I have tried adding {hover: true} to the SelectFeature control but this makes the popups appear as you move the mouse over the map.
I have also tried adding a second feature control that the popup doesn't listen to but the style map doesn't recognize this either.
Is there any way I can have a different style for hovering that does not have the feature selected?
Only one SelectFeature control may be active at a time, unless the second one has the property highlightOnly = true. From the OpenLayers docs:
highlightOnly{Boolean} -
If true do not actually select features (that is place them in the layer’s selected features array), just highlight them.
Try adding a second SelectFeature control that just changes the style. It should look like this:
var hover_feature_control = new OpenLayers.Control.SelectFeature(
[your_layer],
{
hover: true,
highlightOnly: true,
renderIntent: "temporary"
}
);
The renderIntent property should match the name of the style you want on hover in the style map.
styleMap: new OpenLayers.StyleMap({
'default': default_marker_style,
'temporary': hover_marker_style
})
Make sure you remove {hover: true} from the control that manages popups!