In Leaflet docs, L.Circle Radius is based on meters, but how can I draw a Circle based on coordinates instead?
More specifically, I want to draw a circle that encompasses a specific bounding box
const myCenter = [37, -122];
const myBoundingBox = {
northEast: [myCenter[0]+2, myCenter[1]+2],
southWest: [myCenter[0]-2, myCenter[1]-2]
};
const circle = L.circle(myCenter, {radius: ??}).addTo(map);
I've figured it out, use map.distance function to get distance in meters between the diagonal points of the bounds
const circleRadius = map.distance(myBoundingBox[northEast], myBoundingBox[southWest])/2
Then just create the circle normally using the radius in meters
Related
I am trying to get the latlng coordinates of the bottom left and top right corners of an svg element (orange box in the picture) I overlayed on top of the map. However, the latlng coordinates I am getting from transforming the pixel coordinates is off by a wide margin.
Coordinates I should be getting from this view:
BL: [-18.9, -39.1],
TR: [48.8, 39.3]
Coordinates I am actually getting:
BL: [-30.3, 127.0],
TR: [40.9, 205.9]
This is the code I am using to determine the pixel position:
this.navigation.on('moveend zoomend', () => {
const bounds = L.DomUtil.get("compBorder")!.getBoundingClientRect();
const bl1 = L.point(bounds.left, bounds.bottom)
const tr1 = L.point(bounds.right, bounds.top)
const bl = this.navigation.layerPointToLatLng(bl1);
const tr = this.navigation.layerPointToLatLng(tr1);
this.cs.setBlTr([bl.lat, bl.lng], [tr.lat, tr.lng]);
this.cs.setCenter(this.navigation.getCenter());
this.cs.setZoom(this.navigation.getZoom());
});
From what I am seeing it doesn't seem to make a difference whether I use the layerPointToLatlng() or the containerPointToLatlng() function.
I have a leaflet circle with a radius, how do I convert the radius to nautical miles in javascript?
Note that for Leaflet's circle, the radius corresponds to meters (see L.circle). Then you can convert meters directly into nautical miles.
Note that L.circle is just an approximation:
It's an approximation and starts to diverge from a real circle closer to poles (due to projection distortion).
To draw a gedetically accurate circle, use something like Leaflet.Geodesy.
A quick JS function to convert meters to miles -
function metersToMiles(meters){
if (isNaN(meters)){
console.log("meters is not a number");
return 0;
}
return meters/1852;
}
Also a good thing to note is that the draw tools for leaflet.draw have a way to draw a circle with nautical miles as the unit of measure -
draw: {
circle: {
metric: false,
feet: false,
nautic: true
}
}
leaflet draw documentation link
It looks like there is a "readableDistance" on the L.GeometryUtil object too but I only used the code above so I am not sure how that would work.
I want to use ImageOverlays as markers, because I want the images to scale with zoom. Markers icons always resize to keep their size the same when you zoom.
My problem is that I can't figure out how to transform pixels to cords, so my image isn't stretched.
For instance, I decided my south-west LatLng to be [50, 50]. My image dimensions are 24px/24px.
How do I calculate the north-east LatLng based on the image pixels?
You are probably looking for map conversion methods.
In particular, you could use:
latLngToContainerPoint: Given a geographical coordinate, returns the corresponding pixel coordinate relative to the map container.
containerPointToLatLng: Given a pixel coordinate relative to the map container, returns the corresponding geographical coordinate (for the current zoom level).
// 1) Convert LatLng into container pixel position.
var originPoint = map.latLngToContainerPoint(originLatLng);
// 2) Add the image pixel dimensions.
// Positive x to go right (East).
// Negative y to go up (North).
var nextCornerPoint = originPoint.add({x: 24, y: -24});
// 3) Convert back into LatLng.
var nextCornerLatLng = map.containerPointToLatLng(nextCornerPoint);
var imageOverlay = L.imageOverlay(
'path/to/image',
[originLatLng, nextCornerLatLng]
).addTo(map);
Demo: http://playground-leaflet.rhcloud.com/tehi/1/edit?html,output
Extremely new to OpenLayers and trying to draw a circle on a map around a clicked origin. I have this code -
circleLayer = new OpenLayers.Layer.Vector "Circle Search"
circle = new OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(lat,lon),
100,
30
)
console.log(circle)
feature = new OpenLayers.Feature.Vector(circle)
circleLayer.addFeatures(feature)
mapApp.map.openLayersMap.addLayer circleLayer
But the circle is not showing up, and I'm not sure why. Can anyone tell me?
Are you converting your lat lon to the projection used by your map?
Test:
Try using 0,0 for lon,lat with a bigger circle and see if it appears off the coast of east-central Africa.
If that's the problem then here's how you do the transform:
add at the top:
projLatLon = new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
projMap = new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
then the third line of your example code becomes:
new OpenLayers.Geometry.Point(lat,lon).transform(projLatLon,projMap),
I need to draw a circle of a radius 1.23 metre on MkMapView using MKCircle.
How would i show that on the map.
I used the following ,
r = 1.23;// in metres.
circle = [MKCircle circleWithCenterCoordinate:location radius:r];
But when i draw it on the map it looks like more than 1km on the MKMapView.
Could someone please tell me how i could represent a circle of radius 1.23 metre on the map??
This is mainly to show the accuracy of the location, so the radius indicates the accuracy of the location.
In the viewForOverlay delegate method, try setting the lineWidth of the MKCircleView to 1.
I think the default width of 0 results in the "road width".
MKCircle class definition says
radius
The radius of the circle, measured in meters from the center point.
So your code should work fine.
Source: http://developer.apple.com/library/ios/#DOCUMENTATION/MapKit/Reference/MKCircle_class/Reference/Reference.html