Leaflet.js popup and zoom - leaflet

Is there a way to make a leaflet.js popup show up at specific zoom levels please, for example when map.getZoom() > 6 only. Hiding the popup or even setting its opacity to zero could also be viable options.
Thanks

Use the method/event handler map.on('zoomend') (https://leafletjs.com/reference-1.4.0.html#map-zoomend) to detect whenever the map finishes zooming. Then check the zoom value do see if you want to show the popup or not.
map.on('zoomend', function(){
if(map.getZoom() > 6){
showPopup();//your function here
}
});

Related

How to prevent openning a popup when you choose a layer to show in leaflet?

I'm a working on a project with leaflet where a it shows three layer
you can enable o disable whenever you want to display all the markers from that layer.
Every marker has a popup that it opens when you click on the marker
The problema i have is that when you hit over on any layer and active it, the marker displays its popup.
Is there any way to not open it when you activate a layer? o at least to keep it close and just open when you click on it?
Thanks colleagues!
I revised the solution to instead target layer activation.
This will programmatically unbind popup from each marker in the layer, hence preventing popups from opening when layer is activated.
var layerGroup = L.layerGroup().addTo(map);
layerGroup.on("layeradd", function (event) {
event.layer.eachLayer(function (marker) {
marker.unbindPopup();
});
});

Prevent display Mapbox GL JS popup on double click event

I found an unexpected behavior related with the Mapbox GL JS popup feature identifications.
I'm using the following event:
map.on('click', this._showPopup(e));
but when I make a double click and the zoom in is made, the popup is shown and close several times.
Is there any way to prevent this behavior?
A quick fix you can do is to disable doubleClickZoom mapbox options.
https://docs.mapbox.com/mapbox-gl-js/api/#map#doubleclickzoom

jQuery fancyBox how to prevent dragging the popup vertically

I am using fancyBox to display an HTML element as a popup (inline type).
That works fine, but the user is able to move the popup vertically with the mouse or with touch.
This behaviour seems to be standard (check the HTML example on https://fancyapps.com/fancybox/3/).
Question: is there a way to prevent this vertical movement?
Setting the modal option to true achieves this, but then the close button is removed as well, which is not what I want.
Thanks, Willem
Use touch/vertical option for that:
touch: {
vertical: true, // Allow to drag content vertically
momentum: true // Continue movement after releasing mouse/touch when panning
},

How to have a popup scrolling in the same way that others elements?

I can not solve my problem. As example, my website : www.mananaseguro.com.
In the home page, I have some popup appearing just under movies's poster (when the mouse is over the poster). But when I scroll UP (for example), the popup will not appear just under the poster. Their is a space between them. I tried to add the popup to the home's page panel but it did not succeed.
So is it possible to simulate the good popup behavior? (the popup must stay under the poster).
Or more precisely, is it possible to attach a DecoratedPopupPanel to another panel inside the page in order to have the popup scrolling in the same way that others elements?
Try using the PopupPanel#showRelativeTo() method.
You can achive good popup behavior by using below property.
popup.setPopupPosition(left, top)
Pass movie image x and y index position in top and left. and make consistent look and fill.

Titanium - Hide keyboard

I am a beginner in Titanium Studio. I can able to hide the keyboard when a button is selected. It works,
okBtn.addEventListener("click", function(e) { textField.blur(); });
But, how can I hide the keyboard when I tap/click on the mapView? I tried this code, Doesn't work,
mapview.addEventListener("click", function(e) { textField.blur(); });
mapview.addEventListener("singletap", function(e) { textField.blur(); });
So, how can I make it work? Thanks in advance.
The MapView only supports click events on annotations. That is why the click event is not firing in your use case.
(Note: The following JIRA ticket will clear up the documentation so that this is apparent: http://jira.appcelerator.org/browse/TIMOB-4777 )
To be able to hide the keyboard when the user wants to interact with the map, you need to get a bit creative. Overlay a transparent view on the map view when the text field is focused, and hide it whenever the text field is blurred or the overlay is touched.
Does that make sense? It's a bit of a hack, to be sure, and I imagine it might be a bit disconcerting for your users. If you can explain the desired UX a bit more, I can probably provide a more desirable solution.