protoai-dashboard / static /linked_map.html
dcarreradigm's picture
Upload folder using huggingface_hub
f1969d8 verified
Raw
History Blame Contribute Delete
2.78 kB
<!-- 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>