Allow for offset on center of map.

[zzolo]

Hi. It would be super awesome to be able to offset the center of the map relative to the viewport. My main use case is that I have a large box overlaying the map on the left, and would like the center of the map to be more to the right. This means that when I do a pan or center, it would actually be offset a certain amount of pixels or percentage of viewport. This would be a map level setting.

I have wanted this feature in many JS mapping libraries but have not found it yet. Unfortunately, it needs to be pretty low level in the API.

Sorry, I don't have any code, was just thinking about and wanted to get it down.

Thanks for the awesome project!

[mourner]

It's actually pretty easy in Leaflet. What you need is map.containerPointToLatLng method. It converts some pixel coordinate relative to top left corner of the map into geographical location. So you do something like this:

var centerPoint = map.getSize().divideBy(2),
    targetPoint = centerPoint.subtract([overlayWidth, 0]),
    targetLatLng = map.containerPointToLatLng(centerPoint);

map.panTo(targetLatLng);

Does this solve your use case?

[zzolo]

Hey. It sort of does, and is probably good enough. But, the issue here is that it assumes that the viewport is where you want to center, then offset it, so it would be a two step movement. As opposed to taking in a lat-lng, offseting, then panning; a single movement.

[mourner]

Oh, my calculations are not correct. You need to set actual map center in such way that the offset center is in the target point, and the offset will equal overlayWidth / 2. So here's the working code for a single movement:

var targetPoint = map.project(targetLatLng, targetZoom).subtract([overlayWidth / 2, 0]),
    targetLatLng = map.unproject(targetPoint, targetZoom);

map.setView(targetLatLng, targetZoom);

[ajbeaven]

This is the same case that we had too - a slightly opaque sidebar overlayed on top of the map. Whenever we called fitBounds(), it would be a little off and we would need to do another movement in order to get it right. We were considering a pull request for this but ended up just moving the sidebar to be next to the map as we figured it might be a bit of work and didn't think it was a common enough use case.

[zzolo]

@mourner That makes a lot of sense. I guess I missed the project() methods. This does handle most of my use case. Many thanks.

Like @ajbeaven, an offset fitBounds for a (GeoJSON) layer would be super awesome, but this seems like it would be a lot more complicated. I don't think just offsetting is good enough, as the bounds of the viewport are effectively changing, nor would I know how to do it in one call.

Either way, feel free to close this out if it doesn't make sense to add in the library itself. I think I can manage my specific project with the your provided code. Thanks.

[mourner]

fitBounds is a bit more verbose but easy too. Just copy-paste this https://github.com/CloudMade/Leaflet/blob/master/src/map/Map.js#L275 method, modifying what size it uses, and then use

var targetZoom = altGetBoundsZoom(map, bounds);
// ... calculate targetLatLng as above
map.setView(targetLatLng, targetZoom);

[david-sabata]

Hi. I am using fitBounds with LatLng[] as a parameter and I tried to use code snippets you provided above, but with no luck.
My web has a sidebar overlay where I want the map to be visible underneath, but I'd like to prevent markers to appear under this overlay. (It would be great to offset the map center too, but that can be done manually.)

Could you please post a full code snippet for fitBounds on offset map?
I'm quite confused by what you wrote above. The problem is that I don't have any targetLatLng nor targetPoint sice I use array of points.

Btw. it would be really awesome to have an option to define amount of semi-overlayed space on each side of the container, where you'd still draw the map, but wouldn't place any controls on markers there.

[zzolo]

You can see the code I implemented here. (it is by no means a great instance of code, but the idea is there) It is also built into an object that holds a map property that is the Leaflet map. It has the following methods:

appSetView
appSetBounds
appGetBoundsZoom

https://github.com/MinnPost/minnpost-my-boundaries/blob/master/visualizations/index.html#L556

[mourner]

Reopening, as it would be useful to add this functionality built in.

[averrips]

Came across this discussion as I had to have a list at the left side of the screen of 550px with the map behind it. I decided it would probably be easier to override some base functions of L.Map. Thanks for all your ideas.

Hope I've got them all covered, but I'm not 100% sure.

MapCenterOffsetMixin = {
    UIOffset: [550, 0], // x, y
    getBounds: function(){
        var a=this.getPixelBounds(),
            b=this.unproject(new L.Point(a.min.x+this.UIOffset[0],a.max.y+this.UIOffset[1]), this._zoom,!0),
            c=this.unproject(new L.Point(a.max.x,a.min.y),this._zoom,!0);
            return new L.LatLngBounds(b,c)
    },
    _latLngToNewLayerPoint: function (latlng, newZoom, newCenter) {
        var targetPoint = this.project(newCenter, newCenter).subtract([this.UIOffset[0]/2, this.UIOffset[1]/2]),
            newCenter = this.unproject(targetPoint, newZoom);
        var topLeft = this._getNewTopLeftPoint(newCenter, newZoom).add(this._getMapPanePos());
        return this.project(latlng, newZoom)._subtract(topLeft);
    },
    _getCenterLayerPoint: function () {
        return this.containerPointToLayerPoint(this.getSize().divideBy(2).add([this.UIOffset[0]/2, this.UIOffset[1]/2]));
    },
    _resetView: function (a, b, c, d) {
        var e = this._zoom !== b;
        // Change the center
        var targetPoint = this.project(a, b).subtract([this.UIOffset[0] / 2, this.UIOffset[1]/2]),
            a = this.unproject(targetPoint, b);
        d || (this.fire("movestart"), e && this.fire("zoomstart")), this._zoom = b, this._initialTopLeftPoint = this._getNewTopLeftPoint(a);
        if (!c) L.DomUtil.setPosition(this._mapPane, new L.Point(0, 0));
        else {
            var f = L.DomUtil.getPosition(this._mapPane);
            this._initialTopLeftPoint._add(f)
        }
        this._tileLayersToLoad = this._tileLayersNum, this.fire("viewreset", {
            hard: !c
        }), this.fire("move"), (e || d) && this.fire("zoomend"), this.fire("moveend"), this._loaded || (this._loaded = !0, this.fire("load"))
    }
}

L.Map.include(MapCenterOffsetMixin);

[aphelionz]

@averrips Thanks for posting that. Your solution is working well for me currently... except that the zoom controls are broken in Firefox now :( I'm getting the sort of "catchall" error: TypeError: t is undefined