From 748ffb685fb38acf1289a0271429c92f30c7f101 Mon Sep 17 00:00:00 2001
From: Arvind <arvindkhadri@gmail.com>
Date: Mon, 30 Sep 2013 20:09:14 +0530
Subject: [PATCH] Adding a map plugin        - A new map model and view       
 - The tile service provider is accepted as a entry in the
 editor        - Mouchak now includes leaflet.js(cdn)

---
 mouchak/static/css/mouchak.css |    7 +++++++
 mouchak/static/js/editor.js    |    6 ++++++
 mouchak/static/js/models.js    |   13 ++++++++++++-
 mouchak/static/js/views.js     |   17 +++++++++++++++++
 mouchak/templates/editor.html  |   14 ++++++++++++++
 mouchak/templates/index.html   |   14 ++++++++++++++
 6 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/mouchak/static/css/mouchak.css b/mouchak/static/css/mouchak.css
index 6e92460..0fc1c65 100644
--- a/mouchak/static/css/mouchak.css
+++ b/mouchak/static/css/mouchak.css
@@ -4,3 +4,10 @@
   padding: 3px;
   font-size: 1.5em;
 }
+
+#map{
+width: 1000px;
+height: 500px;
+margin-top: 30px;
+position: relative;
+}
\ No newline at end of file
diff --git a/mouchak/static/js/editor.js b/mouchak/static/js/editor.js
index c17b685..b3a3eb0 100644
--- a/mouchak/static/js/editor.js
+++ b/mouchak/static/js/editor.js
@@ -310,6 +310,12 @@
          //$('#specific-content.preview').html();
          view.render('.preview');*/
       }
+      else if(type === "map"){
+        var template = _.template($('#map-template').html());
+          $('#specific-content').html(template({
+            tileLayer: this.model.get('tileLayer')
+          }));
+      }
     },
     typeChanged: function(event) {
       var type = this.$select.val();
diff --git a/mouchak/static/js/models.js b/mouchak/static/js/models.js
index b2793c2..abbd865 100644
--- a/mouchak/static/js/models.js
+++ b/mouchak/static/js/models.js
@@ -58,6 +58,16 @@
     }
   });
 
+  // Map model
+  var Map = BaseType.extend({
+    defaults: _.extend(BaseType.prototype.defaults, {
+      tileLayer: ""
+    }),
+    initialize: function(){
+      BaseType.prototype.initialize.call(this, arguments);
+    }
+  });
+
   // Plugin model can be used to load dynamic components
   // to the website by loading external JS files.
   // Also the website can be styled by using external CSS files,
@@ -134,11 +144,12 @@
     'rss': RSS,
     'table': Table,
     'plugin': Plugin,
+    'map': Map,
     'Page': Page,
     'Pages': Pages
   };
 
   //content types to render in content menu
-  M.contentTypes = ['text', 'image', 'video', 'table', 'plugin'];
+  M.contentTypes = ['text', 'image', 'video', 'table', 'plugin', 'map'];
 
 })(M);
diff --git a/mouchak/static/js/views.js b/mouchak/static/js/views.js
index 1e1dd99..f54b869 100644
--- a/mouchak/static/js/views.js
+++ b/mouchak/static/js/views.js
@@ -110,6 +110,22 @@
     }
   });
 
+  var MapView = Backbone.View.extend({
+    initialize: function(){
+      _.bindAll(this);
+      _.bind(this.render, this);
+    },
+    render: function(el){
+      var template = _.template($("#map-template").html());
+      $(el).append(template);
+      var southWest = new L.LatLng(47.20, 4.04); //Logic to calculate the bounds for "world view".
+      var northEast = new L.LatLng(55.10, 16.67);
+      var restrictBounds = new L.LatLngBounds(southWest, northEast);
+      M.map = new L.Map('map',{mapBounds: restrictBounds, zoom: 2, worldCopyJump: true, center:[14.604847155053898, 2.8125] });
+      L.tileLayer(this.model.get("tileLayer")).addTo(M.map);
+    }
+  });
+
   var PageView = Backbone.View.extend({
     tagName: 'div',
     className: 'pageview',
@@ -158,6 +174,7 @@
     'rss': RSSView,
     'table': TableView,
     'plugin': PluginView,
+    'map': MapView,
     'PageView': PageView
   };
 })(M);
diff --git a/mouchak/templates/editor.html b/mouchak/templates/editor.html
index 61e8823..26346ea 100644
--- a/mouchak/templates/editor.html
+++ b/mouchak/templates/editor.html
@@ -204,6 +204,20 @@
       </div>
     </script>
 
+    <script type="text/template" id="map-template">
+      <div class="data">
+        <div class="control-group">
+          <div class="input-prepend">
+            <span class="add-on"><strong>Tile Provider URL</strong></span>
+            <input type="text" placeholder="http://{s}.tile.cloudmade.com/<API_KEY>/997/256/{z}/{x}/{y}.png" value="<%= tileLayer %>"
+            m-data-target="tileLayer">
+          </div>
+        </div>
+        <div class="preview"></div>
+      </div>
+    </script>
+
+
     <script type="text/template" id="media-template">
       <div class="data">
         <div class="control-group">
diff --git a/mouchak/templates/index.html b/mouchak/templates/index.html
index cae26b6..c4bae18 100644
--- a/mouchak/templates/index.html
+++ b/mouchak/templates/index.html
@@ -16,6 +16,12 @@
     <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.css')}}">
     <link rel="stylesheet" href="{{url_for('static', filename='css/mouchak.css')}}">
     <link rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}">
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
+    <!--[if lte IE 8]>
+        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
+        <![endif]-->
+
+    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet-src.js"></script>
     <script src="{{url_for('static', filename='js/lib/modernizr-2.6.1.min.js')}}"></script>
   </head>
   <body>
@@ -108,6 +114,14 @@
       </li>
     </script>
 
+    <!-- Template for map-->
+    <script type="text/template" id="map-template">
+      <div id="map">
+      </div>
+    </script>
+
+
+
     <script type="text/template" id="image-view-template">
       <div class="img-wrapper">
         <img src="<%= src %>">
-- 
1.7.10.4