Overlay with DrawingManager google map v3 - javascript

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.

Related

Leaflet: draw polyline across dateline without using worldCopyJump

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.

How to obtain marker position relative to HTML page

I am using Google Maps API V3 for JavaScript, I do like to get a Marker's position relatively to my page in pixels (left, top), so I can add a custom label when hoving the mouse over my marker. How do I get that position?
If your referring to getting the position of your mouse while you hover, use overlay in the listener to get the projection and the pixel coordinates. Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. If you want to place an image on a map, you can use a GroundOverlay object or you can create your own Custom Overlays with the use of OverlayView class.
Sample code using OverlayView:
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); // 'map' is new google.maps.Map(...)

Leaflet polygons cut off on map viewport while dragging

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')

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.

Move/Displace Marker Coords for showing extra information on Marker

I have a few Makers into my Map using Google Maps API v3. They are located by a LAT and LONG coords, and show default marker (A, B, C).
But now I want to show for each marker another marker displaced (or moved) a few pixels from default maker,
like this image:
The square must be a small div coloured.
How I must write the new Marker?
Markers cannot be created from DOM-elements(e.g. div's).
You must create a custom overlay
MarkerWithLabel should be a good choice to achieve it.

Categories