I am attempting to draw a circle on the map with a radius in KM. However, the circle isn't drawn the correct size.
If call the plotPoint({'lat'=>35.055615,'lon'=>-85.311179,'radius'=>1000})
You can see that the circle is displayed, however, it's not immediately apparent that the circle is too small.
I verified the size by visiting:
https://appelsiini.net/circles/?c=35.055615,-85.311179,1000
You can see that the circle is larger and encompasses more area. Moving beyond Manufactures Road in the examples.
I know that my version is smaller, because I have been working on trilateration points. While my points appear in the correct location and the calculations are all correct, VISUALLY, the circles don't touch.
Does anyone know why my circles are smaller?
Code
let attribution = new ol.control.Attribution({
collapsible: true
});
let center = ol.proj.transform([center_point[0], center_point[1]], 'EPSG:4326', 'EPSG:3857');
let baseMapLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
let map_view = new ol.View({
center: center,
maxZoom: 18,
zoom: 12
});
let map = new ol.Map({
controls: ol.control.defaults({attribution: false}).extend([attribution]),
layers: [baseMapLayer],
loadTilesWhileAnimating: true,
target: 'map',
view: map_view,
});
let features = [];
let vectorSource = new ol.source.Vector({
projection: 'EPSG:4326'
});
let vectorLayer = new ol.layer.Vector({
source: vectorSource,
updateWhileAnimating: true,
updateWhileInteracting: true,
});
function buildFeature(point) {
console.log(point.lat, point.lon);
let feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([point.lon, point.lat], 'EPSG:4326', 'EPSG:3857')),
});
let circleStyle = new ol.style.Style({
geometry: function (feature) {
return new ol.geom.Circle(feature.getGeometry().getCoordinates(), point.radius);
},
stroke: new ol.style.Stroke({color: '#2E86C1', width: 2})
});
feature.setStyle(circleStyle);
return feature;
}
function plotPoint(point) {
vectorSource.addFeature(buildFeature(point));
map.addLayer(vectorLayer);
}