We Keep Coding

Leaflet VectorGrid interactivity doesn't work if Leaflet.markercluster is used

I am trying to use Leaflet VectorGrid interactivity option for click and mouse events:
const vectorGrid = L.vectorGrid.slicer(geoJsonDocument, {
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: {
sliced: geoJSONStyle(false)
},
maxZoom: 22,
indexMaxZoom: 5, // max zoom in the initial tile index
interactive: true
});
vectorGrid.on("mouseover", function (e) {
console.log("mouseover");
});
vectorGrid.on("click", function (e) {
console.log("click");
});
However, interactivity doesn't work if Leaflet.markercluster is used.
I created a codesandbox.
If you comment map.addLayer(mcg);, interactivity works.

Answer from Leaflet contributor:
You're suffering from github.com/Leaflet/Leaflet/issues/4135 - setting
preferCanvas to false works around the issue. The problem is not
vectorgrid vs markercluster interactions, but rather vector features
in a L.Canvas (markercluster polygons) vs anything other interactive
layers (vectorgrid tiles

JVectorMap: drill-down for custom regions

Is there a way to make combined map which could use "drill-down" behaviour for some areas and "select" behaviour for other ones areas?

I believe that what you are asking can be achieved also with some of the standard functionalities provided by jVectorMap. In my example below, all US regions other than Texas can be selected, whereby the normal multimap drill-down is performed just only for US-TX.
$(document).ready(function () {
new jvm.MultiMap({
container: $('#map'),
maxLevel: 1,
main: {
map: 'us_lcc',
regionsSelectable: true,
regionStyle: {
selected: {
fill: 'green'
}
},
onRegionClick: function(event, code) {
if(code == "US-TX") {
return false;
} else {
event.stopImmediatePropagation();
}
}
}
});
});
Explanation:
As the documentation says here, the main Map of the MultiMap object can be configured the same way as the "normal" Map.
Inside the multi-map onRegionClick handler, the region selection can be avoided by returning false, and the drilldown can be stopped by invoking stopImmediatePropagation(). I tested this snippet with jVectorMap version 2.0.2 but it should work also with the latest versions.
BTW, thanks to bjornd for the great jVectorMap.

There's no standart behaviour to reach this.
To handle this I had to modify MultiMap file. In addMap function you could add
hardcode check region code or add it to config and pass or deny drilling down.

Chart.js 2.x animation onComplete not responding

I'm trying to set a function for an animation callback of a chart. So far my options object looks like this:
$scope.chartOptions = {
responsive: true,
datasetFill: false,
title: {
display: true,
text: "Title",
fontSize: 14
},
tooltips: { mode: 'label' },
animation: {
onComplete: function(animation){
$log.debug('onComplete');
},
onProgress: function(animation) {
$log.debug('onProgress');
}
}
}
See, there I have animation onComplete and onProgress that don't work. However if I set the global Chart configuration it works properly.
Chart.defaults.global.animation.onProgress = function() { $log.debug('onprogress') };
It seems like it's a simple mistake, but I just can't see it! I'm referring to the animation callbacks correct? I don't won't to set it on globals, so I can have different behaviours for different charts.
Thank you!
EDIT:
Also, using the global way I can't access the chart instance. Like:
onComplete: function(animation){
if(!this.savedImage) {
$scope.saveChartImage(this);
this.savedImage = true;
}

I solved the issue. I was passing $scope.chartOptions to a function to add attributes to it depending on some other parameters. I was doing this for several charts, so I cloned $scope.chartOptions and modified the cloned versions of it, to finally pass these clones to the charts' constructor.
The problem: In order to clone the object I was doing a shallow copy of the object, and as explained here, a shallow copy of a collection is a copy of the collection structure, not the elements. For this reason I was losing the onProgress and onComplete functions.
So I used angular.copy($scope.chartOptions).

OpenLayers DrawFeature control with Point destroys double click to zoom

I have some simple code that I copied from one of the openlayers examples for drawing several different types of geometries on the map. The problem is, whenever the "point" geometry is selected, I lose the ability to double-click to zoom in. The only difference between the examples and my code is I'm registering the handlers to use MOD_SHIFT, because i want to retain the ability to pan/zoom. Here is a snipit of code:
point: new OpenLayers.Control.DrawFeature(this.geometryFilterLayer,
OpenLayers.Handler.Point,
{
'done': console.info("drew point")
},
{
keyMask: OpenLayers.Handler.MOD_SHIFT
}
),
polygon: new OpenLayers.Control.DrawFeature(this.geometryFilterLayer,
OpenLayers.Handler.Polygon,
{
'done': console.info("drew polygon")
},
{
keyMask: OpenLayers.Handler.MOD_SHIFT
}
),
The funny thing about the above code is, the 'done' event only gets fired when the control/handler is created, and the keyMask doesn't work at all -- I have to loop through this object and manually set the keyMask each time, but that's not the real problem at hand.
I've tried every way I can think of to register a dblclick event, but no matter what, I can't get it to zoom in when I double click. It works fine on all the other geometries (bbox, point/radius, and polygon).
Can anybody give me some advice?

I never solved this issue, but ended up doing away with using MOD_XXX altogether. Each different draw control had too much built-in functionality for what happens when you hold shift, ctrl, alt, etc. I ended up using custom Buttons and a toolbar, that way the user can explicitly select the drawing control themselves.
this.toolbar = new OpenLayers.Control.Panel({
displayClass: 'olControlEditingToolbar'
});
map.addControl(this.toolbar);
var navButton = new OpenLayers.Control.Button({
displayClass: "olControlNavigation",
title: "Navigation",
trigger: lang.hitch(this, function(data){
this.toggleDrawControl("navigation");
navButton.activate();
pointButton.deactivate();
bboxButton.deactivate();
pointRadiusButton.deactivate();
polygonButton.deactivate();
})
});
...
this.toolbar.addControls([navButton, pointButton, bboxButton, pointRadiusButton, polygonButton]);
and my function to toggle draw controls (can be called externally, so that's why I re-call the activate and deactivate functions:
toggleDrawControl: function(geometryType){
this.currentGeometryType = geometryType;
for(key in this.drawControls) {
var control = this.drawControls[key];
if(geometryType == key) {
control.activate();
this.drawingButtons[key].activate();
} else {
control.deactivate();
this.drawingButtons[key].deactivate();
}
}
}

google maps api v3 infowindow + flot

I'm trying to draw a graph inside an infowindow, but flot is not executing—and is not throwing any errors. I read in the flot forum that often people have trouble with doing something like this because the placeholder element must be visible (that might be a red-herring here tho).
I'm able to get the following to produce the graph appropriately in a different element:
$.plot(
$("#placeholder"),
[ f_data[loc] ],
{
grid: { hoverable: true, clickable: true },
series: {
bars: { show: true },
clickable:true,
color:'#3FA9F5',
shadowSize: 0
},//series
xaxis: {
tickDecimals:0,
tickSize:1
}//xaxis
}
);//$.plot
But when I put the above into, or referenced from, the google.maps.event.addListener(), it does nothing (not even add the <canvas> elements).
I made sure to put it after infowindow.open(map,marker);, so that makes me think the placeholder element is visible. I also made sure #placeholder has substance/defined dimensions.
P.S. I tried what Mike Williamson reported as his eventual solution to Google Maps V3: Loading infowindow content via AJAX, but that didn't work either.
EDIT
Example of flot working outside of infowindow: index2.html
Example of flot not working inside of infowindow (addListener 'domready'): index3.html
Example of flot not working inside of infowindow (setTimeout): index4.html

The issue is that the content div has not been attached to the domain yet (so $("#placeholer") can't find it). You need to wait for the infowindow domready event to fire before running your code to plot the graph, something like this:
UPDATE: The code below works for me on a local copy (I did modify the css, but I don't think that was required).
google.maps.event.addListener(marker, 'click', (function(marker, locale, s, flot_data) {
return function() {
var fname = 'http://clients.frende.me/incognito/images/'+date+'_'+locale.toLowerCase().replace(/\s/g,'')+'.svg';
infowindow.setContent('<div id="gMaps_infowindow"><h3>'+locale+' ('+hour+':00): $'+s.total+'</h3><div id="flotIW" style="height:200px; width:350px;" name="'+locale+'"></div></div>');
google.maps.event.addListener(infowindow, 'domready', function() {(function(f_data,loc) {
$.plot(
$("#flotIW"),
[ f_data[loc] ],
{
grid: { hoverable: true, clickable: true },
series: {
bars: { show: true },
clickable:true,
color:'#3FA9F5',
shadowSize: 0
},//series
xaxis: {
tickDecimals:0,
tickSize:1
}//xaxis
}
);//$.plot
})(flot_data,locale)});
infowindow.open(map, marker);
//open_popUp(flot_data,locale);
//open_drawGraph(locale);
}//return
})(marker, locale, s, flot_data));//google.maps.event.addListener
(another option is to create the domain node directly, use that to render your graph, and pass that into the setContent call (which will take either a string or a DOM node).

Have you tried wrapping your $.plot in a setTimeout(function(){$.plot({stuff})}, 0) ?
Sometimes this helps give the browser time to finish drawing whatever elements it needs to before it executes.
You can find more information why this might be useful here: Why is setTimeout(fn, 0) sometimes useful?