Clicking on marker cluster wants to open spider with exact same location markers by default - markerclusterer

I was trying to implement MarkerCluster (MS) with
Overlapping Marker Cluster (OMS). Everything seems to work just fine.
However, I am looking to modify the way OMS is works so that if I click on a cluster that has 2 points under it
When I click on any Cluster with 2 points in it with exact same geo location, its opens a marker and when I am clicking on that marker it's opening spider with 2 markers.
What I want when I am clicking on the
Cluster, straight a way it will open up spider with 2 markers, already
spend lot of times but still nothing worked.
I already tried many solutions, like
1.
I can track the marker when I am adding to OMS(oms.addMarker), and can
click depending on zoom_changed event of google map, but its not firing
spiderfy rather its firing click event of what we added to markers.....
2.
I have see a event spiderfy, so I tried to trigger that event with a
marker object (oms.trigger('spiderfy', marker);) but nothing working...
Here I am adding code snippet too:
mc = new MarkerClusterer(map, markers.locations, mcOptions);
google.maps.event.addListener(mc, 'clusterclick', function(cluster) {
enter code hereclusterClicked = true;
// HERE WE WANTS TO FIRE SPIDER FUNCTIONALITY ...
});

I could solve this problem, first of all it is obvious that you have implemented and Overlapping Xluster Marker Marker Cluster in your google maps.
My solution is something very simple.
We capture the click event of markerCluster.
obtain the markers of markerCluster.
check whether all the markerCluster markers are in the same position.
if they are in the same position we make a click event trigger the latter obtained the markerCluster marker.
In short this is the code:
var markerClusterer = new MarkerClusterer(map, allMarkers, {styles: styles[0], clusterClass: 'poiCluster', maxZoom:18});
google.maps.event.addListener(markerClusterer, 'click', function(cluster) {
var markers = cluster.getMarkers();
if(estanTodosEnLaMismaPosicion(markers)){
//to wait for map update
setTimeout(function(){
google.maps.event.trigger(markers[markers.length-1], 'click');
},1000)
}
return true;
});
function estanTodosEnLaMismaPosicion(markers){
var cont=0;
var latitudMaster=markers[0].getPosition().lat();
var longitudMaster=markers[0].getPosition().lng();
for(var i=0;i<markers.length;i++){
if(markers[i].getPosition().lat() === latitudMaster & markers[i].getPosition().lng() === longitudMaster ){
cont++;
}else{
return false;
}
}
if(cont==markers.length){
return true;
}else if(cont<markers.length){
return false;
}
}

Related

Zoom out by scrolling in a testcafe test

I have a map in my angular application OpenLayers map.
During the test using testcafe, I have to zoom out, but I have no way how to do that.
I only have to put my mouse at the center of the screen, and then scroll down to zoom out.
Already tried using ClientFunction with scrollBy and etc but nothing happens in map.
Thank you
Find out on which element the handler you need hangs and what event it listens to. This is most likely a 'mousewheel' event. This should help you:
const zoom = ClientFunction(zoomSize => {
const event = new WheelEvent('wheel', { deltaY: zoomSize });
document.querySelector('#zommed-element').dispatchEvent(event);
});

Selenium IDE isn't working with canvas

I'm using canvas (phaser.io game framework) to make games and would like to do selenium tests. Sadly I can't replay recorded actions on a canvas.
For example I can't replay the click on the button here https://phaser.io/examples/v2/input/button-open-popup
I get this in the log:
1.Trying to execute open on /examples/v2/input/button-open-popup... Success
2.Trying to execute selectFrame on index=0... Success
3.Trying to execute clickAt on css=canvas with value 422,502... Success
But nothing happens on the screen and the popup is not poping up.
Is there a problem with clicking on canvas through Selenium IDE or maybe I'm doing something wrong?
I did some automated tests for Phaser games.
Let's take an example, I have to click on a menu button.
The way I managed to click on the button precisely every time is that I created a html page, with the same width and height as my canvas ( first, I decided the size of the chrome window, for me I used 800x900, and then get the canvas size), and in my html page I only put javascript to output me the positions where I click.
So basically I created a html, with the same dimension as my canvas, and clicked on it at the approximate position of my canvas button.
Here is the code I've used for my tests:
var mainState ={
preload: function(){
},
create: function(){
game.stage.backgroundColor = '#71c5cf';
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
},
update: function(){
getcoordinates();
}
};
function getcoordinates(){
if (game.input.mousePointer.isDown){
var x = game.input.activePointer.position.x;
var y = game.input.activePointer.position.y;
console.log("x" + x, "y" + y);
var worldx = game.world.centerX;
var worldy = game.world.centerY;
console.log("world x" + worldx, "world y"+ worldy);
}
};
var game = new Phaser.Game(384,683, Phaser.CANVAS);
game.state.add('mainState', mainState);
game.state.start('mainState');
As for checking if my action was succesfull, I used JavascriptExecutor. And in Selenium I've created some functions that do just that, navigate to coordinates and execute click.

Leaflet markers do not open popup on click

