Viewer/index.html at master · OpenBounds/Viewer · 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
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>OpenBoundsViewer</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="functions.js" ></script>
</head>

<body style="height: 100%;">

    <div id="featureList"></div>
    <div id="map"></div>
    <script type="text/javascript">
        baselayer = "http://tile.openstreetmap.org/{z}/{x}/{y}.png";
        var mapBig = L.map('map').setView([38,-100],5);
        var layers = {};
        var identifier;
        var streets =  L.tileLayer(baselayer, {
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
                maxZoom: 17,
                zIndex:0
        });
        streets.addTo(mapBig);
        var base_url = "";
        var catalog = base_url + "catalog.geojson";
        loadJSON(catalog, function(response){
            var i = 0;
            var geo = L.geoJson(response, {
                onEachFeature: function(feature,layer){

                    // Creation of the feature container
                    var item = document.createElement("div");
                    item.id = 'feature_' + String(i);
                    item.className = 'container';
                    var parent = document.getElementById("featureList");
                    parent.appendChild(item);

                    // Creation of a new container child for the map
                    var divMap = document.createElement("div");
                    divMap.id = 'map_' + String(i);
                    divMap.className = 'miniMap';
                    var parent = document.getElementById(item.id);
                    parent.appendChild(divMap);
                    // Add a leaflet map to the created "div" with an OSM baselayer
                    var El = document.getElementById(divMap.id);
                    var map = L.map(El,{
                                        attributionControl: false,
                                        zoomControl: false
                                    });
                    var streets =  L.tileLayer(baselayer, {
                        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
                        maxZoom: 17,
                        zIndex:0
                    });
                    streets.addTo(map);
                    // Add the polygon feature (layer) to the newly created map
                    layer.addTo(map);
                    // Update the map to fit the feature
                    map.fitBounds(layer.getBounds());

                    // Creation of a new container child for the text
                    var DivText = document.createElement("div");
                    DivText.id = 'text_' + String(i);
                    DivText.className = 'text';
                    DivText.innerHTML = '<b>' + (feature.properties.name || 'unnamed dataset') + '</b>' + '<br>'
                                       + '<i>' + feature.properties.attribution +'</i>' + '<br>'
                                       + feature.properties.feature_count + ' Features';

                    var parent = document.getElementById(item.id);
                    parent.appendChild(DivText);

                    var feature_url = base_url + feature.properties.path;

                    // Creation of a new container child for the button
                    var DivButton = document.createElement("div");
                    DivButton.id = 'button_' + String(i);
                    DivButton.className = 'button';
                    DivButton.value = false;
                    DivButton.innerHTML = '<input type="checkbox" onclick="loadMap(' + "'" + feature_url + "'"+ ',' + String(i)
                    					+ ');"/>';
                    var parent = document.getElementById(item.id);
                    parent.appendChild(DivButton);

                    i++;
                    }
                }
            )

        });

    </script>

</body>
</html>