Add release tags, please. Otherwise I have to reference this package from bower.json only with * instead of semver ~0.1.0. :-(

bower leaflet-active-area#~0.1.0              ENORESTARGET No tag found that was able to satisfy ~0.1.0

Using the leaflet-1.0 branch:

If using Leaflet 1.0.0-rc.1, when zooming in/out, there is a flickering effect. The new zoom is shown, then the old is briefly shown for a fraction of a second, then the new zoom is re-shown, and stays that way.

The problem does not occur when using the previous version of Leaflet, version 1.0.0-beta.2.rc.2, which is available at:
https://cdnjs.com/libraries/leaflet/1.0.0-beta.2.rc.2

If you place an alert() at line 209, i.e. at the start of the _update function, this shows the effect slowed-down, stage by stage.

I can't see immediately from the Leaflet changelog what might be the relevant change:
https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md

I've been using this plugin to manage active map area, however it seems to disrupt native Leaflet funcs fitBounds and flyToBounds.

When using either func alongside this plugin, the map zooms out all the way (entire world). Disabling usage of this plugin, the two funcs work as expected. Both have padding options (which I don't recall seeing in the past) which I'm going to explore now to manually manage active area.

I don't have a readily available demo (yet), but I'm interested to hear initial thoughts on this.

For the time being I'm disabling this plugin and going further with Leaflet's native capabilities.

I noticed after doing an npm install leaflet-active-area the version I got was 0.0.1; to get the latest I had to explicitly state 1.0.0; not sure why this is but thought I'd save some people the headache of trying to figure out why their code isn't working when using npm or unpkg.

During my application lifecycle I have to limit active area multiple times. After I call setActiveArea() some objects must be clipped, but they are still visible. Otherwise, if objects were hidden before setActiveArea() they appear only if I move map by mouse.
Is there any correct way to redraw map programmatically?
The only solution I've found is to call setView() with slightly different coordinates, but I'd like to avoid this hack..

Hello,

There's a problem using Leaflet-active-area with Google Maps tiles – the Leaflet layer with markers is positioned correctly, but map tiles are not.

Here's a working example:
http://jsfiddle.net/e6sbhppa/2/

You can try both OSM and Google Maps code (please read comments) and see that OSM works fine but not GM.

Any chance adding support for Google Maps, please?

Hi,
Any plans to release an integration with react-leaflet?

Thanks

I posted on stackoverflow, but I feel this might be a plugin issue.

I am creating a leaflet application that uses various data sources / map layers. I found a great source for global ground cover from esri. It is an imageLayer. Using an esri-leaflet imageLayer, I am able to add this layer to my map. My application will likely need to draw data from various raster layers like this one. I am also able to load an urban-wildland boundary layer as an esri-leaflet featureLayer.

I am also using leaflet-active-area, which is a plugin that shifts the center and bounds of the map to the div of your choosing. I love this plugin for creating a better UI experience.

The featureLayer works just fine in conjunction with the activeArea. However, the imageLayer is having problems. It seems that the imageLayer is calculating what section of the layer should be currently in the map based on the original map bounds, but then squishing the image itself into the activeArea div. Check it out:

Working demo of the problem

I made a codesandbox that shows this problem. There is a 'toggle activearea' button there, so you can see how the imageLayer works properly when not using the activearea, but has this issue when using it.

What might be going wrong here? What is it about an imageLayer (or its underlying L.ImageOverlay) that it knows to sample the correct bounds from the entire map, but then it squishes it into the activearea, instead of the total area? I tried using other types of esri layers (L.esri.tiledMapLayer, L.esri.dynamicMapLayer, etc.) but these don't work as they are not the correct functions to recieve and apply this layer source. I don't want to give up my activearea, but I'm going to need to apply and ready from raster layers in my application. Ideas?

Thanks for reading.

From the project https://github.com/Leaflet/Leaflet.markercluster the function zoomToShowLayer() not respect the active area. In place It use the full map.

Hi,

Thanks for this great extension! I have a problem using it with L.Popup#autopan and Leaflet 0.7.5. The active area is ignored by the popup.

Can you take a look, please? I'll try to fix it in the meantime.

Regards,
Mihai

I am trying to create a map with Stamen_TonerLite as a Background map and my own geoJson layer on top.
The Problem is that the activearea only works for my geoJson, not for the stamen layer.
The active area is on the left screen side (left 0px, top 0px, width 50% height 100%).
The geoJson (all geoJson) is centered in this area, but the tileLayer (all tilelayers) is centered in the middle of the screen like without the active area plugin.

code: https://github.com/WiPoKar/Parteispenden_2015/blob/master/index.html

link: http://wipokar.de/maps/Parteispenden/index.html

Am I doing anything wrong?

Hello,

The latest release version available on Yarn is 1.1.1 (2019 release)

Can you please update it ?

Thank you !

I think it would be really nice to be able to install this plugin as npm module. It would ease the versions management on large projects using it.

Aren't you going to do so?

Hi, I'm using leaflet 1.0 and the corresponding version of this plugin, however, I get errors, and they seem to be generated by the following code:

L.Renderer.include({
    _updateTransform: function () {
        var zoom = this._map.getZoom();
        var center = this._map.getCenter(true);
        var scale = this._map.getZoomScale(zoom, this._zoom);
        var offset = this._map._latLngToNewLayerPoint(this._topLeft, zoom, center);

        L.DomUtil.setTransform(this._container, offset, scale);
    }
});

this._topLeft is undefined, which propably creates the error.

Hello!

I found out that if "maxNativeZoom" is used and it is exactly 2 less then "maxZoom" when maximum zoom reached - " Maximum call stack size exceeded " is thrown.

 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            maxNativeZoom: 14,
            maxZoom: 16,
            minZoom: 11,
        }).addTo(map);

