First integration of Leaflet.RevealOSM

yohanboniface · May 27, 2013 · 35e2669 · 35e2669
1 parent 3e95195
commit 35e2669
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 13 deletions.
diff --git a/carte_fluviale/static/carte_fluviale/CustomRevealOSM.js b/carte_fluviale/static/carte_fluviale/CustomRevealOSM.js
@@ -0,0 +1,110 @@
+var RevealOSM = L.Control.RevealOSM.extend({
+
+    initialize: function (options) {
+        L.Control.RevealOSM.prototype.initialize.call(this, options);
+        this.options.excludeKeys = [
+            /source/,
+            /^ref/,
+            /seamark/,
+            /^name$/,
+            /^harbour$/,
+            /^leisure$/,
+            /^lock$/,
+            /^boat$/,
+            /^motorboat$/,
+            /^waterway$/,
+            /^lock_name$/,
+            /^man_made$/,
+            /^harbour\:category$/
+        ];
+        this.options.helpText = "Click on harbours, locks or piers";
+        this.options.translateKeys = {
+            'harbour:channel': 'VHF',
+            'harbour:draft': 'max draft',
+            'harbour:length': 'max length'
+        };
+    },
+
+    getQueryTemplate: function () {
+        var template;
+        if (this._map.getZoom() < 13) {
+            template = '[out:json];node(around:{radius},{lat},{lng})[harbour];out body qt 1;';
+        }
+        else {
+            template = '[out:json];(node(around:{radius},{lat},{lng})[harbour];way(around:{radius},{lat},{lng})[lock];way(around:{radius},{lat},{lng})[man_made=pier]);out body qt 1;';
+        }
+        return template;
+    },
+
+    getRadius: function () {
+        return this.options.radius || 300 - (15 * this._map.getZoom());
+    },
+
+    formatTitle: function (element) {
+        var title,
+            className,
+            keys = ['lock:name', 'lock_name', 'name'];
+        for (var i=0, l=keys.length; i<l; i++) {
+            if (element.tags[keys[i]]) {
+                title = element.tags[keys[i]];
+                break;
+            }
+        }
+        if (!title && element.tags['man_made']) {
+            title = element.tags['man_made'];
+            className = "pier";
+        }
+        if (element.tags['harbour'] == 'yes') {
+            className = "harbour";
+            if (element.tags['seasonal'] == 'yes') {
+                className = "seasonal";
+            }
+        }
+        if (title) {
+            if (className) { className = ' class="' + className + '"';}
+            title = "<h4" + className + ">" + title + "</h4>";
+        }
+        return title;
+    },
+
+    cleanKey: function (element, key) {
+        key = L.Control.RevealOSM.prototype.cleanKey.call(this, element, key);
+        return key.replace('harbour', '');
+    },
+
+    formatIcon: function (element, key) {
+        var icon = "";
+        if (key.match(/vhf|channel/i)) {
+            icon = '<div class="icon vhf info">' + element.tags[key] + "</div>";
+        }
+        return icon;
+    },
+
+    formatPhone: function (element, key) {
+        var output = "";
+        if (key.match(/phone/i)) {
+            output = '<div class="phone">' + element.tags[key] + "</div>";
+        }
+        return output;
+    }
+
+    // formatContent: function (element) {
+    //     var content = "",
+    //         raw_tags = "",
+    //         phone = "",
+    //         title = this.formatTitle(element);
+    //     if (title) {
+    //         content += title;
+    //     }
+    //     for (var tag in element.tags) {
+    //         content += this.formatIcon(element, tag);
+    //         phone += this.formatPhone(element, tag);
+    //         if (!this.isAllowedKey(tag)) { continue;}
+    //         raw_tags += this.formatKey(element, tag);
+    //     }
+    //     content += phone;
+    //     content += '<div class="raw_tags">' + raw_tags + '</div>';
+    //     return content;
+    // }
+
+});
diff --git a/carte_fluviale/static/carte_fluviale/carte_fluviale.css b/carte_fluviale/static/carte_fluviale/carte_fluviale.css
@@ -0,0 +1,55 @@
+.leaflet-popup-content h4.harbour,
+.leaflet-popup-content h4.seasonal,
+.leaflet-popup-content h4.pier {
+    text-indent: 26px;
+}
+.leaflet-popup-content h4.harbour {
+    background: url("./harbour.png") no-repeat scroll center left transparent;
+}
+.leaflet-popup-content h4.seasonal {
+    background: url("./seasonal.png") no-repeat scroll center left transparent;
+}
+.leaflet-popup-content h4.pier {
+    background: url("./pier.png") no-repeat scroll center left transparent;
+}
+.leaflet-popup-content .icon {
+    display: inline-block;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    width: 36px;
+    margin: 0 10px 10px 0;
+}
+.leaflet-popup-content .raw_tags {
+    background-color: #e5e5e5;
+    padding: 10px;
+}
+.leaflet-popup-content .phone {
+    background: url("./phone.png") no-repeat scroll center left transparent;
+    height: 36px;
+    line-height: 36px;
+    text-indent: 40px;
+    font-size: 1.2em;
+}
+.leaflet-popup-content .info {
+    background: white;
+    color: black;
+}
+.leaflet-popup-content .vhf {
+    border: 4px solid red;
+    position: relative;
+    font-weight: bold;
+    font-size: 1.3em;
+    line-height: 45px;
+}
+.leaflet-popup-content .vhf:before {
+    content: "VHF";
+    left: 6px;
+    position: absolute;
+    top: -12px;
+    font-size: 0.8em;
+}
+.reveal-osm-popup li strong {
+    display: inline-block;
+    width: 100px;
+}
diff --git a/carte_fluviale/static/carte_fluviale/harbour.png b/carte_fluviale/static/carte_fluviale/harbour.png
diff --git a/carte_fluviale/static/carte_fluviale/pier.png b/carte_fluviale/static/carte_fluviale/pier.png
diff --git a/carte_fluviale/static/carte_fluviale/seasonal.png b/carte_fluviale/static/carte_fluviale/seasonal.png
diff --git a/carte_fluviale/templates/leaflet_storage/map_detail.html b/carte_fluviale/templates/leaflet_storage/map_detail.html
@@ -8,11 +8,15 @@
     {% compress css %}
         {% leaflet_storage_css %}
         <link rel="stylesheet" href="{{ STATIC_URL }}storage/contrib/css/storage.ui.default.css">
