In my Cordova project, I have a slider with multiple zoomable images (by iScroll) and I would like to use map to highlight some area always. But I have tried many libraries like imagemapster.js, maphilight.js but these libraries prevent images' zooming feature. Is there any library that I can use to highlight area only.
Any help or idea. Thanks in advance!
I got figured it out. For someone like me, here is my solution.
I used imagemapster.js for highlighting map areas. But I applied imagemapster first and then I grab those whole element and then applied iScroll(version 4) for zooming. First, i was doing backward, that's why I can't zoom in or out anymore. Cheer!
Related
Im struggling to make possible zooming the map when hovering a marker.
https://codesandbox.io/s/my2p15knj8 - example with marker
However, it is possible but only if I use feature instead of a marker.
https://codesandbox.io/s/l42n3np7xm
Unfortunately - feature is almost unstylable, cant pass children to it nor cant style them independently.
Looking for some solution how to make able to zoom map even if hovering marker. As you can see, my markers are kinda big so it will be hard for user to avoid them while scrolling :)
Thank you!
I think that might be a bug in react-map-gl since the vanilla JS Marker example doesn't suffer the same issue.
I have a leaflet map embedded in my page, but I want to add a control to allow the div with the leaflet map to be resized by the user. I've tried plugins like jquery.ba-resize, twinhelix and one other, but I can't seem to get something working that will allow me to have a button near the div with the leaflet map in it and to resize it on the fly.
Does anyone have any ideas?
Looks like I found an easy answer, I just took the id of my map ('map', creative), and did
$('#map).resizable();
with a jquery-ui plugin on the page.
Good enough for what I wanted!
I am a beginner with jQuery and looking to build a short plugin for my requirement. I am looking to build a light and short timeline like plugin which has to look something like the following:
The green bar below has two small rectangles which can be moved left and right towards or away from each other to zoom in / zoom out the content of the timeline above (orange bar). I tried to find similar plugin which I could use as a reference to write to zoom in/zoom out using the slider.
I found some timeline plugins such as Timeglider etc. which have the zoom functionality implemented in a different way and not similar to the above figure (where I could use two rectangles to zoom in/zoom out and zoom timeline in orange bar).
I wanted to ask for suggestions about where I could find a similar plugin that I could use as a reference to see how zooming using slider is implemented. Or if there's no such already plugin, I would appreciate some help on how to go about the zooming functionaility for the plugin.
Do you know, that there is the slider plugin for jQuery UI (link). It will be just question of styling it, connecting to slide event and changing zoom level on the go.
I would expand my answer, but I lack some more information about your HTML layout, Would like to see some code of yours in jsfiddle.net.
I implemented the copy image from clipboard to web page with the help of following tutorial :
http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/
Demo : www.pasteshack.net
It working properly.
Now I want to implement drawing shapes like lines, rectangles and circles over that image using jquery. I want it through mouse so that I can drag and drop it anywhere over image. The rectangles and circle must have to be transparent so that I can place it over image for identifying bug or fault in image.
Can it possible using jquery or javascript. Is there any plugin or tutorial available for it.
Thanks in advance.
Check the Following tutorial:
https://github.com/websanova/wPaint
It will definatly help you.
This is a very specific and somewhat complex issue, so I have set up a minimal test case that you should probably see before reading the rest of this.
I have page that displays images with highlighted areas on hover via Raphaël. I have also been working on adding Tipsy tooltips to these hover, so you can see what each part of the image is called.
Raphaël draws the highlighted areas with SVG, and since SVG elements are also DOM-nodes, attaching Tipsy to them is easily accomplished like this:
// Get the path node as a jQuery object.
pathNode = $(path.node);
// Set the title so it's available to tipsy.
pathNode.attr('title', element.title);
// Add a Tipsy tooltip to each node, if Tipsy is loaded.
if ($.fn.tipsy) {
pathNode.tipsy({
fade: true
});
}
The problem only fly in the ointment, and the reason for this question is that Tipsy draws the tooltip at the top of the screen (at coordinates 0,0) instead of next to the SVG node, and I can't figure out how to fix it. When debugging the Tipsy JavaScript it seems to have the coordinates at some point, but still fails to draw in the right spot.
Can anyone figure it out? (See the minimal test case for details).
Maybe try using gRaphaël for those tips.
See this example I just wrote: http://jsfiddle.net/3tHmp/
Your demo is also showing tooltips at 0,0 on the iPhone.
As the pieces go red you can identify min x and min y by using getBBox()
Place tip accordingly?