Option to position and size components with two corners. (#580)

* Option to position components with two corners.

This lets you lock a component to a specific bounding rectangle, which allows for precise tiling during zoom.

* Add a comment explaining two point positioning.
This commit is contained in:
Matt Togstad 2018-05-16 21:56:31 -05:00 committed by Michael Diego
parent ef8b871d56
commit 92b502bd2d

View File

@ -269,11 +269,33 @@ export default class GoogleMapMarkers extends Component {
? this.props.geoService.fromLatLngToContainerPixel(latLng)
: this.props.geoService.project(latLng);
const stylePtPos = {
let stylePtPos = {
left: pt.x,
top: pt.y,
};
// If the component has a southeast corner defined (either as a LatLng, or a separate
// lat and lng pair), set the width and height based on the distance between the northwest
// and the southeast corner to lock the overlay to the correct geographic bounds.
if (
child.props.seLatLng !== undefined ||
(
child.props.seLat !== undefined &&
child.props.seLng !== undefined
)
) {
const seLatLng = child.props.seLatLng !== undefined
? child.props.seLatLng
: {lat: child.props.seLat, lng: child.props.seLng};
const sePt = this.props.projectFromLeftTop
? this.props.geoService.fromLatLngToContainerPixel(seLatLng)
: this.props.geoService.project(seLatLng);
stylePtPos.width = sePt.x - pt.x;
stylePtPos.height = sePt.y - pt.y;
}
let dx = 0;
let dy = 0;