swtiched from google maps api to OSM with leaflet

2 files changed, 63 insertions, 105 deletions

diff --git a/design/templates/archives/map.html b/design/templates/archives/map.html
index 3c644eb..c36817a 100644
--- a/design/templates/archives/map.html
+++ b/design/templates/archives/map.html
@@ -9,14 +9,21 @@
 Google Maps code
 ==============================================#}
 {% block extrahead %}
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
+ <!--[if lte IE 8]>
+     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
+     <![endif]-->
+     <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
+
+     <style>
+         #map-canvas img{ border: none;}
+     </style>
+
 
-<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
-<script type="text/javascript" src="{{MEDIA_URL}}js/mainmap.min.js"></script>
 
 
 {% endblock %}
-{%block bodyid%}id="map" {%endblock%}
-{% block bodyevents %}onload="initialize()"{% endblock %}
+{%block bodyid%}id="map"{%endblock%}
 
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
         <li><a href="/" itemprop="url" title="luxagraf homepage"><span itemprop="title">Home</span></a> &rarr;</li>
@@ -24,7 +31,10 @@ Google Maps code
     </ul>
     <section>
         <h1 class="hide">Browse luxagraf by map</h1>
-        <div id="map-canvas"></div>
+        <div id="map-canvas">
+            <div id="map-inner-canvas" style="width: 100%; height: 100%; border: none !important;"></div>
+        </div>
+
         <div class="map-legend">
             <h4>Trips</h4>
             <ul>
@@ -47,4 +57,7 @@ Google Maps code
             </ul>
         </div>    
     </section>
+    <!--<script type="text/javascript" src="{{MEDIA_URL}}js/mainmap.min.js"></script>-->
+<script type="text/javascript" src="{{MEDIA_URL}}js/leaflet-providers.js"></script>   
+<script type="text/javascript" src="{{MEDIA_URL}}js/mainmap.js"></script>
 {% endblock %}
diff --git a/design/templates/archives/map_data.html b/design/templates/archives/map_data.html
index a58de05..aa1bbe7 100644
--- a/design/templates/archives/map_data.html
+++ b/design/templates/archives/map_data.html
@@ -1,111 +1,56 @@
 {% load typogrify %}
 {% load truncateletters  %}
-{% load slugify_under  %}
 
