I have an image map with hover effects using ImageMapster.js... Next to the image is a list of text-links which refer to certain areas of the image map areas. Is it possible to highlight the image map area when I hover over the text-link?
e.g.:
<img src="map.png" usemap="#ch" style="width:100%;">
<map id="usa_image_map" name="usa>
<area href="http://ab.com" state="ab" shape="poly" coords="259,256,275,257,..."><area href="http://xy.com" state="xy" shape="poly" coords="332,421,329,416,...">
</map>
<div id="links">
abxy
Try this:
$("a", "#links").hover(
function () {
var state = $( this ).text();
$( 'area[state="' + state +'"]').mapster('select');
});
This is an event which gets active when you hover the link list with the id="links". The var state holds the text of the hovered link, so when you hover ab, state is ab. With the selector $('area[state="' + state +'"]') you can find the area element of the map with the state attribute which equals the text of the hovered link. mapster('select') finally highlights the map area.
Related
I'm trying to animate the tag. I want to make it fly from top to it's current position and and out to fly from it's current position to top.
<script>
import { fly } from 'svelte/transition'
let state = true
function toggle(){
state = !state
}
</script>
<div style="margin-top:4rem;padding:2rem;background:lightgray">
{#if state}
<a transition:fly="{{ y: 200, duration: 250 }}"
on:click={toggle} href="#/link1">
link1
</a>
{:else}
<a transition:fly="{{ y: 200, duration: 250 }}"
on:click={toggle} href="#/link2">
link2
</a>
{/if}
</div>
I didn't understand quite well how transitions and animations work. In this case even if y it's 200 it goes on x axis.
Here is a link to the svelte repl
Transitions in Svelte are done using CSS, in the case of fly this is through the use of the transform property. This is a property that can only be applied to transformable elements, you could read the specification or take as rule of thumb that only block level elements can be transformed. An anchor tag <a> is by default not a block but an inline element.
You can solve your problem by adding styling making the <a> tags block level either by setting display: block or display: inline-block.
I am importing KML files to overlay on a map.
OL3 does a great job with the geometry, but seems to ignore the text labels that should show up with them.
This snippet will put up a pin, but will not show the text in the <name> element as it did in Google Earth and Maps
<Placemark>
<name>Text I want to show</name>
<Point>
<coordinates>-81.11918192120308,32.27372446636573,0</coordinates>
</Point>
</Placemark>
There is nothing in the specification of KML that states that the <name> tag of a <Placemark> should be rendered along with a pushpin or icon -- Google just chose to implement it that way.
If you look at the OpenLayers Swiss hotels KML example, you will probably agree that automatically showing the text labels would make the screen too busy. However, it is fairly straightforward to add labels on mouseover, using the map.forEachFeatureAtPixel function, as is done in this kml earthquake exmaple, which pushes the name attribute of the KML tag into an info div, as you can see in this code snippet:
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
return feature;
});
if (feature) {
info.tooltip('hide')
.attr('data-original-title', feature.get('name'))
.tooltip('fixTitle')
.tooltip('show');
} else {
info.tooltip('hide');
}
So, the <name> tag of <Placemark> is parsed, but the display is left up to you in OpenLayers, by design, not by defect.
Is there a way to get Mapbox.js tooltips to show when you're hovering over a marker without following the mouse around? I just want it to stay put when I hover.
I am using the following code on my map:
var map = L.map("impact-map")
.setView([20, 80], 3)
.addLayer(L.mapbox.tileLayer("hotchkissmade.in_impact", {
detectRetina: true
}));
var myGridLayer = L.mapbox.gridLayer('hotchkissmade.in_impact').addTo( map );
var myGridControl = L.mapbox.gridControl(myGridLayer, {
follow: true
}).addTo( map );
I am using the follow:true from the example here.
Disclaimer: I know there may be more flexibility outside of gridControl but I like having my tooltips from Tilemill as I don't want to load the data in the browser twice, since I'm basing the tooltip data off the layer making the markers on my map in Tilemill
This isn't possible with a gridControl - you can have tooltips either follow the mouse or stay in a specific location, but unlike L.mapbox.featureLayer, there is no actual marker, polygon, or feature you're hovering over - the geometry is not pushed to the client - so, there would be no 'anchor' for the tooltip to stay on.
I am trying to put a tooltip on an image map area, it looks like its not supported, is there a way of getting it there, too ?
In this plunker, the second kitten has a working image map, but no tooltip on it ...
To get a tooltip on your second image in your plunker demo you need to add a # to your usemap (usemap="#test")
and then add an href="#" to your area element.-7N
When putting multiple charts tooltips from upper charts are hidden behind others.
I found some tips on how to it but nothing helped.
Is there anyway to keep tooltips on top of charts?
The example is here: http://jsfiddle.net/Zw3uM/
Thanks a lot!
This is pure html : Any div element loaded after ( meaning appearing after on the html page) will always be in front.
In order to get the first chart tooltip be in front of the second : load the second in first and set its y position on the page using an absolute or relative position in css :
I've change their order, putting the container2 in first in html:
<div id="container2" style="height: 200px"></div>
<div id="container1" style="height: 200px"></div>
Then set the position of container2 to be under the first one (thanks to the top style attribute) :
div[id="container2"] {
position:absolute;
top:200px;
}
Here is the result : http://jsfiddle.net/Zw3uM/3/
You can use tooltip pisitioner:
http://api.highcharts.com/highcharts#tooltip.positioner
The problem is due to each highchart container having its own stacking context. This is because the highcharts-container has both position: relative and z-index: 0 (css dynamically applied by the highcharts library).
So the z-index of the tooltip has meaning only in its parent highchart container.
To fix this we need to override the (z-index: 0) rule for the highcharts-container using the following:
.highcharts-container
{
z-index: auto !important;
...
}
This way all hightcharts-containers & their children would share the same stacking context and their z-indices would apply the desired effect.
You can check the fix here: http://jsfiddle.net/w5bLo1cw/4/