We Keep Coding

Input geometry is not a valid Polygon in turf.js

I try to use turf.js and its function intersect in my Leaflet project. My original question can be found here. The problem is I cannot get a proper polygon in order to call it. The idea is to get the waypoints of the calculated route make a polgyon out of them and check where they intersect with a given buffered area.
var testpoint = turf.point([9.9354, 49.799]);
var buffered = turf.buffer(testpoint, 50, {units: 'meters'});
var array = []
control._routes[0]['coordinates'].forEach(function(e){
array.push([e['lat'],e['lng']])
});
var test = turf.polygon(L.polygon([[array]]))
var intersection = turf.lineIntersect(buffered, test)
I am getting the following error message:
Uncaught Error: Input geometry is not a valid Polygon or MultiPolygon
Here I have to point out that, when using line.intersect(buffered,buffered) it is working correctly, therefore I am assuming that the buffered variable is correct.
When it comes down to the test variable, I have tried with no [], one pair and double pair. But they all result in the same problem. I also tried to pass the array to turf.polygon but it couldn`t be done.

saving and retrieving leaflet.js based non geographical map

I have a SVG based non geographical layout with image overlay.
var map = L.map('map', {
crs: L.CRS.Simple
});
var bounds = [[0,0], [1000,1000]];
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);
map.fitBounds(bounds);
I traced out different shapes on top of this image.
Now i want to retrieve all the shapes drawn, as a json object array and save it to database. Requirement is to replicate the same shapes later some point by fetching the json object array from database. Is it possible in leaflet.js? I want some thing like below
L.getObjectsArray(map) will give me
var leafletAllShapesConfig = [Object1,Object2,Object3,Object4,Object5]
Now reading the object array i can be able to draw the same shapes like L.draw(leafletAllShapesConfig).
Is this possible and any in built method available to achieve the same? If not please give some idea how can i achieve that.

Yes Leaflet has a built in method: L.GeoJson()
Put your shapes into a featuregroup instead to the map.
var fg = L.featureGroup().addTo(map);
L.marker(latlng,options).addTo(fg);
Then you can get the geojson from the featuregroup:
var gjson = fg.toGeoJSON()
Now you can save this geojson as string with: var str = JSON.stringify(gjson)
To add the shapes back to the map use:
var json = JSON.parse(str);
fg.clearLayers() //To clean the map from the shapes
L.geoJSON(json, {
onEachFeature: function(feature, layer) {
//Code
}
}).addTo(fg);
Now you have your shapes back on your map, but without options/properties like color. GeoJson don't convert them too. You can solve this problem by looping through the layers in the featuregroup and add them manually to the gjson and add the layer.options to the gjson.properties.options and later by adding to the map, read the options from gjson out.

After some research over leaflet.js, i figured out an event "pm:drawend" from "geoman-io/leaflet-geoman-free" plugin Github link https://github.com/geoman-io/leaflet-geoman
map.on('pm:drawend', e => {
console.log(e); //Gives array of all shapes including background image and SVG
});
Above snippet gives me an array of all shapes available(including background image and SVG container), the moment i finish adding any active shape. For reference including the output snippet here which served my purpose.
By default leaflet includes background image as first item. Then follows the SVG container(where my map resides), then all shapes.Hope this will be use to some one else.

Add circle to map with carto.js and leaflet libraries

I have to show a circle on feature click on my layer.
When I try to create the circle I have this error: Error: Invalid LatLng object: (41.961124103390674, NaN).
If I print the object before this error I can read: Array [ 41.84664960937685, 12.008056640625 ].
I tried to write values separated but it doesn't work.
How is it possible?
Someone can help me? Thanks and sorry for my english
EDIT
I tried this solution:
layer.getSubLayer(1).on('featureClick', function (event, latlon, pos, data, index) {
var coord = {lat:data.lat, lng:data.lon};
console.log(coord)
L.circle(coord, {radius: data.distance}).addTo(map);
Error and log are the same...
EDIT 2
With this code
var coord = L.latLng(42,21);
var cerchio = L.circle(coord,{radius: data.distance});
console.log(cerchio);
cerchio.addTo(map);
I noticed that circle Object is correctly created, so the problem is on addTo(map) method.

According to the Carto Docs, the latlon argument in your featureClick callback contains:
Array with the LatLng ([lat,lng]) where the layer was clicked.
Is that where you want the circle to be placed? If so, use this line:
L.circle(latlon, {radius: data.distance}).addTo(map);

SOLVED
The correct way is
L.circle([data.lat, data.lon], data.distance, {}).addTo(map);
where data.distance is the radius of circle. Official doc's example L.circle([50.5, 30.5], {radius: 200}).addTo(map); seems to be wrong.

Add 1609*3
var coord = L.latLng(42,21,1609*3);

Getting a central point from an esri multipoint with javascript

I have created a webpage displaying markers on an ersi map using javasvipt.
Data:
MapNorth MapEast
439624 504743
439622 504736
439722 504775
439738 504739
439715 504774
439734 504739
The javascript code:
var points = data.map(function(x){
return [x.MapEast, x.MapNorth];
});
var myMultiPoint = {"geometry":{"points":points,"spatialReference":27700},"symbol":{"color":[255,255,255,64],
"size":6,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle",
"outline":{"color":[0,0,0,255],"width":6,"type":"esriSLS","style":"esriSLSSolid"}}};
var gra = new esri.Graphic(myMultiPoint);
myMap.graphics.add(gra);
var graExtent = esri.graphicsExtent(myMap.graphics.graphics);
myMap.setExtent(graExtent);
What the above code does is plot markers on the map and then zooms into the extent. What my employers want now is for me to find the central point of all of those points and display one marker in the center.
Can this be done? If so and you tell me how?
Thanks
Paul

Couple of things.
Did you know about gis.stackexchange.com? They might better solve your problem.
What you're trying to do is find the centre of a polygon assuming those points aren't all in a line.
Here's a link with an answer to the question I think you're asking https://gis.stackexchange.com/questions/7998/how-can-i-calculate-the-center-point-inside-a-polygon-in-arcgis-9-3
The solution posted there uses getExtent().getCenter() as seen here
var myPolygonCenterLatLon = myPolygon.getExtent().getCenter();

I think what you want to be doing here is instead of creating a Multipoint, create a Polygon from your array of points. Once you have a polygon defined, you can do something like
var myPolygon = new Polygon(points);
var centroid = myPolygon.getCentroid();
This should get you the centroid of the points making up the Polygon.
https://developers.arcgis.com/javascript/jsapi/polygon-amd.html
Note that this requires at least version 3.7 of the JS API, though.

One thing to point out to those trying to using .getCentriod() , make sure your polygon is closed. Your 1st point and Last Point need to be in the same spot. Otherwise it wont work right. ( I ran into this a year ago, not sure if they changed this)

Fabric JS Groups not resizing

I hope you can help. I'm having some trouble programmatically resizing a Group of Fabric JS objects. I add the objects to the canvas using canvas.add(object) and then add them to the group. However when trying to resize the objects as a group, the usual setHeight(), scale() and scaleToWidth/Height() methods seem to have no effect.
My code is in several places, but the essence is:
var obj = ........ // I Get my obj from an SVG path
var objectGroup = new fabric.Group();
canvas.clipTo = function(ctx) {
obj.render(ctx);
}
objectGroup.add(obj);
I also tried objectGroup.addWithUpdate(obj);
Then, after adding more objects to the group; in my resize event, I work out the scale I need and do:
objectGroup.scaleToWidth(newX);
objectGroup.scaleToHeight(newY);
objectGroup.setCoords();
canvas.renderAll();
Am I missing something?? Do I have to add my obj to the canvas as well as rendering it inside the clipTo function?
Thanks in advance :)