examples/index.html at develop · hslayers/examples · 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
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="example_list.css">
  <script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
    integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>

</head>

<script type="text/javascript">

  $(document).ready(function () {
    const links = [
      { dir: "simple-map", index: "simple-map/index.html", name: "Simple map", description: "Simple map application demonstration with hslayersNgConfig function" },
      { dir: "full", index: "dist/full/index.html", name: "Full functionality", description: "Multiple HSLayers-NG features combined in one example" },
      { dir: "components-visible", index: "components-visible/index.html", name: "Enabling/disabling components", description: "Enabling and disabling of GUI components and panels in sidebar" },
      { dir: "datasources", index: "dist/datasources/index.html", name: "Data sources", description: "Integration of various geodata silos" },
      { dir: "add-projection", index: "add-projection/index.html", name: "Add projection", description: "Map in different than default Mercator projection (S-JTSK/Krovak EastNorth, EPSG:5514)" },
      //"compositions":{name:"Thematic maps", description: "Thematic maps and loading of map compositions"},
      { dir: "wmts-vector-tiles", index: "dist/wmts-vector-tiles/index.html", name: "WMTS Raster & Vector Tiles", description: "Adding of WMTS raster and vector tiles to the map" },
      //{ dir: "feature-pop-ups", name: "Feature pop-ups", description: "Showcase of clickable feature pop-up cards" },
      { dir: "map-swipe", index: "map-swipe/index.html", name: "Map Swipe", description: "Splitted map with drag&drop setting of left and right window content" },
      { dir: "clustering-decluttering", index: "dist/clustering-decluttering/index.html", name: "Feature clustering and decluttering functionality", description: "Feature clustering and decluttering for vector layer" },
      { dir: "routing", index: "dist/routing/index.html", name:"Trip planner", description: "Calculate shortest routes"},
      { dir: "cesium", index: "dist/cesium/index.html", name: "Cesium integration", description: "3D map created with hslayers-cesium" },
      { dir: "olu-spoi", index: "dist/olu-spoi/index.html", name: "OLU + SPOI data integration", description: "Example of integration of two external semantic datasets in one map view" },
      //"wfs_crossfilter":{name:"Feature crossfiltering", description: "Demonstration of dynamic feature filtering using Crossfilter and D3 libraries"},
    ];

    const exampleCount = links.length;
    $(".container h2").append(" (" + exampleCount + ")");

    for (const app of links) {
      $("#examples").append('<div class="example">' +
        '<a class="mainlink" href="' + app.index + '">' +
        '<strong>' + app.name + '</strong><br>' +
        '<small>(' + app.dir.toLowerCase() + '/)</small>' +
        '</a>' +
        '<p></p><div>' + app.description + '</div><p></p>' +
        '</div>');
    };
  });

</script>

<body>

  <div class="container">
    <h2>HSLayers-NG examples</h2>
  </div>

  <div class="container-fluid">
    <div id="examples">
      <div>
      </div>
    </div>
  </div>

</body>

</html>