How to disable DragPan interaction in Openlayers 3 (when map is already defined)?
Also, why I'm unable to use mousemove event?
I'm doing this: map.on('mousemove',function(e){ ...}); and it doesn't work.
To disable an interaction, you need to remove it from the map. If you don't have a reference to your interaction, you can find it using the getInteractions map method:
var dragPan;
map.getInteractions().forEach(function(interaction) {
if (interaction instanceof ol.interaction.DragPan) {
dragPan = interaction;
}
}, this);
if (dragPan) {
map.removeInteraction(dragPan);
}
For the mouse move event, the correct event to use is 'pointermove', see an example of use here: http://openlayers.org/en/v3.3.0/examples/icon.html
Know that you can configure the interactions you want created and added by default to your map. If, for example, you wanted to create a map without the dragPan interaction, you could do so like this:
var map = new ol.Map({
layers: layers,
interactions: ol.interaction.defaults({
dragPan: false
}),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
See here for a list of all possible options of ol.interaction.defaults.
There is now a setActive method in Open Layers 3:
map.getInteractions().forEach(function(interaction) {
if (interaction instanceof ol.interaction.DragPan) {
interaction.setActive(false);
}
}, this);
Latest Version of OpenLayers v5.3.1
If you want to activate or deactivate MouseWheelZoom, DoubleClickZoom, DragPan
Add references first
import { defaults as defaultInteractions, MouseWheelZoom,
DoubleClickZoom, DragPan } from 'ol/interaction';
Create your map and add interactions MouseWheelZoom, DoubleClickZoom, DragPan in your map.
this._map = new Map({
interactions: defaultInteractions({
mouseWheelZoom: true,
doubleClickZoom: true,
dragPan: true,
}).extend([]),
layers: this.getBaseLayersFromConfig(this.baseLayers),
controls: defaultControls({ rotate: false })
});
this._map.setTarget(this.host.nativeElement.firstElementChild);
this._map.on('moveend', this.onMoveEnd.bind(this));
this._map.on('click', this.onClick.bind(this));
// debounce pointermove event so as to not flood other components
this.pointerMoveSubscription$ = fromEvent(this._map, 'pointermove')
.pipe(debounceTime(200))
.subscribe((res) => {
this.onMove(res);
// console.log('######pointer move ');
});
this._map.on('dblclick', this.onDoubleClick.bind(this));
this.initialised.emit();
and use instanceof like this to deactivate. You can place these codes in some events.
this._map.getInteractions().forEach(e => {
if((e instanceof MouseWheelZoom) || (e instanceof DoubleClickZoom) || (e instanceof DragPan))
{
e.setActive(false);
}
});
replace false with true to activate.
Related
I have a project created with ionic. In here I have a Google Map with a places search box.
I have included the Google Map library like so:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=SOMEKEY&libraries=places" defer></script>
Now in my TypeScript code I have the following
// init the google map
initMap() {
var centerOfMap;
var draggableMarker = false;
this.mapHasBeenInitialized = true;
this.isStaticLocation = false;
centerOfMap = new google.maps.LatLng(this.locationService.gpsLat, this.locationService.gpsLong);
draggableMarker = true;
var options = {
center: centerOfMap,
zoom: 11,
fullscreenControl: false,
disableDefaultUI: true, // dont allow default zoom/sattelite/street view
gestureHandline: 'cooperative' // disable moving map with one finger
};
this.map = new google.maps.Map(this.googleMap.nativeElement, options);
this.marker = new google.maps.Marker({
position: centerOfMap,
map: this.map,
draggable: draggableMarker
});
if(!this.isStaticLocation) {
var searchBox = new google.maps.places.SearchBox(this.googleInput.nativeElement);
// add the searchbar to the google map
this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.googleInput.nativeElement);
// Bias the SearchBox results towards current map's viewport
this.map.addListener('bounds-changed', () => {
searchBox.setBounds(this.map.getBounds());
});
searchBox.addListener('places_changed', () => {
var places = searchBox.getPlaces();
if(places.length == 0) {
return;
}
var bounds = new google.maps.LatLngBounds();
places.forEach(place => {
if(!place.geometry) {
console.log("returned place contains no geometry");
return;
}
this.setMarkerLocation(place);
if(place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extends(place.geometry.location);
}
});
this.map.fitBounds(bounds);
});
}
if(draggableMarker) {
google.maps.event.addListener(this.marker, 'dragend', (event)=>{
this.getMarkerLocation();
});
}
google.maps.event.addListener(this.map, 'click', (event: any)=> {
var clickedLocation = event.latLng;
this.marker.setPosition(clickedLocation);
this.getMarkerLocation();
});
// neccessary for reload. Made async to trick loading process
setTimeout(()=> {
google.maps.event.trigger(this.googleMap.nativeElement, 'resize');
this.map.setCenter(centerOfMap);
}, 100);
}
// function to set the location marker on a different spot
setMarkerLocation(place: any) {
this.marker.setMap(null);
this.marker = new google.maps.Marker({
position: place.geometry.location,
map: this.map,
draggable: true
});
this.getMarkerLocation();
}
getMarkerLocation() {
var currLoc = this.marker.getPosition();
this.locationService.setGoogleMapsLocation(currLoc.lat(), currLoc.lng());
this.locationChanged = true;
}
And this code works like a charm in the browser and on Android. Basically what the code does is whenever someone taps on the map, the marker position changes to their tap location.
When a person searches for a Place, the places dropdown will show over the map. On android, when you tap a place in this dropdown, the marker will go to the selected place (f.e. australia).
On iOS however, the marker will position itself on the location where the person tapped and will totally ignore the tap on the place dropdown.
So when I'm in Europe and I type in 'Australia' and select 'Australia' from my dropdown, on Android I'll go to australia but on iOS I'll stay somewhere in Europe wherever the dropdown was positioned.
I have a Shiny app containing a Highcharter graph. The graph is a scatter, and has draggable and clickable points. The action associated with dragging should, in theory, be mutually exclusive with the action associated with clicking.
However, in practice, the click action sometimes fires when a point's dragged. Clicking only (without a drag) and dragging (which should preclude the ability to click until the mouse button's released and the drag action's completed) need to be mutually exclusive in this app. My full code has different JavaScript actions getting passed back to the Shiny server depending on the event's type. Both the events firing together is causing trouble.
I suspect the solution involves adding additional JavaScript actions associated with each event. My JavaScript skills aren't strong enough to know what those tweaks might be, though. Googling several different variants of this question didn't turn any potential solutions. The closest discussion I found is in the Highcharts context, here, but the solution has to do with the master Highchart/draggable-events JS files.
Suggestions?
For a toy example where you can see this behavior in action:
rm(list=ls())
library(highcharter)
library(shiny)
ui <- fluidPage(
highchartOutput("hcontainer")
)
# MUTUAL EXCLUSIVITY:
# if you drag in the plot, you should either drag (and get no alert) OR
# get an alert (and the point shouldn't/won't move), but never both.
server <- function(input, output, session) {
output$hcontainer <- renderHighchart({
hc <- highchart() %>%
hc_chart(animation = FALSE) %>%
hc_title(text = "draggable points demo") %>%
hc_plotOptions(
series = list(
point = list(
events = list(
drop = JS("function(){ /* # do nothing, for demo */
}"
),
click = JS("function(){
alert('You clicked') /* # give alert, for demo */
}"
)
)
),
stickyTracking = FALSE
),
column = list(
stacking = "normal"
),
line = list(
cursor = "ns-resize"
)
) %>%
hc_tooltip(yDecimals = 2) %>%
hc_add_series(
type = "scatter",
data = stars,
draggableY = TRUE,
draggableX = TRUE,
hcaes(x = absmag, y=radiussun)
)
hc
})
}
shinyApp(ui = ui, server = server)
This example may help you: http://jsfiddle.net/kkulig/th37vnv5/
I added a flag in the core function that prevents from firing the click action right after the drag event:
var dragHappened;
(function(H) {
var addEvent = H.addEvent;
H.Pointer.prototype.setDOMEvents = function() {
var pointer = this,
container = pointer.chart.container,
ownerDoc = container.ownerDocument;
container.onmousedown = function(e) {
dragHappened = false;
pointer.onContainerMouseDown(e);
};
container.onmousemove = function(e) {
pointer.onContainerMouseMove(e);
};
container.onclick = function(e) {
if (!dragHappened) {
pointer.onContainerClick(e);
}
};
(...)
}; // setDOMEvents
})(Highcharts);
(...)
plotOptions: {
series: {
point: {
events: {
drag: function() {
console.log('drag');
dragHappened = true;
},
click: function() {
console.log('click');
}
}
}
}
},
I am trying to fire the select event for a selectInteraction. Here is the code I have so far:
// create and instance of the selectInteraction
var selectInteraction = new ol.interaction.Select( {
layers: myLayers
} );
// add select event handler
// NOT BEING CALLED WHEN FEATURES ARE PUSHED TO SELECTED ARRAY
selectInteraction.on( "select", function ( evt ) {
var selected = evt.selected;
var deselected = evt.deselected;
selected.forEach( function( feature ) {
feature.setStyle( myCustomStyleFunction );
} );
deselected.forEach( function( feature ) {
feature.setStyle( null );
} );
}, selectInteraction );
// add the interaction to the map
myMap.getInteractions().extend( [ selectInteraction ] );
// function called with feature to be selected
function programmaticallySelectFeature( feature ) {
// get the selectInteraction for the map
myMap.getInteractions().forEach( function ( interaction ) {
if ( interaction instanceof ol.interaction.Select ) {
selectInteraction = interaction;
}
});
// push the feature to the selectInteraction
selectInteraction.getFeatures().push( feature );
}
I understand that the select event is not firing when features are pushed to the selected array. Otherwise it works as expected. So how can get this to work? Can I listen for another event perhaps?
you can listen to the events click or singleclick on the map, and push the returned feature in the selected features:
map.on('click', function(evt){
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
return feature;
});
if(feature){
selectInteraction.getFeatures().push(feature);
}
});
this of course assuming you want to select features with a click
I'm trying to get jsTree (1.0-rc3) working with Knockout.js (2.2.1).
See example jsFiddle: http://jsfiddle.net/adeconsulting/qfr6A/
Note: I've included several JS resources in the Fiddle to match as close as possible my Visual Studio project, in case there's a conflict between libraries which might be causing this problem.
Run the Fiddle and navigate through the jsTree, it's a list of servers by their physical location and type. It helps to have Firebug's console open so you can see the ajax calls and responses. When you click a leaf node, an ajax call is made to retrieve the server details and display a form whose values use Knockout bindings. I hide the form when a non-leaf node is selected.
It works the first time you click a leaf node. After that, Knockout does not update the form for leaf node clicks. However, if you happen to click the Edit button, then all of a sudden the most recent server details ARE displayed.
I'm thinking that there's a conflict between jsTree and Knockout bindings, but don't know where to start troubleshooting what that might be.
Since stackoverflow apparently requires at least one code block, here's the JavaScript portion of the Fiddle:
// Global vars:
var prevJsTreeNodeId = null;
var serverModelBindingsApplied = false;
var serverLoadInProgress = false;
/*
* The knockout.js view model
*/
var ServerViewModel = function () {
// Data
var self = this;
self.IsReadOnly = ko.observable(true); // the form's input mode
self.btnEditSave = ko.observable("Edit"); // the Edit/Save button text
self.Server = ko.observable({}); // the Server object
// Operations
self.setEditable = function () {
self.IsReadOnly(false);
self.btnEditSave("Save");
};
self.setReadOnly = function () {
self.IsReadOnly(true);
self.btnEditSave("Edit");
};
self.doEditSave = function () {
var flag = self.IsReadOnly();
if (flag) {
// switch to Edit mode
self.setEditable();
}
else {
// switch back to readOnly
self.setReadOnly();
}
};
// use ajax to update the knockout.js view model's Server object for the specified server name
self.load = function (serverName) {
if (!serverLoadInProgress) {
serverLoadInProgress = true;
// use ajax to retrieve the server's details
var data = {
json: JSON.stringify({
ServerName: serverName,
PrimaryIP: "1.2.3.4",
BrandDesc: "Dell",
OSDesc: "Windows 2003 Server",
Location: "xyz"
}),
delay: 1
};
$.ajax({
url:"/echo/json/",
data:data,
type:"POST",
success:function(response)
{
console.log(response);
window.ServerViewModelInstance.Server = ko.mapping.fromJS(response);
// apply bindings the first time we retrieve a Server object
if (!serverModelBindingsApplied) {
ko.applyBindings(window.ServerViewModelInstance,
document.getElementById('servercontent'));
serverModelBindingsApplied = true;
}
else {
// hmmm... updating the view model's .Server property doesn't trigger the
// form to be updated, yet if we click the Edit button, the new values
// suddenly appear, so try emulating that here...
self.setReadOnly();
}
}
});
serverLoadInProgress = false;
}
};
}; // ServerViewModel
/*
* document load
*/
$(function () {
// configure the jsTree
$("#divtree")
.jstree({
"themes": { "theme": "default", "dots": true, "icons": true },
"plugins": ["themes", "html_data", "ui", "types"],
"types": {
"type_attr": "tag", // the attribute which contains the type name
"max_depth": -2, // disable depth check
"max_children": -2, // disable max children check
"valid_children": ["root"],
"types": {
"root": {
"valid_children": ["level1"]
},
"level1": {
"valid_children": ["level2"],
"start_drag": false,
"move_node": false,
"delete_node": false,
"remove": false
},
"level2": {
"valid_children": ["leaf"],
// use the theme icon for the level2 nodes
"start_drag": false,
"move_node": false,
"delete_node": false,
"remove": false
},
"leaf": {
"valid_children": "none"
}
}
}
});
// register to receive notifications from #divtree when a jsTree node is selected
$("#divtree").bind("select_node.jstree", function (event, data) {
// data.rslt.obj is the jquery extended node that was clicked
var key = data.rslt.obj.attr("key");
var id = data.rslt.obj.attr("id");
if (id == prevJsTreeNodeId) {
// user clicked the same node, nothing to do
return;
}
prevJsTreeNodeId = id;
// when a jsTree node is selected, reset the knockout.js view model to read only
window.ServerViewModelInstance.setReadOnly();
var idx = key.indexOf("Server");
if (idx === 0) { // "Server|servername"
// show the "servercontent" div
$("#servercontent").show();
// display the server details
var serverName = key.substr(idx + 7, key.length);
window.ServerViewModelInstance.load(serverName);
}
else {
// hide the "servercontent" div
$("#servercontent").hide();
}
});
// hide the "servercontent" div
$("#servercontent").hide();
// instantiate the knockout.js view model
window.ServerViewModelInstance = new ServerViewModel();
}); // document ready
// initialization timer routine to select the main jsTree node
setTimeout(function () {
// open the root node
$.jstree._reference("#divtree").open_node("#root");
}, 500);
Sorry for my bad formatting below - this editor is not my friend... :-/
If I understand you right, the detail panel for a clicked tree node isn't updated with the correct data - right?
Try to do the following:
change:
window.ServerViewModelInstance.Server = ko.mapping.fromJS(response);
to: window.ServerViewModelInstance.Server(response);
(e.g. not overwriting the initial ko.observable which you only binds once, instead updating its values)
and in view where you bind to the observables..
for instance instead of: ... "value: Server.ServerName, ...
change it to: ... "value: Server().ServerName, ...
(e.g executing the function before accessing the property)
It works and updates the form when clicking on a new server name node in the tree (tried in firefox)
A copy of your example with the modified code can be found at: http://jsfiddle.net/RZ92g/2/
using jquery-ui-map
here is my code
$(document).ready(function() {$('#map_canvas').gmap({ 'center': new google.maps.LatLng(3.162456,21.09375), 'zoom': 2, 'streetViewControl': false, 'callback':
function() {
$('#map_canvas').gmap('loadHTML', 'microformat', '.importers', function(markerOpts, node, index) {
var clone = $(node);
// We have to add a callback in the addmarker method so we can access the marker just added
var name = $(node).find('.name');
var icon = $(node).find('.icon');
$('#map_canvas').gmap('addMarker', jQuery.extend({ 'title': name.html(), 'icon':new google.maps.MarkerImage(icon.html())}, markerOpts), function(map, marker) {
$(name).click( function() {
$(marker).triggerEvent('click');
return false;
});
}).click(function() {
$('.reveal').removeClass('reveal');
$(this).get(0).map.panTo($(this).get(0).position);
$(clone).toggleClass('reveal');
//need to wait till pan has complete before doing zoom!
});
});
}
});
});
at the moment when you click on a market it pans to its position
what i want to do is also zoomin, i've tried just adding
$(this).get(0).map.setZoom(5, true);
but this means the pan does not work it just jumps straight to the zoom level, how do i get it to fire the $(this).get(0).map.setZoom(5, true); after the panning is done?
thanks in advance
$('#map_canvas').gmap('addMarker').click(function() {
$(this).get(0).map.panTo($(this).get(0).position);
var self = $(this).get(0);
setTimeout(function() { self.map.setCenter(self.position); self.map.setZoom(15); }, 2000);
});
This would be the easy way of setting the zoom after the pan.