Coder Social home page Coder Social logo

Comments (6)

rbrundritt avatar rbrundritt commented on August 10, 2024

Several ways to do this, the easiest is to simple float an absolutely positioned div over the map. Here is a sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <meta charset="utf-8" />
	<link rel="shortcut icon" href="/favicon.ico"/>
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

    <script type='text/javascript'>
        var map, datasource, popup;

        function GetMap() {
	    //Store a reference to the popup div.
	    popup = document.getElementById('fixedPopup');
		
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-122.33, 47.62],
                zoom: 11,
                view: 'Auto',
				
		 //Add your Azure Maps key to the map SDK. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<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(null, {
                    cluster: true
                });
                map.sources.add(datasource);

                //Create three point features on the map and add some metadata in the properties which we will want to display in a popup.
                var point1 = new atlas.data.Feature(new atlas.data.Point([-122.33, 47.6]), {
                    name: 'Point 1 Title',
                    description: 'This is the description 1.'
                });

                var point2 = new atlas.data.Feature(new atlas.data.Point([-122.335, 47.645]), {
                    name: 'Point 2 Title',
                    description: 'This is the description 2.'
                });

                var point3 = new atlas.data.Feature(new atlas.data.Point([-122.325, 47.635]), {
                    name: 'Point 3 Title',
                    description: 'This is the description 3.'
                });

                //Add the symbol to the data source.
                datasource.add([point1, point2, point3]);

                //Add a layer for rendering point data as symbols.
                var symbolLayer = new atlas.layer.SymbolLayer(datasource);
                map.layers.add(symbolLayer);

                //Add a click event to the symbol layer.
                map.events.add('click', symbolLayer, showPopup);
                
            });
        }
		
		function showPopup(e){
			var properties = e.shapes[0].getProperties();
			
			popup.innerHTML = `<b>${properties.name}</b><br/><br/>${properties.description}`;
			popup.style.display = '';
		}
		
		
		function hidePopup(){
			popup.style.display = 'none';
		}
    </script>
	<style>
		.mapContainer, #myMap {
			position: relative;
			width: 100%;
			height: 600px;
		}
		
		#fixedPopup {
			position: absolute;
			right:10px;
			bottom: 50px;
			padding:10px;
			background-color: white;
			border:1px solid blue;
			border-radius: 10px;
		}
	</style>
</head>
<body onload="GetMap()">

	<div class="mapContainer">
		<div id="myMap"></div>
		
		<div id="fixedPopup" style="display:none"></div>
	</div>

</body>
</html>

from azuremapscodesamples.

krunal8123 avatar krunal8123 commented on August 10, 2024

No @rbrundritt , this is still not working. Popup position has not changed.

from azuremapscodesamples.

rbrundritt avatar rbrundritt commented on August 10, 2024

Look at the code I provided. The "Popup" is a new div, it is not the atlas.Popup class.

from azuremapscodesamples.

krunal8123 avatar krunal8123 commented on August 10, 2024

Yup, i saw the popup div, but still its not working sir.

from azuremapscodesamples.

rbrundritt avatar rbrundritt commented on August 10, 2024

Can you be more specific about want isn't working? Have you taken the sample I provided and tried running it?

from azuremapscodesamples.

krunal8123 avatar krunal8123 commented on August 10, 2024

Yes i took the sample. But never mind , now the popup position is not the issue. so i am closing this issue. what now is remaining is issue = #42

from azuremapscodesamples.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.