on mapbox gl JS , is it possible to configure the popup to make is appear on the opoosite side of the computed position
Im the screenshot, mapbox make the popup appear at the position (in green) but I want to force it to appear the opposite side , in RED
Thanks
That's what the anchor property controls:
A string indicating the part of the Popup that should be positioned closest to the coordinate set via Popup#setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . If unset the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom' .
Related
I am working on a project using Leaflet. I want to place a label for objects on the map. I don’t want the label to appear on the map. I want the label placed above the map, but at the screen or div Left location from a latLng point.
I can’t seem to get the correct position using the functions available. Is there some example I can look at to give me insight? I would think Leaflet could do this.
The key here is to leverage the latLngToContainerPoint() method of L.Map - it will give you the pixel coordinates relative to the map container of the L.LatLng passed.
So create a container for a tick...
<div id="topbar"><span id="toptick">↓</span></div>
<div id="leaflet"></div>
...and use CSS to ensure it's on top of the map container, and has the same width. Then, run a function to translate the map point you want into an offset relative to the top-left corner of the map container...
function repositionEdges(){
var offset = map.latLngToContainerPoint(geopoint);
}
...run that after map initialization, and after every movement of the map...
repositionEdges();
map.on('move zoom', repositionEdges);
...and finally, inside that function, shift the tick horizontally tweaking its style...
function repositionEdges(){
var offset = map.latLngToContainerPoint(geopoint);
document.getElementById('toptick').style.left = offset.x + 'px';
}
You can see a working example at https://next.plnkr.co/edit/60qrWND50mCOQ11T?preview .
This is just one approach. The specific implementation will be different if you're using more than one point, or if you want to use <canvas> for drawing the ticks.
See also the graticule, edge scale bar and edge markers plugins from the Leaflet plugins list. Those plugins contain implementations of similar concepts.
I need icons (PNG) and polygons on my map. So I create icons as markers and polygons as polygons. Unfortunately regardless of creation order polygons are displayed "below" markers. I need is vice-versa. Is there a way, how to do it?
EDIT:
Correct default panes order in Leaflet 0.x: (from top-most to bottom-most)
objectsPane
popupPane
markerPane <= all markers icon (other than L.CircleMarker)
shadowPane <= all markers icon shadow
overlayPane <= all vectors (including L.CircleMarker)
tilePane
So just using the marker's icon shadow is not enough. You have to manually change the z-index of those panes in CSS (or through JS).
See also Leaflet: Polyline above Marker.
Original answer:
The stack order of vectors (like your polygons) and Markers is fixed in Leaflet 0.x. They are inserted into "panes" which order is (from top-most to bottom-most):
popupPane
markerPane <= all markers icon (other than L.CircleMarker)
overlayPane <= all vectors (including L.CircleMarker)
shadowPane <= all markers icon shadow
tilePane
So you should be able to easily workaround this fixed order by using the Marker's Icon shadow. If you still want the user to be able to click on your marker, simply use a transparent image for the normal icon, with the same size as your shadow image.
The situation is different in Leaflet 1.0. You can create your own panes (map.createPane), set their order by specifying their zIndex (possibly through CSS), and specify where your vectors and markers go by using their pane (and shadowPane for markers) option(s).
I am working on plug-in for eclipse CDT editor, which is an overlay that can highlight certain parts of code. I have access to opened CEditor (and its IDocument), and from it also to StyledText. I also have a character offset of parts i want to highlight.
Currently i have PaintListener over editor and i am able to draw over(I make transparent image onto which i paint highlighting, then set it as text background, i.e. styledText.setBackgroundImage(newImage); ). From styledText i am also able to get information about text height and text vertical position (scrolling included) i.e. i am able to highlight line of code, but i want to highlight only part of that line.
gc.fillRectangle(OFFSETX1, styledText.getLinePixel(LINE), OFFSETX2, tyledText.getLineHeight());
How can i get X in pixels(OFFSETX1,OFFSETX2) from character offset ??(Is it possible to get it from StyledText ? ). I have been searching StyledText API for hours, but couldn't find it. Thank you.
Use StyledText.getLocationAtOffset
Returns the x, y location of the upper left corner of the character
bounding box at the specified offset in the text. The point is
relative to the upper left corner of the widget client area.
Point loc = styledText.getLocationAtOffset(character offset);
I Have a long nested list to which i apply overflow-y:Auto, each of the element has sortable widget attached to it.
Now the issue which we are facing is that the drag-gable element goes out of scroll-bar container which is not desirable, i do understand that the position is set to absolute and z-Index to 1000 and i also understand while dragging the element it takes into consideration the height of the parent element and it let me drag up-to that calculated height only.
Changing the position to relative makes me drag the element only inside the scrollbar but then also the hieght it lets me drag upto is too much.
Desired Behavior:We should be able to drag the element only inside the scrollbar and that too not beyond the last element bottom offset position.
The piece of code is as follows:
$(".sortableList").sortable({
axis: 'y',
containment: 'parent',
tolerance: 'pointer',
distance: 5,
start: function (event, ui) {
$(ui.item).find('#contain').hide(10, 'swing');
$(ui.item).addClass('setHeight');
ui.placeholder.height(ui.item.height());
$(".sortableList").sortable('refresh');
},
stop: function (event, ui) {
$('#contain').show(10, 'swing');
$(ui.item).removeClass('setHeight');
}
});
Js fiddle link for the issue is : http://jsfiddle.net/hK7YT/2/
I was able to get this to mostly work by playing with the containment option: http://jsfiddle.net/tj_vantoll/hK7YT/3/. The containment works unless you scroll the lists to sort—and that is documented issue with jQuery UI itself (http://bugs.jqueryui.com/ticket/9460). I would advise giving the lists as much height as you can in your UI to avoid the need to scroll.
I am using gwt with gwt-dnd and I want to do the following:
1. Select rectangle area by dragging the mouse
2. Select all the elements that are in this area
3. drag all selected elements.
Is there any idea?
On MouseDownEvent record the coordinates of the pointer (event.getClientX() and eventGetClientY()).
On MouseUpEvent do the same. If coordinates are different, you have a selected rectangular.
Get the widget which contains all the widgets or elements that are selectable. Loop through its children.
Compare coordinates of each widget with your rectangular (use getAbsoluteTop(), getAbdoluteLeft(), getOffsetHeight(), and getOffsetWidth()). Select widgets that are totally or partially inside the selected area.
I would add to Andrei's answer that if you to provide feedback by displaying the rectangle during selection that what we do is display the rectangle as an instance of com.google.gwt.user.client.ui.HTML with a style that displays the borders. This is updated using onMouseMove using setPixelSize and setWidgetPosition.
The library gwtquery-plugins offers a MultiSelect feature, so I will give it a try.
gwtquery-plugins