Leaflet allows you to control how much the map resists being dragged out of bounds with the maxBoundsViscosity option (value: 0 to 1). Setting it to maximum disables dragging out of bounds entirely. var map = new L.Map(‘map’, { center: bounds.getCenter(), zoom: 5, layers: [osm], maxBounds: bounds, maxBoundsViscosity: 1.0 }); This feature is available in … Read more
It’s a complete hack from messing with the leaflet.js source code, but it works (at least in jsFiddle) http://jsfiddle.net/C7Rp8/4/ The idea is from Google Maps, to “resize” or “redraw” the map when its container div is resized. The changes I made are: add id link3 to the small tab in HTML <a href=”#lC” data-toggle=”tab” id=”link3″>tab3</a> … Read more
Loading tiles from Google Maps by just specifying the URL of an undocumented API is against the Google Maps terms of service. Let me quote from them: License Restrictions. 10.1 Administrative Restrictions. No access to APIs or Content except through the Service. You will not access the Maps API(s) or the Content except through the … 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
install leaflet.heat via npm : npm i leaflet.heat import the library: import “leaflet.heat”; Create a map component and use an effect to load the map and instantiate L.heatLayer Here is an example from the library’s github page written in React without react-leaflet components: function Map() { useEffect(() => { var map = L.map(“map”).setView([-37.87, 175.475], 12); … Read more
Results Offline blob cache for PNG slippy maps Testing 171 PNG files (total of 3.2MB) Platforms tested: Chrome v24, FireFox 18, IE 10 Should also work with Chrome & FF for Android Fetch from web server using XHR2 (supported on almost all browsers) for blob download from web server I went with XHR2-Lib by Phil … Read more
The best way is to use the CSS length units vh and vw. These allow a block-level HTML element to have a dimension relative to the viewport size, instead of the size of its parent element (as % does). e.g.: #map { width: 100vw; height: 100vh; } For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/length
Just make sure that the longitudes of your markers are in the range 0..360 instead of in the range -180..180. See a working example. i.e. instead of L.marker([0,170]).addTo(map); L.marker([0,-180]).addTo(map); L.marker([0,-170]).addTo(map); Do something like L.marker([0,170]).addTo(map); L.marker([0,180]).addTo(map); L.marker([0,190]).addTo(map); In other words, if a longitude is smaller than zero, add 360 to it. You might want to use … Read more
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