Zoom to feature in a shortlist?

[NatalieMatthews]

Has anyone added code to the Shortlist template that provides a zoom to feature from the popup?  I would love to add this to my shortlist.  Thanks!

[AnthonyGiles · Accepted solution]

Natalie,

Here is one possible solution:

In the main.js file find the line (around line 1003):

else {

  $(contentDiv).append($("<div></div>").addClass("infoWindowLink").html("Details >>"));

  }

and change to:

else {

  $(contentDiv).append($("<div></div>").addClass("infoWindowLink").html("Details >>"));

  //added for zoom in

  $(contentDiv).append($("<div></div>").addClass("zoomInLink").html("Zoom To >>"));

}

then find the function infoWindowLink:

$(".infoWindowLink").click(function(e) {

        showDetails(feature);

    });

below it add the following function (where the 11 is the zoom level you want to zoom to):

$(".zoomInLink").click(function(e) {

        _map.centerAndZoom(_selected.geometry, 11)

    });

The only thing left is to then style the Zoom To>> text that appears in the popup.

In the style.css find the following two styles:

.infoWindowLink {
color:#336699;
cursor:pointer;
font-weight:bold;
}

.infoWindowLink:hover {
text-decoration:underline;
}

copy and paste them below and change them to:

.zoomInLink {
color:#336699;
cursor:pointer;
font-weight:bold;
}

.zoomInLink:hover {
text-decoration:underline;
}

Hope this helps

Regards

Anthony

[NatalieMatthews]

Thanks, Anthony!  That works perfectly!

[AnthonyGiles]

Glad I could help please don't forget to mark the question as answered.

regards

Anthony

[SamKrueger]

Hi Anthony,

I'm attempting to create the zoom to function as well, I must be doing something simple wrong as your directions seem pretty straightforward. I've attached 2 screen shots of the code if that helps identify anything strange looking...

I've cleared my cache and am trying to see the new zoom to function using IIS locally but can't seem to get it working.

Any thoughts?

Thanks!

Sam

[AnthonyGiles]

Sam,

Nothing jumps out bout as being wrong in your code, the only thing I could suggest is does your application have a zoom level 18 to zoom to.

[SamKrueger]

I actually wondered that myself, but I tried numerous zoom extents with no luck..I'll keep playing around with it!

[RupertEssinger]

Hi Natalie, if your Story Map Shortlist is going to be available publicly, could you post a link to it on this thread when you are done so we can have a look!

[NatalieMatthews]

Will do!

[AmandaBishop]

Rupert,

I just added this to my Shortlist

I did my zoom link at "15" instead of "11" - to bring the viewer in a little closer to the street view.

It works great!

Amanda