[SOLVED] Esri map For Canada city boundary highlight using city latitude and longitude

Esri map For Canada city boundary highlight using city latitude and longitude

I have only the latitude and longitude for the city and I need to highlight that city boundary link related image link: https://prnt.sc/3adh6luxIhSE for Canada country using the Esri map.

[ https://developers.arcgis.com/documentation/ ]

I Follow the below code for these features.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcGIS Map with Marker and Boundary for Edmonton</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css">
    <style>
        #viewDiv {
            height: 500px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="viewDiv"></div>

    <script src="https://js.arcgis.com/4.24/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/Color",
            "esri/layers/FeatureLayer",
            "esri/config" // To set the API key
        ], function(Map, MapView, Graphic, Point, SimpleMarkerSymbol, Color, FeatureLayer, esriConfig) {
            // Set your API key
            esriConfig.apiKey = "YOUR_API_KEY";

            // Create a map
            var map = new Map({
                basemap: "streets"
            });

            // Create a view
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-113.4909, 53.5444], // Edmonton coordinates
                zoom: 12
            });

            // Create a point for the marker
            var markerPoint = new Point({
                longitude: -113.4909, // Edmonton longitude
                latitude: 53.5444    // Edmonton latitude
            });

            // Create a simple marker symbol for the place marker
            var markerSymbol = new SimpleMarkerSymbol({
                color: new Color([0, 0, 255]), // Blue color
                size: 10,
                outline: {
                    color: new Color([255, 255, 255]),
                    width: 2
                }
            });

            // Create a graphic with the point and marker symbol
            var markerGraphic = new Graphic({
                geometry: markerPoint,
                symbol: markerSymbol
            });

            // Add the marker graphic to the view's graphics layer
            view.graphics.add(markerGraphic);

            // Create a feature layer for Edmonton's boundary (example URL, replace with actual service)
            var edmontonBoundaryLayer = new FeatureLayer({
                url: "https://services.arcgis.com/YOUR_ORGANIZATION/arcgis/rest/services/Edmonton_Boundary_Service/FeatureServer/0"
            });

            // Add the Edmonton boundary layer to the map
            map.add(edmontonBoundaryLayer);
        });
    </script>
</body>
</html>

But How I Find and use YOUR_ORGANIZATION and Edmonton_Boundary_Service in these url: **https://services.arcgis.com/YOUR_ORGANIZATION/arcgis/rest/services/Edmonton_Boundary_Service/FeatureServer/0 **

Give me suggestion for the my query to add the this features using Esri map for Canada country.

Solution

Correct me if I am wrong. I am having some troubles fully understanding your question. If you are looking for a link to the featurelayer a quick google search gave me this link.

https://services8.arcgis.com/eplMbiqon7XDlULb/arcgis/rest/services/City_of_Edmonton_Neighbourhood_Boundaries/FeatureServer/0

You can substitute your link in the FeatureLayer with that one.

            var edmontonBoundaryLayer = new FeatureLayer({
                url: "https://services8.arcgis.com/eplMbiqon7XDlULb/arcgis/rest/services/City_of_Edmonton_Neighbourhood_Boundaries/FeatureServer/0 "
        });