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);
});
Related
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?
I am using leaflet and routing.control to show a route. I have it working fine, but I would like one of the markers to move with the users location using watch.position. But for now I a just trying to move the marker when I click a button. Again this works fine but when the marker moves I would like the route to update automatically. Its possible if you drag the marker so surely its possible when marker is moved in a different way? I can it if I remove the control and add a new one but this flickers too much. Any advice?
The code for the routing.control is
myroute = L.Routing.control({
waypoints: [
L.latLng(window.my_lat, window.my_lng),
L.latLng(window.job_p_lat, window.job_p_lng)
],show: true, units: 'imperial',
router: L.Routing.mapbox('API KEY HERE'),
createMarker: function(i, wp, nWps) {
if (i === 0 || i === nWps + 1) {
return mymarker = L.marker(wp.latLng, {
icon: redIcon
});
} else {
return job_start = L.marker(wp.latLng, {
icon: greenIcon
});
}
}
}).addTo(map);
and the code for moving the marker is
function movemarker() {
var lat = "52.410490";
var lng = "-1.575950";
var newLatLng = new L.LatLng(lat, lng);
mymarker.setLatLng(newLatLng);
// I assume I call something here?
}
Sorted, I did it with this, which removes first point and replaces it with new data
myroutewithout.spliceWaypoints(0, 1, newLatLng);
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 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 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>