Use the Ray Casting algorithm for checking if a point (marker) lies inside of a polygon: function isMarkerInsidePolygon(marker, poly) { var polyPoints = poly.getLatLngs(); var x = marker.getLatLng().lat, y = marker.getLatLng().lng; var inside = false; for (var i = 0, j = polyPoints.length – 1; i < polyPoints.length; j = i++) { var xi = … Read more
You could use instanceof (docs here). map.on(‘draw:edited’, function (e) { var layers = e.layers; layers.eachLayer(function (layer) { if (layer instanceof L.Marker){ //Do marker specific actions here } }); });
map.fitBounds(bounds, {padding: []}) should work. I suggest you to change padding to eg. [50, 50], maybe your padding values are too small. Check out this JSFiddle example.
It is, as you may guess: map.getBounds(); If you want to get the bounds after panning and zooming, use events, like map.on(‘moveend’, function() { alert(map.getBounds()); });
The performance issue is due to the fact that each marker is an individual DOM element. Browsers struggle in rendering thousands of them. In your case, an easy workaround would be instead to use Circle Markers and have them rendered on a Canvas (e.g. using map preferCanvas option, or with a specific canvas renderer that … Read more
Simplest and Accurate var map = L.map(‘map’, { maxZoom: 20, minZoom: 6, zoomControl: false }); L.control.zoom({ position: ‘bottomright’ }).addTo(map);
You could use a L.DivIcon: Represents a lightweight icon for markers that uses a simple div element instead of an image. http://leafletjs.com/reference.html#divicon Put your image and text in it’s HTML, sprinkle some CSS to make it appear the way you want and you’re good to go new L.Marker([57.666667, -2.64], { icon: new L.DivIcon({ className: ‘my-div-icon’, … Read more
You can use L.LatLngBounds in order to create an area to zoom to. First, create a bounds and pass it an array of L.LatLngs: var bounds = new L.LatLngBounds(arrayOfLatLngs); This will create a bounds that will encapsulate every point that is contained in the array. Once you have the bounds, you can fit the bounds … Read more
So this is one of the top hits in Google for styling Leaflet Icon, but it didn’t have a solution that worked without third parties, and I was having this problem in React as we needed dynamic colours for our routes and icons. The solution I came up with was to use Leaflet.DivIcon html attribute, … Read more
var group = new L.featureGroup([marker1, marker2, marker3]); map.fitBounds(group.getBounds()); See the documentation for more info.