Zoom to feature in a shortlist?

4359
9
Jump to solution
09-17-2014 09:14 AM
NatalieMatthews
New Contributor III

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!

1 Solution

Accepted Solutions
AnthonyGiles
Frequent Contributor

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

View solution in original post

9 Replies
AnthonyGiles
Frequent Contributor

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
New Contributor III

Thanks, Anthony!  That works perfectly!

0 Kudos
AnthonyGiles
Frequent Contributor

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

regards

Anthony

0 Kudos
SamKrueger
New Contributor

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

styleCSS.PNGmainJS.PNG

0 Kudos
AnthonyGiles
Frequent Contributor

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.

0 Kudos
SamKrueger
New Contributor

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

0 Kudos
RupertEssinger
Frequent Contributor

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
New Contributor III

Will do!

0 Kudos
AmandaBishop
Occasional Contributor

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

0 Kudos