Geo: add IGN source

4 files changed, 92 insertions, 9 deletions

diff --git a/UPGRADE_V4.md b/UPGRADE_V4.md
index 33a2448db..f69dbb9ec 100644
--- a/UPGRADE_V4.md
+++ b/UPGRADE_V4.md
@@ -9,6 +9,6 @@ cd /srv/ishtar/{instance_name}
 # update fixtures
 ./manage.py loaddata /usr/share/python3-django-ishtar/fixtures/initial_data-auth-fr.json 
 # migrate to new geo management
-./manage.py migrate_to_geo_v4
+./manage.py migrate_to_geo_v4 --process {number_of_thread}  # number_of_thread depend on your CPU
 # edit profile type permissions for geovectordata
 -> http(s)://{my-ihstar}/admin/ishtar_common/profiletypesummary/
\ No newline at end of file
diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index ef2651348..8a5ee6071 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -173,18 +173,70 @@ var TrackPositionControl = (function (Control) {
 /* base layers */
 
 var source_osm = function(options){
-    return new ol.layer.Tile({
-        source: new ol.source.OSM()
-    });
+	options["source"] = new ol.source.OSM();
+    return new ol.layer.Tile(options);
 };
 
+var ign_resolutions = [
+    156543.03392804103,
+    78271.5169640205,
+    39135.75848201024,
+    19567.879241005125,
+    9783.939620502562,
+    4891.969810251281,
+    2445.9849051256406,
+    1222.9924525628203,
+    611.4962262814101,
+    305.74811314070485,
+    152.87405657035254,
+    76.43702828517625,
+    38.218514142588134,
+    19.109257071294063,
+    9.554628535647034,
+    4.777314267823517,
+    2.3886571339117584,
+    1.1943285669558792,
+    0.5971642834779396,
+    0.29858214173896974,
+    0.14929107086948493,
+    0.07464553543474241
+] ;
+
+var ign_key = "essentiels";
+
+var source_ign = function(options){
+	options["source"] = new ol.source.WMTS({
+		url: "https://wxs.ign.fr/" + ign_key + "/geoportail/wmts",
+		layer: "ORTHOIMAGERY.ORTHOPHOTOS",
+		matrixSet: "PM",
+		format: "image/jpeg",
+		style: "normal",
+		tileGrid : new ol.tilegrid.WMTS({
+			origin: [-20037508,20037508], // topLeftCorner
+			resolutions: ign_resolutions, // résolutions
+			matrixIds: ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19"] // ids des TileMatrix
+		})
+	});
+	return new ol.layer.Tile(options);
+}
+
 var default_map_layers = {
-    'osm': source_osm
+    'osm': source_osm,
+    'ign': source_ign
 };
 
 var get_layers = function(layers){
     if (!layers){
-        layers = [{'type': 'osm', 'options': null}];
+        layers = [
+        	{
+        		'type': 'ign',
+        		'options': {'title': "IGN (France)", 'visible': false, "type": 'base'}
+        	},
+        	{
+        		'type': 'osm',
+        		'options': {'title': "OpenStreetMap", 'visible': true, "type": 'base'}
+        	}
+        ];
     }
     var ol_layers = [];
     for (idx in layers){
@@ -565,10 +617,17 @@ var initialize_test_map = function (slug_pk) {
     $("#"+id).hide();
 }
 
+
 var initialize_base_map = function(map_id, layers){
     center = wkt_format.readGeometry(map_default_center).getCoordinates();
 
-    map_layers[map_id] = get_layers(layers);
+    map_layers[map_id] = [
+    	new ol.layer.Group({
+			title: 'Base maps',
+			visible: true,
+			layers: get_layers(layers)
+		})
+	];
 
     map_view[map_id] = new ol.View({
         projection: view_projection,
@@ -596,6 +655,11 @@ var initialize_base_map = function(map_id, layers){
         layers: map_layers[map_id],
         view: map_view[map_id]
     });
+    var layer_switcher = new ol.control.LayerSwitcher({
+		tipLabel: 'Légende',
+		groupSelectStyle: 'children'
+	});
+	map[map_id].addControl(layer_switcher);
 }
 
 var redraw_map = function(map_id, layers){
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index af4396be3..8041452c6 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -21,6 +21,8 @@
     <script language="javascript" type="text/javascript"
             src="{{STATIC_URL}}ol/ol.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript"
+            src="{{STATIC_URL}}ol-layerswitcher/ol-layerswitcher.js?ver={{VERSION}}"></script>
+    <script language="javascript" type="text/javascript"
             src="{{STATIC_URL}}datatables/datatables.min.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}datatables/dataTables.bootstrap4.min.js?ver={{VERSION}}"></script>
     <script language="javascript" type="text/javascript" src="{{STATIC_URL}}datatables/dataTables.buttons.min.js?ver={{VERSION}}"></script>
@@ -93,6 +95,7 @@
     </script>
     {% endcompress %}
     <link rel="stylesheet" href="{{STATIC_URL}}ol/ol.css?ver={{VERSION}}">
+    <link rel="stylesheet" href="{{STATIC_URL}}ol-layerswitcher/ol-layerswitcher.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}bootstrap/bootstrap.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}font-awesome/css/font-awesome.min.css?ver={{VERSION}}">
     {% compress css %}
diff --git a/scss/custom.scss b/scss/custom.scss
index bf1af0628..8e0d9dd59 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -990,8 +990,24 @@ ul.compact{
     border-color: $gray-700 transparent transparent transparent;
 }
 
-.window-map .ol-overviewmap {
-    bottom: 3em;
+.window-map .ol-overviewmap,
+#main-container .ol-overviewmap {
+    bottom: 2.5em;
+}
+
+.layer-switcher.ol-control {
+	ul {
+		margin: 0;
+		margin-bottom: 0.5rem;
+	}
+	li input{
+		top: 0.2em;
+	}
+	button {
+		width: 38px;
+		height: 38px;
+		background-color: white;
+	}
 }
 
 .ol-rotate {