I want to add popup on cluster group made using Leaflet.markercluster just like the popups that come on hovering over the leaflet markers.
I was able to find the answer with the help of issues present in the github page of leaflet.markercluster
cluster.on('clustermouseover', function(c) {
var popup = L.popup()
.setLatLng(c.layer.getLatLng())
.setContent(c.layer._childCount +' Locations(click to Zoom)')
.openOn(map);
}).on('clustermouseout',function(c){
map.closePopup();
}).on('clusterclick',function(c){
map.closePopup();
});
Related
I am coding in typescript react js and I have a highstocks graph. The problem I need help with is that I need to show the values on hover on tags (div boxes) above the graph individual to each series plotted within. The values coincide with wherever the cursor is on the graph. Please help me to achieve this.
I am attaching an image for better understanding. The dotted line on the image is where the cursor is at the moment and I want to show the values: [128.32, 49.94, 1.01] instead of '--' next to each tag name: ['Throttle Valve, Posi', 'Mill Hydr. Unit, Gri', 'Water Injection, Pos']. Thanks
Image
Inside click events, you can access the nearest point using this.hoverPoint.
chart: {
events: {
click: function() {
console.log(this.hoverPoint)
}
}
},
Demo: https://jsfiddle.net/BlackLabel/8eym6jwo/
I was able to solve this problem. Appreciate everyone who helped out.
The solution (for getting an onclick point for multiple plotted series) is as follows:
this.hoverPoints?.map((item_hoverPoints, index_hoverPoints) => {
temp_trackValues[index_hoverPoints] = Number(
item_hoverPoints?.series?.points[this.hoverPoint?.index]?.y
).toFixed(3).toString();
});
Thanks
How can I show programmatically the column PopupMenu in Ag-Grid?
PopupMenu Ag-Grid
With the gridApi you can hide it, but not show it
gridApi.hidePopupMenu()
I try also with the FilterInstance and the columnApi, but I haven't found anything that works
gridApi.getFilterInstance(colKey)
gridColumnApi?.getColumn(colKey) ...
Thanks
you can add a little workaround to open the filter popup:
// find the header menu button for the desired column
const colElement = document.querySelector("div[col-id='" + desiredColumn.getColId() + "'] > .ag-cell-label-container > .ag-header-cell-menu-button");
colElement.dispatchEvent(new Event("click")); // simulate a click on the menu button
// the next part ist to switch to the filter tab:
setTimeout(() => { // give the browser some time to render the menu
const tabElement = document.querySelectorAll("div.ag-tabs-header > .ag-tab")[1]; // select the filter tab
if (!tabElement.classList.contains("ag-tab-selected")) { // if the filter tab is not selected already
tabElement.dispatchEvent(new Event("click")); // click the filter tab
}
}, 10);
Basically, you locate the button in the DOM and execute a virtual click on it. It's not pretty but it works well, maybe we'll get an API for this in the future.
What you're wanting to do is to access getFilterInstance() of the Ag Grid API. Here's the relevant documentation: https://www.ag-grid.com/javascript-grid/filter-api/
Here's one way of accessing, and setting the filter using the getFilterInstance method
var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved') //added the option i wanted
FilterComponent.onFilterChanged();
Here's a related Stackoverflow question: how to pre-set column filter in ag-grid
I know there is a lot of topic about this but i can't find answer. My custom icon won't display. Here is my link http://maps.googleapis.com/maps/api/staticmap?zoom=15&size=640x200&scale=2&markers=icon:http%3A%2F%2Fwww.ide-imprimerie.com%2Fdata%2FnewTemplate%2Fpin.png|45.7472473,-0.6246753000000353
But the map is working well as you can see here : http://maps.googleapis.com/maps/api/staticmap?zoom=15&size=640x200&scale=2&markers=45.7472473,-0.6246753000000353
also the icon here : http://www.ide-imprimerie.com/data/newTemplate/pin.png
I encoded the URL, tried 32x32/64x64 icon, different icon and I still don't understand why this custom icon won't show up, thank you for reading and helping !
EDIT: Didn't find the issue but shortened url works so thread closed.
I believe this will works for you..
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: 'http://www.ide-imprimerie.com/data/newTemplate/pin.png'
map: map
});
I am new to google maps. right now I'm using ng-map with angularjs. I am finding it difficult to put animations on the makers (like bounce) when I click on a div. Can anybody tell me how can I do that?
I've written an example of how to animate a marker by clicking on a Div element (See the div under the map which has the text "Div element - Click me to toggle marker animation!"). It can be found here:
http://plnkr.co/edit/KATXex?p=preview
The code to animate the marker is as follows:
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
Note that to get this to work properly I had to set the marker's animation property to null in the "on" event e.g.
$scope.$on('mapInitialized', function(evt, evtMap) {
map = evtMap;
var mapMarker = map.markers[0];
mapMarker.setAnimation(null);
marker = mapMarker;
});
By default it is undefined, which means that without this step you'd normally have to click on the marker twice, once to set the animation to null, second to set the animation e.g. to BOUNCE. The issue with "undefined" may be an issue with the ng-maps library.
I've been trying to use the ng-grid 3.0 (ui-grid). I have managed to populate my grid and it's been very responsive and it's features are really amazing. But I'm trying to customize my column headers, as I need more info there.
I can create a custom header cell template, as indicated in the docs, but I don't seem able to use a Bootstrap Dropdown there, it gets cropped and I can't use it at all. Some googling got me thinking it is probably some issue with the overflow attributes, but still I can't solve it. My grid options is as follows:
$scope.columnDefs = [
{ name:'name', displayName: 'Vdd', headerCellTemplate: 'headerTemplate.html' },
{ name:'gender', headerCellTemplate: 'headerTemplate.html' },
{ name:'company' }
]
$scope.gridOptions = {
columnDefs: $scope.columnDefs,
rowTemplate: 'rowTemplate.html',
data: 'data'
};
I have forked an example in plunkr and managed to reproduce my issue:
http://plnkr.co/edit/qdrFiifiz18fxB8w6Aja?p=preview
I want to replace the built-in dropdown menu (since it doesn't seem to allow nesting and sub-menus) and add another one (so in the end, I'd have two dropdown menus in each header cell)
Any help is appreciated =)
I am proud to say I think I've figured it out. I've been digging through ui-grid's source code and narrowed it down to this block (lines: 2847 - 2852).
function syncHorizontalHeader(scrollEvent){
var newScrollLeft = scrollEvent.getNewScrollLeft(colContainer, containerCtrl.viewport);
if (containerCtrl.headerViewport) {
containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid);
}
}
I noticed that containerCtrl.headerViewport.scrollLeft was never getting set to newScrollLeft. A quick google search led me to this StackOverflow thread which says that you can't set the scrollLeft property of an element if it's overflow is set to visible.
My solution was to replace containerCtrl.headerViewport.scrollLeft = gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid); with containerCtrl.headerViewport.style.marginLeft = -gridUtil.denormalizeScrollLeft(containerCtrl.viewport,newScrollLeft, grid) + 'px'; which just sets a negative margin on the header. Then add an overflow:hidden; style to .ui-grid-render-container-body to hide headers that extend beyond the main grid viewport.
Doing this messed up the placement of column menus, but there is an easy fix. On line 514 replace var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].scrollLeft; with var containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].style.marginLeft; to use the margin instead of the scroll value in the menu placement calculation.