Leaflet polygons cut off on map viewport while dragging - javascript

I am using mapbox library for one of my fleet_management application and i have created circle & polygon leaflet on map.
Current behavior: When dragging polygons or circles are on map only partly in the viewport, the part of the polygons or circles that were out of the viewport are cut off,
So i used panTO for center map at requested coordinate,but sometimes panTo() does not center map at requested coordinate(leaflets like circle and polygon).
this.map.panTo(this.shape._latlng);
Desired behavior: When dragging the polygon or circle it should come center of the map and it should load properly(Don't cut off).
The problem is present in https://github.com/Leaflet/Leaflet/issues/2814, see this github link.

Start observing 'isDrag'(Dragged or not) property. When latlng changes polygon will be centered.
geofenceDrag: function() {
if (!_.isNull(this.shape))
this.map.panTo(this.shape._latlng);
}
}.observes('isDrag')

Related

Reduced bing map to lowest extent does not fit in the map area

When we reduce the map size to lowest possible size by scrolling down or clicking zoom(-) sign, a square is shown which does not exactly fit in the map area on my web page.
i implemented bing map over openlayer.
cant attach image due to repo constraint on stackoverflow.
as of now my implementation looks like current look but i want map should look like desired look
if you mean that your map is too small for the DIV area, but the DIV area itself is OK, you can tell your map what is the last zoom level you want to use by setting the map options at the map init:
map = new OpenLayers.Map("map",{ numZoomLevels: 5, minZoomLevel: 3, maxZoomLevel: 5 } );
plus/minus zoom makes only your zoom change, not the area of the map, the area stays the same within the page. so how do you want the area of the map to be affected by zooming?
the area of the map is dependent only upon the size of the DIV that the map is placed in.
this is the DIV in your first exapmle: <div id="map" class="smallmap"></div>. If you change the proportions of the DIV element, the area of the map is changed too.

Leaflet JS - center and zoom on feature group

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.

how to center google map's marker not in the middle of the map canvas

map.setCenter(new google.maps.LatLng(locationX,locationY);
if I do this way, google puts a marker in the center of map canvas. I want that it will be not center, bot for example top right corner. Is it possible?
Instead of setCenter, try the following
panTo(latLng:LatLng)
Changes the center of the map to the given LatLng. If the change is
less than both the width and height of the map, the transition will be
smoothly animated.

Overlay with DrawingManager google map v3

I am using google map v3 and its drawingManager feature, I want to get the pixels of these Shapes either through Lat and Long or directly.
Here is the URL of drawingManager Shapes
https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes
I want to get the pixels as here with respect to the container of map
http://gmaps-samples-v3.googlecode.com/svn/trunk/latlng-to-coord-control/latlng-to-coord-control.html
like here, buts using overlay class and I want to use it for DrawingManager Shapes, need some help on it.
Thanks
To translate a LatLng to a Point use the method fromLatLngToPoint() of the current projection.
The current projection is returned by mapObject.getProjection()
However, a shape isn't always defined by LatLng's/Points.
For rectangles you must translate the points defined by the bounds, for a circle the center(and/or bounds), and for polylines/polygons the path.

Google Maps API - Create Offset for Overlays dynamical for every zoom level

I have a balloon which pops up when clicking on a Marker. Sometimes the balloon exeeds the bounds of the map and is not fully shown.
I can't center the map to the coordinates of the marker, because the ballon is sometimes too high and would still be outside the bounds. So I need an offset which moves the center of the map slightly down so the balloon is always nicly in the middle of my map.
The problem is that Google maps doesn't work with pixels but with LatLng. Therefore I need a dynamically scalable function to keep the offset in every zoomlevel the same!
Alright, I found an algorithmic solution!
map.setCenter(
new google.maps.LatLng(
marker.getPosition().lat()+(X/Math.pow(2,map.getZoom())),
marker.getPosition().lng()
)
);
Each zoom level nearly doubles the LatLng which is shown on the map. So just find an X which is the perfect offset for you (in my case it was 128) and everything works great!
PS: The position of the marker is the same as the balloon.

Categories