Manage multi categories on hovering - Manage different favicon for each map

9 files changed, 241 insertions, 4 deletions

diff --git a/chimere/migrations/0012_area_favicon.py b/chimere/migrations/0012_area_favicon.py
new file mode 100644
index 0000000..7bb1552
--- /dev/null
+++ b/chimere/migrations/0012_area_favicon.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.5 on 2018-03-11 15:54
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('chimere', '0011_auto_20171123_1654'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='area',
+            name='favicon',
+            field=models.ImageField(blank=True, null=True, upload_to='', verbose_name='Favicon'),
+        ),
+    ]
diff --git a/chimere/models.py b/chimere/models.py
index 27156bd..27b7995 100644
--- a/chimere/models.py
+++ b/chimere/models.py
@@ -1988,6 +1988,7 @@ class Area(models.Model, SimpleArea):
     available = models.BooleanField(_("Available"))
     # logo = models.ImageField(_("Logo"), upload_to='logos', blank=True,
     #                          null=True)
+    favicon = models.ImageField(_(u"Favicon"), blank=True, null=True)
     upper_left_corner = models.PointField(
         _("Upper left corner"), default='POINT(0 0)',
         srid=settings.CHIMERE_EPSG_DISPLAY_PROJECTION)
diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index 4343ce5..d7542d3 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -1903,3 +1903,13 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
   max-width: none;
 }
 
+.map_hover_div{
+    position: absolute;
+    background-color: white;
+    border: 2px solid #aaa;
+    border-radius: 6px;
+    padding: 4px;
+    transform-origin: top left;
+    transform: scale(0.75, 0.75);
+    display: none;
+}
diff --git a/chimere/static/chimere/img/extra-icons.png b/chimere/static/chimere/img/extra-icons.png
new file mode 100644
index 0000000..b001fa4
--- /dev/null
+++ b/chimere/static/chimere/img/extra-icons.png
diff --git a/chimere/static/chimere/img/extra-icons.svg b/chimere/static/chimere/img/extra-icons.svg
new file mode 100644
index 0000000..b940573
--- /dev/null
+++ b/chimere/static/chimere/img/extra-icons.svg
@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="34.883926mm"
+   height="34.883926mm"
+   viewBox="0 0 34.883926 34.883926"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="extra-icons.svg"
+   inkscape:export-filename="/home/etienne/Work/chimere-project/chimere/chimere/static/chimere/img/extra-icons.png"
+   inkscape:export-xdpi="9.4700003"
+   inkscape:export-ydpi="9.4700003">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.087500001"
+     inkscape:cx="-1572.5547"
+     inkscape:cy="-1301.9821"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1080"
+     inkscape:window-x="1280"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-76.485123,-91.136909)">
+    <circle
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       id="path4485"
+       cx="93.927086"
+       cy="108.57887"
+       r="16.441963" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4487"
+       style="font-style:normal;font-weight:normal;font-size:6px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="scale(0.26458333)"><flowRegion
+         id="flowRegion4489"><rect
+           id="rect4491"
+           width="130"
+           height="132.85715"
+           x="287.14285"
+           y="343.94824" /></flowRegion><flowPara
+         id="flowPara4493"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:192px;font-family:'Bitstream Charter';-inkscape-font-specification:'Bitstream Charter';fill:#ffffff;fill-opacity:1">+</flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4495"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:96px;line-height:125%;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+         id="flowRegion4497"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:96px;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans'"><rect
+           id="rect4499"
+           width="86.579826"
+           height="96.789032"
+           x="285.87317"
+           y="345.20731"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:96px;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans'" /></flowRegion><flowPara
+         id="flowPara4501" /></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4499"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:96px;line-height:125%;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="scale(0.26458333)"><flowRegion
+         id="flowRegion4501"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:96px;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans'"><rect
+           id="rect4503"
+           width="92.176422"
+           height="92.934036"
+           x="306.83383"
+           y="363.13751"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:96px;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans'" /></flowRegion><flowPara
+         id="flowPara4505"></flowPara></flowRoot>    <flowRoot
+       xml:space="preserve"
+       id="flowRoot4507"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:120px;line-height:125%;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       transform="matrix(0.26458333,0,0,0.26458333,0.94494047,-4.2522321)"><flowRegion
+         id="flowRegion4509"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:120px;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f9f9f9"><rect
+           id="rect4511"
+           width="129.10715"
+           height="138.21428"
+           x="301.25"
+           y="358.23398"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:120px;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f9f9f9" /></flowRegion><flowPara
+         id="flowPara4515">+</flowPara></flowRoot>  </g>
+</svg>
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index a913d8d..61629b9 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -562,6 +562,9 @@ function transformCoordToLonLat(coord) {
                 if (!settings[map_id].edition){
                     if (methods._is_popuphovering(map_id)) return;
                     $(settings[map_id].popup_item).popover('destroy');
+                    settings[map_id].current_hover = null;
+                    $("#" + map_id + "_hover").html("");
+                    $("#" + map_id + "_hover").hide();
                     if (feature) {
                         // zoom on aggregated
                         var key = feature.get('key');
@@ -582,14 +585,49 @@ function transformCoordToLonLat(coord) {
                     }
                 }
             });
