Develop Reference

Leaflet overlay order (points, lines, and polygons)

I'm working with the Leaflet.StyledLayerControl plugin and would like to set my layers so that polygons always get pushed to the back, lines above the polygons, and points above the lines.
I have searched for solutions here but most refer to tilelayers or map panes (which I think only work with another version of leaflet 1.0).
I want to be able to toggle lines on and off and have them always be below points (same with polygons below polylines).
I'm guessing I have to do something with setZIndex or bringToFront() but i'm not sure where to start.
Any help would be appreciated. Thanks.

The easy solution is really to use Leaflet 1.0, which provides you with map.createPane("paneName") functionality. So you create like "polygonsPane", "linesPane" and "pointsPane", that you specify to each of your vector / shape layers using their pane option.
Once set, you can add / remove them to / from map, and they will always be inserted in the specified pane, hence respecting the pane's order.
// Create necessary panes in correct order (i.e. "bottom-most" first).
map.createPane("polygonsPane");
map.createPane("linesPane");
map.createPane("pointsPane");
L.polygon([/* coords */], { pane: "polygonsPane" }).addTo(map);
L.polyline([/* coords */], { pane: "linesPane" }).addTo(map);
L.circleMarker([/* coords */], { pane: "pointsPane" }).addTo(map);
Demo: https://jsfiddle.net/3v7hd2vx/51/
With Leaflet 0.7, you know that all vector layers are part of the same SVG container, being appended when added to map, hence they appear on top of all previously added vectors. Then you have to use bringToFront() and/or bringToBack() to re-sort them to whatever order you need.
You might be interested in that post for that case: https://gis.stackexchange.com/questions/166252/geojson-layer-order-in-leaflet-0-7-5/167904#167904

Angular UI Google Maps center marker

I'm using Angular(UI)-Google-Maps (2.1.5) and AngularJS (1.3.13)
I want a marker that is always in the center of the map. The problem is that the marker only updates its position when I stop dragging.
I use the drag event like this:
drag: function(maps) {
$scope.map.marker.center.coords = $scope.map.center;
}
I also count the amount, how often the drag event triggers, which is much higher than the updates of the marker (or map). Here's an example: http://plnkr.co/edit/M39CFc
I also tried center_changed and bounds_changed with the same result.

To put the marker in the center of the map make use of the following tag:
<ui-gmap-marker coords="map.center" idkey="1" ng-cloak>
Although this technique is discouraged as it will also move the marker when the map is dragged. To get a workaround with this situation use:
marker.coords = Object.create(coords)

Another possibility is to add the property draggable = true to the markers:
<ui-gmap-markers coords="'self'" icon="'icon'" options="{ draggable: true }">
Don't know why this solve the issue in IE, check this

How to remove markers when use Leaflet Slider to show changes over time

I am using Leaflet Slider, of Dennis Wilhelm, to try to show changes in data over a period of five years in a Leaflet map.
I am trying to get that when the user move the cursor over the slider, some marker disappear and some other appear. So far, I only get that the new marker appear on top of the old marker.
So, my question is:
How can I remove markers when use Leaflet Slider to show changes over time? What changes I have to do in the original SliderControl.js?
Thanks in advance!
Below is the link to Dennis Wilhelm's Leaflet Slider code:
https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js

It might be late, but for anyone who is looking for it now. If you want to show changes over time and want to show specific points at a time, pass the parameter follow as true, so the slider would show only one point at a time.
var sliderControl = L.control.sliderControl({
position: "topleft",
layer: layername,
follow: true
});

When I need to update markers in Leaflet I add my markers to a layergroup. I then add that layer group to the map once, and clear it before adding new markers. Below is a code snippet of what it might look like. That way all markers are cleared out before adding new ones. I hope that helps you.
var map = L.map('map').setView([0, 0], 2);
var markerLayerGroup = new L.LayerGroup();
map.addLayer(markerLayerGroup);
function addMarkers() {
markerLayerGroup.clearLayers();
markerLayerGroup.addLayer(markerVariable);
}

I have used the range: true property to overcome this issue in a project i'm working on.
It is suboptimal however given that you need to move 2 sliders, both a Left and right slider, which represent the limits of the period you're interested in viewing, rather than just one for say a month end snapshot.
Also one increment of the slider will add 1 point to the map rather than adding a whole lot at once.
I expect there are solutions to these problems by extending the class but i've not had the time to do that yet.
here's my code:
var sliderControl = L.control.sliderControl({
position: "topleft",
layer: membMarksCurrent,
range: true
});
map.addControl(sliderControl);
sliderControl.startSlider();

How can I use a leaflet layer control to toggle a d3 svg overlay?

I have 3 d3 svgs I want to put on the same leaflet map. I would like to be able to control them with the same ease as leaflet layers.
Here is code that works, but is janky.
The relevant part is lines 75 to the end, where I create a custom layer control tied specifically to my d3 svg group, instantiate it, and pop it in the overlays hash before addTo(map).
var lineLayer = L.Class.extend({
initialize: function () {
return;
},
onAdd: function (map) {
railLineGroup.style("display", "block");
},
onRemove: function (map) {
railLineGroup.style("display", "none");
},
});
var railLineLayer = new lineLayer();
overlays["Rail Lines"] = railLineLayer;
L.control.layers(baseLayers, overlays).addTo(map);
There's got to be a better way to do this. For instance, because this is a hack, the layer control does not know that the layer has already been activated, so the checkbox is unchecked.
Any help would be greatly appreciated!

I really would recommend you to have a look at Vector OSM, specially at tilejson.js. There you see a proper implementation which makes layer control work with SVG overlay.

change map size on click

How can I set it up so when a user clicks the submit button, the map will resize itself to fit directions as it is on yelp maps when finding directions?
Thanks

Well, without much information in your question, just add a style modification in your map direction handler. In it's simplest form: But without knowing more about your particular setup, I can't do much more.
HTML:
<FORM onSubmit="findDirections()">
JavaScript:
function findDirections() {
// Change map width
document.getElementsById("directions_map").style.width = "600px";
// Do google maps lookup, etc
}

Do you mean how to set center and zoom of map to have direction fit in such a view? If so, you can obtain points of this direction, add them to create LatLngBounds (using the extend method) and use Map.fitBounds with prepared bounds as parameter.