+        <link rel="stylesheet" href="{{ STATIC_URL }}reveal_osm/Leaflet.RevealOSM.css" />
+        <link rel="stylesheet" href="{{ STATIC_URL }}carte_fluviale/carte_fluviale.css" />
     {% endcompress css %}
     {% compress js %}
         {% leaflet_storage_js %}
+        <script src="{{ STATIC_URL }}reveal_osm/Leaflet.RevealOSM.js"></script>
         <script src="{{ STATIC_URL }}storage/src/locale/fr.js"></script>
         <script src="{{ STATIC_URL }}storage/contrib/js/storage.ui.default.js"></script>
+        <script src="{{ STATIC_URL }}carte_fluviale/CustomRevealOSM.js"></script>
     {% endcompress js %}
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 {% endblock %}

diff --git a/carte_fluviale/templates/leaflet_storage/map_init.html b/carte_fluviale/templates/leaflet_storage/map_init.html
@@ -1,10 +1,5 @@
     <div id="map"></div>
     <script type="text/javascript">
         var MAP = new L.Storage.Map("map", {{ map_settings|safe }});
-        L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
-            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, sea marks <a href="http://openseamap.org">OpenSeaMap</a>',
-            maxZoom: 18,
-            minZoom: 10,
-            zIndex: 1000
-        }).addTo(MAP);
+        MAP.revealOSMControl = (new RevealOSM()).addTo(MAP);
     </script>
diff --git a/fabfile.py b/fabfile.py
@@ -251,19 +251,23 @@ def collect_remote_statics():
     remote_static_dir = '{project_dir}/{project_name}/remote_static'.format(**env)
     run('mkdir -p {0}'.format(remote_static_dir))
     remote_repositories = {
-        'leaflet': "git://github.com/Leaflet/Leaflet.git",
-        'draw': "git://github.com/Leaflet/Leaflet.draw.git",
-        'hash': "git://github.com/mlevans/leaflet-hash.git",
-        'storage': 'git://github.com/yohanboniface/Leaflet.Storage.git',
-        'edit_in_osm': 'git://github.com/yohanboniface/Leaflet.EditInOSM.git',
-        'minimap': 'git://github.com/Norkart/Leaflet-MiniMap.git',
+        'leaflet': "git://github.com/Leaflet/Leaflet.git@master",
+        'draw': "git://github.com/Leaflet/Leaflet.draw.git@master",
+        'hash': "git://github.com/mlevans/leaflet-hash.git@master",
+        'storage': 'git://github.com/yohanboniface/Leaflet.Storage.git@master',
+        'edit_in_osm': 'git://github.com/yohanboniface/Leaflet.EditInOSM.git@master',
+        'reveal_osm': 'git://github.com/yohanboniface/Leaflet.RevealOSM.git@master',
+        'minimap': 'git://github.com/Norkart/Leaflet-MiniMap.git@master',
     }
     with cd(remote_static_dir):
-        for subdir, repository in remote_repositories.iteritems():
+        for subdir, path in remote_repositories.iteritems():
+            repository, branch = path.split('@')
             with hide("running", "stdout"):
                 exists = run('if [ -d "{0}" ]; then echo 1; fi'.format(subdir))
             if exists:
                 with cd(subdir):
                     run('git pull')
             else:
                 run('git clone {0} {1}'.format(repository, subdir))
+            with cd(subdir):
+                run('git checkout {0}'.format(branch))