Comments (6)
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.
No @rbrundritt , this is still not working. Popup position has not changed.
from azuremapscodesamples.
Look at the code I provided. The "Popup" is a new div, it is not the atlas.Popup class.
from azuremapscodesamples.
Yup, i saw the popup div, but still its not working sir.
from azuremapscodesamples.
Can you be more specific about want isn't working? Have you taken the sample I provided and tried running it?
from azuremapscodesamples.
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)
- Fill Address Form with Autosuggest Uncaught (in promise) TypeError: Failed to fetch running sample code HOT 3
- Map 3.0.0 Preview 8-->10 Drawing Manager Issues after changing the map style HOT 1
- Drawing Manager Event Fires for an drawn shape when clicking outside of the shape HOT 1
- Map Popup with HTML Bootstrap 5 Components wont Interact HOT 3
- [How To] How to generate tokens without RBAC? HOT 2
- [HowTo] Bring back old map styles HOT 1
- atlas.io.read does not load icons from the kmz file HOT 1
- New layers... who dis? HOT 5
- Missing npm package azuremaps-maplibre-gl HOT 5
- Missing supported type on BoundingBox.fromData HOT 4
- invalid HTML in sample HOT 1
- Usage of the ['id'] data expression HOT 4
- Choosing popup locale for formatting data HOT 3
- Changing map style changes layering HOT 10
- I am unable to access some resources. HOT 3
- Adding method to data source to allow string Geojson HOT 4
- Image based Choropleth HOT 3
- I have a problem with running debugging this azuremapscodesample app it won't run I get this error shown in screenshot HOT 18
- How do I make a uwp app like google earth using Azure maps web SDK via a WebView in mainpage.xml MainPage.xaml.cs with search bar on visual studio 2022
- How do I make a web app like google earth using the Azure Maps Web SDK via a WebView in mainpage.xml mainpage.xml.cs with search bar on visual studio 2022
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from azuremapscodesamples.