[snatch1974]

la sidebar déroulante, c'est le panneau latéral du module que j'ai modifié au niveau du template + mis en forme et animation par css.


Template carte:

Code :

[== Indéfini ==]
{* map template *}
<div id="cggm_map_defn_{$mapinstance}" class="cggm_maps">
{$map_header|default:''}{$map_marker_data|default:''}


   {* map in the center *}
   <div id="cggm_map_display_{$mapinstance}" style="width: {$map->width}px; height: {$map->height}px;">{* the map will go here *}</div>

   {if $map->sv_controls}
   <div id="cggm_sv_display_{$mapinstance}" style="width: {$map->width}px; height: {$map->height}px; display: none;">{* the streetview will go here *}</div>
   {/if}


   {* optional sidebar on the left *}
   {if isset($map_sidebar)}

     {$map_sidebar}

   {/if}


   {* directions on the right *}
   {if $map->directions_dest == 'PANEL'}

     <div id="map_directions_{$mapinstance}" style="display: none;">
       <input type="button" name="hide_directions" value="{$mod->Lang('hide_directions')}"/><br/>
     </div>

   {/if}


{* optional categories *}
{if isset($map_categories)}

     {$map_categories}

{/if}

{$map_data}
</div>

Template panneau latéral:

Code :

[== Indéfini ==]
{* sidebar template *}

<div class="map-cats">

<h2>Liste des stations <span class="fleche"></span></h2>

<ul class="cggm_sidebar_list">
{$tmp = ksort($sidebar_items)}

{foreach from=$sidebar_items key='marker_name' item='item'}
  <li class="cggm_sidebar_item" rel="{$marker_name}">
    <div>
    <div class="cggm_sidebar_item_title">

{if $map->info_window}<a rel="{$map->get_id()}::{$marker_name}" class="cggm_sidebar_title_link {$item->get_categories()}">{$item->get_title()}</a>{else}{$item->get_title()}{/if}</div>
    <div class="code_postal">
    {$item->get_description()}
    </div>
    {* this is used for hiding sidebar items when categories are disabled *}
    <input type="hidden" name="categories" value="{$item->get_categories()}"/>
    </div>
  </li>
{/foreach}
</ul>

</div>

et pour le css:

Code :

[== CSS ==]
div.cggm_maps{
   position:relative;
   width:660px;
   height:660px;
   margin:0 0 30px 0;
}

div#cggm_map_display_1{
   width:660px;
   height:660px;
   border:solid 5px [[$dark_blue]];
   border-radius:20px;
   overflow:hidden;
}

div.map-cats{
    position:absolute;
    top:5px;
    right:5px;
    width:250px;
    background:[[$white]];
    border-radius: 0 15px 0 0;
}

div.map-cats:hover{
    background:[[$white]];
}

div.map-cats h2{
    font-size:140%;
    line-height:18px;
    text-align:center;
    color:[[$dark_grey]];
    margin:5px 0 5px;
}

div.map-cats h2 span.fleche{
    float:right;
    width:20px;
    height:20px;
    margin:0 20px 0 -10px;
    background:[[$white]] url([[$path]]/dropdown_close.png) left top no-repeat;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}

div.map-cats:hover h2 span.fleche{
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
}

div.map-cats li{
    list-style:none outside none;
}

div.map-cats ul{
    list-style:none outside none;
    padding:0 0 0 15px;
    margin:0;
    height:0px;
    overflow:hidden;
    transition: all 0.5s ease-out;    
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;  
}

div.map-cats:hover ul{
    height:570px;
    margin:20px 0 20px;
    overflow:auto;
    transition: all 0.5s ease-out;    
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;  
}

div.map-cats div.cggm_sidebar_item_title{
   display:inline-block;
   Width:100%;
   margin:10px 0 0;
}

div.map-cats a{
   line-height:15px;
   font-weight:bold;
   cursor:pointer;
   cursor:hand;
}

div.map-cats div.code_postal{
   display:inline-block;
   font-size:80%;
   font-style: italic;
   margin:0 0 0 10px;
}

div.map-cats div.code_postal h3{
   font-size:100%;
   font-style: italic;
   margin:0;
}

div.map-cats div.code_postal p{
   font-size:100%;
   margin:0;
}

div.cggm_infowindow_item h3{
   font-size:110%;
   margin:0 0 10px;
}

div.cggm_infowindow_item p{
   font-size:100%;
   margin:5px 0;
}

div.map-cats a.friendly, form.category_form div.friendly{
    color:#2fa802;
}

div.map-cats a.conditions, form.category_form div.conditions{
    color:#ffc600;
}

div.map-cats a.interdites, form.category_form div.interdites{
    color:#ff0000;
}

form.category_form{
   font-size:93%;
   font-weight:bold;
   margin:10px 0 0;
}

form.category_form div.category{
   float:left;
   margin:0 15px 0 0;
}

J'ai 3 catégories de point (friendly, conditions et interdites) d'où les 3 couleurs.


pour avoir mes stations par ordre alphabétique affiché dans le panneau latéral, c'est la fonction {$tmp = ksort($sidebar_items)} qui s'en charge dans le template.


Voilà comment je l'ai mis en place!