Develop Reference

Leaflet - Zoom map to fit several circles leaves big gap on sides [duplicate]

Is there a way to fit the map exactly to bounds? (or as close a possible).
For example, in this jsfiddle, even without padding the map leaves a lot of padding above and below the points:
http://jsfiddle.net/BC7q4/444/
map.fitBounds(bounds);
$('#fit1').click(function(){ map.fitBounds(bounds); });
$('#fit2').click(function(){ map.fitBounds(bounds, {padding: [50, 50]}); });
I'm trying to fit a map as precisely as possible to a set of bounds that closely match the map shape without all the extra padding.
Setting a map's ne corner and sw corner would work as well, but I don't think that functionality exists.

You are very probably looking for the map zoomSnap option:
Forces the map's zoom level to always be a multiple of this, particularly right after a fitBounds() or a pinch-zoom. By default, the zoom level snaps to the nearest integer; lower values (e.g. 0.5 or 0.1) allow for greater granularity. A value of 0 means the zoom level will not be snapped after fitBounds or a pinch-zoom.
Because its default value is 1, after your fitBounds the map will floor down the zoom value to the closest available integer value, hence possibly introducing more padding around your bounds.
By specifiying zoomSnap: 0, you ask the map not to snap the zoom value:
var map = L.map('map', {
zoomSnap: 0 // http://leafletjs.com/reference.html#map-zoomsnap
}).setView([51.505, -0.09], 5);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var southWest = new L.LatLng(40.712, -74.227),
northEast = new L.LatLng(40.774, -74.125),
bounds = new L.LatLngBounds(southWest, northEast);
L.marker([40.712, -74.227]).addTo(map);
L.marker([40.774, -74.125]).addTo(map);
map.fitBounds(bounds);
$('#fit1').click(function() {
map.fitBounds(bounds);
});
$('#fit2').click(function() {
map.fitBounds(bounds, {
padding: [50, 50]
});
});
body {
padding: 0;
margin: 0;
}
#map {
height: 300px;
margin-top: 10px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet-src.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<button id="fit1">fit without bounds</button>
<button id="fit2">fit with bounds</button>
<div id="map"></div>

How to get the desired value for lat,long to display only the required portion of the map with Leaflet.js?

I am trying to display a portion of a map with this amount of code:-
<div id="mapid" style="height: 280px; width: 1143px;">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script>
var mymap = L.map("mapid").setView([5, 120], 13);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: '© OpenStreetMap contributors',
}).addTo(mymap);
</script>
</div>
But that displays this portion of the map:-
But I am trying to get this portion of the map:-
is there any tool I can optimize my code to do so:-

You can set the view of the map with: map.setView([lat,lng],zoom)
For your example: mymap.setView([-3.687845, 113.776067], 4);
Or you can set the bounds (top left corner and right bottom corner) of the map, so the map is calculated what is the best zoom to contain the bounds.
var bounds = L.latLngBounds([6.884470, 94.897447],[-13.549102, 154.879214])
mymap.fitBounds(bounds)
But to answer your question, you can get the latlng when you click on the map with:
map.on('click',function(e){
console.log(e.latlng);
});

Leaflet : Draw circle always visible and centered even after a move or zoom

I'm trying to draw a circle on my Leaflet Map that should be always visible and centered even when user move or zoom in the map.
The following code works well when user move the map, but when the user zoom in or zoom out, the size of the circle is not updated. I would like to keep always the same dimension for the circle.
HTML
<div id="map" class="map" style="height:75vh;"></div>
JS
// Init Leaflet Map basically
this.map = L.map("map").setView([38.63, -90.23], 12);
window.map = this.map;
this.tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 20,
maxNativeZoom: 18,
attribution: '© OpenStreetMap, © CARTO'
});
this.tileLayer.addTo(this.map);
// Create circle that will be always visible and will have alwaus the same width.
this.circle = L.circle([38.63, -90.23], 3000, {
color: '#5d78ff',
fillOpacity: 0
}).addTo(this.map);
// Set circle always centered when map is moved.
this.map.on("moveend", (s) => {
this.circle.setLatLng(this.map.getCenter());
});
// todo: Set circle always centered when map is zoom in/out
this.map.on("zoomend", (s) => {
this.circle.setLatLng(this.map.getCenter());
console.log('test');
});
JSFIDDLE
https://jsfiddle.net/4uorasdn/