+            $("#" + map_id).append(
+                "<div class='map_hover_div' id='" + map_id + "_hover'></div>");
+            settings[map_id].current_hover = null;
 
             settings[map_id].map.on('pointermove', function(e) {
                 var pixel = settings[map_id].map.getEventPixel(e.originalEvent);
+                var feature = settings[map_id].map.forEachFeatureAtPixel(
+                    e.pixel,
+                    function(feature, layer) {
+                        return feature;
+                    }
+                );
                 var hit = settings[map_id].map.hasFeatureAtPixel(pixel);
                 var target = settings[map_id].map.getTarget();
                 target = typeof target === "string" ?
                     document.getElementById(target) : target;
                 target.style.cursor = hit ? 'pointer' : '';
+                /* manage hover on a feature */
+                if (feature && feature.getProperties()['hover_div']){
+                    var pk = feature.getId();
+                    if (settings[map_id].current_hover == pk) return;
+                    settings[map_id].current_hover = pk;
+                    $("#" + map_id + "_hover").html(
+                        feature.getProperties()['hover_div']);
+                    var pixel = settings[map_id].map.getPixelFromCoordinate(
+                        feature.getGeometry().getCoordinates()
+                    );
+                    var x = pixel[0] + feature.getProperties()['popup_offset_x']
+                         + 22;
+                    var y = pixel[1] - feature.getProperties()['popup_offset_y']
+                         - 0;
+                    $("#" + map_id + "_hover").css(
+                        {top: y + 'px', left: x + 'px'}
+                    );
+                    $("#" + map_id + "_hover").show();
+
+                } else {
+                    if (settings[map_id].current_hover){
+                        settings[map_id].current_hover = null;
+                        $("#" + map_id + "_hover").html("");
+                        $("#" + map_id + "_hover").hide();
+                    }
+                }
             });
 
             /* Vectors layer */
@@ -1986,6 +2024,30 @@ function transformCoordToLonLat(coord) {
                 return iconStyle;
             }
         },
+        _getExtraIconStyle: function(map_id, extra_icons){
+            var extra_icons_style;
+            for (var i in settings[map_id].iconStyles){
+                if (i == "extra_icons"){
+                    extra_icons_style = settings[map_id].iconStyles[i];
+                }
+            }
+            if (!extra_icons_style){
+                var icon_url = STATIC_URL + "chimere/img/extra-icons.png";
+                var size = [13, 13];
+                var anchor = [-7, 37];
+                var iconStyle = new ol.style.Style({
+                    image: new ol.style.Icon({
+                        anchor: anchor,
+                        anchorXUnits: 'pixels',
+                        anchorYUnits: 'pixels',
+                        src: icon_url,
+                        size: size
+                    })
+                });
+                settings[map_id].iconStyles["extra_icons"] = iconStyle;
+            }
+            return settings[map_id].iconStyles["extra_icons"];
+        },
         /*
         * Put a marker on the map
         */
