We Keep Coding

How to update rectangle bounds on vertex drag leaflet editable

I have been working with leaflet-editable.js to allow the editing of shapes. Specifically I am creating a rectangle that will maintain an aspect ratio of 4:3 when a corner is dragged. I have created a function to calculate the aspect ratio and return the lat/lng of where the new corners should be drawn.
I have attached this function to the event "editable:vertex:drag".
I'm not sure how to update the actual drawing of the rectangle to keep the scale. I have tried setting the object properties to the new bounds which updates but doesn't change the rectangle.
I think the answer is in refreshing the drawing of the rectangle but I don't know how to get the current rectangle instance nor how to refresh it.
Javascript is new for me
carto.on('editable:vertex:drag', function(e) {
console.log(e);
var cornersNe = e.vertex.latlngs[0], //ne
cornersNw = e.vertex.latlngs[1], //nw
cornersSw = e.vertex.latlngs[2], //sw
cornersSe = e.vertex.latlngs[3]; //se
var distanceWidth = carto.distance(cornersNw, cornersNe).toFixed(2);
var distanceHeight = carto.distance(cornersSw, cornersNw).toFixed(2);
var asR = aspectRatio(distanceWidth, distanceHeight, e.latlng.lat, e.latlng.lng);
var index = e.vertex.getIndex(),
next = e.vertex.getNext(),
previous = e.vertex.getPrevious(),
oppositeIndex = (index + 2) % 4,
opposite = e.vertex.latlngs[oppositeIndex],
bounds = new L.LatLngBounds(asR, opposite);
// L.marker(bounds).addTo(carto);
console.log('first set of bounds ', e.layer._bounds);
console.log('bounds to set ', bounds);
e.layer._bounds = bounds;
console.log('Updated set ',e.layer._bounds);
I am open to other ways of doing it if this is too roundabout.

Use the public function to set the bounds:
e.layer.setBounds(bounds);

Project lat/long to pixels

I´m making an app for smartwatches, where I need to draw the track user is currently using. The track consists of lat/long pairs.
So far I´ve tried many functions, but with this one below I got most consistent results yet there are tracks, that got deformed, like squashed or the route was shifted.
function transformToPixels(lat, lon){
var westLongitude = boundingBox[1].toDegrees()[1];
var eastLongitude = boundingBox[0].toDegrees()[1];
var northLatitude = boundingBox[1].toDegrees()[0];
var southLatitude = boundingBox[0].toDegrees()[0];
var longitudeDiff = eastLongitude - westLongitude;
var latitudeDiff = northLatitude - southLatitude;
var xPixel = (((eastLongitude - lon) / (longitudeDiff).toDouble()) * DISPLAY_WIDTH).toNumber();
var yPixel = (((northLatitude - lat) / (latitudeDiff).toDouble()) * DISPLAY_HEIGHT).toNumber();
var result = new [2];
result[1] = xPixel - 3; //had to try/error these numbers to fit the line on the display
result[0] = yPixel + 25; //had to try/error these numbers to fit the line on the display
return result;
}
Here is the route drawn on phone from lat/long pairs:
And here is drawn on the smartwatch by projecting the same lat/long to X,Y pixels:
Then there is another route:
And here is drawn on the smartwatch by projecting the same lat/long to X,Y pixels:
Here are the GeoJsons from which I get the lat/long pairs.
This one is working fine: https://pastebin.com/1vx8S98V
This one gets deformed: https://pastebin.com/4Mt4MpEq
I don´t need meter-perfect conversion, but the shape of the route shouldn´t be changed.

amcharts - how to set lat/lon in mappolygon?

Basically, I just want to plot a circle, at a user defined lat/lon with a radius of X km.
So I realize looking through documentation, I can't change the lat/lons of the mappolygons that are already loaded through the geodata, but I guess I'm not quite sure how to create a new map polygon with a specified lat/lon or if I can even do that!
My code is set up so that everytime the user clicks somewhere a marker is plotted or replotted accordingly, the location of the marker is where I would like to plot the center of the circle. I get that using the getCircle function I need to do the whole km2deg for the third variable, but I'm more concerned with the location right now. Any help would be great!
https://codepen.io/kbreezy/pen/wLRrPq
below is my onclick method of the code.
chart.seriesContainer.events.on("hit", function(ev) {
var lp = $("#chartdiv").data("point");
var coords = chart.svgPointToGeo(ev.svgPoint);
if (lp) {
lp.latitude = coords.latitude;
lp.longitude = coords.longitude;
} else {
var marker = imageSeries.mapImages.create();
marker.latitude = coords.latitude;
marker.longitude = coords.longitude;
}
$("#chartdiv").data("point", marker);
var circleSeries = chart.series.push(new am4maps.MapPolygonSeries())
var circleTemplate = circleSeries.mapPolygons.template;
circleTemplate.fill = am4core.color("#bf7569");
circleTemplate.strokeOpacity = 1;
circleTemplate.fillOpacity = 0.75;
var polygon = circleSeries.mapPolygons.create();
var mapPolygon = polygonSeries.getPolygonById("DE");
mapPolygon.setPropertyValue('latitude', coords.latitude);
mapPolygon.setPropertyValue('longitude', coords.longitude);
polygon.latitude = coords.latitude;
polygon.longitude = coords.longitude;
polygon.multiPolygon = am4maps.getCircle(mapPolygon.visualLongitude, mapPolygon.visualLatitude, 5);
//polygon.multiPolygon = am4maps.getCircle(coords.latitude, coords.longitude, 5);
});

MapPolygon does not have some latitude/longitude where you could "move" it. It's multipolygon must contain coordinates of the area you want to show. So when you pass longitude/latitude to the getCircle method, it returns multiPolygon around that point.
I modified your pen where to show the concept: https://codepen.io/team/amcharts/pen/ydrLZw
polygon.multiPolygon = am4maps.getCircle(coords.longitude, coords.latitude, 5);

How to get map.getBounds() as a list of 4 floats?

I'd like to get the coordinates of map bounds as a list of 4 floats (i.e. two points in latitude/longitude coordinates).
This (Google maps undocumented feature) used to work until a few days ago:
var b = map.getBounds();
var bounds = [b.H.H, b.H.j, b.j.j, b.j.H];
It doesn't work anymore. How to get these 4 floats ?

function getRectFromBounds(bounds) {
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
return [ne.lat(), ne.lng(), sw.lat(), sw.lng()];
};
var rect = getRectFromBounds(map.getBounds());
you can extend LatLngBounds and create a utility function to return this array, something like map.getBounds().toRect()

Google Maps: How to zoom out to all locations on map

I am developing am app that shows a list of different places using google maps, i have everything working fine and working with currentLocation and the closestsLocation and it zooms to show this, but I have tried to change this to set it so that it zooms out to show all the buildings and not just the closest one
EDIT: this is the working code
// Sets the bounds of the map to include at lease one visable marker
function setBounds(){
if ( markerCluster.getMarkers().length > 0 && homeMarker != null){
map.setZoom(17);
var visableMarkers = markerCluster.getMarkers();
// want to set the starting position at the homeMarker
//Make an array of the LatLng's of the markers you want to show
var LatLngList = new Array ();
LatLngList.push(homeMarker.position);
$.each(visableMarkers, function() {
LatLngList.push(this.position);
});
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds);
}
}

The code for your array LatLngList is incorrect, I think it should say
var LatLngList = new Array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017));