I’m a novice developer. The third day I can’t understand what the problem is, I created an Aure Map, then I need to link it to the dynamics 365 fields, but the whole problem is that the map does not display a pin with geolocation, tell me what the problem is. My Code:
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Azure Map Integration</title>
<style>
#myMap {
height: 400px;
width: 100%;
}
</style>
<!-- Azure Maps SDK -->
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>
<link
rel="stylesheet"
href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css"
type="text/css"
/>
</head>
<body>
<div id="myMap"></div>
<script>
let map, datasource, searchService, pushpin;
// Initialize Azure Map
function initMap() {
map = new atlas.Map("myMap", {
center: [-73.935242, 40.73061], // Default center (New York)
zoom: 12,
authOptions: {
authType: "subscriptionKey",
subscriptionKey:
"api_key", // Replace with your Azure Maps key
},
});
// Wait until the map resources are ready
map.events.add("ready", function () {
// Create a data source and add it to the map
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
// Create a search service for geocoding and reverse geocoding
searchService = new atlas.service.SearchURL(map);
// Try to get the user's current geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
const userLocation = [
position.coords.longitude,
position.coords.latitude,
];
// Center the map at the user's location
map.setCamera({
center: userLocation,
zoom: 15,
});
// Add a draggable pushpin at the user's location
pushpin = new atlas.data.Feature(
new atlas.data.Point(userLocation),
{
draggable: true,
}
);
datasource.add(pushpin);
// Create a symbol layer to render the pushpin
const symbolLayer = new atlas.layer.SymbolLayer(
datasource,
null,
{
iconOptions: {
image: "pin-blue", // Azure Maps default pin
anchor: "center",
allowOverlap: true,
},
}
);
map.layers.add(symbolLayer);
// Add dragend event listener to update form fields when pushpin is moved
map.events.add("dragend", pushpin, function () {
const location = pushpin.geometry.coordinates;
reverseGeocode(location);
});
},
function (error) {
console.error("Geolocation error: " + error.message);
}
);
} else {
console.error("Geolocation is not supported by this browser.");
}
});
}
// Function to reverse geocode the pushpin position to update the Dynamics 365 fields
function reverseGeocode(location) {
searchService
.reverseSearch(atlas.service.Aborter.timeout(10000), {
query: location,
})
.then((response) => {
const result = response.geojson.getFeatures();
if (result.features.length > 0) {
const address = result.features[0].properties.address;
fillFormFields(address);
}
})
.catch((error) => {
console.log("Reverse geocode was not successful: " + error.message);
});
}
// Function to fill Dynamics 365 fields based on reverse geocoding results
function fillFormFields(address) {
setFieldValue(
"address1_line1",
(address.streetName || "") + " " + (address.streetNumber || "")
);
setFieldValue("address1_city", address.municipality || "");
setFieldValue("address1_stateorprovince", address.adminDistrict || "");
setFieldValue("address1_postalcode", address.postalCode || "");
setFieldValue("address1_country", address.countryRegion || "");
}
// Initialize the map on page load
initMap();
</script>
</body>
</html>
I tried different things from azure map documentation to gpt the problem was not solved, the key if something is there and is also inscribed
