diff -r a9d820380842 -r 9aa2f966465b src/egonomy/templates/egonomy_view_collection.html
--- a/src/egonomy/templates/egonomy_view_collection.html	Tue Jul 16 11:02:26 2013 +0200
+++ b/src/egonomy/templates/egonomy_view_collection.html	Wed Jul 17 13:23:35 2013 +0200
@@ -2,7 +2,9 @@
 {% load static %}
 {% load i18n %}
 
-{% block title %}{% trans "View a collection" %}{% endblock %}
+{% block title %}{% trans "View a collection" %} : {{ col.title }}{% endblock %}
+
+{% block css_page %}<link rel="stylesheet" href="{% static 'egonomy/lib/leaflet/leaflet.css' %}" />{% endblock %}
 
 {% block popins %}
     {% if user.is_authenticated %}
@@ -110,9 +112,8 @@
         </div>
         <div class="popin modifyitem-success box-shadow">
             <h2>{% trans "The item was successfully modified" %}</h2>
-            <!--h2><a class="collection-url" href="#">{% trans "See the collection" %}</a></h2-->
         </div>
-      {% endifequal %}
+       {% endifequal %}
     {% endif %}
 {% endblock %}
 
@@ -120,14 +121,14 @@
             <div class="title-page">
                 <h2>{{ col.title }} / <span>par {{ col.author }}</span></h2>
                 <ul class="sub-nav title-menu clearfix">
-                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=list" {% ifequal display "list" %}class="active"{% endifequal %}>liste</a></li>
+                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=list" {% ifequal display "list" %}class="active"{% endifequal %}>{% trans "list" %}</a></li>
                     <li><span class="dot-6"></span></li>
-                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=mosaic" {% ifequal display "mosaic" %}class="active"{% endifequal %}>mosaïque</a></li>
+                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=mosaic" {% ifequal display "mosaic" %}class="active"{% endifequal %}>{% trans "mosaic" %}</a></li>
                     <li><span class="dot-6"></span></li>
-                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=slideshow" {% ifequal display "slideshow" %}class="active"{% endifequal %}>diaporama</a></li>
+                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=slideshow" {% ifequal display "slideshow" %}class="active"{% endifequal %}>{% trans "slideshow" %}</a></li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=geographical" {% ifequal display "geographical" %}class="active"{% endifequal %}>{% trans "geographical" %}</a></li>
                     <!--li><span class="dot-6"></span></li>
-                    <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=geographical" {% ifequal display "geographical" %}class="active"{% endifequal %}>géographique</a></li>
-                    <li><span class="dot-6"></span></li>
                     <li><a href="#">envoyer vers collage</a></li-->
                 </ul>
             </div>
@@ -171,6 +172,14 @@
 	            </ul>
 	        </div>
           {% endifequal %}
+          {% ifequal display "geographical" %}
+            <div id="map"></div>
+            <ul class="list-style-4 clearfix">
+             {% for item in items %}
+              {% include 'partial/item_in_collection_geographical.html' %}
+             {% endfor %}
+            </ul>
+          {% endifequal %}
         {% else %}
           {% ifequal display "slideshow" %}
             <div class="clearfix">
@@ -197,6 +206,7 @@
 
 {% block js_page %}
 {% ifequal display "mosaic" %}<script type="text/javascript" src="{% static 'egonomy/js/keyword-mosaic.js' %}"></script>{% endifequal %}
+{% ifequal display "geographical" %}<script type="text/javascript" src="{% static 'egonomy/lib/leaflet/leaflet.js' %}"></script>{% endifequal %}
 <script type="text/javascript">
 $(function() {
     $("#search-type-big").change(function() {
@@ -206,5 +216,80 @@
         }
     });
 });
+
+{% ifequal display "geographical" %}
+if($('#map').length){
+	// get all geo datas
+	places = {{ places|safe }};
+	for (var loc in places) {
+	    // http://maps.googleapis.com/maps/api/geocode/json?address=Bayonne,%20mus%C3%A9e%20Bonnat&sensor=false
+	    $.ajax({
+	        url: "http://maps.googleapis.com/maps/api/geocode/json",
+	        type: "GET",
+	        async: false,
+	        data: {"address":loc, "sensor":false},
+	        success: function(json){
+	            // We test if results are ok
+	            if("results" in json){
+	                if(json["results"].length>0){
+	                    r = json["results"][0];
+	                    if("geometry" in json["results"][0]){
+	                        g = json["results"][0]["geometry"];
+	                        if("location" in g){
+	                            l = g["location"];
+	                            // We get lat and lng and save it.
+	                            // Thanks to async:false, loc is still the good reference.
+	                            places[loc]["location"]["lat"] = l["lat"];
+	                            places[loc]["location"]["lng"] = l["lng"];
+	                        }
+	                    }
+	                }
+	            }
+	        },
+	        error: function(){
+	            // pass
+	        }
+	    });
+	}
+	// Locations have now lat and lng, we can init the map
+    initmap();
+}
+function initmap() {
+    // set up the map
+    map = new L.Map('map');
+
+    // create the tile layer with correct attribution
+    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+    var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 20});       
+
+    // start the map in South-East England
+    map.setView(new L.LatLng(48.833, 2.333),4);
+    map.addLayer(osm);
+
+    // markers
+    for (var loc in places) {
+    	if(places[loc]["location"]["lat"] && places[loc]["location"]["lng"]){
+	        var marker = L.marker([places[loc]["location"]["lat"], places[loc]["location"]["lng"]]).addTo(map);
+	        marker.bindPopup(loc);
+	        marker.on('click', function (d) {
+	        	// Get the marker's title thanks to leaflet object organisation
+	        	marker_title = d.target._popup._content;
+	        	// Get the items
+	        	highlight_items(places[marker_title]["items"]);
+	        });
+    	}
+    }
+    map.on('popupclose', function(e) {
+    	$(".geo-item").css("opacity","1");
+    });
+}
+function highlight_items(items){
+	// unhighlight all
+	$(".geo-item").css("opacity","0.3");
+	for(var i=0;i<items.length;i++){
+		$("#item" + items[i]).css("opacity","1");
+	}
+}
+{% endifequal %}
 </script>
 {% endblock %}