You can use CircleMarker instead of using Circle.
The relevant part of your code that needs to be changed should look something like this.
this.circle = L.circleMarker([38.63, -90.23], {
radius: 200,
color: '#5d78ff',
fillColor: '#f03',
fillOpacity: 0.2,
opacity: 1,
title: "test"
}).addTo(this.map);
And you can find a working jsfiddle here.

How to add images on map using leaflet and Javascript

I am looking for a way to add images to a 'leaflet map' using Javascript.
What I want to do is to load image, adjust its size and position, and attach it to a leaflet map.

Here's a basic demo showing how to add an image using imageOverlay.
You adjust the position and size of the image by providing imageBounds
// center of the map
var center = [-33.8650, 151.2094];
// Create the map
var map = L.map('map').setView(center, 5);
// Set up the OSM layer
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © OpenStreetMap',
maxZoom: 18
}).addTo(map);
// add a marker in the given location
L.marker(center).addTo(map);
L.marker([-35.8650, 154.2094]).addTo(map);
var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/1024px-Sydney_Opera_House_-_Dec_2008.jpg',
imageBounds = [center, [-35.8650, 154.2094]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
html,
body {
height: 100%;
}
#map {
height: 100%;
}
<script src="https://unpkg.com/leaflet#1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.0.2/dist/leaflet.css">
<div id="map"></div>

Google maps distance based on the zoom level

I have used google maps for displaying some locations using markers, based on the user's current location. User's current location is the center point of the map. The default zoom level is 12. In default, I displayed markers within 300 miles(approximately in my case) distance only.
In that how can I do the following,
1) If decrease the zoom level, I need to increase the distance that should display markers within the increased distance also. how much distance should I increase in miles (i.e. Zoom level is 11) ?
2) If increase the zoom level, I need to decrease the distance that should display markers without the increased distance. how much distance should I decrease in miles (i.e. Zoom level is 13) ?
Please suggest me there is any built-in option to do that ...

I'm not sure if I understand your question correctly, but when you increase the zoom by 1 you must divide the distance by 2. When you decrease the zoom by 1 you must multiply the distance by 2.
The formula would be:
newDistance=(Math.pow(2,initialZoom-currentZoom)*initialDistanceAtInitialZoom)
Demo: (drawing a circle where the formula above will be used to calculate the radius)
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 4,
minZoom:2,
center: new google.maps.LatLng(52.52, 13.4),
noClear:true,
zoomControl:true,
draggable:false,
scrollwheel:false,
disableDefaultUI:true
}),
circle = new google.maps.Circle({
map:map,
center:map.getCenter(),
radius:300000*1.609344
}),
ctrl = document.getElementById('radius');
map.controls[google.maps.ControlPosition.TOP_CENTER].push(ctrl);
google.maps.event.addListener(map,'zoom_changed',
(function(z,r){
return function(){
var radius=(Math.pow(2,z-map.getZoom())*r);
circle.setRadius(radius);
ctrl.innerHTML=(radius/1609.344).toFixed(3)+' miles(zoom:'+map.getZoom()+')';
}
}(map.getZoom(),circle.getRadius())
));
google.maps.event.trigger(map,'zoom_changed');
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#map_canvas{
height:100%;
margin:0;
padding:0;
}
#radius{
background:#fff;
padding:4px;
font-size:14px;
font-family:Monospace;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas"><div id="radius"></div></div>

I found the zoom_changed event after a quick google
ex:
map.addListener('zoom_changed', function() {
infowindow.setContent('Zoom: ' + map.getZoom());
});
more info Google Api Docs here