I'm trying to work out from the Leaflet.js docs how it would be possible to open more than one popup upon showing the page. For instance, if one had three markers (each representing a building), each one would have their popup opened immediately.
http://leaflet.cloudmade.com/reference.html#popup
cryptically says:
"Use Map#openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map#addLayer to open as many as you want."
but
http://leaflet.cloudmade.com/reference.html#map-addlayer
gives no hints about how this might be achievable.
Can anyone clarify if this is possible, and give any hints on how to do it?
You must add the popups as Layer.
Try with this example code:
var popupLocation1 = new L.LatLng(51.5, -0.09);
var popupLocation2 = new L.LatLng(51.51, -0.08);
var popupContent1 = '<p>Hello world!<br />This is a nice popup.</p>',
popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);
var popupContent2 = '<p>Hello world!<br />This is a nice popup.</p>',
popup2 = new L.Popup();
popup2.setLatLng(popupLocation2);
popup2.setContent(popupContent2);
map.addLayer(popup1).addLayer(popup2);
L.Map = L.Map.extend({
openPopup: function(popup) {
// this.closePopup();
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
example: http://jsfiddle.net/paulovieira/yVLJf/
found it here: https://groups.google.com/forum/#!msg/leaflet-js/qXVBcD3juL4/4pZXHTv1baIJ
marker.addTo(myMap).bindPopup('Hello popup', {autoClose:false}).openPopup();
use autoClose option
In the latest version, there is an autoClose option.
To have both marker and popup open at same time, without adding layers explicitly :
var popup1 = new L.Popup({'autoClose':false});
popup1.setLatLng([53.55375, 9.96871]);
popup1.setContent('First popup');
var popup2 = new L.Popup({'autoClose':false});
popup2.setLatLng([53.552046, 9.9132]);
popup2.setContent('Second popup');
L.marker([53.55375, 9.96871]).addTo(myMap)
.bindPopup(popup1).openPopup();
L.marker([53.552046, 9.9132]).addTo(myMap)
.bindPopup(popup2).openPopup();
This solution work for me:
L.marker([30.4160534, -87.2226216], {icon: icon_url}).bindPopup('Hello World',{autoClose:false}).addTo(map).openPopup();
here is the preview image: https://prnt.sc/NuX9Qs291IQq
triky solution is remove popup link from map object on open:
map.on('popupopen', function (e) {
delete map._popup;
});
Related
I want show the info window for google maps. But the data or view is a ui5 view as below,
var oView = sap.ui.view({
type : sap.ui.core.mvc.ViewType.XML,
viewName :"com.example.view.ListView"
});
And this view is perfect.
Mainly I have the google info window and I need to place this inside that info window as follows,
var infowindow = new google.maps.InfoWindow({
content: view, //Here I am getting below error
position: coordinate
});
infowindow.open(map);
So i am getting
InvalidValueError: setContent: not a string; and Element-
In this I know I can place a domNode or string inside the google info window's content. So I need to know how can we convert this ui5 view to domNode or any other solution.
You can get the DOM Node of a SAPUI5 View or Control by using the method getDomRef
var infowindow = new google.maps.InfoWindow({
content: view.getDomRef(),
position : coordinate
});
infowindow.open(map);
Please be aware that a SAPUI5 View/Control only has a DOM Reference after it was first rendered. Furthermore after a potential rerendering you might have to re-apply the above code.
BR Chris
from the last version update (from openui5 1.36.12 to openui5 1.38.4) the following code is not working anymore:
var myTable = new sap.ui.table.Table();
myTable ._oVSb.attachScroll(function() {
colorTheTableRows();
})
I'm using the "attachScroll" event in order to color the table rows with a specific logic.
Since last openui5 version update I get this error in console:
Uncaught TypeError: Cannot read property 'attachScroll' of undefined
I've tried to debug the problem and it seems that the object _oVSb has be removed from sap.ui.table.Table.
My final goal is to paint the rows with different colors based on the content ... is there any other way to reach this feature?
Thanks
Even i want this event some how came to this thread. i tried #Dopedev solution it was not working then i changed bit in that as below
$("#<tablid>-vsb").scroll(function() {
console.log("Table is scrolled")
});
instead of getting the tbody get the table-id-vsb and attach the scroll function
You can still get scroll event for your table using .scroll() of jQuery.
onAfterRendering: function(){
//Register handler for scroll event
$("tbody").scroll(function(){
// your stuff
});
}
Demo
I know that one of the earlier posts was already marked as the 'right' answer, but it did not work for me, so I thought I would post my working solution, as it might be helpful to others. The following code will work to effectively 'attach' to the vertical scroll event of a table in 1.38:
onAfterRendering: function() {
if (this.firstTime) { //You only want to override this once
var oTable = this.getView().byId("<YOUR_ID_HERE>");
//Get a reference to whatever your custom handler is
var oHandler = this.handleScroll;
//Store a reference to the default handler method
var oVScroll = oTable.onvscroll;
oTable.origVScrollHandler = oVScroll;
oTable.onvscroll = function(i) {
//Call the 'default' UI5 handler
oTable.origVScrollHandler(i);
//Call your handler function, or whatever else you want to do
oHandler();
};
this.firstTime = false;
}
},
var myTable = new sap.ui.table.Table("myTable");
After rendering:
sap.ui.getCore().byId("myTable-vsb").attachScroll(function() {
colorTheTableRows();
})
I am new in Openlayers 3. I have vector layer importing from geojson file. I would like to show information about my feature after click on vector layer.
Any idea how I can do it?
I used the library from here for this purpose. The sample code is
var popup = new ol.Overlay.Popup();
map.addOverlay(popup);
//handling Onclick popup
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var coord = event.feature.getGeometry().getCoordinates();
popup.show(coord, '<div><h2>Tilte</h2><p>' +feature.get('<property_in_single_quotes>')+ '</p></div>');
}
});
Hope this helps
Take a look at these examples:
1) http://openlayers.org/en/v3.14.1/examples/vector-layer.html?q=overlay
2) http://openlayers.org/en/v3.14.1/examples/popup.html?q=overlay
Instead of putting the vector information next to the map, you put it in the popup <div> you created.
If you have used the fullscreen mode in an instance of Galleria you've seen that the only way to close it is by pressing the escape key.
As I like that functionality since it's really practical, for end users it's not that intuitive so I would like to add a close button in the upper right.
I checked the code to find out where to add that button but I couldn't understand it to make it work.
Has someone already made that? I hope I'm not the only one who had that idea.
Thank you for your help!
You add it using the Galleria API:
Galleria.ready(function() {
var gallery = this;
this.addElement('exit').appendChild('container','exit');
var btn = this.$('exit').hide().text('close').click(function(e) {
gallery.exitFullscreen();
});
this.bind('fullscreen_enter', function() {
btn.show();
});
this.bind('fullscreen_exit', function() {
btn.hide();
});
});
This will place the close text in the upper left corner, you should of course style it with som CSS, f.ex:
.galleria-exit{position:absolute;top:12px;right:12px;z-index:10;cursor:pointer}
I'm having a problem similar to FLEX: dialog not display immediately . Code follows:
private function saveBitmap(event:ContextMenuEvent):void
{
loadingScreen.visible = true;
loadingScreen.appLoadingText.text = "Preparing bitmap...";
addChild(loadingScreen);
validateNow();
var bmpd:BitmapData = new BitmapData(canv.width, canv.height);
bmpd.draw(canv);
var fr:FileReference = new FileReference();
fr.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, removeLoadingScreen);
fr.addEventListener(Event.CANCEL, removeLoadingScreen);
var png:PNGEncoder = new PNGEncoder();
var iba:ByteArray = png.encode(bmpd);
fr.save(iba, "export.png");
}
Basically, bmpd.draw and/or png.encode are dog slow, so I'd like to have a nice "please hold while we prepare your png" dialog to appear. I can't use callLater() because of the FileReference.
And just for good measure, the loading screen appears at the same time the save dialog appears from the call to fr.save().
Any ideas?
Cheers!
You're adding the child in this function. Are you doing any other work to the loadingScreen, such as sizing it? Or positioning it? Most commonly this is done in updateDisplayList(). What container are you using?
Are you sure the Z-order of your two children is correct? You can swap children with the swapChildren method