Basic Antarctica map on specimen edit page.

website/specimens/admin.py

@@ -32,6 +32,14 @@ class SpecimenAdmin(admin.ModelAdmin):
         SpecimenPictureInline,
     ]
 
+    class Media:
+        css = {
+             "all": ("https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.css",)
+        }
+
+        js = ("https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js",
+              "https://cdnjs.cloudflare.com/ajax/libs/ol3/3.15.1/ol.js")
+
 @admin.register(SpecimenLocation)
 class SpecimenLocationAdmin(admin.ModelAdmin):
     pass

website/specimens/templates/admin/specimens/specimen/change_form.html

@@ -8,9 +8,13 @@
     <script type="text/javascript">
         var $ = django.jQuery;
 
-        $(function() {
         var conf = {
-                'container_selector': $('.field-scientific_name div:first-child'),
+            // Map
+            'map_container_selector': $('.field-coords div:first-child'),
+            'map_imagery_date': '2017-01-16',
+
+            // Scientific name suggestion
+            'snsuggest_container_selector': $('.field-scientific_name div:first-child'),
             'sn_value_selector': $("#id_scientific_name"),
 
             'icon_success': '{% static "admin/img/icon-yes.svg" %}',
@@ -18,41 +22,39 @@
             'icon_error': '{% static "admin/img/icon-no.svg" %}'
         };
 
-            var exactMatchAction = function(r){
-                var res='<img src="' + conf.icon_success + ' " /> ';
+        var exactMatchAction = function (r) {
+            var res = '<img src="' + conf.icon_success + ' " /> ';
             res += 'Ok, exact species name found at GBIF ';
             res += 'with a confidence score of <strong>' + r.confidence + '</strong>';
 
             return res;
         };
 
-            var fuzzyMatchAction = function(r){
-                var res='<img src="' + conf.icon_warning + ' " /> ';
+        var fuzzyMatchAction = function (r) {
+            var res = '<img src="' + conf.icon_warning + ' " /> ';
             res += 'Fuzzy match at GBIF ';
 
-                res += '(' + '<strong><i>' + r.canonicalName + '</i></strong>' +' confidence: ' + r.confidence + ')';
-
-                console.log(r)
+            res += '(' + '<strong><i>' + r.canonicalName + '</i></strong>' + ' confidence: ' + r.confidence + ')';
 
             return res;
         };
 
-            var higherrankAction = function(r){
-                var res='<img src="' + conf.icon_warning + ' " /> ';
+        var higherrankAction = function (r) {
+            var res = '<img src="' + conf.icon_warning + ' " /> ';
             res += 'Higher taxon found at GBIF ';
             res += '(' + r.rank + ': ' + r.canonicalName + ')';
 
             return res;
         };
 
-            var noneAction = function(r){
-                var res='<img src="' + conf.icon_error + ' " /> ';
+        var noneAction = function (r) {
+            var res = '<img src="' + conf.icon_error + ' " /> ';
             res += ':( Species unknown at GBIF ';
 
             return res;
         };
 
-            var GBIFSpeciesMatch = function (){
+        var GBIFSpeciesMatch = function () {
             $('#results').empty();
 
             var params = {
@@ -60,26 +62,108 @@
                 name: conf.sn_value_selector.val()
             };
 
-                $.getJSON('http://api.gbif.org/v1/species/match', params, function(r) {
+            $.getJSON('http://api.gbif.org/v1/species/match', params, function (r) {
                 var res;
 
                 switch (r.matchType) {
-                        case "EXACT": res = exactMatchAction(r); break;
-                        case "FUZZY": res = fuzzyMatchAction(r); break;
-                        case "HIGHERRANK": res = higherrankAction(r); break;
-                        case "NONE": res = noneAction(r); break;
+                    case "EXACT":
+                        res = exactMatchAction(r);
+                        break;
+                    case "FUZZY":
+                        res = fuzzyMatchAction(r);
+                        break;
+                    case "HIGHERRANK":
+                        res = higherrankAction(r);
+                        break;
+                    case "NONE":
+                        res = noneAction(r);
+                        break;
                 }
 
                 $('#results').html(res);
             })
         };
 
-            conf.container_selector.append('<div id="results"></div>');
+        var ShowBaseMap = function () {
+            proj4.defs("EPSG:3031",
+                "+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +k=1 +x_0=0 +y_0=0 " +
+                "+datum=WGS84 +units=m +no_defs");
+            ol.proj.get("EPSG:3031").setExtent([-4194304, -4194304, 4194304, 4194304]);
+
+            var map = new ol.Map({
+                view: new ol.View({
+                    maxResolution: 8192.0,
+                    projection: ol.proj.get("EPSG:3031"),
+                    extent: [-4194304, -4194304, 4194304, 4194304],
+                    center: [0, 0],
+                    zoom: 0,
+                    maxZoom: 5,
+                }),
+                target: "map",
+                renderer: ["canvas", "dom"],
+            });
+
+            var source = new ol.source.WMTS({
+                url: "//map1{a-c}.vis.earthdata.nasa.gov/wmts-antarctic/wmts.cgi?TIME=" + conf.map_imagery_date,
+                layer: "MODIS_Terra_CorrectedReflectance_TrueColor",
+                extent: [-4194304, -4194304, 4194304, 4194304],
+                format: "image/jpeg",
+                matrixSet: "EPSG3031_250m",
+
+                tileGrid: new ol.tilegrid.WMTS({
+                    origin: [-4194304, 4194304],
+                    resolutions: [
+                        8192.0,
+                        4096.0,
+                        2048.0,
+                        1024.0,
+                        512.0,
+                        256.0
+                    ],
+                    matrixIds: [0, 1, 2, 3, 4, 5],
+                    tileSize: 512
+                })
+            });
+
+            var layer = new ol.layer.Tile({source: source});
+
+            map.addLayer(layer);
+
+            return map;
+        };
+
+        // lat/lon: EPSG 4326
+        var ShowPoint = function (map, lat, lon) {
+            var vectorSource = new ol.source.Vector({
+                features: [new ol.Feature({
+                    geometry: new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3031'))
+                })]
+            });
+
+            var vectorLayer = new ol.layer.Vector({
+                source: vectorSource
+            });
+
+            map.addLayer(vectorLayer);
+        };
+
+        var ShowMap = function () {
+            map = ShowBaseMap();
+            ShowPoint(map, -73, 167)
+        };
 
+
+        $(function () {
+            // 1. Scientific name match
+            conf.snsuggest_container_selector.append('<div id="results"></div>');
             // Call on page load...
             GBIFSpeciesMatch();
             // ... And when value change
             conf.sn_value_selector.on('input', GBIFSpeciesMatch);
+
+            // 2. OL map
+            conf.map_container_selector.append('<div id="map" style="width: 800px; height: 600px;"></div>');
+            ShowMap();
         });
     </script>