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
Related
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>
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>
I am using marker cluster group.
using that I am able to show two markers.
when you click number two which is in red color you will see two markers.
after that when I click one marker I need to zoom in two levels to see the location
I wrote a marker click for that and in that i added zoom and tried to use fitbounds too, but its not zooming in.
we used mapcenter then also it did not work `
can you tell me how to fix it.
providing my code snippet and sandbox below.
https://codesandbox.io/s/20756jrz8p
MarkerClick = e => {
console.log("e----->", e);
this.setState({
viewport: { center: [20, 6], zoom: 7 }
});
//this.refs.mymap.leafletElement.setZoom(8);
//let bounds = this.refs.mymap.leafletElement.fitBounds();
//console.log("bounds----->", bounds);
console.log(
"after setting state zoomlevel bounds showCard--->",
this.state.zoom
);
// this.setState({ zoom: 18 });
//this.setState({ zoomLevel: 7 });
};
The Zoom value you have used in MarkerClick() is lower than the current zoom value (zoom = 8). Hence you are not getting proper zoom. Use Zoom = 14 or 16 and a different set of co-ordinates instead of [20,6].
For Example:
MarkerClick = e => {
...
this.setState({
viewport: { center: [43.39528702235596, 6.294845731267186], zoom: 16 }
});
...
}
I create a new map with zoom equals 4:
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(39.9526, -98.5795),
mapType: 'terrain'
});
I listen for the zoom_changed event so that I can redraw my markers with a new scale:
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom = map.getZoom();
$log.debug("zoom: " + zoom);
and I create my new icon here:
var greenMarkerIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
fillColor: "green",
strokeWeight: 1,
scale: map.getZoom()
}
When I zoom in, everything looks lovely. The icon grows bigger in scale as I drill down. Zooming out is where the problem is:
Click here for image of icon after reducing scale
The border of the circle becomes bigger and bigger. I've added a debug statement for the icon.strokeWeight property and it remains 1 the entire time. I'm blowing away all of my old markers and redrawing them again, so I don't know why the single marker strokeWeight is appearing bigger.
Any ideas?
I am assuming that you want to change marker icon scale on map zoom and the marker should be smaller/bigger without changing the stroke. Then you need to change only icon scale and set it to the marker:
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom = map.getZoom();
console.log("zoom: " + zoom);
greenMarkerIcon.scale = (zoom + 1) * scale; // +1 is for avoiding zoom=0, scale is initial scale of icon
marker.setIcon(greenMarkerIcon);
});
check this example: http://jsfiddle.net/dUMFW/108/
The answer provided is correct.
I found out what I was doing wrong. I was creating a new marker each time the user clicked a zoom button. Markers should be created only once and the associated icon should be changed on zoom.
Thanks.
I've embedded this map on my AIR app using StageWebView.
The javascript code provided by marinetraffic.com is this one :
<script type="text/javascript">
width='100%'; // the width of the embedded map in pixels or percentage
height='450'; // the height of the embedded map in pixels or percentage
border='1'; // the width of the border around the map (zero means no border)
shownames='false'; // to display ship names on the map (true or false)
latitude='37.4460'; // the latitude of the center of the map, in decimal degrees
longitude='24.9467'; // the longitude of the center of the map, in decimal degrees
zoom='9'; // the zoom level of the map (values between 2 and 17)
maptype='3'; // use 0 for Normal map, 1 for Satellite, 2 for Hybrid, 3 for Terrain
trackvessel='0'; // MMSI of a vessel (note: vessel will displayed only if within range of the system) - overrides "zoom" option
fleet=''; // the registered email address of a user-defined fleet (user's default fleet is used)
remember='false'; // remember or not the last position of the map (true or false)
language='en'; // the preferred display language
showmenu=true; // show or hide the map options menu
</script>
<script type="text/javascript" src="http://www.marinetraffic.com/js/embed.js"></script>
Is it possible to add the current position of the user on this map ?
if so, how can I do it ?
(I've tried to add this in my script :
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
but it doesn't work).
Thx