-    // center on a country
-    function focusCountry(latitude, longitude, zoom) {
-      map.setZoom(zoom);
-      map.panTo(new google.maps.LatLng(latitude, longitude));
-    };
-  
-    {% for route in route_list %}
-    var {{route.template_var_name}} = [
-    {% for point in route.geometry.coords%}
-        new google.maps.LatLng({{point.1}}, {{point.0}}){% if forloop.last%}{%else%},{%endif%}
-    {% endfor %}
-      ];
-    {% endfor %}
-    function showRoute(route, zoom, latitude, longitude) {
-        var routePath = new google.maps.Polyline({
-            path: eval(route),
-            strokeColor: "#FF0000",
-            strokeOpacity: 1.0,
-            strokeWeight: 2
-        });
-      map.setZoom(zoom);
-      map.panTo(new google.maps.LatLng(latitude, longitude));
-      routePath.setMap(map);  
-      return false;
-    };
-var map;
-function initialize() {
+var map = L.map('map-inner-canvas')
 
-    //custom marker    
-    var image = new google.maps.MarkerImage('http://luxagraf.net/media/img/marker-entry.png',
-        new google.maps.Size(15, 26),
-        new google.maps.Point(0, 0),
-        new google.maps.Point(7, 26)
-    );
-    //custom marker shadow
-    var shadow = new google.maps.MarkerImage('http://luxagraf.net/media/img/shadow.png',
-        new google.maps.Size(37, 34),
-        new google.maps.Point(0,0),
-        new google.maps.Point(8, 34)
-    );
-    
-    
+// center on a country
+function focusCountry(latitude, longitude, zoom) {
+  map.panTo(new L.LatLng(latitude, longitude));
+  map.setZoom(zoom);
+};
+
+{% for route in route_list %}
+var {{route.template_var_name}} = L.polygon([
+{% for point in route.geometry.coords%}
+    [{{point.1}}, {{point.0}}]{% if forloop.last%}{%else%},{%endif%}
+{% endfor %}
+  ]);
+  {% endfor %}
+  
+function showRoute(route, zoom, latitude, longitude) {
+    map.panTo(new L.LatLng(latitude, longitude));
+    map.setZoom(zoom);
+    eval(route).addTo(map);  
+    return false;
+};
     //check for a permalink
-    var location = window.location.hash;
     //find a centerpoint
     var pts = new Array();
-    {%for c in country_list%}pts[{{forloop.counter0}}] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];{% endfor %}
-    {%for c in region_list%}pts[pts.length] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];{% endfor %}
-    if (location.length>1) {
-        for (i=0;i<pts.length;i++) {
-            if (location == pts[i][0]) {
-                centerCoord = new google.maps.LatLng(pts[i][1],pts[i][2]);
-                zoom = pts[i][3];
-                break;
-            } else {
-                centerCoord = new google.maps.LatLng(19.311143,2.460938);
-                zoom = 2;
-            }
+    {%for c in country_list%}pts[{{forloop.counter0}}] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];
+    {% endfor %}
+    {%for c in region_list%}pts[pts.length] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];
+    {% endfor %}
+if (window.location.hash) {
+    for (var i=0; i < pts.length; i++) {
+        if (window.location.hash == pts[i][0]) {
+            var centerCoord = new L.LatLng(pts[i][1],pts[i][2]);
+            var zoom = pts[i][3];
+            break;
+        } else {
+            var centerCoord = new L.LatLng(19.311143,2.460938);
+            var zoom = 2;
         }
-    } else {
-        centerCoord = new google.maps.LatLng(19.311143,2.460938);
-        zoom = 2;
     }
-    //set up map options
-    var mapOptions = {
-        zoom: zoom,
-        center: centerCoord,
-        mapTypeId: google.maps.MapTypeId.TERRAIN,
-        disableDefaultUI: true,
-        navigationControl: true,
-        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
-    };
-    //create map
-    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
-   
-    
-    //loop through and set up markers/info windows
+} else {
+    centerCoord = new L.LatLng(19.311143,2.460938);
+    zoom = 2;
+}
+//Set center
+map.setView(centerCoord, zoom);
+L.tileLayer.provider('Esri.WorldTopoMap', {maxZoom: 18,attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Tiles © Esri and the GIS User Community'}).addTo(map);
 
-    {% for entry in object_list %}
-    var marker_{{entry.title|truncatewords:2|slugify_under}} = new google.maps.Marker({
-        position: new google.maps.LatLng({{entry.latitude}}, {{entry.longitude}}),
-        map: map,
-        shadow: shadow,
-        icon: image
-    });      
-          
-    var c_{{entry.title|truncatewords:2|slugify_under}} = '<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_thumbnail_url}}" height="100" alt="{{ entry.title }}"  style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it &raquo;<\/a><\/p><\/div>';
-    
-    google.maps.event.addListener(marker_{{entry.title|truncatewords:2|slugify_under}}, 'click', function() {
-    openWin(c_{{entry.title|truncatewords:2|slugify_under}},marker_{{entry.title|truncatewords:2|slugify_under}});
-    });
+//loop through and set up markers/info windows
+{% for entry in object_list %}
+L.marker([{{entry.latitude}}, {{entry.longitude}}]).bindPopup('<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_thumbnail_url}}" height="100" alt="{{ entry.title }}"  style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it &raquo;<\/a><\/p><\/div>').addTo(map);
+{% endfor %}
 
-    {% endfor %}
-    // create an empty info window instance, set max width
-    var infowindow = new google.maps.InfoWindow({
-        content: ' ',
-        maxWidth: 400
-    }); 
-    //function to handle click event and display single info window
-    function openWin(content, marker) {
-        infowindow.close();
-        infowindow.setContent(content);
-        infowindow.open(map,marker);
-    };
-    
-    
-}