Introducción a Azure Maps

<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 src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js">

<div id="myMap"></div>

var map = new atlas.Map('myMap', {
            center: [-5.3775,36.17805556],
            zoom: 10,
            language: 'es-ES',
            authOptions: {
                authType: 'subscriptionKey',
                subscriptionKey: '<SubscriptionKey>'
            }
        });

map.controls.add([
            new atlas.control.ZoomControl(),
            new atlas.control.CompassControl(),
            new atlas.control.PitchControl(),
            new atlas.control.StyleControl()
        ], {
            position: "top-right"
        });

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 symbol layer using the data source and add it to the map
            //Add a layer for rendering point data.
            var resultLayer = new atlas.layer.SymbolLayer(datasource, null, {
                    iconOptions: {
                        image: 'pin-round-darkblue',
                        anchor: 'center',
                        allowOverlap: true
                    },
                    textOptions: {
                        anchor: "top"
                    }
                });

                map.layers.add(resultLayer)

            // Use SubscriptionKeyCredential with a subscription key
            var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());

            // Use subscriptionKeyCredential to create a pipeline
            var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);

            // Construct the SearchURL object
            var searchURL = new atlas.service.SearchURL(pipeline);

            var query = 'gasoline-station';
            var radius = 9000;
            var lon = -5.3775;
            var lat = 36.17805556;

            searchURL.searchPOI(atlas.service.Aborter.timeout(1000), query, {
                limit: 10,
                lat: lat,
                lon: lon,
                radius: radius,
                view: 'Auto'
            }).then((results) => {

                // Extract GeoJSON feature collection from the response and add it to the datasource
                var data = results.geojson.getFeatures();
                datasource.add(data);

                // set camera to bounds to show the results
                map.setCamera({
                    bounds: data.bbox,
                    zoom: 10,
                    padding: 15
                });
            });

            //Create a popup but leave it closed so we can update it and display it later.
            popup = new atlas.Popup();

            //Add a mouse over event to the result layer and display a popup when this event fires.
            map.events.add('mouseover', resultLayer, showPopup);

            function showPopup(e) {
                //Get the properties and coordinates of the first shape that the event occurred on.

                var p = e.shapes[0].getProperties();
                var position = e.shapes[0].getCoordinates();

                //Create HTML from properties of the selected result.
                var html = ['<div style="padding:5px"><div><b>', p.poi.name,
                    '</b></div><div>', p.address.freeformAddress,
                    '</div><div>', position[1], ', ', position[0], '</div></div>'];

                //Update the content and position of the popup.
                popup.setPopupOptions({
                    content: html.join(''),
                    position: position
                });

                //Open the popup.
                popup.open(map);
            }
        });