File size: 2,780 Bytes
3efa2b1
d0c9b50
 
 
 
 
 
 
b86fcae
d0c9b50
 
 
 
 
 
 
b86fcae
 
 
3efa2b1
d0c9b50
 
 
 
cab4f90
 
 
 
91685a5
b86fcae
 
 
 
6cc0570
b86fcae
cab4f90
 
 
 
f1969d8
6cc0570
 
cab4f90
f1969d8
6cc0570
cab4f90
6cc0570
 
cab4f90
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
033de3c
 
b86fcae
6cc0570
 
 
 
 
b86fcae
3efa2b1
b86fcae
3efa2b1
d0c9b50
 
3efa2b1
2c9a6b8
 
 
 
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
<!-- static/linked_map.html -->
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <title>Swipe Map</title>
  <link href="https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/light/main.css" rel="stylesheet" />


  <!-- Load the JavaScript Maps SDK core API -->
  <script src="https://js.arcgis.com/4.34/"></script>

  <!-- Load the JavaScript Maps SDK Map components or other component packages -->
  <script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>

  <!-- Calcite Design System -->
  <script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>
  <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/3.3.3/calcite.css" />
  <link rel="stylesheet" href="linked_map.css" />
</head>

<body>





  <div style="display: flex; height:100%;">

    <div id="view1Div" style="flex: 1;"></div>
    <div id="view2Div" style="flex: 1;">

      <div id="modeControls" style="padding: 4px;">
        <strong>Modo de visualización</strong>

        <calcite-radio-button-group id="viewModeGroup" layout="vertical" scale="m">
          <calcite-label layout="inline">
            <calcite-radio-button value="swipe" checked></calcite-radio-button>
            <span id="labelEstimated">Temperatura estimada</span>
          </calcite-label>
          <calcite-label layout="inline">
            <calcite-radio-button value="change"></calcite-radio-button>
            <span id="labelChange">Disminucion de temperatura</span>
          </calcite-label>


        </calcite-radio-button-group>

        <calcite-label layout="inline" class="font-medium">
          Capacidad de ocupación del píxel
          <calcite-icon icon="information" scale="s" id="tooltip-trigger"></calcite-icon>
          <calcite-tooltip reference-element="tooltip-trigger" placement="top">
            El filtro muestra los cuadrantes donde la cobertura arbórea simulada supera lo posible.<br />
            En <span style="color:#f87171;font-weight:bold;">rojo</span> aparecen valores mayores al 100% (ya
            cubiertos por arbolado) y en
            <span style="color:#fb923c;font-weight:bold;">naranja</span> los que sobrepasan el límite posible por
            construcción existente.
          </calcite-tooltip>
        </calcite-label>

        <calcite-label layout="inline">
          Inactivo
          <calcite-switch id="filtroSwitch"></calcite-switch>
          Activo
        </calcite-label>
      

      </div>
      <div id="temperature" style="padding: 4px;">
        <img id="modeImage" src="data/before_after_colorbar_horizontal.png" style="width:340px" />
      </div>


    </div>
  </div>

  <script type="module" src="linked_map.js"></script>
</body>

</html>