I have leaflet map with clustergroup and its working fine. I want to open popup on clustergroup click. On end marker (element) onclick popup is worning fine.
I am able to capture clustergroup click event also but not able to open popup .
//To create cluster
this.markers = L.markerClusterGroup();
//On cluster click get all children
this.markers.on('clusterclick', function (a) {
this.getClusterData(a.layer.getAllChildMarkers());
//All children is available of cluster when clicked
},this);
But not able to open popup.
I found solution here.May be it will help someone else. I wasted whole day
cluster.on('clustermouseover', function(c) {
var popup = L.popup()
.setLatLng(c.layer.getLatLng())
.setContent(c.layer._childCount +' Locations(click to Zoom)')
.openOn(map);
}).on('clustermouseout',function(c){
map.closePopup();
}).on('clusterclick',function(c){
map.closePopup();
});
Related
I am trying to add a click listener to a button in a leaftlet popup in my ionic app.
Here I am creating the map & displaying markers, also the method I want called when the header tag is clicked is also below:
makeCapitalMarkers(map: L.map): void {
let eventHandlerAssigned = false;
this.http.get(this.capitals).subscribe((res: any) => {
for (const c of res.features) {
const lat = c.geometry.coordinates[0];
const lon = c.geometry.coordinates[1];
let marker = L.marker([lon, lat]).bindPopup(`
<h4 class="link">Click me!</h4>
`);
marker.addTo(map);
}
});
map.on('popupopen', function () {
console.log('Popup Open')
if (!eventHandlerAssigned && document.querySelector('.link')) {
console.log('Inside if')
const link = document.querySelector('.link')
link.addEventListener('click', this.buttonClicked())
eventHandlerAssigned = true
}
})
}
buttonClicked(event) {
console.log('EXECUTED');
}
When I click this header, Popup Open & Inside if are printed in the console, so I know I'm getting inside the If statement, but for some reason the buttonClicked() function isn't being executed.
Can someone please tell me why this is the current behaviour?
I just ran into this issue like 2 hours ago. I'm not familiar with ionic, but hopefully this will help.
Create a variable that keeps track of whether or not the content of your popup has an event handler attached to it already. Then you can add an event listener to the map to listen for a popup to open with map.on('popupopen', function(){}). When that happens, the DOM content in the popup is rendered and available to grab with a querySelector or getElementById. So you can target that, and add an event listener to it. You'll have to also create an event for map.on('popupclose', () => {}), and inside that, remove the event listener from the dom node that you had attached it to.
You'd need to do this for every unique popup you create whose content you want to add an event listener to. But perhaps you can build a function that will do that for you. Here's an example:
const someMarker = L.marker(map.getCenter()).bindPopup(`
<h4 class="norwayLink">To Norway!</h4>
`)
someMarker.addTo(map)
function flyToNorway(){
map.flyTo([
47.57652571374621,
-27.333984375
],3,{animate: true, duration: 5})
someMarker.closePopup()
}
let eventHandlerAssigned = false
map.on('popupopen', function(){
if (!eventHandlerAssigned && document.querySelector('.norwayLink')){
const link = document.querySelector('.norwayLink')
link.addEventListener('click', flyToNorway)
eventHandlerAssigned = true
}
})
map.on('popupclose', function(){
document.querySelector('.norwayLink').removeEventListener('click', flyToNorway)
eventHandlerAssigned = false
})
This is how I targeted the popup content and added a link to it in the demo for my plugin.
So yes you can't do (click) event binding by just adding static HTML. One way to achieve what you want can be by adding listeners after this new dom element is added, see pseudo-code below:
makeCapitalMarkers(map: L.map): void {
marker.bindPopup(this.popUpService.makeCapitalPopup(c));
marker.addTo(map);
addListener();
}
makeCapitalPopup(data: any): string {
return `` +
`<div>Name: John</div>` +
`<div>Address: 5 ....</div>` +
`<br/><button id="myButton" type="button" class="btn btn-primary" >Click me!</button>`
}
addListener() {
document.getElementById('myButton').addEventListener('click', onClickMethod
}
Ideally with Angular, we should not directly be working with DOM, so if this approach above works you can refactor adding event listener via Renderer.
Also I am not familiar with Leaflet library - but for the above approach to work you need to account for any async methods (if any), so that you were calling getElementById only after such DOM element was successfully added to the DOM.
I have a set of markers that have binded popups, but I can't figure out how to show all the popups when the marker group is toggled in the layers control.
For example, I have my markers like so:
var testMarker = L.marker([32.9076,33.35449]).bindPopup('Marker 1');
var testMarkerTwo = L.marker([33.58259,34.64539]).bindPopup('Marker 2');
Then, I put it in a freature group and append the openPopup method:
var markerGroup = L.featureGroup([testMarker,testMarkerTwo]).openPopup().addTo(map);
This doesn't work.
My final goal is to add that featureGroup to my layers control where I can toggle the group off/on. Before I get to that part, I need to first understand why the openPopup method is not working.
Edit: The answer below appears to only work with the plain Leaflet API, not the Mapbox API.
There are a couple problems here. The first is that by default, Leaflet closes the previously opened popup each time another is opened. The second is that, while your markers have popups bound to them, markerGroup does not, and even if it did, markerGroup.openPopup would only cause a single popup to open.
To get around the first problem, you can use the hack from this answer. If you place the following code at the beginning of your script (before you define your map) it will override the default behavior and allow you to open multiple popups at once:
L.Map = L.Map.extend({
openPopup: function(popup) {
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
Then, once you are able to open multiple popups, you can open all popups in markerGroup using the eachLayer method:
var markerGroup = L.featureGroup([testMarker,testMarkerTwo]).addTo(map);
markerGroup.eachLayer(function(layer) {
layer.openPopup();
});
Here is an example fiddle:
http://fiddle.jshell.net/nathansnider/02gsb1Lt/
How can I add a mouse over pop up on leaflet.js marker . the pop up data will be dynamic.
I have a service which returns a lat & lon positions which will mark on a map.
I would require a popup on mouse over a marker . the event should send the lat and long position for ex to : http://api.openweathermap.org/data/2.5/weather?lat=40&lon=-100
the data from service should be in popup content.
I have tried but cant build the pop up content dynamically each marker
Please do the needful.
below is the code i have used for markers statesdata is array which stores the lat and longitude values
for ( var i=0; i < totalLength1; i++ ) {
var LamMarker = new L.marker([statesData1[i].KK, statesData1[i].LL]).on('contextmenu',function(e) {
onClick(this, i);
}).on('click',function(e) {
onClick1(this, i)
});
marker_a1.push(LamMarker);
map.addLayer(marker_a1[i]);
on click we call click1 function on context of marker we call click function
How can i add a pop on mouse over passing lat and long from the above code?
Attaching a popup to a marker is fairly easy. It is done by calling the bindPopup method of your L.Marker instance. Per default a popup opens on the click event of the L.Marker instance and closes on the click event of your L.Map instance. Now if you want to do something when a popup opens you can listen to the popupopen event of your L.Map instance.
When you want fetch external data in the background on the popupopen event that is usually done via XHR/AJAX. You can write your own logic or use something like jQuery's XHR/AJAX methods like $.getJSON. Once you receive response data you can then update your popup's content.
In code with comments to explain further:
// A new marker
var marker = new L.Marker([40.7127, -74.0059]).addTo(map);
// Bind popup with content
marker.bindPopup('No data yet, please wait...');
// Listen for the popupopen event on the map
map.on('popupopen', function(event){
// Grab the latitude and longitude from the popup
var ll = event.popup.getLatLng();
// Create url to use for getting the data
var url = 'http://api.openweathermap.org/data/2.5/weather?lat='+ll.lat+'&lon='+ll.lng;
// Fetch the data with the created url
$.getJSON(url, function(response){
// Use response data to update the popup's content
event.popup.setContent('Temperature: ' + response.main.temp);
});
});
// Listen for the popupclose event on the map
map.on('popupclose', function(event){
// Restore previous content
event.popup.setContent('No data yet, please wait...');
});
Here's a working example on Plunker: http://plnkr.co/edit/oq7RO5?p=preview
After comments:
If you want to open the popup on hover instead of click you can add this:
marker.on('mouseover', function(event){
marker.openPopup();
});
If you want to close the popup when you stop hovering instead of map click add this:
marker.on('mouseout', function(event){
marker.closePopup();
});
Here's an updated example: http://plnkr.co/edit/wlPV4F?p=preview
I got fed up with fighting with leaflet's built in functionality. The first thing I did was use the alt option to assign a key to the marker:
var myLocation = myMap.addLayer(L.marker(lat,lng],{icon: icon,alt: myKey}))
The next thing was assign an id using this alt and a title via jQuery (why you can't do that by default irritates me):
$('img[alt='+myKey+']').attr('id','marker_'+myKey).attr('title',sRolloverContent)
Then, I used jQuery tooltip (html will only render this way):
$('#marker_'+myKey).tooltip({
content: sRolloverContent
})
Also, by using the jQuery tooltip instead of the click-only bindPopup, I am able to fire the tooltip from my list, where the row has a matching key id:
$('.search-result-list').live('mouseover',function(){
$('#marker_'+$(this).attr('id')).tooltip('open')
})
$('.search-result-list').live('mouseout',function(){
$('#marker_'+$(this).attr('id')).tooltip('close')
})
By adding the id, I can easily use jQuery to do whatever I want, like highlight a list of locations when the marker is hovered:
$('#marker_'+iFireRescue_id).on('mouseover',function(){
('tr#'+getIndex($(this).attr('id'))).removeClass('alt').removeClass('alt-not').addClass('highlight')
})
$('#marker_'+myKey).on('mouseout',function(){
$('tr#'+getIndex($(this).attr('id'))).removeClass('highlight')
$('#search-results-table tbody tr:odd').addClass('alt')
$('#search-results-table tbody tr:even').addClass('alt-not')
})
I'm looking for simple code that adds a popup in my Google Apps Script Ui that comes up when I hit a submit button. The popup box would display a message and have a button to close the popup.
I've looked all over the place - everything seems so complicated and does way more than I need it to do.
This is the current code I have for the submit button.
function doGet() {
var app = UiApp.createApplication();
app.setTitle("My Logbook");
var hPanel_01 = app.createHorizontalPanel();
var vPanel_01 = app.createVerticalPanel();
var vPanel_02 = app.createVerticalPanel();
var vPanel_03 = app.createVerticalPanel();
var submitButton = app.createButton("Submit");
//Create click handler
var clickHandler = app.createServerHandler("submitData");
submitButton.addClickHandler(clickHandler);
clickHandler.addCallbackElement(hPanel_01);
////Test PopUp Panel
var app = UiApp.getActiveApplication();
var app = UiApp.createApplication;
var dialog = app.createDialogBox();
var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);
submitButton.addClickHandler(closeHandler);
var button= app.createButton('Close').addClickHandler(closeHandler);
dialog.add(button);
app.add(dialog);
//////
return app;
}
Since UiApp is depreciated, HTMLService should be used to create custom user interfaces.
To prompt simple popup to display a message, use alert method of Ui class
var ui = DocumentApp.getUi();
ui.alert('Hello world');
will prompt simple popup with hello world and an ok button.
To display customized html template in Dialog, use HTMLService to create template and then pass it to showModalDialog method of Ui Class
var html = HtmlService.createHtmlOutput("<div>Hello world</div>").setSandboxMode(HtmlService.SandboxMode.IFRAME);
DocumentApp.getUi().showModalDialog(html, "My Dialog");
HtmlService.createHtmlOutputFromFile allows you to display html that is in a separate file. see the documentation
Have you tried using zIndex? It places the panel above all of your other panels...
var popupPanel = app.createVerticalPanel().setId('popupPanel')
.setVisible(false)
.setStyleAttribute('left', x)
.setStyleAttribute('top', y)
.setStyleAttribute('zIndex', '1')
.setStyleAttribute('position', 'fixed');
x = panel position from the left portion of your app
y = panel position from the top portion of your app
zIndex = the 'layer' your panel will appear on. You can stack panels using '1', '2', '3' etc.
position = your panel will be in a fixed position denoted by (x,y)
Visibility is set to false until you click submit, then have a client handler for your submit button make the popupPanel visible. When you click the button on your popupPanel, have the client handler set visibility to false once again and it will disappear.
One more thing, I noticed you get the active app and then create a new app. You do not need to create a new app...just new panels inside your app.
Hope this helps!
You can use a dialogbox to popup.
Add a button to the dialog-box. Add a client handler that sets the dialog box invisible,once you click the button.
var app = UiApp.createApplication;
var dialog = app.createDialogBox();
var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);
var button= app.createButton('Close').addClickHandler(closeHandler);
dialog.add(button);
app.add(dialog);
This should help.
EDIT
Added "()" after .createClientHandler. That should remove issues related to TypeError: Cannot find function createDialogBox in object function createApplication() {/* */}
Popup - use something like this:
var table = app.createFlexTable();
table.setStyleAttribute("position", "absolute");
table.setStyleAttribute("background", "white");
add items to the table and hide and show as needed.
I am a beginner in Titanium Studio. I am opening a new window, when I select the annotation pin on the mapview.
annotation.addEventListener('click', function(e) {
Ti.API.info("Opening detail window");
navGroup.open(detailWindow);
});
But, it doesn't work every time. It works only for the first time, when the annotation is performed.
How could I make it work, whenever I select the annotation pin, I should move to a new window? Thanks in advance.
You should use annotation right button to open a new window.
To catch the annotation right button click event you have to do this:
var mapView.addEventListener('click', function(e){
// if user click on rightButton of annotaion
if ( evt.clicksource == 'rightButton' ) {
Ti.API.info("Opening detail window");
navGroup.open(detailWindow);
}
});