Guts · Guts · Mar 30, 2020 · Mar 30, 2020 · Mar 30, 2020 · Mar 30, 2020
diff --git a/assets/jobs/css/map.css b/assets/jobs/css/map.css
@@ -0,0 +1,95 @@
+/* MAP */
+
+.big-box, .mini-box {
+    text-align: center;
+    margin: 2px;
+    font-size: 1.5em;
+}
+
+.big-box {
+    height: 900px;
+    line-height: 900px;
+}
+
+.mini-box {
+    height: 300px;
+    /* height: auto; */
+    line-height: 300px;
+}
+
+.mapboxgl-popup {
+    max-width: 400px;
+    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+.map-overlay {
+    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    position: absolute;
+    width: 25%;
+    top: 0;
+    left: 0;
+    padding: 10px;
+}
+
+.map-overlay .map-overlay-inner {
+    background-color: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.map-overlay h2 {
+    line-height: 24px;
+    display: block;
+    margin: 0 0 10px;
+}
+
+.map-overlay .legend .bar {
+    height: 10px;
+    width: 100%;
+    background: linear-gradient(to right, #fca107, #7f3121);
+}
+
+.map-overlay input {
+    background-color: transparent;
+    display: inline-block;
+    width: 100%;
+    position: relative;
+    margin: 0;
+    cursor: ew-resize;
+}
+
+a {
+    text-decoration: none;
+    color: #2dc4b2;
+}
+
+/* #console {
+    position: absolute;
+    width: 240px;
+    margin: 10px;
+    padding: 10px 20px;
+    background-color: white;
+} */
+
+.map-slider {
+    margin-bottom: 20px;
+}
+
+.lgd-row {
+    height: 12px;
+    width: 100%;
+}
+
+.colors {
+    background: linear-gradient(to left, #2dc4b2, #3bb3c3, #669ec4, #8b88b6, #a2719b, #aa5e79);
+    margin-bottom: 5px;
+}
+
+.label {
+    width: 15%;
+    display: inline-block;
+    text-align: center;
+    color: #000;
+}
diff --git a/assets/jobs/css/style.css b/assets/jobs/css/style.css
@@ -1,64 +1,33 @@
 body {
   padding-top: 5rem;
 }
+
 #main {
   padding: 40px 15px;
   text-align: center;
 }
 
 div#weekday rect {
-    fill: #FF0080;
+  fill: #FF0080;
 }
 
 div.chart svg {
-  width:110%;
+  width: 110%;
   height: 400px;
 }
 
-/* MAP */
-#map { position: absolute; top:0; bottom:0; right:0; left:0; }
-.info {
-  padding: 6px 8px;
-  font: 14px/16px Arial, Helvetica, sans-serif;
-  background: white;
-  background: rgba(255,255,255,0.8);
-  box-shadow: 0 0 15px rgba(0,0,0,0.2);
-  border-radius: 5px;
-}
-.info h4 {
-  margin: 0 0 5px;
-  color: #777;
-}
-
-#map-container {
-    position: absolute;
-    padding-top: 5rem;
-    top:0; bottom:0; right:0; left:0;
-    height: 100%;
-    width: 100%;
-}
-
-.mapboxgl-canvas-container {
-
-  height: 100vh;
-
-}
-
-.mapboxgl-popup {
-  max-width: 400px;
-  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
-  }
-
 /*FOOTER*/
 
 html {
   position: relative;
   min-height: 100%;
 }
+
 body {
   /* Margin bottom by footer height */
   margin-bottom: 60px;
 }
+
 .footer {
   position: absolute;
   bottom: 0;
@@ -69,7 +38,6 @@ body {
   color: #777;
 }
 
-
 /*MISC*/
 
 .btn-circle {
@@ -83,8 +51,6 @@ body {
   border-radius: 15px;
 }
 
-
-
 /* @group Scroll to Top */
 
 .scroll-to-top {
@@ -93,22 +59,20 @@ body {
   color: #18bc9c;
   font-size: 12px;
   text-decoration: none;
-
   position: fixed;
   bottom: 40px;
   right: 40px;
-  display:none;
-
+  display: none;
   -webkit-border-radius: 5px;
-  -moz-border-radius:    5px;
-  border-radius:         5px;
-  -moz-background-clip:    padding;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
-  background-clip:         padding-box;
+  background-clip: padding-box;
 }
 
 .scroll-to-top:hover {
   text-decoration: none;
 }
 
-/* @end Scroll to Top */
+/* @end Scroll to Top */
diff --git a/assets/jobs/js/map.js b/assets/jobs/js/map.js
@@ -1,6 +1,6 @@
 $(document).ready(function () {
     var map = new mapboxgl.Map({
-        container: 'map-container',
+        container: 'map-fr-metro',
         style: 'https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json',
         center: [2.6, 45.5],
         zoom: 4.7
@@ -17,22 +17,48 @@ $(document).ready(function () {
 
     // ADD DATA
     map.on('load', function () {
-        map.addSource("departements-fr", {
-            "type": "geojson",
-            "data": static_url + "jobs/geojson/fr_departements_jobs.geojson"
+        map.addLayer({
+            id: "boundaries",
+            type: 'circle',
+            source: {
+                type: 'geojson',
+                data: static_url + "jobs/geojson/fr_departements_jobs_centroids.geojson"
+            },
+            // filter: ['>=', ['number', ['get', 'JOBS_TOTAL']], 1],
+            paint: {
+                'circle-radius': [
+                    'interpolate',
+                    ['linear'],
+                    ['number', ['get', 'JOBS_TOTAL']],
+                    0, 4,
+                    5, 24
+                ],
+                'circle-color': [
+                    'interpolate',
+                    ['linear'],
+                    ['number', ['get', 'JOBS_TOTAL']],
+                    0, '#2DC4B2',
+                    1, '#3BB3C3',
+                    2, '#669EC4',
+                    3, '#8B88B6',
+                    4, '#A2719B',
+                    5, '#AA5E79'
+                ],
+                'circle-opacity': 0.8
+            }
         });
 
-        map.addLayer({
-            "id": "boundaries",
-            'type': 'fill',
-            'layout': {},
-            "source": "departements-fr",
-            'paint': {
-                'fill-color': '#AEBBFF',
-                'fill-opacity': 0.7,
-                'fill-outline-color': '#000000'
+        document.getElementById('slider').addEventListener('input', function (e) {
+            var year = parseInt(e.target.value);
+            console.log("selected year: " + year);
+            console.log("selected property: " + 'JOBS_' + year);
 
-            }
+            // update the map
+            // map.setFilter('boundaries', ['==', 'JOBS_' + year, 'JOBS_' + year]);
+            map.setPaintProperty('boundaries', 'circle-radius', ['number', ['get', 'JOBS_' + year]]);
+
+            // update text in the UI
+            document.getElementById('active-year').innerText = year;
         });
 
         // Change the cursor to a pointer when the mouse is over the states layer.

diff --git a/assets/jobs/js/map_idf.js b/assets/jobs/js/map_idf.js
@@ -0,0 +1,63 @@
+$(document).ready(function () {
+    var map = new mapboxgl.Map({
+        container: 'map-fr-idf',
+        style: 'https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json',
+        center: [2.35, 48.86],
+        zoom: 8
+    });
+
+    // CUSTOM MAP
+    // disable map rotation using right click + drag
+    map.dragRotate.disable();
+    // disable map rotation using touch rotation gesture
+    map.touchZoomRotate.disableRotation();
+
+    // Add zoom and rotation controls to the map.
+    // map.addControl(new mapboxgl.NavigationControl());
+
+    // ADD DATA
+    map.on('load', function () {
+        map.addSource("departements-fr", {
+            "type": "geojson",
+            "data": static_url + "jobs/geojson/fr_departements_jobs.geojson"
+        });
+
+        map.addLayer({
+            "id": "boundaries",
+            'type': 'fill',
+            'layout': {},
+            "source": "departements-fr",
+            'paint': {
+                'fill-color': '#AEBBFF',
+                'fill-opacity': 0.7,
+                'fill-outline-color': '#000000'
+
+            }
+        });
+
+        // Change the cursor to a pointer when the mouse is over the states layer.
+        map.on('mouseenter', 'boundaries', function () {
+            map.getCanvas().style.cursor = 'pointer';
+        });
+        // Change it back to a pointer when it leaves.
+        map.on('mouseleave', 'boundaries', function () {
+            map.getCanvas().style.cursor = '';
+        });
+
+
+        // When a click event occurs on a feature in the states layer, open a popup at the
+        // location of the click, with description HTML from its properties.
+        map.on('click', 'boundaries', function (e) {
+            new mapboxgl.Popup()
+                .setLngLat(e.lngLat)
+                .setHTML('</h4>' + e.features[0].properties.nom + '</h4>' +
+                    ' (' + e.features[0].properties.code + ')<br />' + e.features[0].properties.JOBS_TOTAL + ' offres')
+                .addTo(map);
+        });
+
+        map.on("load", function (e) {
+            map.resize();
+        });
+    });
+
+});
diff --git a/elgeopaso/settings/base.py b/elgeopaso/settings/base.py
@@ -191,23 +191,10 @@
         "BACKEND": "django.template.backends.django.DjangoTemplates",
         # https://docs.djangoproject.com/fr/2.2/ref/settings/#template-dirs
         "DIRS": [str(PROJ_DIR / "templates")],
+        "APP_DIRS": False,
         "OPTIONS": {
             # https://docs.djangoproject.com/fr/2.2/ref/settings/#template-loaders
             # https://docs.djangoproject.com/fr/2.2/ref/templates/api/#loader-types
-            # "loaders": [
-            #     "django.template.loaders.cached.Loader"
-            #     "django.template.loaders.app_directories.Loader",
-            #     "django.template.loaders.filesystem.Loader",
-            # ],
-            "loaders": [
-                (
-                    "django.template.loaders.cached.Loader",
-                    [
-                        "django.template.loaders.filesystem.Loader",
-                        "django.template.loaders.app_directories.Loader",
-                    ],
-                ),
-            ],
             "context_processors": [
                 "django.template.context_processors.debug",
                 "django.template.context_processors.request",

diff --git a/elgeopaso/settings/local.py b/elgeopaso/settings/local.py
@@ -52,6 +52,10 @@
 # http://whitenoise.evans.io/en/latest/django.html#using-whitenoise-in-development
 INSTALLED_APPS = ["whitenoise.runserver_nostatic"] + INSTALLED_APPS  # noqa F405
 
+# TEMPLATES
+# ------------------------------------------------------------------------------
+# https://docs.djangoproject.com/fr/2.2/ref/settings/#templates
+TEMPLATES[-1]["APP_DIRS"] = True  # noqa: F405
 
 # EMAIL
 # ------------------------------------------------------------------------------