I am fairly new in using leaflet. Can someone tell me how to change the length of already drawn polyline in leaflet?. I want to make its length small or large depending on zoom level.
Leaflet polyline is a array of points, each of them consist of lat and lng. To change it's size you need to update this array and change distance between points width setLatLngs() method.
If you want to fit the screen you need to get screen bounding box width map.getBounds() get lat or lng from bbox and update your line width it.
So it will be something like this:
map.on('zoomend', function(){
var bounds = map.getBounds();
line.setLatLngs(bounds[0],bounds[1]);
})
Related
currently i have a little project that needs to make marker static and move map to the marker display on the map - i hope it makes any sense -
how to move map not marker - like i said the marker cannot move but the map needs to move to the marker when location changed - also marker is displayed at the bottom the map to make room for other events above the marker such as a path display and etc -
whats done already is when car moves it watches gps - then tells marker to move to that gps as a current location and then panby to the bottom of the map - this makes marker jerk at the bottom of the map when its location changed - so i figured if i keep marker static by placing it into a div above map and fixate it via css style - so it stays in the same place all the time - but this is wrong as it cannot be moved with map then when someone drags map with a finger - so this cannot be right solution - what is your solution to this dilema unless i am missing something -
To achieve what you want, you need to rotate the map on the correct axis, find the position of the center of the map, and finally center the map at the right place.
1 - Rotate the map
In your case (I presume you want the car always face of the road in front of the user position) you need to rotate the map before centering, otherwise the map is always oriented to the north and it can be anoying when the car move in other orientation (south for exemple). In this case the point of view is oriented in the wrong direction and the user don't see the upcoming road.
You can find an exemple here in the documentation. Basicaly you need to use setHeading() method. The rotation on gmap is not easy than it can be (see this post).
2 - Find the center of the map
To find the updated position of the center of your map, you need to retrieve the latLng location of a point always at the same distance (in pixel of the map container) above your marker fixed location. Use the methods fromLatLngToPoint() and fromPointToLatLng() to retrieve the position from the map to the real world or vice versa (see getProjection() for more details).
Exemple :
Your map is displayed in 1000*1000 px and the bottom position of the marker you choose is at 500px of the left side and 950px of the top side. If you want to move the center of the map without changing the position of the marker, you need to find the latLng position of the point at 450px above your marker.
function findMapCenter(map, markerLatLng) {
// need this to adjust from the actual zoom on the map
let scale = Math.pow(2, map.getZoom());
// position in pixel x.y from the container
let markerWorldCoordinate = map.getProjection().fromLatLngToPoint(markerLatLng);
// calcul of the position of the center
let centerWorldCoordinate = new google.maps.Point(
markerWorldCoordinate.x,
markerWorldCoordinate.y + (450/scale) // 450 because in my exemple is from 450px at the top of the marker
);
// return latLng of the center point of the map
return map.getProjection().fromPointToLatLng(centerWorldCoordinate);
}
3 - Set the map at the right place
Use setCenter() method to center the map on a choosen latLng location.
let marker; // = config of your marker
let gMap = new google.maps.Map(document.getElementById('map'));
update({lat:MARKER_LATITUDE, lng:MARKER_LONGITUDE});
// call this every time you want to update
function update(markerNewLatLng){
// ... first step : rotate the map if you need to
// then update marker position
marker.setPosition(markerNewLatLng);
// center the map
gMap.setCenter(findMapCenter(gmap, markerNewLatLng));
}
I need to show marker across map, drag sideway will have the marker show without hiding the previous one
worldCopyJump will replicate but previous map marker will be gone
I need to limit maxbound only to top and bottom, not sideway.
I couldnt use code below:
var maxSouthWest = L.latLng(-85, -360);
var maxNorthEast = L.latLng(85, 360);
var maxBounds = L.latLngBounds(maxSouthWest, maxNorthEast);
Can the latitude and longitude to be correct even crossing map dateline?
I need to draw shortest polyline route which similar to google map, example Japan to USA
in my leaflet will have the longitude more than 180 (240 example), which i want it to be in correct lat lng
worldCopyJump doesnt suit what I need
cannot cut polyline as user are allow to draw the best route line (even wrapping the whole world)
Refer to https://github.com/Leaflet/Leaflet/issues/5340 for image.
I have a map on which there are some circles, each one with a certain radius, and on the page load, I get the position of the user and show it on the map.
At first all the circles are red, so I want to check if the current position of the user happens to be in any of there circles, that particular circle should get green instead of red.
what is the best way to do that?
With Google Maps API, you may use the geometry library to calculate distance between circle's center and the lat/lng representing the position of your user. Then compare it with your radius.
You can do something like this :
var pointIsInsideCircle = google.maps.geometry.spherical.computeDistanceBetween(circle.getCenter(), point) <= circle.getRadius();
Then change the color of your circle if pointIsInsideCircle is true
http://jsfiddle.net/bor9zuhr/2/
On this Fiddle is an illustration of my problem. I have the navigation over the top of the map element. Now, when you click a marker, the map is being panned to the marker's coordinates, and the top of the info window most probably will not be readable when it is large enough.
What I want is to pan the map to a position above the marker, so that the info window falls lower, and will not be obscured by the navigation. Ideally, it would fall right in the middle of the visible area.
The problem is that when the map is zoomed in far, I need to pan it for a much smaller amount than if it were zoomed out far. And I can't seem to get the math right.
This is the part of the code that deals with the panning:
infowindow.open(map, marker);
var K = 0; // this should be something depending on the zoom level
var lat = marker.getPosition().lat() + K;
var lng = marker.getPosition().lng();
var newCenter = new google.maps.LatLng(lat, lng);
map.panTo(newCenter);
You could call map.panBy at the end of your function.
From the docs:
Changes the center of the map by the given distance in pixels. If the distance is less than both the width and height of the map, the transition will be smoothly animated. Note that the map coordinate system increases from west to east (for x values) and north to south (for y values).
With panBy you don't have to think about zoom levels, you just pan by pixels.
Code:
var map = L.map('map');
L.tileLayer('//{s}.tile.cloudmade.com/41339be4c5064686b781a5a00678de62/998/256/{z}/{x}/{y}.png',{minZoom:8, maxZoom:15}).addTo(map);
marker1 = L.marker([37.4185539, -122.0829068]).addTo(map);
marker1.bindPopup("Google Campus");
marker2 = L.marker([37.792359, -122.404686]).addTo(map);
marker2.bindPopup("Financial District");
var group = new L.featureGroup([marker1, marker2]);
map.fitBounds(group.getBounds());
The above code will center the map on the center of the markers, but does not set a zoom level so that the markers and only the markers are visible.
If I leave out the 'minZoom' attribute of the map object when adding the initial layer, the entire globe is visible. My desire is to have the map set a zoom and boundaries so that the markers are visible, and zoomed in. Any clues on how to accomplish this?
I thought that the fitBounds method would set a Zoom level, but for some reason in my situation it does not do so.
Your code is setting the map to a zoom level where both of the markers are visible at the highest possible zoom level. Because of the distance between the two markers and the way web mapping works, this is best fit using raster map tiles. Higher zoom levels will be zoomed in so much that you won't be able to see both markers.