How to get diagonal of a bounding box? - javascript

I'm facing a simple problem but I don't know how to solve it!
I would like to get the diagonal of a boundingbox. I'm working on a Leaflet map and I have to get the diagonal of the current grip (emprise in French).
I'm able to get the current bounding box but I don't know to calculate the diagonal of this.
I know that the diagonal of a rectangle is diagonal = \sqrt(side1^2 + side2^2). But I don't know how to do this with coordinates (of my bounding box).

Leaflet supports both pixel based bounding boxes through Bound and Geo Coordinate bounding boxes through LatLonBounds
Use the Point.distanceTo(OtherPoint) method:
p1.distanceTo(p2);

Related

Calculate bounding box coordinates from the coordinates of an SVG text object

I'm currently trying to figure out how SVG.js calculates the corrected bounding box x, y coordinates (top left corner) from an SVG text object.
My SVG object looks like the following:
<svg xmlns="http://www.w3.org/2000/svg" width="266" height="59" viewBox="0 0 266 59">
<text id="TText" data-name="TText" fill="#707070" font-size="50" font-family="Boogaloo"><tspan x="0" y="0">TText</tspan></text>
</svg>
If I add this code into SVG.js then the position is y-offset by 11 pixels (which I assume is the position when taking into consideration that SVG is based on the baseline). Can someone explain how the bounding box x and y coordinates are calculated. I tried to solve it by digging through the SVG.js repo, but couldn't solve it myself.
I would assume this is based on the font? If that's the case how does one extract that information out of a font file?
Here's my SVG.js code, that shows the corrected X, Y bounding box coordinates.
var draw = SVG().addTo('body');
var text = draw.text('TText');
text.font({
family: 'Boogaloo',
size: 50,
});
console.log(text.bbox());
The simple answer is: we use the browser api to get the bounding box (el.getBBox()). Our bbox() method is just a simple wrapper around that. In case of text we don't calculate any corrected bounding box. We have some magic involved when moving the text because text is normally moved by its baseline but we unified the api so that all shapes are moved by their upper left corner.
If you want to know how a browser calculates the bounding box of text, you can have a look at this answer: reproduce Bounding Box of text in Browsers
TL:DR the numbers you get are different from browser to browser. And ofc you need the font file

move rotated ol.style.text relative to a given point in openlayers 3

I will try to explain what I'm trying to accomplish.
I have a point feature to which I set an array of 2 styles: 1 style represents a rotated image at the given point, the second one should be a rotated text at a fixed distance of the given point.
To clarify things I've created an image. I want to achieve the situation on the right. (the x,y,z lines and labels are for explanation purposes). I want to move the text over a fixed distance z. The rotation angle is also variable.
So what I did was give a rotation to the ol.style.text object and then give the text an offset for Y but then the text gets pulled straight below the point.
What I am looking for is a method to offset the text for a given distance, taking the rotation in account, without having to manually set the ofssetX and offsetY.
One solution here is indeed to use geometry.. calculate x and y offset based on the angles and the given z , using the sin formulas and the Pythagorean theorem, but I would like to avoid those calculations and find a more simple resolution.
I am using the latest version of openlayers3, currently v3.16.0
Thanks in advance.

How to place a label in an area outside of an SVG path?

I'm creating an HTML5 canvas mapping app that uses the D3 contour plugin to generate an SVG. I need to label the centroid of certain areas that are outside of a calculated path.
For example, I'd like to place a label inside each of the two blue regions:
The green region is an SVG path calculated by D3, and the blue "water" regions are the background showing through areas not covered by the "land" polygon.
I have used .getBBox() for other polygons that have D3-generated paths, but for these regions, the bounding box is the entire SVG.
This codepen demonstrates placing a label on the "land" section of SVG, using .getBBox() - in this example I would like to place a second label on the blue "water" section in the lower right corner.
Thanks for your advice!
You has a concept error. getBBox works well and do what it must to do:
Step 1: You draw WATER
Step 2: Draw the land contour, layer by layer. (Overlaping WATER)
Step 3: get the LAND boundary box (getBBox). And put the label on the center
Step 4: get the WATER boundary box (getBBox). And put the label on the center
At the end you can't see the WATER label:
Posible solution A: Consider WATER level as another layer (modding your data)
Posible solution B: This is just a thought: you can create a mask from the very low layer and used to mask the WATER box as cookie cutter. I think getBBox will give you the right size the final shape.
Recomendation: Try it on differents browsers. Firefox has a bug with getBBox: You can see it here: https://bugzilla.mozilla.org/show_bug.cgi?id=612118 Not solved yet

Leaflet JavaScript Bounding Box Example?

I am totally new to Leaflet JavaScript. Basically I need to program something that:
Allow drawing a bounding box over a map
Get the coordinate of the box
Later on draw the box based on the coordinates
Clear the box
Anya ideas or examples how to do this? Or where to find them?
Thanks
There's a plugin called Leaflet.draw that adds support for drawing and editing vectors and markers onto Leaflet maps. On this link you will find enough information to implement a simple rectangle that will be your bounding box.
With this piece of code you can get the position of the mouse pointer on the map (you just need to create one handler for the mouse down, and the other on mouse up)
map.on('click', onMapClick);
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
3.Draw the box based on coordinates:
var bounds = [[X, Y], [X, Y]];
// create an orange rectangle
var boundingBox = L.rectangle(bounds, {color: "#ff7800", weight: 1});
map.addLayer(boundingBox);
4. Clear the box:
map.removeLayer(boundingBox);

How to pan and zoom to fit an element with SvgPanZoom

I'm using svg-pan-zoom library and I need to pan/zoom the view to fit a particular element.
I could use fit method but it fits the whole content in this case I need to fit only one particular element.
Another option can be to calculate the pan and zoom required and use the custom control, but how to get the pan/zoom of an element to fit the window?
UPDATE
I tried to follow the #bumbu "easier" solution. That was my first thought but I have encountered some troubled with the zooming point position.
This is a fiddle to show the expected behaviour and the calculation attempt.
http://jsfiddle.net/mgv5fuyw/2/
this is the calculation:
var bb=$("#target")[0].getBBox();
var x=bb.x+bb.width/2;
var y=bb.y+bb.height/2;
But somehow the zooming center expected (225,225) is not the right one.
I found a solution panning before zooming, I could not find the right way to use zoomAtPoint() method.
http://jsfiddle.net/mgv5fuyw/3/
var bb=$("#target")[0].getBBox();
var vbb=panZoomInstance.getSizes().viewBox;
var x=vbb.width/2-bb.x-bb.width/2;
var y=vbb.height/2-bb.y-bb.height/2;
var rz=panZoomInstance.getSizes().realZoom;
var zoom=vbb.width/bb.width;
panZoomInstance.panBy({x:x*rz,y:y*rz});
panZoomInstance.zoom(zoom);
Without going into detail I'd try 2 approaches:
Easier:
Init the svg-pan-zoom library
Fit and center you SVG
Calculate positions (top-left and bottom-right, or center and size) of the elements you're interested in
Now based on viewport size you should be able to calculate zoom level and center point of each element
Harder:
Figure out relative position of the original objects relative to original viewport
Based on current viewport size you should be able to calculate zoom level and center point of each element

Categories

Resources