I am trying to let the user choose their paint color and then paint polygon on map. I know there is a setFeatureProperty method, but it needs to pass in a feature ID and thus user will need to draw the shape first and then change style. Is there anyway to just change to draw style programmably for future drawing? Any help is appreciated.
Based on the Gist https://gist.github.com/dnseminara/0790e53cef9867e848e716937727ab18
It's possible to get feature ID:
// callback for draw.update and draw.selectionchange
var setDrawFeature = function(e) {
if (e.features.length && e.features[0].type === 'Feature') {
var feat = e.features[0];
drawFeatureID = feat.id;
}
}
I've made this Jsfidle: https://jsfiddle.net/ToniBCN/y79ajgrw/3/ Maybe it could help you because it's easy to change feature color before draw and not after like the example.
Related
I want to show the scale of my leaflet map using L.control.scale() however I want to position the scale the same way as the Google Maps API offers. I need the scale to be inline with map attribution. I have attached an image below.
Google Maps API (how i want it)
Leaflet (how it currently is)
I am using the following code to create the scale and add it to my map.
L.control.scale().addTo(map);
To simply put the scale in the same corner of the map as the attribution, you can just set the position option when you create the scale control:
L.control.scale({position:'bottomright', metric: false}).addTo(map);
To make the scale actually go inline with the attribution, you can create a custom control that includes both the scale widget and the attribution text. Leaflet is designed to be extensible, so you can extend the source code for L.Control.Scale to just add what you need:
L.Control.AttrScale = L.Control.Scale.extend({
onAdd: function (map) {
var className = 'leaflet-control-scale',
wrapper = L.DomUtil.create('div', 'leaflet-control-attr-scale'),
attribution = L.DomUtil.create('div', 'leaflet-control-attribution', wrapper),
container = L.DomUtil.create('div', className, wrapper),
options = this.options;
wrapper.style.display = "flex";
wrapper.style.alignItems = "center";
attribution.innerHTML = "My attribution string";
this._addScales(options, className + '-line', container);
map.on(options.updateWhenIdle ? 'moveend' : 'move', this._update, this);
map.whenReady(this._update, this);
return wrapper;
},
});
map.addControl(new L.Control.AttrScale({position:'bottomright', metric: false}))
The example above shows a static attribution string before the scale. You can still use the normal options to position the control and set whether to show the metric and/or imperial scale. You will probably also want to create the map with the attributionControl: false option, to avoid the default attribution showing.
If you need to dynamically set the attribution message based on the map selection (like the normal attribution control does), look at the source code for L.Control.Attribution to see what extra functionality you need to incorporate into the custom control.
Using Leaflet javascript. I would like my "clear button" to do two things...
1) uncheck all the L.Control layers
2) remove the current overlay from the map
I can do the first easily enough using this code:
var checks = document.querySelectorAll('[type = "checkbox"]'), i;
function uncheckBoxes() {
for (i = 0; i < checks.length; ++i) {
checks[i].checked = false;
}
}
The next is a little more tricky. I have tried using the removeLayer() and clearLayers() function but they do not work. I don't see a way in the leaflet documentation to remove an L.control overlayMap layer from the map unless you physically uncheck it yourself.
Any insight into this would be greatly appreciated.
Not exactly sure what is your difficulty in programmatically removing some layers / overlays from your map.
It is normally trivial (map.removeLayer(layer)), and the Layers Control automatically reflects what is happening on the map (in that case, if layer is one of the overlays, its associated checkbox will become unticked).
As for removing all your overlays from map, you just need to keep a reference to those overlays, loop through them and remove them from the map:
var overlays = {
'Name 1': someLayer,
'Name 2': someOtherLayer
};
L.control.layers(null, overlays).addTo(map);
// Whenever you want to remove all overlays:
for (var name in overlays) {
map.removeLayer(overlays[name]);
}
Demo: https://jsfiddle.net/3v7hd2vx/357/
I'm new to leaflet and am trying to implement a set of markers with different CSS-styles.
So, I am aware that after adding a marker to a map I can access different CSS-attributes by calling getElement() on my marker for example:
marker.addTo(map);
marker.getElement().style.borderColor = '#000';
This works just fine, but when adding a marker to a layer, this can no longer be used since a TypeError occurs (getElement() is undefined). Here is the example code where the error occurs:
myLayer.addLayer(marker);
marker.getElement().style.borderColor = '#000';
Am I overlooking a simpler way to set CSS-Attributes for markers and divicons that are added to layers or is there a similar way to access layer-added markers and divicons in JavaScript?
So I found a solution that is working for me.
The idea is to extend the function that is used to create the icon.
Last answer here github.com/Leaflet/Leaflet/issues/5231 helped a lot.
var borderSize = ...;
L.DivIcon.Custom = L.DivIcon.extend({
createIcon: function(oldIcon) {
var icon = L.DivIcon.prototype.createIcon.call(this, oldIcon);
icon.style.borderSize = borderSize;
...
return icon;
}
})
var icon = new L.DivIcon.Custom({
...
});
var ll = L.latLng(entry.Longitude, entry.Latitude);
var marker = L.marker(ll, {
icon: icon
})
this.myLayer.addLayer(marker);
Welcome to SO!
When not added onto a map (since your parent myLayer may not be added to the map itself), a marker does not have any element.
If you do not need to change too many styles individually and dynamically, you might rather use the className option of your Icon / DivIcon.
I am passing a latlng from a link on another page to my map. My map has the markers based on this latlng. So what I am passing is exactly what the map markers are using to show on the map.
var hash = window.location.hash;
var hashless = hash.replace("#", "");
var ll = hashless.split(",", 2);
map.setView(new L.LatLng(ll[0], ll[1]), 14);
This is working great, but I am struggling at getting the marker to show it's infowindow. I would like only the link clicked on to be the marker that is showing it's popup. I am able to zoom right to the marker, but not able to get the popup to work in a reasonable way.
I have tried a few things, but map.getBounds() seems to be the one I should be working with, unless you can ID a marker based on Lat/Lng. Can you?
I am using bounds in the map.on function.... but none of the events seems to really work well. Originally thought LOAD would do it, but no results... viewreset, mousemove, etc... all show the popup in this simple function, but it is not really any good as it flickers etc... when moving things around:
map.on('viewreset', function () {
// Construct an empty list to fill with onscreen markers.
console.log("YA");
var inBounds = [], bounds = map.getBounds();
datalayer.eachLayer(function (marker) {
if (bounds.contains(marker.getLatLng())) {
inBounds.push(marker.options.title);
marker.openPopup();
}
});
});
How can I set the marker.openPopup() from my link to the current marker at that lat/lng passed to it?
The following code receives an error on the lines for enabling and disabling the marker dragging ("Unable to get property 'disable' of undefined or null reference"). The markers show up on the map just fine and are draggable as the creation line indicates. Placing an alert in place of the enable line produces a proper object so I believe the marker is defined. Is there something I need to do to enable the IHandler interface? Or am I missing something else?
var marker = L.marker(L.latLng(lat,lon), {icon:myIcon, draggable:'true'})
.bindLabel(name, {noHide: true,direction: 'right'});
marker._myId = name;
if (mode === 0) {
marker.dragging.enable();
} else {
marker.dragging.disable();
}
I had a similar problem today (perhaps the same one) it was due to a bug in leaflet (see leaflet issue #2578) where changing the icon of a marker invalidates any drag handling set on that marker. This makes any calls to marker.dragging.disable() fail.
The fix hasn't made it into leaflets master at time of writing. A workaround is to change the icon after updating the draggable status if possible.
marker.dragging.disable();
marker.setIcon(marker_icon);
Use the following code to make an object draggable. Set elementToDrag to the object you wish to make draggable, which is in your case: "marker"
var draggable = new L.Draggable(elementToDrag);
draggable.enable();
To disable dragging, use the following code:
draggable.disable()
A class for making DOM elements draggable (including touch support).
Used internally for map and marker dragging. Only works for elements
that were positioned with DomUtil#setPosition
leaflet: Draggable
If you wish to only disable the drag option of a marker, then you can use the following code (where "marker" is the name of your marker object):
marker.dragging.disable();
marker.dragging.enable();
I haven't found an answer but my workaround was this:
var temp;
if (mode === 0) {
temp = true;
} else {
temp = false;
}
var marker = L.marker(L.latLng(lat,lon), {icon:myIcon, draggable:temp})
.bindLabel(name, {noHide: true,direction: 'right'});
marker._myId = name;
Fortunately I change my icon when it is draggable.