Amazon Location

해당 사이트는 테스트 사이트이므로 참고용으로 접근 합니다.

Sample Site

http://map.studydev.com

Test Code

index.html

<html>
    <head>
        <!-- CSS dependencies -->
        <link href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css" rel="stylesheet" />
        <style>
            body {
                margin: 0;
            }

            #map {
                height: 100vh; /* 100% of viewport height */
            }
        </style>
    </head>
    <body>
        <!-- map container -->
        <div id="map" />
        
        <!-- JavaScript dependencies -->
        <script src="https://unpkg.com/maplibre-gl@1"></script>
        <script src="https://unpkg.com/amazon-location-helpers@1"></script>
        <script src="https://sdk.amazonaws.com/js/aws-sdk-2.937.0.min.js"></script>
        <script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script>
        <script>
            // application-specific code
            
            const identityPoolId = "<<IDENTITY_POOL_ID_ARN>>";
            
            // Amazon Location Service Map name
            const mapName = "<<MAP_NAME>>";

            // extract the Region from the Identity Pool ID; this will be used for both Amazon Cognito and Amazon Location
            AWS.config.region = identityPoolId.split(":")[0];

            // instantiate an Amazon Cognito-backed credential provider
            const credentials = new AWS.CognitoIdentityCredentials({
                IdentityPoolId: identityPoolId,
            });

            async function refreshCredentials() {
                await credentials.refreshPromise();
                // schedule the next credential refresh when they're about to expire
                setTimeout(refreshCredentials, credentials.expireTime - new Date());
            }

            // use Signer from @aws-amplify/core
            const { Signer } = window.aws_amplify_core;
            
            /**
            * Sign requests made by MapLibre GL JS using AWS SigV4.
            */
            function transformRequest(url, resourceType) {
                if (resourceType === "Style" && !url.includes("://")) {
                    // resolve to an AWS URL
                    url = `https://maps.geo.${AWS.config.region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`;
                }
                
                if (url.includes("amazonaws.com")) {
                    // only sign AWS requests (with the signature as part of the query string)
                    return {
                        url: Signer.signUrl(url, {
                            access_key: credentials.accessKeyId,
                            secret_key: credentials.secretAccessKey,
                            session_token: credentials.sessionToken,
                        }),
                    };
                }
                
                // don't sign
                return { url };
            }

            async function initializeMap() {
                // load credentials and set them up to refresh
                await credentials.getPromise();
               
                // Initialize the map
                const map = new maplibregl.Map({
                  container: "map",
                  center: [126.8522, 37.3777], // initial map centerpoint
                  zoom: 15, // initial map zoom
                  style: mapName,
                  transformRequest,
                });
               
                map.addControl(new maplibregl.NavigationControl(), "top-left");

                /** 
                // Find the location and put a marker on the map
                const location = new AWS.Location({
                    credentials: await AmazonLocation.getCredentialsForIdentityPool("<<IDENTITY_POOL_ID_ARN>>"),
                    region: "ap-northeast-1"
                });

                const data = await location.searchPlaceIndexForText({
                    IndexName: "map_Index",
                    Text: "Text"
                }).promise();

                console.log(data);
                const position = data.Results[0].Place.Geometry.Point;
                */

                const marker1 = new maplibregl.Marker().setLngLat([126.8522, 37.3777]).addTo(map);
                const marker2 = new maplibregl.Marker({color: "#FFFFFF",draggable: true}).setLngLat([126.85409903526306, 37.37625341043314]).addTo(map);
            }
               
            initializeMap();

            
        </script>
    </body>
    
</html>

Marker 정보 등록 및 활용 방법