Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign up
Find file
Copy path
AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/Polygon and Polygon Extrusion Layers/Polygon labels - symbol layer.html
Find file
Copy path
Fetching contributors…
Cannot retrieve contributors at this time
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Polygon labels - symbol layer - Azure Maps Web SDK Samples</title> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="x-ua-compatible" content="IE=Edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | |
| <meta name="description" content="This sample shows how the symbol layer can be used to automatically render labels for polygons on the map. " /> | |
| <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, template, fill pattern, polygonlayer" /> | |
| <meta name="author" content="Microsoft Azure Maps" /> | |
| <!-- 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; | |
| var data = [ | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "label": "Polygon 1" | |
| }, | |
| "geometry": { | |
| "type": "Polygon", | |
| "coordinates": [[[-102.54364, 42.50045], [-102.14263, 42.49235], [-102.27722, 42.66830], [-102.54364, 42.50045]] | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "label": "Polygon 2" | |
| }, | |
| "geometry": { | |
| "type": "Polygon", | |
| "coordinates": [[[-100.89294, 42.73490], [-100.91766, 42.46601], [-100.40954, 42.47412], [-100.39581, 42.56521], [-100.72814, 42.57533], [-100.71990, 42.73692], [-100.89294, 42.73490]] | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "label": "Polygon 3" | |
| }, | |
| "geometry": { | |
| "type": "Polygon", | |
| "coordinates": [[[-101.00555, 41.72828], [-100.92041, 41.61954], [-100.24749, 41.96561], [-100.39306, 42.10637], [-101.00555, 41.72828]] | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "label": "Polygon 4" | |
| }, | |
| "geometry": { | |
| "type": "Polygon", | |
| "coordinates": [[[-102.69744, 41.70777], [-102.10144, 41.70777], [-102.10144, 41.95540], [-102.69744, 41.95540], [-102.69744, 41.70777]] | |
| ] | |
| } | |
| } | |
| ]; | |
| function GetMap() { | |
| //Point the Azure Maps domain to the US Azure Gov Cloud domain. | |
| atlas.setDomain('atlas.azure.us'); | |
| //Initialize a map instance. | |
| map = new atlas.Map('myMap', { | |
| center: [-101.4285, 42.1695], | |
| zoom: 8, | |
| view: 'Auto', | |
| //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps | |
| authOptions: { | |
| authType: 'subscriptionKey', | |
| subscriptionKey: '<Your Azure Maps Key>' | |
| } | |
| }); | |
| //Wait until the map resources are ready. | |
| map.events.add('ready', function () { | |
| datasource = new atlas.source.DataSource(); | |
| map.sources.add(datasource); | |
| //Add the polygon data to the data source. | |
| datasource.add(data); | |
| map.layers.add([ | |
| //Create a layer to render the polygon data. | |
| new atlas.layer.PolygonLayer(datasource), | |
| //Create a layer to render the label of the polygon. | |
| new atlas.layer.SymbolLayer(datasource, null, { | |
| iconOptions: { | |
| //Hide the default image. | |
| image: 'none' | |
| }, | |
| textOptions: { | |
| //Reference the label property of the polygon as the text field. | |
| textField: ['get', 'label'] | |
| } | |
| }) | |
| ]); | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body onload="GetMap()"> | |
| <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div> | |
| <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;"> | |
| <legend><h1 style="font-size:16px">Polygon labels - symbol layer</h1></legend> | |
| This sample shows how the symbol layer can be used to automatically render labels for polygons on the map. | |
| </fieldset> | |
| </body> | |
| </html> |