Followed the example at https://docs.mapbox.com/help/tutorials/building-a-store-locator/
Worked well. However, the example popup stays in place on mouse exit until your mouseover another marker. Trying to get the popup to disappear on mouseleave.
The popup code from the example is:
/* Create a Mapbox GL JS `Popup`.
**/
function createPopUp(currentFeature) {
var popUps = document.getElementsByClassName('mapboxgl-popup');
if (popUps[0]) popUps[0].remove(0);
var popup = new mapboxgl.Popup({closeOnClick: false})
.setLngLat(currentFeature.geometry.coordinates)
.setHTML('<h3>' + currentFeature.properties.address + '</h4>' +
'<h4>' + currentFeature.properties.sites + '</h4>')
.addTo(map);
}
I think the answer lies in this other post but I dont know how to "move the mouseover declaration" as suggested in the context of my code.
Thanks
Related
I'm trying to create a customized button to appear on a pop up which generates a dynamic link (a URL). I don't seem to be able to do this via the .setHTML because of the timing, can't bind a button to a function at runtime. So I thought I'd try the newish .setDOMContent
There's zero information online as to how this feature works. I'm wondering if anyone has an example of this where a button is added to the popup that can run a function and send data.
Here's my very poor attempt at setting this up.
This function creates the popup
function GameObjectPopup(myObject) {
var features = map.queryRenderedFeatures(myObject.point, {
layers: ['seed']
});
if (!features.length) {
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found.
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML(ClickedGameObject(feature))
.setDOMContent(ClickedGameObject2(feature))
.addTo(map);
};
This function adds the html via the .setHTML
function ClickedGameObject(feature){
console.log("clicked on button");
var html = '';
html += "<div id='mapboxgl-popup'>";
html += "<h2>" + feature.properties.title + "</h2>";
html += "<p>" + feature.properties.description + "</p>";
html += "<button class='content' id='btn-collectobj' value='Collect'>";
html += "</div>";
return html;
}
This function wants to add the DOM content via the .setDOMContent
function ClickedGameObject2(feature){
document.getElementById('btn-collectobj').addEventListener('click', function()
{
console.log("clicked a button");
AddGameObjectToInventory(feature.geometry.coordinates);
});
}
I'm trying to pipe the variable from features.geometry.coordinates into the function AddGameObjectToInventory()
the error I'm getting when clicking on an object (so as popup is being generated)
Uncaught TypeError: Cannot read property 'addEventListener' of null
Popup#setHTML takes a string that represents some HTML content:
var str = "<h1>Hello, World!</h1>"
popup.setHTML(str);
while Popup#setDOMContent takes actual HTML nodes. i.e:
var h1 = document.createElement('h1');
h1.innerHTML="Hello, World";
popup.setDOMContent(h1);
both of those code snippets would result in identical Popup HTML contents. You wouldn't want to use both methods on a single popup because they are two different ways to do the same thing.
The problem in the code you shared is that you're trying to use the setDOMContent to add an event listener to your button, but you don't need to access the Popup object to add the event listener once the popup DOM content has been added to the map. Here is a working version of what I think you're trying to do: https://jsfiddle.net/h4j554sk/
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();
});
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')
})
In the Borland VCL library, almost all controls had a hint property. During runtime, when you position mouse over the respective control, a small box with the hint text pops up and disappears again when you move the mouse, like the help messages in Windows Explorer and other programs, when mouse cursor is being held over a button.
Is there a similar concept in JavaFX (actually, I am using ScalaFX)?
Of course, I can create a new stage without decorations, add some mouse listeners etc., but is it not already available somewhere?
You can use a Tooltip control.
Usage Sample
If you want the tooltip on a Control, for example a button, set the tooltip:
button.setTooltip(
new Tooltip("Button of doom")
);
Otherwise, for other node types like shapes, install the tooltip:
Circle circle = new Circle(15, 15, 42);
Tooltip.install(
circle,
new Tooltip("Circle of light")
);
Tutorial
Oracle have a tutorial dedicated just to Tooltips.
As you can see above, you can set a "graphic" on a tooltip, which can be an image (or any other node), it's pretty flexible.
Tooltip Styling
Tooltip background (with JavaFX CSS)
Other Options
If Tooltip isn't what you are looking for, there are other ways to show popups:
JavaFX 2 custom popup pane
This code creates a GRAPHIC based Tooltip. Take a look at the commented htmlStr..... you can play with it as well as thisToolTip.setStyle..... and see what happens. You can change the styles in htmlStr and the string for setStyle. However I was not able to make the size of the tool tip and the pane match. So there is a border, but I made the color of both background colors to cornsilk. It gives an illusion that there is no border. But it is not true. See the code, if you find it useful, use it.
private Tooltip createToolTip(String htmlStr) {
Tooltip thisToolTip = new Tooltip();
// String htmlStr = "<body style=\"background-color:cornsilk; "
// + "border-style: none;\"> <u><b><font color=\"red\">Click Mouse's right button to see options</font></b></u><br><br>(3) Subha Jawahar of Chennai<br> now # Chennai<br>Female <-> Married <-> Alive<br>Period : 1800 to 2099<br>D/o Dr. Subbiah [2] - <br> <b>Spouse :</b> Jawahar Rajamanickam [7] <br><br><b>Children :</b><br><br>Rudhra Jawahar [9]<br>Mithran Jawahar [10]<br><br></body>\n";
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.loadContent(htmlStr);
thisToolTip.setStyle("\n"
+ " -fx-border-color: black;\n"
+ " -fx-border-width: 1px;\n"
+ " -fx-font: normal bold 12pt \"Times New Roman\" ;\n"
+ " -fx-background-color: cornsilk;\n"
+ " -fx-text-fill: black;\n"
+ " -fx-background-radius: 4;\n"
+ " -fx-border-radius: 4;\n"
+ " -fx-opacity: 1.0;");
thisToolTip.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
thisToolTip.setGraphic(browser);
thisToolTip.setAutoHide(false);
thisToolTip.setMaxWidth(300);
thisToolTip.setGraphicTextGap(0.0);
return thisToolTip;
}
I am trying to create a tooltip / popover over a button that has pull-right class set(pull-right basically sets the flow to right). The tooltip/popover crashes when trying to do a placement left. Any suggestions/ help?
/* The widget updateStatusDate is a button that floats right*/
Tooltip tooltip = new Tooltip("Date : " + timeOfOperation + " Comment : " + comment);
setUpdateStatusDate("Last Updated by : " + userName);
tooltip.setWidget(updateStatusDate); tooltip.setPlacement(Placement.LEFT);
tooltip.reconfigure();
Given your code, I have put its simplified version into my project and it works without problems. You can copy it to your project and check if it works:
#Override
public void onModuleLoad() {
// essentials from questioned code
Tooltip tooltip = new Tooltip("text");
Button updateStatusDate = new Button("test button");
tooltip.setWidget(updateStatusDate);
tooltip.setPlacement(Placement.LEFT);
tooltip.reconfigure();
// change style for the rootPanel, so the button flows to the center
// it is just for fast and short code example, do not do this in your regular project
com.google.gwt.dom.client.Style.TextAlign center = TextAlign.CENTER;
RootPanel.get().getElement().getStyle().setTextAlign(center);
//add button
RootPanel.get().add(updateStatusDate);
}
My Bootstrap version is: 2.3.2.0-SNAPSHOT, and my GWT version is 2.5.1.