change_form.html 5.44 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
{% extends "admin/change_form.html" %}

{% load static %}

{% block admin_change_form_document_ready %}
    {{ block.super }}

    <script type="text/javascript">
        var $ = django.jQuery;

11
12
13
14
        var conf = {
            // Map
            'map_container_selector': $('.field-coords div:first-child'),
            'map_imagery_date': '2017-01-16',
15

16
17
18
            // Scientific name suggestion
            'snsuggest_container_selector': $('.field-scientific_name div:first-child'),
            'sn_value_selector': $("#id_scientific_name"),
19

20
21
22
23
            'icon_success': '{% static "admin/img/icon-yes.svg" %}',
            'icon_warning': '{% static "admin/img/icon-alert.svg" %}',
            'icon_error': '{% static "admin/img/icon-no.svg" %}'
        };
24

25
26
27
28
        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>';
29

30
31
            return res;
        };
32

33
34
35
        var fuzzyMatchAction = function (r) {
            var res = '<img src="' + conf.icon_warning + ' " /> ';
            res += 'Fuzzy match at GBIF ';
36

37
            res += '(' + '<strong><i>' + r.canonicalName + '</i></strong>' + ' confidence: ' + r.confidence + ')';
38

39
40
            return res;
        };
41

42
43
44
45
46
47
48
49
50
51
52
53
54
55
        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 + ' " /> ';
            res += ':( Species unknown at GBIF ';

            return res;
        };
56

57
58
        var GBIFSpeciesMatch = function () {
            $('#results').empty();
59

60
61
62
            var params = {
                rank: 'species',
                name: conf.sn_value_selector.val()
63
64
            };

65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
            $.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;
                }

                $('#results').html(res);
            })
        };

        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
                })
            });
127

128
            var layer = new ol.layer.Tile({source: source});
129

130
            map.addLayer(layer);
131

132
133
            return map;
        };
134

135
136
137
138
139
140
141
142
143
144
145
        // 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
            });
146

147
148
            map.addLayer(vectorLayer);
        };
149

150
151
152
153
154
155
156
157
158
        var ShowMap = function () {
            map = ShowBaseMap();
            ShowPoint(map, -73, 167)
        };


        $(function () {
            // 1. Scientific name match
            conf.snsuggest_container_selector.append('<div id="results"></div>');
159
160
161
162
            // Call on page load...
            GBIFSpeciesMatch();
            // ... And when value change
            conf.sn_value_selector.on('input', GBIFSpeciesMatch);
163
164
165
166

            // 2. OL map
            conf.map_container_selector.append('<div id="map" style="width: 800px; height: 600px;"></div>');
            ShowMap();
167
168
169
170
        });
    </script>

{% endblock %}