

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

# Cómo crear mapas topográficos
<a name="how-to-create-topographic-maps"></a>

Amazon Location Service le permite crear mapas topográficos con las características de densidad de terreno y contorno para visualizar los cambios de elevación y las características geográficas.

## Mostrar Hillshade
<a name="show-hillshade"></a>

La función Terreno le permite visualizar la sombra de las colinas, los cambios de elevación y las características geográficas relacionadas.

### Ejemplo de Hillshade
<a name="hillshade-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Terrain Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Hillshade&key=${apiKey}`,
                center: [-119.5383, 37.8651], // Yosemite coordinates for terrain visibility
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## Muestra la elevación con líneas de densidad de contorno
<a name="show-contour-density"></a>

Amazon Location Service te permite añadir características de densidad de contorno a tu mapa. Esto proporciona una visualización de la inclinación geográfica y los cambios de elevación.

### Ejemplo de densidad de contorno
<a name="contour-density-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Contour Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?contour-density=Medium&key=${apiKey}`,
                center: [-119.3047, 37.7887], 
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## Muestra las líneas Hillshade y Contour Density
<a name="show-hillshade-contour"></a>

Con Amazon Location Service, puede combinar las funciones Hillshade y Contour Density en su mapa para una visualización completa del terreno. Esto proporciona una mejor percepción de la profundidad y una comprensión completa de las variaciones topográficas y las características del terreno.

### Ejemplo de Hillshade con densidad de contorno
<a name="hillshade-contour-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hillshade and Contour Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?contour-density=Medium&terrain=Hillshade&key=${apiKey}`,
                center: [-119.3047, 37.7887],
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------