I am starting with leaflet and leaflet.draw and I am having troubles at the moment I trie to change marker´s icon.
In this particular case I am trying to update all marker´s icon when I press cancel edition button. I can change the icons but all the markers still selected
Here is a fiddle example
Steps to reproduce
Press edit button
Press cancel edit
You will see all the markers has changed their icons but at the same time all the markers still selected
Here is the code that I have to simulate undo icon change :
drawControl._toolbars.edit.disable = function () {
if (!this.enabled()) {
/* If you need to do something right as the
edit tool is enabled, do it here right
before the return */
return;
}
geojsonLayer.eachLayer(function(layer) {
layer.setIcon(new L.Icon.Default({}));
});
geojsonLayer2.eachLayer(function(layer) {
layer.setIcon(new L.Icon.Default({}));
});
this._activeMode.handler.revertLayers();
L.Toolbar.prototype.disable.call(this);
};
Versions:
leaflet 1.3.4
leaflet.draw 1.0.3
What am I doing wrong ?
I took a quick look at your code and I am not sure what causes this issue. However, I dived a bit into the editable marker code & style from the console and realized that once you hit the edit button the .leaflet-edit-marker-selected class is applied to each one of the drawn or rendered markers derived from leaflet.draw.css line 9.
So a possible workaround will be to remove .leaflet-edit-marker-selected class once 'draw:editstop' event is called:
map.on('draw:editstop',function(e) {
$(".leaflet-pane img").removeClass("leaflet-edit-marker-selected");
editing=false;
map.closePopup();
});
Updated Demo
Related
I am using leaflet to show my markers into google map. everything works fine. My markers are being loaded by an api call in every 10 secs. if i click on any markers a popup window is open. But it disappeared as soon as the api is called again. I have tried so far as follows:
var infoWindow_content = "<h3>Hello world</h3>";
var theMarker = L.marker([devices[x].lat, devices[x].lng], {
icon: customicon,
rotationAngle: devices[x].angle
}).on('click', markerOnClick).addTo(map).bindPopup(infoWindow_content, {
autoPan: true,
autoClose:false,
closeOnClick:false,
});
is there anyway to keep the popup window open even the marker gets reloaded? In that case is the popup window follow marker movement? thanks in advance
I am trying to allow a mapbox marker to be clicked on and when clicked it automatically takes you to a new link.
Is this possible?
I currently have a map of 10 locations and when loaded the zoom level shows all. When you click on a location, it zooms you into that location.
I now want it to take you through to a url on the click rather than zoom in, however I cant seem to find any documentation on how to do it.
I am aware that it can be done using a popup box which contains a url in it, but is there a way to remove the extra step.
Thank you
You can use click event on your layer to get the feature clicked and use a property of your feature to build your link :
map.on('click', 'layername', function(e) {
// Here you can access e.features[0] which is the feature cliked
// With that you can do whatever you want with your feature
});
Sébastien Bousquet's answer work when using a Symbol, but if using a Marker, you'll need to add your your own click eventlistener like https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event.
marker.getElement().addEventListener('click', event => {
window.location.href = 'https://www.mapbox.com/';
});
Is there any way to open leaflet layer control only when clicked?
By default, it expands/collapse when on mouseover/mouseout. I want to open only on click.
You can use a bit of jQuery to get this done.
Set the 'collapsed' option to false and instead, create a button to show/hide the layer control.
btn.onclick = function() {
$('.leaflet-control-layers').toggle();
}
jsFiddle:https://jsfiddle.net/jht7u28L/1/ (a basic example)
Stop propagation on mouse over solved it. I am using d3 here but It can be easily handled by plain javascript or by jQuery.
d3.select(".leaflet-control-layers-toggle").on("mouseover", function () {
//this will make sure that layer popup menu
//not opens when mouseover
d3.event.stopPropagation();
});
I wanted to migrate my existing add-on for firefox and chrome to crossrider in order to have it also with safari and IE, but i've a few doubts that mayble Schlomo (or any Crossrider developercan) can help me to solve them.
Questions :
Can i add a popup pane when someone clicks on the add-on button showing some kind of options inside it?
Can i add a blinking icon to the actual icon showing some kind of event happened like incoming chat or so?
Is there a way to add the red text box like in chrome showing at the bottom right of the icon some kind of text?
Thanks a lot!
When you pose the question like that, I can only hope the following answers will serve to allay your doubts and enlighten :)
First off, I would recommend familiarizing yourself with How to add a browser button to your Crossrider extension in general and the button popup feature specifically.
In answer to your specific questions:
You can use the button popup feature and build the required options in there. Take a look at the Button Popup Menu demo extension to get you started.
Whilst you can't make the button blink, you can alternate the button icon to make it look like blinking (see example).
In short, yes. Simply use the appAPI.browserAction.setBadgeText and appAPI.browserAction.setBadgeBackgroundColor methods (see example).
The following example bring together the key elements in the background.js code required to achieve the solutions mentioned. Look at the popup.html file in the Button Popup Menu for an example of how to build the options page.
appAPI.ready(function() {
var sid, // Blink interval id
alt=0, // Blink alternation state
icon = { // Blink icons
0: 'icons/icon0.png',
1: 'icons/icon1.png'
};
// Set the initial icon for the button
appAPI.browserAction.setResourceIcon(icon[0]);
// Sets the popup for the button
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});
if (true) { // blink condition, set to true for this example
// Blink icon
sid = appAPI.setInterval(function() {
alt = 1 - alt;
appAPI.browserAction.setResourceIcon(icon[alt]);
}, 1 * 1000);
} else {
appAPI.clearInterval(sid);
}
if (true) { // show button text condition, set to true for this example
// Add red text box to icon
appAPI.browserAction.setBadgeText('ext', [255,0,0,255]);
}
});
[Disclosure: I am a crossrider employee]
I am making a custom plugin for the editor provided by Google Closure. The plugin makes it able to add a button.
I am having problems by setting an onclick on the button, the other values are nicely set.
button.innerHTML = event.label;
button.className = event.initialClass;
var extraClasses = event.extraClasses;
if (extraClasses)
{
button.className += ' ' + extraClasses
}
button.onclick = function() { event.onclick };
Does anyone know what I am doing wrong and how I can fix this?
After creating a button it is added to the editors SeamlessField. A second problem that I currently have is that after creating the button, my pointer is inside the button and I can't seem to get it out of there.
I've got the follow piece of code for handling this at the moment. The var button is the created button. button contains: <button class="orange">test</button>
// We want to insert the button in place of the user's selection.
// So we restore it first, and then use it for insertion.
this.restoreOriginalSelection();
var range = this.fieldObject.getRange();
button = range.replaceContentsWithNode(button);
// Done making changes, notify the editor.
this.fieldObject.dispatchChange();
// Put the user's selection right after the newly inserted button.
goog.editor.range.placeCursorNextTo(button, false);
// Dispatch selection change event because we just moved the selection.
this.fieldObject.dispatchSelectionChangeEvent();
Any ideas about how I could fix this second problem aswell?
For the first, it does not look like you have begun using Google Closure event code. Wiring up the button to the 'click' event in Google Closure would be as follows:
goog.events.listen(button, goog.events.EventType.CLICK, event.onclick)
You should also be investigating the goog.dom and goog.dom.classes namespaces if you'd like to use Google Closure's wrappers around standard CSS class and text DOM manipulation.
For the second, were you testing in Chrome? If so, you might have ran into a range issue in Webkit, documented within the Closure code itself:
https://code.google.com/p/closure-library/source/browse/closure/goog/editor/range.js#174
I have gotten around this in the past by inserting an empty <span> element as a sibling after the offending element (the button, in your case), and placing the cursor next to the <span> instead. However, there's nothing stopping the user from moving the cursor back inside your button. You'll have to add more logic to prevent a user from placing the cursor within the button's text.