I’m using GoJS over Leaflet using typescript, and I’m attempting to override DragZoomingTool so it will behave according to Leaflet’s typical behavior which is that a zoom is effected on shift, drag to create a bounding box.
See Implementing Drag Zooming Tool in TS / Angular 2+ for some history.
I’m having a problem where the Rect’s coordinates are not translating to expected latlongs. I have all of my other diagram parts correctly positioning on the map, and for them the .containerPointToLatLong is working fine during binding conversion, so I’m not sure what is special about this case.
Here’s my extension:
export class MapDragZoomingTool extends DragZoomingTool {
public readonly name: string = “MapDragZooming”;
private _theMap : L.Map;
constructor(leafletMap: L.Map) {
super();
this._theMap = leafletMap;
}
public doActivate() {
if (!this.diagram.lastInput.shift) return;
DragZoomingTool.prototype.doActivate.call(this);
this.doMouseMove();
};
public doDeactivate() {
if (!this.diagram.lastInput.shift) return;
DragZoomingTool.prototype.doDeactivate.call(this);
};
public doMouseMove() {
if (!this.diagram.lastInput.shift) return;
this._theMap.dragging.disable();
DragZoomingTool.prototype.doMouseMove.call(this);
};
public doMouseUp() {
this._theMap.dragging.enable();
DragZoomingTool.prototype.doMouseUp.call(this);
};
public zoomToRect(r: go.Rect) {
if (r.width < 0.1) return;
let observed = this.zoomedDiagram;
if (observed === null) observed = this.diagram;
if (observed === null) return;
let ll_topleft = (this._theMap.containerPointToLatLng([r.top, r.left]));
let ll_bottomright = (this._theMap.containerPointToLatLng([r.bottom, r.right]));
console.log("top, left, bottom, right:", r.top, r.left, r.bottom, r.right);
console.log("ll_topleft:", ll_topleft);
console.log("ll_bottomright:", ll_bottomright);
console.log("fitting bounds:", [[ll_topleft.lat, ll_topleft.lng], [ll_bottomright.lat, ll_bottomright.lng]]);
this._theMap.fitBounds([[ll_topleft.lat, ll_topleft.lng], [ll_bottomright.lat, ll_bottomright.lng]]);
};
}
Here is the console dump of me selecting around downtown Houston:
The location calculated by .containerPointToLatLong is somewhere north east. The commonality is that the calculated places are north east. Can you see any issue with my logic for capturing the rectangle and converting to lat/long?
Thanks,
K