@@ -1997,18 +2059,36 @@ function transformCoordToLonLat(coord) {
             var lat = mark.geometry.coordinates[1];
             var lon = mark.geometry.coordinates[0];
 
+            var extra_icons = [];
+            for (idx=0 ; idx < mark.properties.extra_icons.length ; idx++){
+                extra_icons.push(mark.properties.extra_icons[idx].icon_path);
+            }
+
+            var iconStyle = methods._getIconStyle(map_id, mark.properties, MEDIA_URL);
+            var hover_div = "";
+            if (extra_icons.length){
+                iconStyle = [
+                    iconStyle, methods._getExtraIconStyle(map_id, extra_icons)
+                ];
+                hover_div = "<div>"
+                for (idx=0 ; idx < extra_icons.length ; idx ++){
+                    hover_div += "<img src='" + MEDIA_URL + extra_icons[idx] + "'/>";
+                }
+                hover_div += "</div>";
+            }
+
             var iconFeature = new ol.Feature({
                 geometry: transform(new ol.geom.Point([lon, lat])),
                 name: mark.properties.name,
                 pk: mark.properties.pk,
                 key: mark.properties.key,
                 icon_path: mark.properties.icon_path,
+                extra_icons: extra_icons,
+                hover_div: hover_div,
                 popup_offset_x: mark.properties.icon_popup_offset_x,
                 popup_offset_y: mark.properties.icon_popup_offset_y
             });
 
-            var iconStyle = methods._getIconStyle(map_id, mark.properties, MEDIA_URL);
-
             iconFeature.setStyle(iconStyle);
             iconFeature.setId(mark.properties.key);
             settings[map_id].dbFeatures.push(iconFeature);
diff --git a/chimere/templates/base.html b/chimere/templates/base.html
index f1f4d5b..b80c42f 100644
--- a/chimere/templates/base.html
+++ b/chimere/templates/base.html
@@ -1,4 +1,5 @@
-{% load i18n %}<html lang="en">
+{% load i18n %}<!doctype html>
+<html lang="fr">
 <head>
     <title>{% block title %}{{PROJECT_NAME}}{% endblock %}</title>
     {% if MOBILE %}<meta name="apple-mobile-web-app-capable" content="yes">
diff --git a/chimere/templates/chimere/base.html b/chimere/templates/chimere/base.html
index 2f62a2e..2afed37 100644
--- a/chimere/templates/chimere/base.html
+++ b/chimere/templates/chimere/base.html
@@ -1,6 +1,9 @@
 {% extends "base.html" %}
 {% load chimere_tags i18n %}
 {% block extra_head %}
+{% if favicon %}
+<link rel="shortcut icon" href="{{ MEDIA_URL }}{{favicon}}"/>
+{% endif %}
 <link rel="stylesheet" href="{{ STATIC_URL }}font-awesome/css/font-awesome.min.css?ver=4.3.0" />
 <link rel="stylesheet" href="{{ STATIC_URL }}bootstrap/bootstrap.min.css?ver=3.0.0" />
 <link rel="stylesheet" href="{{ STATIC_URL }}chimere/css/styles.css?ver={{VERSION}}" />
diff --git a/chimere/views.py b/chimere/views.py
index 00b7f95..2dfb84e 100644
--- a/chimere/views.py
+++ b/chimere/views.py
@@ -99,7 +99,6 @@ def get_base_response(request, area_name=""):
         "MOBILE": settings.MOBILE_TEST or
         current_site.domain in settings.MOBILE_DOMAINS
     }
-
     base_url = reverse(settings.MAIN_INDEX)
     if not base_url.startswith('/'):
         base_url = '/' + base_url
@@ -115,6 +114,8 @@ def get_base_response(request, area_name=""):
 
     base_response_dct['area'] = area
     base_response_dct['area_name'] = area_name
+    if area and area.favicon:
+        base_response_dct['favicon'] = area.favicon
     if area and area.external_css:
         base_response_dct['css_area'] = area.external_css
     base_response_dct['dynamic_categories'] = \