Public Maps Gallery template 1.3.1--Opening Post

[Esriwebmap]

Please reply to this opening post to submit questions and comments about the Public Maps Gallery template version 1.3.1.

Note: The comments on the template through Sep 28, 2011 have been copied to this thread so that you can view all the questions and answers in one location.

[Esriwebmap]

Thanks very much for providing these templates.  It was an excellent idea.

I am modifying the version 1.4 template.  I have a question and an issue:

1.  I prefer the pagination buttons from 1.3.1 over the ones in 1.4.  How do I use 1.3.1 pagination buttons in 1.4?

2. The facebook and google plus buttons do not display on my page.  Only the twitter button and callout show up.  How do I get the others to display (this was the case even before modifying the code and is the case from different computers and different networks).  Here is a copy of the code:

<div class="socialButtons">
    <div class="item first"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
    <div class="item">
      <div id="fb-root"></div>
      <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#appId=154863967938949&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"></div>
    </div>
    <div class="item"> 
     <!-- Place this tag where you want the +1 button to render -->
     <div class="g-plusone" data-size="medium" data-annotation="none"></div>
     <!-- Place this render call where appropriate --> 
     <script type="text/javascript">
       (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
       })();
     </script> 
    </div>
    <div class="clear"></div>
   </div>
   <div class="clear"></div>

Unfortunately, I don't think there's an easy way to use the other style without getting into the CSS. Is there a reason you like the previous pagination better? Just styling perhaps? Just wondering.

I think the social buttons don't work unless it's running on an external web page. They don't show up if you run it from your local computer so that may be the issue. I still need to test these a bit. Look for 1.4 to be released soon. Within a week or so.

[Esriwebmap]

I just reread my suggestion and realized it could be misinterpreted.  I'm not speaking of the grid size as in the 960.gs grids.   I'm thinking the size of the map grids and the image thumbnail you see in the "featuredMaps" element.  Here are a couple specific areas that come to mind in the global.css file (this may different for you if you are using template 1.3.1):

* The styling of ".mapsGrid .item" where "width:200px;"

* the styling of ".mapsGrid .item img" where "width:200px;"

*The styling of ".mapsList .item img" where width:200px;" and "height:133px;"

Keep in mind I'm using the 1.4 template.  Basically just be mindful that the default dimensions of the thumbnail maps is 200x133px.  Hopefully I'm not forgetting anything else.  Always save a copy before making such drastic changes or record the default values before making your changes.

Yeah, this will work better in 1.4. Although if you have a different number per row, some CSS will be required in order for them to fit correctly. I think the max you could go is 4 per row because of the width of the images and the 960 grid. That would require removing the right sidebar as well. It's not as flexible as I'd like but that's why it's a template. 🙂

Feel free to mold it as you see fit!

[IanWint]

Unfortunately, I don't think there's an easy way to use the other style without getting into the CSS. Is there a reason you like the previous pagination better? Just styling perhaps? Just wondering.

I think the social buttons don't work unless it's running on an external web page. They don't show up if you run it from your local computer so that may be the issue. I still need to test these a bit. Look for 1.4 to be released soon. Within a week or so.

Thanks for the response.  I was going to play around with the "clear" tags to see whether that was the problem.  Your answer may be the correct explanation (I'm hoping at least).  I'll throw it up on my web server some time soon to test.

I prefer the pagination in 1.3.1 because I think it's more aesthetically pleasing.  Am I out of luck here?  Please say it isn't so.

Thanks again, and keep up the good work.

[IanWint]

Just a follow up to report that I put the site out on our web server and as you suggested, the fb and +1 buttons now display after doing so.  Thanks again.

[JamesCucinelli]

thanks for the help.

[Esriwebmap]

Thanks for the response.  I was going to play around with the "clear" tags to see whether that was the problem.  Your answer may be the correct explanation (I'm hoping at least).  I'll throw it up on my web server some time soon to test.

I prefer the pagination in 1.3.1 because I think it's more aesthetically pleasing.  Am I out of luck here?  Please say it isn't so.

Thanks again, and keep up the good work.

Here's the old styled pagination in 1.4

Replace the query.arcgis.js file and then remove the pagination styles in global.css and replace it with the following:

/*-------------------------------------------------- */
/* Pagination */
/*-------------------------------------------------- */
.pagination {
 margin:0 0 20px 0;
 display:none;
 font-size:12px;
 line-height:16px;
}
.pagination ul {
 list-style:none;
 margin:0;
 padding:0;
}
.pagination ul li {
 float:left;
 margin-right:5px;
 padding:0;
 height:26px;
 overflow:hidden;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
}
.pagination ul li span {
 display:inline-block;
 padding:4px 8px;
 cursor:pointer;
 background:#eee;
 border:1px solid #fff;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
 min-width:18px;
 text-align:center;
}
.pagination ul li sub {
 display:inline-block;
 padding:10px 4px 0 4px;
}
.pagination ul li span.loadingAjax {
 display:inline-block;
 cursor:default;
 background:none;
 border:0;
 width:26px;
 height:26px;
 margin:0;
 padding:0;
 background:url(../graphics/ui/ajax-loader.gif) no-repeat center center;
}
.pagination ul li.selected span, .pagination ul li.selected span:hover {
 border:1px solid #fff;
 background:#2A7433;
 cursor:default;
 font-weight:bold;
 color:#eee;
}
.pagination ul li.disabled span, .pagination ul li.disabled span:hover {
 zoom: 1;
 background-color:#eee;
 cursor:default;
 opacity:0.3;
 filter:alpha(opacity=30);
}
.pagination ul li.next span span {
 padding:0;
 border:0;
 background:url(../graphics/ui/uiSprite.png) no-repeat -32px 0;
 _background:url(../graphics/ui/uiSprite.gif) no-repeat -32px 0;
 height:16px;
 width:16px;
 min-width:16px;
}
.pagination ul li.previous span span {
 padding:0;
 border:0;
 background:url(../graphics/ui/uiSprite.png) no-repeat -16px 0;
 _background:url(../graphics/ui/uiSprite.gif) no-repeat -16px 0;
 width:16px;
 height:16px;
 min-width:16px;
}
.pagination ul li span:hover {
 background-color:#ccc;
}
.pagination ul li.last {
 margin-left:20px;
}
.pagination ul li.first {
 margin-right:20px;
}

I have the old style commented out in the attached global.css. So, if you just comment out the new style and uncomment the old, it should work. Let me know if it doesn't 🙂

I'll leave it commented out in the release so if others want to use it they can uncomment it.

This is using the green buttons, so if you want a different color you can modify the CSS.

[Esriwebmap]

Just a follow up to report that I put the site out on our web server and as you suggested, the fb and +1 buttons now display after doing so.  Thanks again.

Thanks for the update and testing that out.

[IanWint]

esri, thanks for the 1.3.1 pagination. I followed your instructions.  This still didn't give me the "Previous" and "Next" labels but I managed to figure that part out.  My pagination now looks like it did in 1.3.1 except I used the labels "Previous" and "More."

[Esriwebmap]

The updated version 1.4 is now available.

Forum thread

Download / Preview

[JaimePrado]

Hello,

I'm currently working with the Carousel viewer.  Can I change the number of maps displayed?

I have about 16 maps available for everyone, but only 10 display.

If so, what file do I modify?

Thanks,