CODEWITHSUNDEEP
arraysazureeventspopupgoogle-maps-markers
ALD2355
ALD2355

Reputation: 21

Markers Array and Popups in Azure Maps

I am trying to rewrite a map in Azure I originally wrote in Bing V8 as Bing is being retired in June.

Marker[i] = new atlas.HtmlMarker({ draggable: true, text: [i], htmlContent: '',
pixelOffset: [0, 0], position: mapPoint, popup: new atlas.Popup({ content: "Position" , pixelOffset: [0, -30] })

    });
       map.markers.add(Marker[i]);

map.events.add('mouseover', Marker, function () {popup.open(map)});

The twenty markers get added to the map but the popups do not work and the map event throws an error. What is the correct syntax? Azure does seem to be complicated compare to Leaflet etc.

Upvotes: 0

Views: 90

Answers (1)

Sampath
Sampath

Reputation: 3639

In Azure Maps, the approach to adding markers and handling popups differs slightly from Bing Maps, and it also requires careful management of event listeners.

Refer to this link for instructions on adding a popup to a point on the map and this link to learn how to add an HTML marker to the map.

Below code is for combining the logic for adding markers and popups with event handling in azure map

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Markers Array and Popups in Azure Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
</head>
<body onload="initializeMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>

    <script>
        let map;
        let markersArray = [];

        function initializeMap() {
            // Initialize the map
            map = new atlas.Map('myMap', {
                view: 'Auto',
                authOptions: {
                    authType: 'anonymous',
                    clientId: 'YOUR_CLIENT_ID', // Replace with your Azure Maps client ID
                    getToken: function (resolve, reject) {
                        // Replace with your token service URL if required
                        fetch('https://samples.azuremaps.com/api/GetAzureMapsToken')
                            .then(response => response.text())
                            .then(token => resolve(token))
                            .catch(error => reject(error));
                    }
                }
            });

            // Event: When the map is ready
            map.events.add('ready', () => {
                const positions = [
                    [-122.335167, 47.608013],
                    [-118.2437, 34.0522],
                    [-73.935242, 40.730610],
                ];

                positions.forEach((position, index) => {
                    // Create a popup
                    const popup = new atlas.Popup({
                        content: `<div>Position ${index + 1}</div>`,
                        pixelOffset: [0, -30]
                    });

                    // Create an HTML marker
                    const marker = new atlas.HtmlMarker({
                        position: position,
                        htmlContent: `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="37" viewBox="0 0 30 37">
                                        <rect x="0" y="0" rx="8" ry="8" width="30" height="30" fill="purple"/>
                                        <polygon fill="purple" points="10,29 20,29 15,37 10,29"/>
                                        <text x="15" y="20" style="font-size:16px;font-family:arial;fill:#ffffff;" text-anchor="middle">${index + 1}</text>
                                      </svg>`,
                        popup: popup
                    });

                    // Add marker to the map
                    map.markers.add(marker);
                    markersArray.push(marker);

                    // Attach mouseover and mouseout events to the map for the marker
                    map.events.add('mouseover', marker, () => popup.open(map, marker));
                    map.events.add('mouseout', marker, () => popup.close());
                });
            });
        }
    </script>
</body>
</html>

Output:

html-markers

popup-events

Upvotes: 0

Related Questions