I just started using Leaflet and Marker Clusterer to organize the markers.
Problem #1: When an unclustered marker is clicked, no popup appears.
Problem #2: When a cluster is clicked several times, all the markers within that cluster appears, and when one of this marker is clicked, its popup appears! However, after closing the popup by clicking on the map, clicking on any of these clustered markers do not open any popups!
If I only have 3 unclustered markers, the popup works fine. However, as more markers are added, once a cluster forms, clicking on the marker within any cluster will not cause the popup to open!
Initializing markerclusterer
markers = new L.MarkerClusterGroup();
map.addLayer(markers);
All markers added to markercluster markers
A loop calls on the render function to create the marker and add it to the markerclusterer's array markers. (ignore the backbone.js code)
ListingMarkerView = Backbone.View.extend({
template: _.template( $('#tpl_ListingMarkerView').html() ),
render: function() {
// Create marker
var content = this.template( this.model.toJSON() );
var marker = new L.marker(
[this.model.get('lat'), this.model.get('lng')],
{content: content});
marker.bindPopup(content);
// Add to markerclusterer
markers.addLayer(marker);
}
});
Without markerclusterer
If I add the marker directly to map instead of the markerclusterer array markers, the popups work fine, so I guess the problem has something to do with markerclusterer.
Did I do something wrong that resulted in such behavior of the popups? All help appreciated, thanks!
From what little I know of the cluster marker group, you should do this:
var markerGroup = new L.MarkerClusterGroup();
markerGroup.on('click', function(ev) {
// Current marker is ev.layer
// Do stuff
});
To add an event handler to the cluster layer instead, do this:
markerGroup.on('clusterclick', function(ev) {
// Current cluster is ev.layer
// Child markers for this cluster are a.layer.getAllChildMarkers()
// Do stuff
});
Oh, and read the github README carefully, it's all in there...
Make sure you have the right versions of everything in your Leaflet + Clusterer stack (Js and Css). Compare against the examples in the Clusterer Github repo.

dojo splitter not resizing properly with dynamic content

I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();

DynaTree has two highlighted nodes on right click after left click

My problem is whenever I left click a dynatree node then right click another dynatree node to display my context menu the node which was left clicked remains highlighted in blue so I end up with two nodes in blue. If I then right click successive nodes the highlighting works correctly but the left clicked node remains highlighted.
The left click processing clears the previous node on mouseup. I initiate context menu processing via
document.oncontextmenu=contextMenu
which is also called on mouse up.
I have tried to capture the right button mouseup event and make the context menu node active thinking that would change the state of the left clickked node but not so.
$("#tree").mouseup(function(e){
if(e.button == 2){
e.target.setActive();// right mouse up
}
});
How should I get the last left clicked node to unhighlight when another node is right clicked ? It does not look right to have two nodes highlighted at once. I have noticed the dynatree context menu demo does not unhighlight the previously left clicked node when another node is right clicked so is this by design ?? Can you get around it ?
Thanks,
Al
OK this works
In my myfile.js after I create the dynatree I added:
var dtnode; //dynatree node Global <--ADDED
var elem; //DOM node Global <--ADDED
Function BuildTree()
//ADDED following code after the dynatree was loaded
$("#tree").mouseup(function(e){
if(e.button == 2){ //RIGHT MOUSE UP
if(!(elem == null)){
var elem2 = e.currentTarget.document.activeElement;
dtnode = tree.getDtNodeFromElement2(elem);
dtnode.deactivate();
elem = null;
}
}else{//LEFT MOUSE UP
if(!(elem == null)){
elem = null;
}
elem = e.currentTarget.document.activeElement;
}
});
//In jquery.dynatree.js
//$Version: 1.1.1$
//$Revision: 481, 2011-03-02 07:25:35$
//The following changes were made:
getSelectedNodes: function() {
return this.tree.getSelectedNodes();
},
// AFTER THE ABOVE FUNCTION THE FOLLOWING FUNCTION WAS ADDED
getDtNodeFromElement2: function() {
return this.tree.getDtNodeFromElement2();
},
//********************************************************
getSelectedNodes: function(stopOnParents) {
var nodeList = [];
this.tnRoot.visit(function(node){
if( node.bSelected ) {
nodeList.push(node);
if( stopOnParents === true ){
return "skip"; // stop processing this branch
}
}
});
return nodeList;
},
// AFTER THE ABOVE FUNCTION THE FOLLOWING FUNCTION WAS ADDED
getDtNodeFromElement2: function(elem) {
var sourceNode = getDtNodeFromElement(elem);
return sourceNode;
},
Summary:
By keeping track of the last element to be left clicked and exposing the dynatree getDtNodeFromElement method through getDtNodeFromElement2 it is possible to call the deactivate method on the last left clicked node whenever the first right click of a node occurs. This eliminates simultaneous highlighting of tree nodes.
I need to add a short method I added to jquery.dynatree.js to make it work.
//--- Class members ------------------------------------------------------------
DynaTree.prototype = {
// Constructor
// member functions
getDtNodeFromElement2: function(elem) {
var sourceNode = getDtNodeFromElement(elem);
return sourceNode;
},
I know this is old, but I just ran into the same problem. When manually trying to manage 'dynatree-active' classes on nodes to force highlighting, I was having issues with multiple nodes being selected. By using a left click along with the right click, dynatree managed all of the selecting and deselecting active nodes.
$("#tree").mouseup(function(e){
if(e.button == 2) e.target.click();
});
I struggled with this one for a bit, I hope it can save someone some pain.
One more change I found while clicking around the display
Instead of
}else{//LEFT MOUSE UP
if(!(elem == null)){
elem = null;
}
elem = e.currentTarget.document.activeElement;
}
use
}else{//LEFT MOUSE UP
if(!(elem == null)){
elem = null;
}
elem = e.currentTarget.document.activeElement;
if(elem.tagName != 'A'){
elem = e.target;
}
}
This corrects a issue where the old highlighting problem reappears of a non A element is clicked.
Al