ãã®èšäºã¯æ ªåŒäŒç€Ÿ MIERUNE ã®ä»£è¡šåç· åœ¹ CEO ã§ãã Yasunori Kirimoto ã«å¯çš¿é ããã New features and developer experience with enhanced Amazon Location Service ãããœãªã¥ãŒã·ã§ã³ã¢ãŒããã¯ãã®çš²ç°ã翻蚳ãããã®ã§ãã å°ç空éã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããã«ã¯ãå°ç空éããŒã¿ãæ±ãããã®å°éç¥èãšãã·ã¹ãã ã®èšèšããã³éçºã®ã¹ãã«ãå¿
èŠã§ãããŸãã倧éã®å°ç空éããŒã¿ãåéããã³ç®¡çããã¢ããªã±ãŒã·ã§ã³ã§å¹æçã«å©çšããã¹ãã«ãå¿
èŠãšãããŸãããã®ããã»ã¹ã¯éåžžã«æéããããå¯èœæ§ããããŸããããã®è€éã㯠Amazon Location Service ãæŽ»çšããããšã§å€§å¹
ã«è»œæžã§ããŸãã Amazon Location Service ã§ã¯ãAPI ããé«ç²ŸåºŠã®å°ç空éããŒã¿ããã°ããååŸã§ãããããéçºè
ã¯ã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯ã«éäžã§ããŸããããã«ãAmazon Location Service ãåŸæ¥ã®æ©èœã«å ããŠæ°æ©èœã远å ãããŸãããAmazon Location Service ã®æ°æ©èœã玹ä»ããã¢ããªã±ãŒã·ã§ã³ã§ãã®æ©èœã掻çšããæ¹æ³ãã玹ä»ããŸãã Amazon Location Service ã®æ°æ©èœã®ãªãªãŒã¹ æå€§ã®å€æŽç¹ã¯ãåå¥ã®ãªãœãŒã¹äœæãäžèŠã«ãªã£ãããšã§ããã€ãŸãããŠãŒã¶ãŒã¯åã
ã®ãªãœãŒã¹ (Place IndexãMapãRoute Calculator ãªã©) ãäœæããå¿
èŠããªããªããAPI ããŒãèšå®ããã ãã§ãããã« Amazon Location Service ã䜿ãå§ããããŸãã ããã«ãMapsãPlacesãRoutes API ã«å€§å¹
ãªæ©èœåŒ·åãšæ°æ©èœã远å ãããŸãããMaps API ã¯ã远å ã®ã¹ã¿ã€ã«ãšæ°ããéçãããæ©èœã§æŽæ°ãããŸãããPlaces API ã¯ãæ°ããæ€çŽ¢ãšå°çã³ãŒãã£ã³ã°æ©èœã§åŒ·åãããŸãããæåŸã«ãRoutes API ã¯ãSnap to RoadãWaypoint Optimizationãããã³è¿œå ã®ç§»åã¢ãŒããªã©ã®æ°æ©èœã§æŽæ°ãããŸããã API ããŒã®äœæ API ã㌠ãäœæããã«ã¯ã AWS ãããžã¡ã³ãã³ã³ãœãŒã« ãŸã㯠AWS Cloud Control API ãå©çšã§ããŸãããã®äŸã§ã¯ãã³ã³ãœãŒã«ã䜿çšããŸããAmazon Location Service ã³ã³ãœãŒã«ã«ç§»åãã Manage resources ã®äžã«ãã API keys ãéžæããŸãã Create API key ãéžæããŠãã ããã å³ 1 â Amazon Location Service ã³ã³ãœãŒã« â API ããŒã³ã³ãœãŒã« ãã¢ã®ããã«ãAPI ããŒã LasVegasMaps ãšåä»ãã以äžã®ã¢ã¯ã·ã§ã³ãéžæããŸãã GetStaticMap GetTile Geocode GetPlace SearchNearby SearchText CalculateIsolines SnapToRoads å³ 2 â API ããŒã¢ã¯ã·ã§ã³ã®éžæ ã¹ã¯ããŒã«ããŠã³ãããšãæå¹æéã®èšå®ãåç
§å
ã®èšå®ãªã©ã远å ãªãã·ã§ã³ããããŸãããããã¯ãªãã·ã§ã³ã§ãããæ¬çªç°å¢ã®ã¢ããªã±ãŒã·ã§ã³ã«ã¯åŒ·ããå§ãããŸããä»åã¯ãã®ãã¢ã®ãããããã¯ããã©ã«ãã®ãŸãŸã«ããŠããŸãã å³ 3 â 远å ã® API ããŒãªãã·ã§ã³ Create API Key ãéžæããŠãã ããã API ããŒãäœæããã®ã§ã次ã¯ã¢ããªã±ãŒã·ã§ã³ã§äœ¿çšããããã®å€ãååŸããå¿
èŠããããŸãã Show API key value ãéžæããå€ãå®å
šãªå Žæã«ã³ããŒããŠãã ããã å³ 4 â API ããŒã³ã³ãœãŒã«ã§ãAPI ããŒã®å€ã衚瀺ãã æ°ãã Maps API ãŸããGetStyleDescriptor ãš GetStaticMap ã«ã€ããŠè©³ãã説æããŠç޹ä»ããŸãã å°å³ã¢ããªã±ãŒã·ã§ã³ã®åºç€ãšãªã GetStyleDescriptor ã®æ§ç¯ GetStyleDescriptor ã䜿çšãããšããããã¹ã¿ã€ã«æ
å ±ãååŸãããããã¢ããªã±ãŒã·ã§ã³ã®åºç€ãè¿
éã«æ§ç¯ã§ããŸãããã®æ©èœã¯ãæ§ã
ãªå°ç空éãœãªã¥ãŒã·ã§ã³ãã¢ããªã±ãŒã·ã§ã³åºç€ã«äœ¿çšã§ããŸããæ°ããŒãžã§ã³ã§ã¯ãç°ãªãã¢ããªã±ãŒã·ã§ã³åãã«ç®çã«åãããŠèšèšãããæ¡åŒµãããã¹ã¿ã€ã«ãæäŸããŠãããæ§ã
ãªã¬ãã«ã®å°å³è©³çްãæã€ããŒã¯ã¢ãŒããšã©ã€ãã¢ãŒããæäŸããŠããŸãã MapLibre GL JS ã䜿çšããŠãããã®ãããã¹ã¿ã€ã«ã掻çšããæ¹æ³ã玹ä»ããŸããMapLibre GL JS ãš Amazon Location Service API ããŒã䜿çšããŠãéåžžã«ã·ã³ãã«ãª HTML ããŒãžãäœæããŸãã simpleMap.html ãšããååã®æ°ãã HTML ãã¡ã€ã«ãäœæãã以äžã®ã³ãŒãããã¡ã€ã«ã«è²Œãä»ããŠãã ããã <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Amazon Location Service Map</title> <!-- MapLibre GL CSS --> <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" /> <style> body { margin: 0; } #map { height: 100vh; /* Full viewport height */ } </style> </head> <body> <!-- Map container --> <div id="map"></div> <!-- JavaScript dependencies --> <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script> <script> // Configuration const region = "<AWS Region>"; // Replace with your AWS region const mapApiKey = "<Your API Key>"; // Replace with your Amazon Location Service API key async function initializeMap() { // Initialize the map const map = new maplibregl.Map({ container: "map", // HTML element ID where the map will be rendered center: [-115.1473824627421, 36.17071351509272], // Initial map center coordinates (Las Vegas) zoom: 12, // Initial zoom level style: `https://maps.geo.${region}.amazonaws.com/v2/styles/Standard/descriptor?&color-scheme=Light&variant=Default&key=${mapApiKey}`, // Map style URL }); // Add navigation controls to the map map.addControl(new maplibregl.NavigationControl(), "top-left"); } // Call the function to initialize the map initializeMap(); </script> </body> </html> ãã® HTML ããŒãžããã©ãŠã¶ã§éããŠãã ãããã©ã¹ãã¬ã¹ã®å°å³ã衚瀺ãããã¯ãã§ãããã®å°å³ã®éµã¯ãåã®ã³ãŒãã§èšå®ããã¹ã¿ã€ã« URL ã§ãããã® URL ã§ã¯ãæããè²ã®ã¹ã¿ã³ããŒãã¹ã¿ã€ã«ããããèŠæ±ããŠããŸããæ¿æ²»çãªèŠè§£ãªã©ã远å ã®ãã©ã¡ãŒã¿ãæå®ã§ããŸãã å³ 5 â ã©ã¹ãã¬ã¹ïŒãããå·ïŒãäžå¿ãšããå°å³ GetStaticMap ã䜿çšããŠéçå°å³ç»åãäœæãã GetStaticMap ã䜿çšãããšãæå®ãã座æšããºãŒã ã¬ãã«ãã€ã¡ãŒãžãµã€ãºã«åºã¥ããŠéçãªå°å³ç»åãäœæã§ããŸãããã®æ©èœã¯ãå°å·ç©ãã¡ãã£ã¢ã®æçš¿ã«å°å³ç»åãå«ããã®ã«åœ¹ç«ã¡ãŸãããã®æ©èœã«ã¯ããŸããŸãªãã©ã¡ãŒã¿ããããä»ã®ããŒã¿ (ãã€ã³ããã©ã€ã³ãããªãŽã³ãªã©) ãéãåãããããšãã§ããŸããåºæ¬çãªäŸã瀺ããŸãã䜿çšãã AWS ãªãŒãžã§ã³ãšæ°ããäœæãã API ããŒã«åãã㊠URL ãç·šéããŠãã ãããæå®ããå Žæã®éçãªå°å³ç»åã衚瀺ããã«ã¯ã以äžã® URL ã Web ãã©ãŠã¶ã®ã¢ãã¬ã¹ããŒã«è²Œãä»ããŠãã ããã https://maps.geo.<Your AWS Region>.amazonaws.com/v2/static/map?center=-115.170,36.122&zoom=15&width=1024&height=1024&key=<Your API Key> å³ 6 â ã©ã¹ãã¬ã¹ã¹ããªããã衚瀺ããéçå°å³ç»å æ°ãã Places API 次ã«ãSearchText ãš SearchNearby ã玹ä»ããŸãã SearchText ã«ããç¹å®ã® POI ããŒã¿ã®æ€çŽ¢ SearchText ã䜿çšãããšããŠãŒã¶ãŒã¯ç¹å®ã®ç®çå°ïŒPOIïŒããŒã¿ãæ€çŽ¢ããŠè¡šç€ºããããšãã§ããŸãããã®æ©èœã¯ããŠãŒã¶ãŒãç¹å®ã®å Žæãæœèšããã°ããæ€çŽ¢ã§ããããã«èšèšãããŠããŸãããŠãŒã¶ãŒã¯æå®ããããã©ã¡ãŒã¿ã§ POST ãªã¯ãšã¹ããéä¿¡ããåè£å°ç¹ããŒã¿ãå«ãã¬ã¹ãã³ã¹ãåãåãããšãã§ããŸãããã®ããŒã¿ãå°å³äžã«èŠèŠåããäŸã玹ä»ããŸãã searchText.html ãšããååã®æ°ãã HTML ãã¡ã€ã«ãäœæãã以äžã®ã³ãŒãããã¡ã€ã«ã«è²Œãä»ããŠãã ããã <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Amazon Location Service â Search Text</title> <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" /> <style> body { margin: 0; } #map { height: 100vh; } </style> </head> <body> <!-- map container --> <div id="map"></div> <!-- JavaScript dependencies --> <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script> <!-- Import the Amazon Location Client --> <script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-client@1"></script> <!-- Import the utility library --> <script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-utilities-datatypes@1"></script> <script> // Configuration // Set the AWS region for Amazon Location Service const region = "<AWS Region>"; // API key for authenticating requests const mapApiKey = "<Amazon Location Service API Key>"; async function initializeMap() { // Create an authentication helper using the API key const authHelper = await amazonLocationClient.withAPIKey(mapApiKey, region); // Initialize the Amazon Location Service Places client const client = new amazonLocationClient.places.GeoPlacesClient( authHelper.getClientConfig() ); // Define search parameters for coffee shops const SearchTextInput = { BiasPosition: [-115.170, 36.122], // Las Vegas coordinates MaxResults: 25, QueryText: "Coffee Shops" } // Perform the search using Amazon Location Service const searchResults = await client.send( new amazonLocationClient.places.SearchTextCommand(SearchTextInput) ) // Initialize the map const map = new maplibregl.Map({ container: "map", center: [-115.170, 36.122], // Las Vegas coordinates zoom: 14, style: `https://maps.geo.${region}.amazonaws.com/v2/styles/Standard/descriptor?&color-scheme=Light&variant=Default&key=${mapApiKey}`, }); // Add navigation controls to the map map.addControl(new maplibregl.NavigationControl(), "top-left"); // When the map is loaded, add search results as a layer map.on("load", () => { // Convert search results into a GeoJSON FeatureCollection const featureCollection = amazonLocationDataConverter.searchTextResponseToFeatureCollection(searchResults); // Add a data source containing GeoJSON from the search results map.addSource("place-index-results", { type: "geojson", data: featureCollection, }); // Add a new layer to visualize the points map.addLayer({ id: "place-index-results", type: "circle", source: "place-index-results", paint: { "circle-radius": 8, "circle-color": "#0080ff", }, }); // Add click event listener for the search result points map.on('click', 'place-index-results', (e) => { if (e.features.length > 0) { const feature = e.features[0]; const coordinates = feature.geometry.coordinates.slice(); // Create a formatted HTML string with the feature's properties const properties = feature.properties; let description = '<h3>' + (properties['Title'] || 'Unnamed Location') + '</h3>'; description += '<p>Address: ' + (properties['Address.Label'] || 'N/A') + '</p>'; // Create and display a popup with the location information new maplibregl.Popup() .setLngLat(coordinates) .setHTML(description) .addTo(map); } }); map.on('mouseenter', 'place-index-results', () => { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'place-index-results', () => { map.getCanvas().style.cursor = ''; }); }); } // Call the function to initialize the map initializeMap(); </script> </body> </html> HTML ãã¡ã€ã«ããã©ãŠã¶ã§éããšãã©ã¹ãã¬ã¹ïŒãããå·ïŒã®ãããã¢ã³ã»ãªãŸãŒããäžå¿ãšããã³ãŒããŒã·ã§ããã®ãããã衚瀺ãããŸãïŒå³7ïŒã å³ 7 â SearchText API ã®çµæã衚瀺ããå°å³ SearchNearby ã䜿çšããŠæå®ãããå Žæã®åšèŸºã® POI ããŒã¿ãæ€çŽ¢ãã SearchNearby ã䜿çšãããšãæå®ãããå Žæã®è¿ãã«ãã POI ããŒã¿ãååŸã§ããŸãããã®æ©èœã¯ããŠãŒã¶ãŒãåšèŸºã®åºèã芳å
ã¹ããããæ€çŽ¢ããã®ã«äŸ¿å©ã§ãããŠãŒã¶ãŒã¯æå®ããããã©ã¡ãŒã¿ãå«ã POST ãªã¯ãšã¹ããéä¿¡ããåè£å°ç¹ããŒã¿ãå«ãã¬ã¹ãã³ã¹ãåãåãããšãã§ããŸãããã®ããŒã¿ãå°å³äžã«å¯èŠåããäŸã瀺ããŸãã searchNearby.html ãšããååã®æ°ãã HTML ãã¡ã€ã«ãäœæãã以äžã®ã³ãŒãããã¡ã€ã«ã«è²Œãä»ããŠãã ããã <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Amazon Location Service â Search Nearby</title> <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" /> <style> body { margin: 0; } #map { height: 100vh; } </style> </head> <body> <!-- map container --> <div id="map"></div> <!-- JavaScript dependencies --> <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script> <!-- Import the Amazon Location Client --> <script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-client@1"></script> <!-- Import the utility library --> <script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-utilities-datatypes@1"></script> <script> // Configuration // Set the AWS region for Amazon Location Service const region = "<AWS Region>"; // API key for authenticating map requests const mapApiKey = "<Amazon Location Service API Key>"; async function initializeMap() { // Create an authentication helper using the API key const authHelper = await amazonLocationClient.withAPIKey(mapApiKey, region); // Initialize the Amazon Location Service Places client const client = new amazonLocationClient.places.GeoPlacesClient( authHelper.getClientConfig() ); // Define search parameters for nearby casinos and hotels const SearchNearbyInput = { QueryPosition: [-115.170, 36.122], // Las Vegas coordinates MaxResults: 25, Filter: { IncludeCategories: [ "casino", "hotel" ] } } // Perform the nearby search using Amazon Location Service const searchResults = await client.send( new amazonLocationClient.places.SearchNearbyCommand(SearchNearbyInput) ) // Initialize the map const map = new maplibregl.Map({ container: "map", center: [-115.170, 36.122], // Las Vegas coordinates zoom: 15, style: `https://maps.geo.${region}.amazonaws.com/v2/styles/Standard/descriptor?&color-scheme=Light&variant=Default&key=${mapApiKey}`, }); // Add navigation controls to the map map.addControl(new maplibregl.NavigationControl(), "top-left"); // When the map is loaded, add search results as a layer map.on("load", () => { // Convert search results into a GeoJSON FeatureCollection const featureCollection = amazonLocationDataConverter.searchNearbyResponseToFeatureCollection(searchResults); // Add a data source containing GeoJSON from the search results map.addSource("place-index-results", { type: "geojson", data: featureCollection, }); // Add a new layer to visualize the points map.addLayer({ id: "place-index-results", type: "circle", source: "place-index-results", paint: { "circle-radius": 8, "circle-color": "#0080ff", }, }); // Add click event listener for the search result points map.on('click', 'place-index-results', (e) => { if (e.features.length > 0) { const feature = e.features[0]; const coordinates = feature.geometry.coordinates.slice(); // Create a formatted HTML string with the feature's properties const properties = feature.properties; let description = '<h3>' + (properties['Title'] || 'Unnamed Location') + '</h3>'; description += '<p>Address: ' + (properties['Address.Label'] || 'N/A') + '</p>'; // Create and display a popup with the location information new maplibregl.Popup() .setLngLat(coordinates) .setHTML(description) .addTo(map); } }); map.on('mouseenter', 'place-index-results', () => { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'place-index-results', () => { map.getCanvas().style.cursor = ''; }); }); } // Call the function to initialize the map initializeMap(); </script> </body> </html> å³ 8 â SearchNearby API ã®çµæã衚瀺ããå°å³ æ°ãã Routes API æåŸã«ãæ°ãã CalculateIsolines ãš SnapToRoads ã«ã€ããŠèª¬æããŸãã CalculateIsolines ã§æå®ããå Žæããå°éå¯èœãªç¯å²ãèŠã€ãã CalculateIsolines ã¯ãæå®ãããã€ã³ãããå°éå¯èœãªç¯å²ãååŸã§ããŸããIsolines ã®ãŠãŒã¹ã±ãŒã¹ã«ã¯ãé
éå¯èœãšãªã¢ã®ç¹å®ãäžåç£ã®ç«å°è©äŸ¡ãªã©ããããŸãããŠãŒã¶ãŒã¯æå®ãããã©ã¡ãŒã¿ã§ POST ãªã¯ãšã¹ããéä¿¡ããå°éå¯èœãªãšãªã¢ã瀺ãããªãŽã³ããŒã¿ãå«ãã¬ã¹ãã³ã¹ãåãåãããšãã§ããŸãããã®ããŒã¿ãå°å³äžã«å¯èŠåããäŸã玹ä»ããŸãã calculateIsolines.html ãšããååã®æ°ãã HTML ãã¡ã€ã«ãäœæãã以äžã®ã³ãŒãããã¡ã€ã«ã«è²Œãä»ããŠãã ãã <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Amazon Location Service - Isolines</title> <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" /> <style> body { margin: 0; } #map { height: 100vh; } </style> </head> <body> <!-- map container --> <div id="map"></div> <!-- JavaScript dependencies --> <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script> <!-- Import the Amazon Location Client --> <script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-client@1"></script> <!-- Import the utility library --> <script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-utilities-datatypes@1"></script> <script> // Configuration // Set the AWS region for the Amazon Location Service const region = "<AWS Region>"; // API key for authenticating map requests const mapApiKey = "<Amazon Location Service API Key"; async function initializeMap() { // Create an authentication helper using the API key const authHelper = await amazonLocationClient.withAPIKey(mapApiKey, region); // Initialize the Amazon Location Service Routes client const client = new amazonLocationClient.routes.GeoRoutesClient( authHelper.getClientConfig() ); // Define parameters for calculating isolines const IsolinesInput = { Origin: [-115.17015436843275, 36.12122662193694], // Starting point coordinates Thresholds: { Time: [ 300, 600, 900 // Time thresholds in seconds ] }, TravelMode: "Pedestrian" // Travel mode for isoline calculation } // Calculate isolines using Amazon Location Service const routeResults = await client.send( new amazonLocationClient.routes.CalculateIsolinesCommand(IsolinesInput) ) // Initialize the map const map = new maplibregl.Map({ container: "map", center: [-115.16766776735061, 36.12177195550658], // Map center coordinates zoom: 15, style: `https://maps.geo.${region}.amazonaws.com/v2/styles/Standard/descriptor?&color-scheme=Light&variant=Default&key=${mapApiKey}`, }); // Add navigation controls to the map map.addControl(new maplibregl.NavigationControl(), "top-left"); // Add a marker at the origin point const marker = new maplibregl.Marker() .setLngLat([-115.17015436843275, 36.12122662193694]) .addTo(map) // When the map is loaded, add isolines as layers map.on("load", () => { // Convert isoline results into a GeoJSON FeatureCollection const featureCollection = amazonLocationDataConverter.calculateIsolinesResponseToFeatureCollection(routeResults); // Add a data source containing GeoJSON from the isoline results map.addSource("isolines", { type: "geojson", data: featureCollection }); // Add a fill layer to visualize the isoline areas map.addLayer({ 'id': 'isolines-fill-900', 'type': 'fill', 'source': 'isolines', 'filter': ['==', ['get', 'TimeThreshold'], 900], 'paint': { 'fill-color': '#0000ff', 'fill-opacity': 0.5 } }); // Add a layer for 600m (10) map.addLayer({ 'id': 'isolines-fill-600', 'type': 'fill', 'source': 'isolines', 'filter': ['==', ['get', 'TimeThreshold'], 600], 'paint': { 'fill-color': '#00ff00', 'fill-opacity': .5 } }); // Add a layer for 300m (5) map.addLayer({ 'id': 'isolines-fill-300', 'type': 'fill', 'source': 'isolines', 'filter': ['==', ['get', 'TimeThreshold'], 300], 'paint': { 'fill-color': '#f10000', 'fill-opacity': 0.5 } }); // Add an outline layer to highlight the isoline boundaries map.addLayer({ 'id': 'isolines-outline', 'type': 'line', 'source': 'isolines', 'paint': { 'line-color': '#000000', 'line-width': 2 } }); }); } // Call the function to initialize the map initializeMap(); </script> </body> </html> HTMLãã¡ã€ã«ããã©ãŠã¶ã§éããšã次ã®å°å³ïŒå³9ïŒã衚瀺ãããŸãããã®å°å³ã¯ããããã¢ã³ã»ãªãŸãŒãããã®åŸæ©åå
ã®è·é¢ã 5 åã15 åã30 åã®æéæ ã§ç€ºããŠããŸãã HTMLãã¡ã€ã«ããã©ãŠã¶ã§éããšã次ã®å°å³ïŒå³9ïŒã衚瀺ãããŸãããã®å°å³ã¯ããããã¢ã³ã»ãªãŸãŒãããã®åŸæ©åå
ã®è·é¢ã 5 åã15 åã30 åã®æéæ ã§ç€ºããŠããŸãã å³ 9 â ãããã¢ã³ãªãŸãŒãããã®åŸæ©è·é¢ã衚瀺ããå°å³ SnapToRoads ã«ããäœçœ®è£æ£ãããã«ãŒãããŒã¿ã®ååŸ SnapToRoads ã䜿çšãããšãGPS ããŒã¿ããã®ä»ã®äœçœ®ããŒã¿ãæå¯ãã®éè·¯ã«ã¹ãããããäœçœ®è£æ£åŸã®ç·ããŒã¿ãååŸããããšãã§ããŸãããã®æ©èœã¯ãè»äž¡è¿œè·¡ã亀éåæã®ç²ŸåºŠãåäžãããã®ã«éåžžã«åœ¹ç«ã¡ãŸãããŠãŒã¶ãŒã¯æå®ããããã©ã¡ãŒã¿ãå«ã POST ãªã¯ãšã¹ããéä¿¡ããäœçœ®è£æ£ãããç·ããŒã¿ãå«ãã¬ã¹ãã³ã¹ãåãåãããšãã§ããŸããåŠçåãšåŠçåŸã®ããŒã¿ãå°å³äžã§èŠèŠåããäŸã瀺ããŸãã snapToRoad.html ãšããååã®æ°ãã HTML ãã¡ã€ã«ãäœæãã以äžã®ã³ãŒãããã¡ã€ã«ã«è²Œãä»ããŠãã ããã <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Amazon Location Service - Snap to Roads</title> <!-- MapLibre GL CSS --> <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" /> <style> body { margin: 0; } #map { height: 100vh; /* Full viewport height */ } </style> </head> HTML ãã¡ã€ã«ããã©ãŠã¶ã§éããšã以äžã®å°å³ïŒå³10ïŒã衚瀺ãããŸããéãç·ã¯ GPS ãã¬ãŒã¹ã衚ããèµ€ãç·ã¯éè·¯ã«ã¹ããããããããŒãžã§ã³ã衚ããŠããŸãã å³ 10 â GPS ãã¬ãŒã¹ã«åºã¥ããŠä¿®æ£ãããã«ãŒãã衚瀺ããå°å³ ã¯ãªãŒã³ã¢ãã ãã®ãã¢ã§äœæããã Amazon Location Service ãªãœãŒã¹ã¯ API ããŒã®ã¿ã§ãããAPI ããŒãåé€ããã«ã¯ãAmazon Location Service ã³ã³ãœãŒã«ã«ç§»åããäœæãã API ããŒãéžæããŠã Deactivate ãéžæããŸããããŒã®ç¡å¹åã確èªãã Delete ãéžæããŸããæšæºã® 90 æ¥éã®ç¡å¹åæéãç¡èŠããŠããŒã匷å¶çãéžæããŠãã ãã ãŸãšã Amazon Location Service ã¯æ°ããæ©èœã«ããããã«æè»æ§ãåäžããŸããããã®ã¢ããããŒãã«ããã以åã¯å¿
èŠã ã£ããªãœãŒã¹äœæãäžèŠã«ãªããAPI ããŒãèšå®ããã ãã§æ§ã
㪠API ã䜿çšã§ããããã«ãªããŸãããããã«ããããŠãŒã¶ãŒã¯å°ç空éã¢ããªã±ãŒã·ã§ã³ãè¿
éãã€ã¹ã ãŒãºã«æ§ç¯ã§ããŸãã æ³šç®ãã¹ãæ°æ©èœã«ã¯ãMaps API ã® GetStyleDescriptor ãš GetStaticMapãPlaces API ã® SearchText ãš SearchNearbyãRoutes API ã® CalculateIsolines ãš SnapToRoads ããããŸãã Maps API ã§ã¯ãGetStyleDescriptor ã䜿çšããŠæ§ã
ãªãããã¹ã¿ã€ã«ãååŸããã¢ããªã±ãŒã·ã§ã³ã«é©çšã§ããŸãããŸããGetStaticMap ã¯æå®ãã座æšãšãºãŒã ã¬ãã«ã«åºã¥ããŠéçãªå°å³ç»åãçæã§ããŸããPlaces API ã§ã¯ SearchText ã䜿çšã㊠POI ããŒã¿ãæ€çŽ¢ã§ããSearchNearby ã¯ç¹å®ã®å Žæã®åšèŸºã«ãã POI ãèŠã€ããããšãã§ããŸããRoutes API ã§ã¯ãCalculateIsolines ã䜿çšããŠæå®ãããã€ã³ãããã®å°éå¯èœæ§ãèšç®ããSnapToRoads 㯠GPS ããŒã¿ãä¿®æ£ããŠæ£ç¢ºãªçµè·¯ããŒã¿ãååŸã§ããŸãã ãããã®æ°æ©èœã«ãããã¢ããªã±ãŒã·ã§ã³éçºè
ã¯å°ç空éããŒã¿ããã广çã«æŽ»çšãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã倧å¹
ã«åäžãããããšãã§ããŸããããžãã¹ã®å éåã«åœ¹ç«ã€æ¹æ³ã®è©³çްã«ã€ããŠã¯ã AWS ã®æ
åœè
ã«ãåãåãããã ããã åèè³æ Amazon Location Service Routes, Places, Maps ã®æ°ãã API ãçºè¡š Amazon Location Service API ããã¥ã¡ã³ã AWS Geospatial â GitHub Yasunori Kirimoto Yasunori Kirimoto ã¯ãAWS DevTools Hero ã§ãããæ ªåŒäŒç€Ÿ MIERUNE ã®å
±å嵿¥è
å
Œ CEO ã§ããGISïŒå°çæ
å ±ã·ã¹ãã ïŒãšFOSS4GïŒFree and Open Source Software for GeospatialïŒãå°éãšããŠããŸãã20 幎以äžã®çµéšãšå°ç空éããŒã¿ããã³ã¢ããªã±ãŒã·ã§ã³ã«é¢ããå¹
åºãç¥èãæã£ãŠããŸãã