Okay, so I graphed a scatter plot in highcharts. I want to make it so when I hover over a series, all of the other series dim. I've tried changing the fillOpacity and the color properties of the markers and it doesn't seem to work. This is what I currently have:
series:{
events:{
mouseOver: function(event){
console.log("in");
var series_to_keep = this;
$.each(chart.series, function(seriesNo, serie){
serie.hide();
});
this.show();
this.select(true);
},
mouseOut: function(event){
console.log("out");
console.log(this);
$.each(chart.series, function(seriesNo, serie){
if(!serie.visible){
serie.show();
}
});
},}}
...
This currently hides the other series, but I don't want to HIDE them. How do I just change the opacity of the markers of the other series on hover, then switch them back? I can't find which properties need to be changed. I've missed with so many and none seem to work.
From this discussion, you can use something like this to adjust the color dynamically:
serie.color = "#FF00FF";
serie.graph.attr({
stroke: '#FF00FF'
});
$.each(serie.data, function(i, point) {
point.graphic.attr({
fill: '#FF00FF'
});
});
serie.redraw();
Related
Is there anyway to change default mouseover range? Simple example, I have a map with a bunch o tracks which are 1-2 px wide and are clickable. To click a track and display info you need to click very precisely which can be very annoying. Is there any way to change that tolerance? Just to show what I mean here's my example.
Thanks in advance.
http://members.upcpoczta.pl/w.racek/mapa.html
I'm afraid there is not much you can do about that except for upping the weight on your polylines. It's just the way SVG works, precise. What you also can do, to make selecting a polyline less irritating, is dropping the dasharray. It leads to irregular behaviour on hover because the gaps between the lines don't respond to the mouseover. When hovering you'll think you're on the line but you're not, that can also be very frustrating. See this testcase on Plunker and you'll understand: http://plnkr.co/edit/7WPTWN?p=preview
L.polyline([[0, -180],[0, 180]], {
'dashArray': [10, 50]
})
There is a solution however it's very hacky and performancewise i wouldn't recommend it. For each polyline, add another line, with exactly the same coordinates, make it transparent and set the weight to 10 or more. Hook the mouseovers on the transparent line and use their handlers to change the style of the visible line. Code example:
var visibleLine = L.polyline([[0, -180],[0, 180]], {
'weight': 2,
'opacity': 1,
'dashArray': 3
}).addTo(map);
var transparentLine = L.polyline([[0, -180],[0, 180]], {
'weight': 10,
'opacity': 0
})
.on('mouseover', function (e) {
visibleLine.setStyle({
'color': 'red',
'weight': 4,
'dashArray': 0
});
})
.on('mouseout', function (e) {
visibleLine.setStyle({
color: 'blue',
'weight': 2,
'dashArray': 3
});
})
.addTo(map);
Here's a working example on Plunker: http://plnkr.co/edit/jChoQ0?p=preview
I'm trying to change to opacity of a mapLabel, but turns out there is no opacity attribute in the reference:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/docs/reference.html
Solution: in maplabel.js add:
function MapLabel(opt_options)
{
...
this.set('opacity',1);
...
}
and add another:
<MapLabel.prototype.changed = function(prop)
{
switch (prop) {
...
case 'opacity':
return this.drawCanvas_();
...
}
}
and 1 more:
MapLabel.prototype.drawCanvas_ = function()
{
...
ctx.fillStyle = this.get('fontColor');
ctx.globalAlpha = this.get('opacity');
ctx.font = this.get('fontSize') + 'px ' + this.get('fontFamily');
...
}
this won't solve if you want to search strokeOpacity though...
Oh, and I'm sorry if I didn't do an actual question or anything correctly, first time submitting in stackoverflow to post a solution.
Placing a MapLabel on top of a Polygon in Google Maps V3
How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?
I would like to implement a swipe gesture to replace the current Next/Prev-buttons in my web app. I figure I'll use either jQuery Mobile, QuoJS or Hammer.js to recognize the swipe gestures.
But how can I go about implementing the swipe animation (similar to this) to go with the gestures?
I'm not flipping between images as in the example, but html sections mapping onto Backbone Model Views.
This finally "solved" it. I'm using jQuery-UI with a slide effect, but it's not looking as good as I had hoped, I want it to look more like on iOS using Obj-C. But it will have to do.
var handleSwipeEvents = function() {
$(function() {
$('#myId').on('swipeleft', swipeHandler);
$('#myId').on('swiperight', swipeHandler);
function swipeHandler(event) {
function slideEffect(swipeLeft, duration) {
var slideOutOptions = {"direction" : swipeLeft ? "left": "right", "mode" : "hide"};
$('#myId').effect("slide", slideOutOptions, duration, function() { // slide out old data
var slideInOptions = {"direction" : swipeLeft ? "right" : "left", "mode" : "show"};
$('#myId').effect("slide", slideInOptions, duration); // slide in new data
// Alter contents of element
});
}
var swipeLeft = (event.type === "swipeleft");
slideEffect(swipeLeft, 300);
}
});
};
I have a feeling one can achieve better results using CSS3 and transition, but I haven't succeeded with that.
I'm using this script:
var canvas = new fabric.Canvas('game_canvas', { selection: false });
fabric.Image.fromURL('images/bg.jpg', function(img) {
img.set('left', 1024/2).set('top', 600/2).set('zindex', 0);
canvas.add(img);
});
fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) {
img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1);
canvas.add(img);
});
fabric.Image.fromURL('images/player-board.png', function(img) {
img.set('left', 254/2).set('top', (122/2)).set('zindex', 2);
canvas.add(img);
});
fabric.Image.fromURL('images/player-board-top-red.png', function(img) {
img.set('left', 203/2).set('top', (109/2)).set('zindex', 3);
canvas.add(img).bringToFront(img);
});
3rd image draw is working properly and showing one on top of the other. But if I add 4th one it's hiding behind 3rd. If I specify zindex of the image it's still under 3rd only.
What is wrong with this? Am I doing something wrong here? Please help.
Thanks
Peter
There are couple of issues here.
1) You can't change zindex of images by setting their zindex property. Fabric images simply don't have such property and changing it doesn't change z index of images on canvas. This makes all those .set('zindex', 0), .set('zindex', 1), etc. pretty much a no-op.
2) bringToFront works as expected here, bringing last image all the way to the top of the drawing stack. But the problem is that "images/player-board-top-red.png" image which you're loading last is not guaranteed to be the last one added. Those 4 requests are asynchronous; they are coming in any order, and so callbacks are executed in any order as well. In my test, for example, the last image comes second, callback executes, image is brought to the front, but is then "overwritten" by following 2 callbacks.
How to make last image render on top? Well, we can simply check that all images are loaded before attempting to bring last one to the top:
var img4;
// ...
function checkAllLoaded() {
if (canvas.getObjects().length === 4) {
canvas.bringToFront(img4);
}
}
// ...
fabric.Image.fromURL('images/1.png', function(img) {
img.set('left', 0).set('top', 0);
canvas.add(img);
checkAllLoaded(img);
});
// load other images, making sure to include `checkAllLoaded` in callback
fabric.Image.fromURL('images/4.png', function(img) {
img4 = img.set('left', 0).set('top', 0);
canvas.add(img);
checkAllLoaded(img);
});
By the way, don't forget that you can pass an object to set method like so:
img.set({ left: ..., top: ... });
And since set is chainable and returns reference to an instance, you can even pass it to add like so:
canvas.add(img.set({ left: ..., top: ... }));
Hope this helps.
You can use canvas.insertAt(object,index); instead of canvas.add(object) to set object's zIndex as per your choice.
Also you can get any object by using:
canvas_object = canvas.item(index);
If you want to bring that object in front, use:
canvas_object.bringForward()
//or
canvas_object.bringToFront()
Is there a way of preventing a Google Maps (JS, v3) map being displayed from the get-go? I'm doing some pre-processing and would like to show my 'Loading' spinner until everything is good to go (more eloquently put, hide the map -- e.g. the container div – until all pre-processing is complete – at which point, show the map).
Hooking up the map's idle event doesn't help that much, since the map is already displayed when this event hits.
I know that the container div gets inline-styled by GMaps after loading, my first idea was to clear out the style attribute (whilst listening to the idle event), but it would be interesting to see if there is a way of creating the map and not displaying it until all pre-processing is done.
Maybe by using an argument to the new google.maps.Map constructor, or a MapOption ?
Any thoughts on this?
Thank you in advance!
Also remember to call:
google.maps.event.trigger(map, 'resize');
if you have changed the size of the <div>. A display:none <div> has no size.
Or you could just hide it like with css visablility or css opacity.
$("#GoogleMap").css({ opacity: 0, zoom: 0 });
initialize();
google.maps.event.addListener(map,"idle", function(){
$('#Loader').hide();
$("#GoogleMap").css({ opacity: 1, zoom: 1 });
});
This works for me. I'm using the JQuery library.
$(document).ready(function(){
$('#Checkbox').click(function(){
$('#googleMapDiv').toggle();
initialize(); // initialize the map
});
});
another way to show the hidden map when map is first time rendering the <div> is to set style: visibility.
When firstly hidden, use visibility = hidden; to show use visibility = visible
the reason is: visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.
this works fine for me, I use jquery tabs
setTimeout(function() {
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(default_lat, default_lng));
map.setZoom(default_map_zoom);
}, 2000);
om this link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
This will work
google.maps.event.addListener(map, "idle", function ()
{
google.maps.event.trigger(map, 'resize');
});
better way:
gmap.redraw = function() {
gmOnLoad = true;
if(gmOnLoad) {
google.maps.event.trigger(gmap, "resize");
gmap.setCenter(gmlatlng);
gmOnLoad = false;
}
}
and in show click event:
$("#goo").click(function() {
if ($("#map_canvas").css("display") == "none") {
$("#YMapsID").toggle();
$("#map_canvas").toggle();
if (gmap != undefined) {
gmap.redraw();
}
}
});
depending on what you are doing another posibility could be to have multiple bools you set to true when each process is done.
For example:
if you have a geocode service running which you want to wait for, you could have a var called
GeoState
and in the result part of the geocoder set GeoState to true,
then have a timed function check if all the services have returned true, when they have, make the map visible.