I'm using Leaflet Draw to edit a map, but whenever I go into edit mode, I get a rather large tooltip attached to the mouse pointer (see screenshot), which obscures quite a bit of the map and prevents me from seeing my own marker tooltips when I hover over them.
I've searched the documentation to try to find what option switches it off, but cannot figure out which one to use.
Does anyone know which option switches off this tooltip?
I've just how to do this. To switch off the tooltip, just set the following two options to an empty string:
L.drawLocal.edit.handlers.edit.tooltip.subtext = '';
L.drawLocal.edit.handlers.edit.tooltip.text = '';
To see other things you can change that aren't documented very well, just look in the following source file:
node_modules/leaflet-draw/dist/leaflet.draw-src.js
Related
I have an issue with one thing.
I have a map of world and I want to add functionality when a user clicks on one of the list elements (you can see 3 lists with different places on the image, for example, Paris Air Show) it would show me on the map. As you can see on image example
Is it possible to do? It should work on different devices, but I have no idea how to create that.
Thanks a lot for your help.
Here is a good solution, which works for me.
So I've created a map with areas and on those areas, I put coordinates of places and this map is attached to the image. Then I calculate a place using map.getBoundingClientRect()
I'm taking a look at this Highcharts fiddler: http://jsfiddle.net/YWVHx/97/
I'd like to do a very similar chart but it's not working out how I want it to. My current fiddler is this: (see edit below!)
The main functional differece is in the first fiddler, he's using a range, whereas I'm using just actual values (and timestamps).
What's not working for me:
The labels are jacked up. If I try to mouse over a point on mine it's way off; it seems to be 'stuck' on the left. If you try to mouse over you should see the same issue.
I can't zoom in. On his chart you can't zoom in either, but on another chart I was messing around with, it seems like all I needed to do to add zooming was put in:
chart: {
zoomType: 'x'
},
But that doesn't seem to be working here.
The points are so big that the bottom part in green looks too 'blobby'. How can I just remove those point markers?
In summary, how can I have this map have just lines with no blobs, with zooming, and labels that follow your mouse?
EDIT: I have a new version, where the labels work and the blobbiness is removed. However the zoom still doesn't work. How can I enable the zoom?
http://jsfiddle.net/qprmjm67/
Turns out that there's a much easier way to do this, using zones.
stackoverflow makes me put code to put a link. So I'm typing fake code here.
http://jsfiddle.net/2f1c659L/
The example linked here shows that tooltips relies on the manipulation of the label attribute, which I am currently using as the legend. How do I go about implementing this?
The tooltip doesn't rely on the label. You can use the label in the tooltip, but you don't have to.
Just follow the examples and if you have a specific problem, come back here (and create a fiddle if possible).
A continuation of my previous question: How to change the layering of KML and Tile Overlays in Google Maps?
I am currently rewriting some of the code regarding the buttons which enable and disable tile overlays using arrays. In doing so, I'm trying to combine all of the button's individual functions into a single function, but since I have two methods of rendering the overlays, I was hoping to try and simply focus on only one method. The first uses "overlayMapTypes":
map.overlayMapTypes.insertAt(0, beloitMapType);
The second, using a script provided in my previous question:
this.getPanes().overlayShadow.appendChild(this.settings.div_);
The former method is my original approach; however, since I use polygons on the Satellite view I needed a way to place icon/name overlays above the colored polygons. To achieve this, I sought something akin to the latter method where certain overlays could be placed onto a pane higher than the polygons and thus appear above them.
However, in the time between my previous question and now, as well as through some of my own research, I've come to realize that the latter method, rather than placing the tiles into their places, estimates the location of the tile and places it as an image overlay. As a result, a part of my accessibility layer which colors in inaccessible paths had been misaligned by a pixel or two, or my building name overlay currently has names on the border of two tiles which have a sharp line through them as those two tiles overlap slightly. In addition, these two issues come and go each time the map is loaded with each tile being placed on the map with a variance of 1-2 pixels in any direction.
Thus, I would very much prefer to use the former method with overlayMapTypes, which is more reliable and accurate, on all of the overlays, but I also need a way to bring some of these overlays higher than the "overlayLayer" pane and above the polygons. Is this possible and, if so, how could it be done?
Addition: I have an additional need to try and find a method to achieve the reassignment of panes with the overlayMapType method: the script I'm using to achieve this doesn't appear to work in IE7/8. I'm going to investigate this angle myself, but I'd still prefer to drop the script entirely if possible.
Well, I've hit upon a possible solution and, for the sake of sharing it, allow me to explain:
Polygons do not necessarily need to be visible to still have click and hover events.
Since the polygons are used to color the buildings and poi in Satellite view, such a visual component could easily be done by an overlay.
Thus, a possible solution is to have all polygons invisible and simply use them for click and hover events. Likewise, a second overlay, or a modification of an existing one, would replace the polygon's original visual component. Since this visual component is now an overlay like everything else, it can be easily layered with any other overlay using the "MapType" method.
(This however doesn't answer the question; namely, can tile overlays and polygons be layered only with the MapType method? I would still like to know that, but in the event that there is no answer, this hopefully is a possible alternative.)
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?