Develop Reference

Matter.js: after call setVertices on body his collisions are not updated

I use matter.js physic engine for my game. I updated body vertices with call setVertices but after call his collisions are not updated, so other object does not fall.
Maybe I skipped some basic principles of using matter.js so I present short version of using them, if this is not enough I will create a separate working example.
// Init engine
const engine = Engine.create();
const runner = Runner.create();
Runner.run(runner, engine);
// Add circle for check collision
const circle = Bodies.polygon(300, 100, 5, 12, {
frictionAir: 0, friction: 0.0001, restitution: 0.6
});
World.add(engine.world, circle);
// Create a body from vertex (parsed from svg path)
// Original vertexes
const mapVertexes = [[..]];
const ground = Bodies.fromVertices(400, 400, mapVertexes, { isStatic: true }, true);
World.add(engine.world, ground);
// On click to update vertices for polygon
const newVertices = [...]
Body.setVertices(ground, newVertices);
Before update vertices:
After update vertices:

Leaflet: Edit button not enabled when drawing over an ImageLayer

All:
Perhaps I am not doing this the correct way. The way Leaflet draw works is that as soon as you draw something on a map using the draw control (circle, square, polygon, whatever) the delete/edit button becomes enabled. In my map, with clicks of links on my web page that contains the Leaflet map, a user can add many imageOverlays, but lets just say for this scenario the user clicked and added one imageOverlay. The imageOverlay appears fine on the map. Now the user wants to draw a shape - say a circle - on the map. When the user clicks on the circle icon in the draw control and paints it on the map the delete/edit button does NOT become enabled. I am stumped. I suspect that this may have something to do with layers /layering. I need to have that delete/edit button behave as it would if there were no imageLayers on the map. Can somebody please enlighten me? Thank you.
My React.js code adds the imageLayers to array and the array of images is then added to a L.featureGroup.
When drawing a shape, the layertype is added to the same L.featureGroup.
My code:
In React.js:
let myFeatureGroup = new L.FeatureGroup();
let imageLayersArray = [];
// My function to load imageLayers:
const applyLayer = (mapSubType) => {
const mapSubTypeCaps = mapSubType.toUpperCase();
let dlaBounds = null;
const someOptions = {
opacity: 0.3,
interactive: true,
bubblingMouseEvents: true,
className: 'imageborder',
zIndex: 5,
mapsubtypelayer: mapSubType, // required in order to identify a layer upon removal
};
// The 8 PNG image coordinates:
const ImageCoords = [
[[-90, 0], [0, 90]],
[[0, 0], [90, 90]],
[[-90, -90], [0, 0]],
[[0, -90], [90, 0]],
[[-180, 0], [-90, 90]],
[[90, 0], [180, 90]],
[[-180, -90], [-90, 0]],
[[90, -90], [180, 0]],
];
let counter = 0;
ImageCoords.map((coordEntry) => {
counter++;
const useThisURL = `https://dla-maps-storage.s3.amazonaws.com/DLAMAP${mapSubTypeCaps}${counter}.png`;
// Need to flip the coordinates from lng/lat to lat/lng for leaflet:
let arrayofcoordinates = [];
const flippedarrayofcoordinates = [];
arrayofcoordinates = coordEntry;
arrayofcoordinates.map((pairofcoordinates) => {
const workAry = [];
// flip the coordinates from lng/lat config to lat/lng:
workAry[0] = pairofcoordinates[1];
workAry[1] = pairofcoordinates[0];
flippedarrayofcoordinates.push(workAry);
});
dlaBounds = L.latLngBounds(flippedarrayofcoordinates);
const anImage = L.imageOverlay(
useThisURL,
dlaBounds,
someOptions,
)
// add the imagelayer to the imageLayersArray:
// Somebody along the way recommended to do this
imageLayersArray.push(anImage);
anImage.on('click', (leafletEvent) => {
handleImageClick(leafletEvent);
});
});
myFeatureGroup = L.featureGroup(imageLayersArray).addTo(map);
};
// Draw Event Created:
map.on(L.Draw.Event.CREATED, (e) => {
console.log('L.Draw.Event.CREATED start:: ');
const { layer } = e;
switch (e.layerType) { // types: polyline, polygon, rectangle
case 'circle':
// Call rest endpoint with lat/lng coordinates
break;
case 'marker':
// Call rest endpoint with lat/lng coordinates
break;
case 'polyline':
// Call rest endpoint with lat/lng coordinates
break;
default:
// POLYGON OR RECTANGLE DRAWN:
// Call rest endpoint with lat/lng coordinates
break;
}
myFeatureGroup.addLayer(layer);
console.log('L.Draw.Event.CREATED end:: ');
});

Leaflet: Getting Latitude/Longitude in createTile using CRS.Simple

I have a simple fictional map that I want to control using Leaflet. It is a flat 2D plane and its "latitude/longitude"/coordinate system spans from [0,0] to [999,999].
I have customized the map as follows:
window.map = L.map('leaflet-map', {
crs: L.CRS.Simple,
center: [500, 500],
zoom: 13,
maxBounds: [
[0, 0],
[999, 999],
],
layers: [new MyLayer()],
});
To draw this map, I've created a new layer, MyLayer, which extends gridLayer:
export var MyLayer = GridLayer.extend({
createTile: function(coords, done) {
var error;
var xmlhttprequest = new XMLHttpRequest();
xmlhttprequest.addEventListener('readystatechange', function() {
done(error, dothething());
});
xmlhttprequest.open('GET', /* url */);
xmlhttprequest.send();
},
});
The problem I have is the URL accepts the [0,0] to [999,999] coordinate system as parameters but I can't find how to actually get those. I understand there may be some decimal element but I can floor that as appropriate.
When centered on [500, 500, 13] the coords object contains { x: 15516, y: -21558, z: 13 }. When passed to L.CRS.Simple.pointToLatLng(coords, coords.z) I get { lat: 2.631591796875, lng: 1.89404296875 }.
I've downloaded the source code in an attempt to understand how this transformation happens from Map._move(center, zoom, data) but all that appears to do is call this.options.crs.latLngToPoint(), which is exactly what I reverse in L.CRS.Simple.pointToLatLng. I'm frankly at a loss.

