I would like to know when my gmap is loaded. I didn't see any callback method in the documentation and around the web.
I'm using this plugin: http://gmap3.net/en/catalog/
Any tip? Thx
Regards
I think you will have to revert and use the google maps native function. The answer toyour question is outlined in this question: How can I check whether Google Maps is fully loaded?
and it looks like the best answer is given with this code snippet:
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
});
it doesn't seem to be documented but there is a callback property on the map object
$('#map_canvas').gmap3(
{
map: {
options: {
zoom: 9,
center: [view.lat, view.lng]
},
callback: function (e) {
alert("loaded");
}
}
});
Related
I have multiple highcharts and I need to update all of the x-axes to a common new value from a numeric input.
In my real example, this operation is rather slow. I was wondering if I can somehow implement an async function here?
I tried to reproduce my issue here: https://jsfiddle.net/fmattioni/vcn9bxyo/2/
Thanks!
Disabling the update animation and using setExtremes method will be enough:
function updateAxes() {
var newX = document.getElementById("update_axes").value;
Highcharts.charts.forEach(chart => {
chart.xAxis[0].setExtremes(null, newX, true, false);
});
}
Live demo: https://jsfiddle.net/BlackLabel/62a3sLc7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I'm using react-highcharts and I'm trying to find a way to trigger an event when one of the Y-axis categories is being clicked. I'm using xrange graph.I want to get the offset of the value that was clicked. For example, if i have:
CatA
Catb
CatC
If I will click on CatB I will get 1.
I found a jquery solution, which give me the value itself. Its not a problem to get all the elements and iterate over them and found the offset myself. The solution of jquery:
$("#container .highcharts-yaxis-labels text").click(function() {
alert($(this).text());
});
I'm looking for react/react-highcarts solution for that.
Update
Thanks Kamil Kulig! Im getting trouble with the library. I import the library as
import HighchartsCustomEvents from 'highcharts-custom-events';
And nothing happned, also i added this code at componentWillMount function:
template.yAxis.events.click = function () {
alert(1);
};
I saw the docs and I didnt find any offset function, which means that sould I use jquery anyway? or do u have any idea?
Highcharts offers the custom events module that is able to handle the actions that you require.
Module reference on npm: https://www.npmjs.com/package/highcharts-custom-events
Module reference on Highcharts website: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events
Sample code:
yAxis: {
labels: {
events: {
click: function () {
// do something
}
}
}
}
I have an issue discussed here: Page after canceling print doesn't resize chart.
https://github.com/highslide-software/highcharts.com/issues/1093
I am hoping to reproduce a solution mentioned there. Basically, the solution is to set global options in Highcharts as follows:
Highcharts.setOptions({
chart: {
events: {
afterPrint: function () {
alert('called');
Highcharts.charts.forEach(function (chart) {
if (chart !== undefined) {
chart.reflow();
}
});
}
}
}
});
In my case, the page works as below:
Load the page
Start an Ajax call to retrieve data and draw four charts.
I tried to use the above solution either at page load or after the ajax call. However, afterPrint was never called. Note that I put "alert('called')" there to prove it.
What is the right way to add global afterPrint?
Regards.
I got it working now. I was using version 4.0.4, with which afterPrint did not work as expected. Now I am using the latest version 4.1.9 and afterPrint works as expected without any code change on my side.
I call the global setup at the page load.
Hope this helps.
I did it in easier way by adding following in my script
Highcharts.setOptions({
chart: {
events: {
afterPrint: function () {
jQuery(window).resize()
}
}
}
});
I'm using the twitter typeahead library. Version: 0.10.4
I have been able to bind events to the "opened", "selected" events but nothing happens when I bind the event "rendered", although it is in the documentation.
Has any of you guys come across this issue?
Here is the code I'm using:
typeAhead.on('typeahead:selected', function(e, suggestion) {
alert(0);return; // Shows the alert
})
typeAhead.on('typeahead:rendered', function() {
// Nothing happens
});
had the same issue, debugging I've found out this line
typeAhead.data().ttTypeahead.dropdown.datasets[0].onSync('rendered', function(){
console.log('rendered');
});
it's working for me and I aint found any better than this, without modifying typeahead libraries.
if you have more datasets, just change to a for loop.
I'm having troubles with this event too. I'm using version 0.11.1 and as far as I can see I think there's a kind of bug when passing arguments to the callback function:
if you use this handler:
function(obj, matches) {
console.log(matches);
}
you seem to get only one (the first one, of the several matched suggestions.
if you use this handler:
function(obj, match1, match2) {
console.log(match1);
console.log(match2);
}
you get two, and so on.
Actually all suggestions are passed as this handler prove:
function() {
console.log(arguments);
}
skipping the first slot, the remaining are the current suggestions, so I think this is a bug of the plugin.
I'm looking for OpenLayer 3 map event for map move/map pan, something like:
map.on('move', function(){
...
}
Does anyone know how to implement?
The moveend event might be the one you search for - it detects any move made, even those not invoked by dragging.
map.on('moveend', function (e) {
console.log("moved");
});
See http://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html
UPDATE:
These events are no longer present in recent versions. Please refer to the more recent answer for an up-to-date information.
Names of the events you're looking for are drag and/or dragend (it's probably a better idea to depend on properties names, though: ol.MapBrowserEvent.EventType.DRAG but it didn't work on the demo page):
map.on('drag', function() {
console.log('Dragging...');
});
map.on('dragend', function() {
console.log('Dragging ended.');
});
Reverse-engineered by looking inside mapbrowserevent.js, the documentation explicitly mentions events are not documented yet.
MoveEnd trigger if u move the map with a script.
I have use that in OpenLayers 6:
map.on('pointerdrag', function (event) {
is_map_center = false;
})
hf gl!
I believe this functionality exists in 2 functions within the View of a map, not the map itself. You can monitor the center property of the View by listening for change:center events. There is also a getInteracting() method in ol.View that will return a boolean if an interaction (zooming or panning) is occurring.
https://openlayers.org/en/v4.6.5/apidoc/ol.View.html#getInteracting