It should be exactly "maxZoom" - "maxNativeZoom" === 2 to get the error. I have tested it with your example.

"leaflet": "^1.4.0", "leaflet-active-area": "^1.1.0"

Hi, @paulgreg !

Is it possible to create a plugin like this one for OpenLayers?

Thank you for your work! It helped me a lot!
Mihai

Trying to use map.flyTo() and im is centred in center of map container instead of activeArea.

I am positioning my activeArea div with
{position:absolute; top: 50px; left: 50px; right: 50px; bottom: 50px;}

This is to have a constant margin of 50px on my map active area.

However, if the map for some reason gets initialized when the viewport is a very small size, ie. 100x100 pixels - the plugin fails because getViewportBounds() is unable to handle vp.clientHeight being 0.

I have setup a fiddle her: http://jsfiddle.net/gt5a1efo/
Check the console for debug information

However, in this case I would like to just fallback to using the full container size, so I added a short little fallback: ( http://jsfiddle.net/Ljcvq86e/1/ )

        if (vpsize.x === 0 || vpsize.y === 0) {
            //Our own viewport has no good size - so we fallback to the container size:
            vp = this.getContainer();
            topleft = L.point(0, 0);
            vpsize = L.point(vp.clientWidth, vp.clientHeight);
        }

This seems to solve my particular case

Any thoughts on this matter? Should I be doing something else? Any implications of this fix I havent thought about?

Hi,

I love the idea of the active area and need to use it in my project. But I notice that there is an issue that when the map autoPans when a popup is opened, it is not properly framing with popup within the activeArea, like it does with the map bounds without an active area. See the codepen here:

https://codepen.io/slutske22/pen/mdbGJgq?editors=0010

I also notice an even more frustrating issue that if you grab the map and move it, and then hit my "Random Marker" button, the map pans back to where the activeArea was before! And it is not consistent. I tried playing with the trues and falses in the arguments for map.setActiveArea, but nothing changes. I am not sure if my randomMarkerButton function has a problem, or is not properly hooked up to the activeArea, or what. My randomMarkerButton gets the map bounds, then produced a random marker within those bounds. But the getBounds function being used does not seem to be linking to the activeArea if the user has manually moved the map. I am genuinely stumped. I believe this to be an issue with the way the plugin is working, forgive me if I am missing something in my own code.

Currently I use this :

map.setActiveArea({
  position: 'static',
  top: null,
  left: null,
  right: null,
  height: null
}, true, true)

It works, but I think it should be a leaner way to do it. What is it ?

Thank you

after map.setActiveArea({with some css})
the plugin creates a div with the given properties.

If I want to change the active area size later, I wish to just use the same function again, with new css:
map.setActiveArea({new css properties});

however, this creates a new div again, if I am not mistaken. Because:

    setActiveArea: function (css) {
            var container = this.getContainer();
            this._viewport = L.DomUtil.create('div', '');
            container.insertBefore(this._viewport, container.firstChild);

        if (typeof css === 'string') {
            this._viewport.className = css;
        } else {
            L.extend(this._viewport.style, css);
        }
        return this;
    }

If I put in a simple check for already existing viewport, I can avoid this and get the functionality I want:

    setActiveArea: function (css) {
        if( !this._viewport ){
            //Make viewport if not already made
            var container = this.getContainer();
            this._viewport = L.DomUtil.create('div', '');
            container.insertBefore(this._viewport, container.firstChild);
        }

        if (typeof css === 'string') {
            this._viewport.className = css;
        } else {
            L.extend(this._viewport.style, css);
        }
        return this;
    }

Valid feature for merging?

Hello. Can I get the original bounds of the map? If I just call getBounds, I get the boundaries of only the active area. I need it to organize filtering of objects on the map. I did not find fallback in the library code.

Hi Mappy team !

First of all, thank you for this awesome plugin. I would like to comment on the README file and on the NPM module.

First, the README only specifies one way to get your library (by downloading it) but it is also published on NPM which I think should be documented.

Additionally, the latest version on NPM is the one compatible with Leaflet 1 RC. Could you do as on GitHub, having the default version to be the one compatible with Leaflet 0.7.7 and having a special tag for the people wanting the other one? It wouldn't confuse the people by letting them think that npm install leaflet-active-area install the version of the master branch.

Currently, if someone wants the version compatible with Leaflet 0.7.7, they should install version 0.1.0: npm install [email protected]. Nevertheless, this version has been updated for the last time on September, 10th 2015 and since then you've pushed two commits in master which enable the map to pan the restricted area when opening a popup and apparently fix an issue with the zoom.

Could you please update the README and the NPM module?

Thanks,
Clément

Hi Mappy !

I work on a project which uses your library to restrict the area in which the map is centered and where the popups can open and it plays nice with standard tile layers. Nevertheless, when using a Torque Layer, all the tiles are moved by half the difference between the real center of the map and the center of the restricted area.

Here is an example of the issue:

In this screenshot, the restricted area has a top offset of 100px and so all the dots are vertically moved by -50px.

I have a working fix that I'll PR you with, but I would recommend you to take a deeper look at the issue. I'd be happy to provide further help.

Clément

http://leafletjs.com/2015/07/15/leaflet-1.0-beta1-released.html
Problem with zoom animation. The final position looks fine.