View a markdown version of this page

Cómo configurar la vista política de un mapa - Amazon Location Service
Establecimiento de una visión política y comparación con una perspectiva internacional

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 configurar la vista política de un mapa

Amazon Location Service le permite establecer una visión política para garantizar que la solicitud cumpla con las leyes locales. Puede establecer una visión política y comparar mapas desde diferentes perspectivas políticas.

nota

Para obtener más información, consulte Localización e internacionalización.

Establecimiento de una visión política y comparación con una perspectiva internacional

En este ejemplo, creará y comparará mapas desde dos puntos de vista políticos diferentes: una perspectiva internacional y la visión de Turquía sobre Chipre.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <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' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
        <script src="https://unpkg.com/@mapbox/mapbox-gl-sync-move@0.3.1"></script>
        <script src='main.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div class="maps">
        <div id="internationalView"></div>
        <div id="turkeyView"></div>
        </div>
        <script>

            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";

            // International perspective without political-view query parameter
            const internationalViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            // Turkey perspective with political-view query parameter
            const turkeyViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?political-view=TUR&key=${apiKey}`;

            const internationalViewMap = new maplibregl.Map({
                container: 'internationalView', // container id
                style: internationalViewMapStyleUrl, // style URL
                center: [33.0714561, 35.1052139], // starting position [lng, lat]
                zoom: 7.5,
                validateStyle: false, // Disable style validation for faster map load
            });

            const turkeyViewMap = new maplibregl.Map({
                container: 'turkeyView', // container id
                style: turkeyViewMapStyleUrl, // style URL
                center: [33.0714561, 35.1052139],
                zoom: 7.5,
                validateStyle: false, // Disable style validation for faster map load
            });

            // Sync map zoom and center
            syncMaps(internationalViewMap, turkeyViewMap);

            // Informational popup for international view
            new maplibregl.Popup({closeOnClick: false})
                .setLngLat([33, 35.5])
                .setHTML('<h4>International view <br> recognizes <br> Cyprus</h4>')
                .addTo(internationalViewMap);

            // Informational popup for Turkey's view
            new maplibregl.Popup({closeOnClick: false})
                .setLngLat([33, 35.5])
                .setHTML('<h4>Turkey does not <br> recognize <br> Cyprus</h4>')
                .addTo(turkeyViewMap);
        </script>
    </body>
</html>
style.css

body { margin: 0; padding: 0; }
html, body { height: 100%; }
#internationalView, #turkeyView { height: 100%; width: 100%; }
.maps {
    display: flex;
    width: 100%;
    height: 100%;
}