Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposed: zoom-to control for layers with scale dependency visibility #69

Open
BlakeDraper opened this issue May 28, 2015 · 1 comment

Comments

@BlakeDraper
Copy link
Contributor

I put together a simple control that allows the user to zoom to the minScale of a layer if there is one set. It works just like the opacity control: there is an icon the user hovers over with the cursor (or taps on mobile) and it pops up a small box with two selections in it: Zoom to scale and Zoom to center.

I have those two options specifically for project needs on WLERA, but we could tweak them for more generic appeal.

zoomtoctrl_icon
Icons, for hover/tap

zoomtoctrl_dialog
The dialog. Can be closed by mouse-out or by tapping the close X.

Logic for zoom to (esri api):

$(".zoomto").hover(function (e) {

            $(".zoomDialog").remove();
            var layerToChange = this.parentNode.id;
            var zoomDialog = $('<div class="zoomDialog"><label class="zoomClose pull-right">X</label><br><div class="list-group"><a href="#" id="zoomscale" class="list-group-item zoomscale">Zoom to scale</a> <a id="zoomcenter" href="#" class="list-group-item zoomcenter">Zoom to center</a></div></div>');

            $("body").append(zoomDialog);

            $(".zoomDialog").css('left', event.clientX-80);
            $(".zoomDialog").css('top', event.clientY-5);

            $(".zoomDialog").mouseleave(function() {
                $(".zoomDialog").remove();
            });

            $(".zoomClose").click(function() {
                $(".zoomDialog").remove();
            });

            $('#zoomscale').click(function (e) {
                //logic to zoom to layer scale
                var layerMinScale = map.getLayer(layerToChange).minScale;
                map.setScale(layerMinScale);
            });

            $("#zoomcenter").click(function (e){
                //logic to zoom to layer center
                var layerCenter = map.getLayer(layerToChange).fullExtent.getCenter();
                map.centerAt(layerCenter);
            });
        });

An option, in place of the zoom to center, is zoom to extent, which would look like this:

var layerExtent = map.getLayer(layerToChange).fullExtent;
map.setExtent(layerExtent);

I've tested, and all these methods work. The weakness with zoom to layer extent is it does not respect scale dependency. All three methods have strengths and weaknesses, so want to know what you guys think.

@BlakeDraper
Copy link
Contributor Author

I went ahead and incorporated this to the esri track with pull request #83. As stated in the PR notes, what I put together has 3 options, and the one most in question is the zoom to center. As currently merged in the master branch, that button brings the user to the map default center. Could easily be updated to the layer's center, or maybe we don't need that button at all - seems the least useful.

zoomtoissueimg

@marsmith @esmyers @njestes

@marsmith marsmith added this to the doesn't apply to v2 milestone Mar 8, 2017
@njestes njestes modified the milestones: v2.01, doesn't apply to v2 Mar 10, 2017
@HansVraga HansVraga modified the milestones: v2.01, v2.0.0 Jun 14, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants