I created markers from an array and added click event. I want to open tooltip when clicked a marker.
let marker: any = L.marker(new L.LatLng(lat, lng));
marker.on('click', (e) => {
let target = e.target;
if (!target._popup) {
let content = 'content';
target.bindPopup(content, {
closeOnClick: false,
closeButton: false,
autoClose: true,
closePopupOnClick: true
}).openPopup();
}
});
When clicked the marker infowindow is opening. Here the problem is close button href attribute is redirecting page to #close. How can I solve this problem?
Related
Map` like this:
L.Map = L.Map.extend({
openPopup: function(popup) {
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
But I am using leaflet. Is there anyway to extent like so that i can prevent closing my marker popup?
L.mapbox.accessToken = constant.accessToken;
var map = L.mapbox.map('map', 'mapbox.streets', {zoomControl: true});
Update Dec 2017
Leaflet popup options have been extended to include { autoClose: false } which has the required effect :
var my_marker = L.marker([my_lat, my_lng], {icon: my_icon})
.addTo(map)
.bindPopup('My Popup HTML', {closeOnClick: false, autoClose: false});
Let me quote the Leaflet documentation on L.Popup:
Used to open popups in certain places of the map. 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.
In order to open several popups, instantiate them using L.popup(latlng, options), then .addTo(map) them.
Define an array:
let map=L.map('mymap');
...
var markers = L.markerClusterGroup();
...
var marker=[];
marker[0]= L.marker([latitud1,longitud1]).addTo(map).bindPopup('Hola 0',{autoClose: false, closeOnClick: false});
marker[1]= L.marker([latitud2,longitud2]).addTo(map).bindPopup('Hola 1',{autoClose: false, closeOnClick: false});
To put on the map:
marker.forEach(function(marker) {
markers.addLayer(marker);
map.addLayer(markers);
});
Show the popup for only one:
var curPos = marker[0].getLatLng();
map.setView(new L.LatLng(curPos.lat,curPos.lng), 13);
marker[0].openPopup();
Show all popups:
marker.forEach(function(marker) {
var popup = marker.getPopup();
marker.bindPopup(popup.getContent()).openPopup();
});
Close all popups:
map.eachLayer(function (layer) {
layer.closePopup();
});
I'm trying to create a popup that stays open until I click the x in the top right corner to close it down. What is the best way to do this? My code is below, thanks!
//pop up code
//create custom icon
var newicon = L.icon({
iconUrl: 'logo.png',
})
// creating marker
var marker = L.marker(new L.LatLng(41.77, -87.6), {
icon: L.mapbox.marker.icon({
'marker-color': 'ff8888'
}),
icon: newicon,
draggable: true,
}).addTo(map);
// bind popup to marker
marker.bindPopup("I am a text that will stay open until closed").openPopup();
New solution, the old one doesn't seem to work:
var new_popup = L.popup({"autoClose": false, "closeOnClick": null});
marker.bindPopup(new_popup);
Use:
var newpopup = L.popup({ closeOnClick: false }).setContent("I am a text that will stay open until closed");
marker.bindPopup(newpopup);
To get poups to open, you need to start by specifying closePopupsOnClick: false inside L.map() so that no popups close by default
L.map('map',
{
...
closePopupOnClick: false
}
Then, for individual popups that you do want to close, you can close them inside click()
map.on('popupopen', function (e) {
//save e.popup to an array or something
}
map.on('click', () => {
//close the popups you want to by calling map.closePopup(popup);
});
I try to build a map with openlayers3 with a group of markers and popups. The markers and the popups work so far, but when I click on one marker (popup shown) and then -without clicking in the map again- on another one, it shows a popup with the same content as the first one. I have already done research, but can't find something helpful. So here's the part for my popups:
//popup
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('information')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
Hope somebody can help me. Thanks!
I was having the same issue and found my solution here https://gis.stackexchange.com/questions/137561/openlayers-3-markers-and-popovers
Try changing your
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('information')
});
to
$(element).attr('data-placement', 'top');
$(element).attr('data-html', true);
$(element).attr('data-content', feature.get('information'));
I've made an example for you. Take a look!
You gotta "write" some content on each marker.
http://embed.plnkr.co/hhEAWk/preview
I am using the WMSGetFeatureInfo control to retrieve feature attributes from geoserver and display in popups.
I've setup the proxyhost at localhost and the popup is working fine now. I am using eventListeners.
After it executes the last line, map.addPopup(popup), the layout of the html file changes as shown in the attached images.
The codes is as below:
shelter_info = new OpenLayers.Control.WMSGetFeatureInfo ({
url:"http://130.95.44.145:8080/geoserver/Bushfire_Com_Study/wms",
title: 'Identify features by clicking',
layers:[evacuation_center],
queryVisible: true,
hover: true,
eventListeners:{
getfeatureinfo: function(event){
//only display popup when selected the WMS object
if (event.text.indexOf("<table class=\"featureInfo\">") != -1) {
var popup = new OpenLayers.Popup.FramedCloud(
"shelter_popup",
map.getLonLatFromPixel(event.xy),
null,
event.text,
null,
true,
null
);
popup.autoSize = true;
popup.minSize = new OpenLayers.Size(180,180);
map.addPopup(popup);
}
}
}
});
Before adding popups:
After adding popups:
I use Bing Maps Ajax V7. I want on right click to get an infobox and show my links inside.
function GetMap(){
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:""});
attachrightclick = Microsoft.Maps.Events.addHandler(map, 'rightclick',showPopupMenu);
}
function showPopupMenu(e){
var latlong = new Microsoft.Maps.Location(e.getY(),e.getX());
var defaultInfobox = new Microsoft.Maps.Infobox(latlong, {title: '<div>My Pushpin<div>', visible: true} );
map.entities.push(defaultInfobox);
}
Infobox added but unfortunately have no sense with to point I clicks... I adds on other latlon...
Have a anyone an idea:
1)How to make info window load on position where I right click.
2)Disable default right click of browser so only shows info box and not and right click menu
Thanks a lot.
Question number 1:
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), null);
pushpinClick= Microsoft.Maps.Events.addHandler(pushpin, 'rightclick', displayEventInfo);
map.entities.push(pushpin);
function displayEventInfo(e){
var pushpin = e.target;
var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true};
var defaultInfobox = new Microsoft.Maps.Infobox(pushpin.getLocation(), infoboxOptions );
map.entities.push(defaultInfobox);
defaultInfobox.setHtmlContent('html content goes here!');
}
Question number 2:
<body oncontextmenu="return false">
...
</body>