First of all, I encourage you to read the Leaflet tutorial on L.CRS.Simple once again. Let me quote a relevant bit from there :
In a CRS.Simple, one horizontal map unit is mapped to one horizontal pixel, and idem with vertical. [...] we can set minZoom to values lower than zero:
So you have no reason to go down to zoom level 13 on your L.CRS.Simple map by default, really. For a [0,0]-[999,999] map, use zoom level zero for an overview, or use map.fitBounds([[0,0],[999,999]]).
The values that the createTile() method receives are tile coordinates, not CRS coordinates. A level-0 tile is split into four level-1 tiles, sixteen level-2 tiles, 64 level-3 tiles, and so on, up to 2^13 tiles at level 13. This is easier to visualize by playing with a L.GridLayer that displays the tile coordinates, like:
var grid = L.gridLayer({
attribution: 'Grid Layer',
// tileSize: L.point(100, 100),
});
grid.createTile = function (coords) {
var tile = L.DomUtil.create('div', 'tile-coords');
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
return tile;
};
map.addLayer(grid);
Second: you want to use the internal _tileCoordsToBounds method, defined at L.GridLayer. Give it a set of tile coordinates, and you'll get back a L.LatLngBounds with the area covered by such a tile.
The following example (try it live here) should put you on track. Remember to read the documentation for L.LatLngBounds as well.
var grid = L.gridLayer({
attribution: 'Grid Layer',
// tileSize: L.point(100, 100),
});
grid.createTile = function (coords) {
var tile = L.DomUtil.create('div', 'tile-coords');
var tileBounds = this._tileCoordsToBounds(coords);
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ') +
"<br>" + tileBounds.toBBoxString();
return tile;
};
map.addLayer(grid);

Is there a way make a reusable shape object?

I'm using LeafletJS to make a custom lab layout map and I plan to put in some rectangle layers to show whether or not areas are in use. Currently I have a working test case using coordinates to define each shape, but is there a way I can create a standard sized shape object which can be called and fed a single coordinate to center itself on?
Here is the current code from my Angular controller if it helps.
function showMap() {
var map = L.map('mapid', {
crs: L.CRS.Simple,
maxZoom: 4,
attributionControl: false
}).setView([0, 0], 1),
southWest = map.unproject([0, 4096], map.getMaxZoom()),
northEast = map.unproject([4096, 0], map.getMaxZoom()),
bounds = L.latLngBounds(southWest, northEast);
L.tileLayer('images/4231/{z}/{x}/{y}.png', {
minZoom: 1,
maxZoom: 4,
center: [0, 0],
noWrap: true,
bounds: bounds
}).addTo(map);
var testBench = [{
number: "1A1",
coord1: "-48.6",
coord2: "6",
coord3: "-81.4",
coord4: "71",
inUse: true
}, {
number: "1A2",
coord1: "-48.5",
coord2: "71",
coord3: "-81",
coord4: "137",
inUse: false
}, {
number: "1A3",
coord1: "-48.5",
coord2: "137",
coord3: "-81",
coord4: "202",
inUse: true
}];
angular.forEach(testBench, function(item, index) {
var location = [
[item.coord1, item.coord2],
[item.coord3, item.coord4]
],
color;
switch (item.inUse) {
case true:
color = "red"
break;
case false:
color = "green"
break;
}
L.rectangle(location, {
color: color,
weight: 1
}).bindPopup("Bench Number is: " + item.number).addTo(map);
})
map.setMaxBounds(bounds);
}
Eventually the bench info will be pulled from a DB rather than a variable and there will be hundreds of benches, so I'm looking to streamline the positioning layout as much as possible.

is there a way I can create a standard sized shape object which can be called and fed a single coordinate to center itself on?
In Leaflet, no.
Leaflet vector features, or L.Paths (L.Polylines and L.Polygons) are defined by their coordinates, not by their centroid and a series of offsets to that centroid.
You might want to implement a simple Factory design pattern to create regularly-shaped features giving only a center point, though.

Extending the default OpenLayers edit style?

I have a vector style, with a larger image: radius. I would like to have the select interaction's style match the vector style's image: radius.
How can I do so without manually redefining the whole editing style based on this page in the documentation?
Is it possible to take the default style and override only one part? Like the image's radius? Or at least redefine only the whole image?

Fiddle.
Share a style function between ol.layer.Vector and ol.interaction.Select and when selecting, change a variable that will be read within your function:
var radius = 10;
var styleFunction = function() {
return [
new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
fill: new ol.style.Fill({
color: 'green'
})
})
})
];
};
var select_interaction = new ol.interaction.Select({
style: styleFunction
});
select_interaction.on('select', function(evt) {
radius = evt.selected.length > 0 ? 20 : 10;
});
I'm proposing a ol.style.Circle#setRadius that could be used in this case.