nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Encontre mais publicações marcadas com

Accepted answers

All comments

Esriwebmap

I downloaded that 1.4 version.

I see the carousel view is gone.

Is that going away forever or just not focusing on it during this part of the development?

I like the new search feature for "filtering" your map results from your public group.

Thank you in advance,
James Cucinelli

Yeah, I wanted to focus on one design and not confuse users with different templates that they would need to strip out. It may end up being a separate template. We're working on a embed embedded version of this template as well.

JamesCucinelli

Ok. thanks.

xanderm

The City of Cleveland has just published their v1.0 of the 1.3.1 Public Maps Gallery Template.
http://www.ClevelandGIS.org/gallery

Thank you to Esri_webmap for your help.

JamesCucinelli

I'm having trouble with the template 1.3.1.

My web site was working the other day and now I just get a loading maps message.

No maps ever load.

Also, my version 1.4 isn't working now either.

Has something changed?

My site is private now so I can't just share the link.

Any help would be appreciated.
James Cucinelli

tmp.loading.jpg

IanWint

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>

JamesCucinelli

I took out two new maps that I added and gallery seemed to work fine. I'll check into the maps.

Another question, anyone had success with changing the number per page and per row in local.js?

I changed it too 8 per page and 4 or 2 per row and it looks terrible.

Working with Firefox.

Thanks,
James Cucinelli

IanWint

I took out two new maps that I added and gallery seemed to work fine. I'll check into the maps.

Another question, anyone had success with changing the number per page and per row in local.js?

I changed it too 8 per page and 4 or 2 per row and it looks terrible.

Working with Firefox.

Thanks,
James Cucinelli

Although I am now using the 1.4 template I was able to change the number per page in the 1.3.1 version in local.js. I changed it to 6 per page and 3 per row. I'm doing the same in version 1.4 except the change is done in settings.optional.js when using 1.4. But yes, this works in 1.3.1. If you intend on changing both values you may have to adjust your grid size in order to not lose formatting on the page.

JamesCucinelli

Ok. I will try changing the grid size. Thanks.

IanWint

Ok. I will try changing the grid size. Thanks.

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.

Esriwebmap

<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.

Archive.zip

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,

MattDriscoll

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,

Hi jprado,

If you open "/scripts/carousel/local.js" right near the top you will see a function queryCarousel().

You need to add the following code into that function call.

perPage: 999,
perRow: 999,

It should look like this:

/*------------------------------------*/
// QUERY CAROUSEL
/*------------------------------------*/
function queryCarousel(){
 queryArcGISGroup({
  // SETTINGS
  id_group : ymConfig.mapsGroupID,
  searchType : 'Web Map',
  sortField : 'title',
  pagination: false,
  sortOrder : 'asc',
  perPage: 999,
  perRow: 999,
  // EXECUTED AFTER AJAX IS RETURNED
  callback: function(obj,data){
   console.log(data);
   buildCarousel(obj,data);
  }
 });
}

Set perPage and perRow to however many you would like to show.

Let me know if that fixes it for you.

Thanks

Screen Shot 2011-11-29 at 9.59.15 AM.png

JaimePrado

Thank you! It works just fine.

jprado

JacobMcGlade

In PM Gallery 1.4 how do you adjust what appears in the 'About' tab in the simple map viewer? Currently no text displays when the tab is clicked. Ideally, I would like map descriptions and the username that submits the map to appear. Thanks for any help you can provide.

*This function seemed to work in the Carousel view of PMG 1.3

Esriwebmap

In PM Gallery 1.4 how do you adjust what appears in the 'About' tab in the simple map viewer? Currently no text displays when the tab is clicked. Ideally, I would like map descriptions and the username that submits the map to appear. Thanks for any help you can provide.

*This function seemed to work in the Carousel view of PMG 1.3

Hi Jacob,

That text comes from the webmap on ArcGIS.com. You will need to edit the webmap and enter the about text on arcigs online for it to show up.

AngeloMarino

I just attended the extending ArcGIS seminar yesterday and have set up my Public Maps Gallery. I would like to change a few things on the template.

First, is there a way to change the featured map links on the right side of the page? While having a link to Earthquake centers in the Yukon might be important to someone, it might not be what I want to display to my group here in NH.

My other problem is changing the Photoshop document that displays the headers and footers. This is proving to be very difficult without Photoshop. Any way around that?

Esriwebmap

I just attended the extending ArcGIS seminar yesterday and have set up my Public Maps Gallery. I would like to change a few things on the template.

First, is there a way to change the featured map links on the right side of the page? While having a link to Earthquake centers in the Yukon might be important to someone, it might not be what I want to display to my group here in NH.

My other problem is changing the Photoshop document that displays the headers and footers. This is proving to be very difficult without Photoshop. Any way around that?

Hi nashua,

Here is an updated version of this template if you're interested. It is easier to configure.
http://www.arcgis.com/home/item.html?id=2b158c0d94b64f208f45bcae801c2fa0

AngeloMarino

Thanks for the link to release 1.4. How will this affect my current install. Can I just install over the existing application and overwrite exissting files?

Esriwebmap

Thanks for the link to release 1.4. How will this affect my current install. Can I just install over the existing application and overwrite exissting files?

Unfortunately, no. You'll have to create a new instance.

AngeloMarino

I have downloaded and am using version 1.4 of the public maps gallery. I can see my maps that are in my public folder but when I try to access one of them I get this message in a sign in dialogue box item:00fa59c037aa49bd9a2642f5f12dec0b

I originally created the maps gallery in version 1.3 and maps that are in there created with that version still work.

Do I need to create the Maps Gallery again with version 1.4? I also can't seem to find the Group ID finder now. Is it hidden somewhere?

Esriwebmap

I have downloaded and am using version 1.4 of the public maps gallery. I can see my maps that are in my public folder but when I try to access one of them I get this message in a sign in dialogue box item:00fa59c037aa49bd9a2642f5f12dec0b

I originally created the maps gallery in version 1.3 and maps that are in there created with that version still work.

Do I need to create the Maps Gallery again with version 1.4? I also can't seem to find the Group ID finder now. Is it hidden somewhere?

Hi Angelo,

Yes, you will have to do it again with 1.4.

The group id finder tool is here: http://www.esri.com/public-maps-gallery/group-id-tool/index.html

SeychellesMartinez

Does this template has search functionality available? I noticed that Rockville Map Gallery http://maps.rockvillemd.gov/gallery/map.html?webmap=da37c709d83c4a398993dd5972951f52 has that functionality implemented. Is that a custom implementation or is it a functionality of the template?

Thank you.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.