mapcode-js/sample.html at master · mapcode-foundation/mapcode-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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
127
128
<!--
    ~ Copyright (C) 2014-2015 Stichting Mapcode Foundation (http://www.mapcode.com)
    ~
    ~ Licensed under the Apache License, Version 2.0 (the "License");
    ~ you may not use this file except in compliance with the License.
    ~ You may obtain a copy of the License at
    ~
    ~    http://www.apache.org/licenses/LICENSE-2.0
    ~
    ~ Unless required by applicable law or agreed to in writing, software
    ~ distributed under the License is distributed on an "AS IS" BASIS,
    ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    ~ See the License for the specific language governing permissions and
    ~ limitations under the License.
-->

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="ctrynams.js" type="text/javascript"></script>
    <script src="ndata.js" type="text/javascript"></script>
    <script src="mapcode.js" type="text/javascript"></script>
</head>

<body>

<center>
    <h1>Sample mapcode HTML</h1>

    <script type="text/javascript">
        function submitmc() {
            var alphacode = document.getElementById("alphacode").value;
            var mapcode = document.getElementById("mapcode").value.toUpperCase();

            // decode mapcode
            var coords = decode(mapcode, alphacode);

            // show html
            var html = 'Mapcode "' + mapcode + '"';

            if (alphacode.length > 0) {
                html += ' (in the context of "' + getTerritoryFullname(alphacode) + '")';
            } else {
                html += ' (in unknown context "' + alphacode + '")';
            }

            if (!coords) {
                html += ' can not de decoded';
            } else {
                html += ': ' + coords.y + ", " + coords.x;
            }

            document.getElementById("resultdiv").innerHTML = html;
            return false;
        }
    </script>

    <br/>

    <form action="#" onsubmit="return submitmc();">
        Mapcode:
        <input type="text" id="mapcode" value="XX.XX" onkeyup="submitmc();">
        Territory context:
        <input type="text" id="alphacode" value="NLD" onkeyup="submitmc();">
        <input type="submit" value="Decode">
    </form>

    <div id="resultdiv"><font color=grey>Enter a territory and enter a mapcode:</font></div>

    <hr>
    <br/>

    <script type="text/javascript">
        function submitll() {
            var html = '';
            var alphacode = document.getElementById("alphacodell").value;
            var y = document.getElementById("llat").value;
            var x = document.getElementById("llon").value;

            var results;

            if (alphacode.length > 0) {
                if (!getTerritoryFullname(alphacode)) {
                    html = '"' + alphacode + '" is not a valid territory alphacode';
                } else {
                    results = encodeShortest(y, x, alphacode);
                    if (results.length > 0) {
                        html += '<P>Coordinate has mapcode <B>' + results[0].fullmapcode + '</B> in territory "' + getTerritoryFullname(alphacode) + '"<BR>';
                    } else {
                        html += '<P>Coordinate has no mapcode in territory "' + getTerritoryFullname(alphacode) + '"<BR>';
                    }
                }
            }

            results = encodeShortest(y, x);
            html += '<P><U>Mapcodes are possible in ' + results.length + ' territories:</U><BR>';
            for (var i = 0; i < results.length; i++) {
                if (results[i].territoryAlphaCode != "AAA") {
                    html += '<small>' + results[i].territoryAlphaCode + '</small> ';
                }
                html += '<b>' + results[i].mapcode + '</b>';
                html += ' (' + getTerritoryFullname(results[i].territoryNumber) + ')';
                html += '<br>';
            }

            document.getElementById("resultll").innerHTML = html;
            return false;
        }
    </script>

    <br/>

    <form action="#" onsubmit="return submitll();">
        Latitude:
        <input type="text" id="llat" value="52.376514" onkeyup="submitll();">
        Longitude:
        <input type="text" id="llon" value="4.908542" onkeyup="submitll();">
        Restrict to territory::
        <input type="text" id="alphacodell" value="" onkeyup="submitll();">
        <input type="submit" value="Encode">
    </form>

    <div id="resultll"><font color=grey>Enter a latitude, a longitude, and a default territory context:</font></div>

</center>
</body>
</html>