diff --git a/assets/jobs/css/map.css b/assets/jobs/css/map.css
new file mode 100644
index 00000000..ee16a54c
--- /dev/null
+++ 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
index 6657d49f..91427c33 100644
--- 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 */
\ No newline at end of file
diff --git a/assets/jobs/js/map.js b/assets/jobs/js/map.js
index 0c53cbaa..3ee3063d 100644
--- 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
new file mode 100644
index 00000000..24a27e6b
--- /dev/null
+++ 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('' + e.features[0].properties.nom + '' +
+ ' (' + e.features[0].properties.code + ')
' + 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
index 645f91e1..aee9995f 100644
--- 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
index b047e955..1ebc1cc1 100644
--- 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
# ------------------------------------------------------------------------------
diff --git a/elgeopaso/templates/base.html b/elgeopaso/templates/base.html
index f27c60a1..47757233 100644
--- a/elgeopaso/templates/base.html
+++ b/elgeopaso/templates/base.html
@@ -13,12 +13,6 @@
-
-
-
-
-
-
{% block title %}El Paso - Statistiques dynamiques sur l'emploi en géomatique{% endblock %}
@@ -40,19 +34,12 @@
-
-
-
-
-
-
+
-
-
{% endblock %}
+
+
{% block custom_css %}
{% endblock %}
@@ -90,7 +77,8 @@
{% else %}
-
+
+
{% endif %}
{% if user.is_staff %}
@@ -101,19 +89,18 @@
{% endblock %}
-
- {% block content %}
- {% endblock %}
-
+
+ {% block content %}
+ {% endblock %}
+