- 扫描 ID：
- ac008247-6723-4a44-b5c5-48a5861df852已完成
- 提交的 URL：
- https://samples.azuremaps.com/
- 报告完成时间：
链接 · 找到 297 个
从页面中识别出的传出链接
| 链接 | 文本 |
|---|---|
| https://azuremaps.com | Visit the homepage |
| https://docs.azuremaps.com | Docs |
| https://demo.azuremaps.com | Demo |
| https://blog.azuremaps.com | Blog |
| https://updates.azuremaps.com | Updates |
| https://go.microsoft.com/fwlink/?LinkId=521839 | Privacy Statement |
| https://aka.ms/3rdpartycookies | Third-Party Cookies |
| https://github.com/Azure-Samples/Azure-Maps-Locator | Azure Maps Store Locator |
| https://github.com/Azure-Samples/AzureMapsCodeSamples/ | download |
| https://aka.ms/AzureMapsGettingStarted | getting started guide |
JavaScript 变量 · 找到 19 个
在页面窗口对象上加载的全局 JavaScript 变量是在函数外部声明的变量，可以从当前范围内的代码中的任何位置访问
| 名称 | 类型 |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| WcpConsent | function |
| mscc | function |
| $ | function |
| jQuery | function |
| uidEvent | number |
| bootstrap | object |
控制台日志消息 · 找到 0 条
记录到 Web 控制台的消息
HTML
页面的原始 HTML 正文
<!DOCTYPE html><html lang="en" class="h-100"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A collection of code samples for the Azure Maps Web Control.">
<meta name="author" content="Microsoft Azure Maps">
<title>Azure Maps Samples</title>
<link href="/favicon.ico" rel="shortcut icon">
<link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.col {
min-height: 350px
}
a.m-skip-to-main {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -2
}
a.m-skip-to-main:hover {
left: -999px;
position: absolute;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -2
}
a.m-skip-to-main:focus, a.m-skip-to-main:active {
background: #e6e6e6;
color: #0067b8;
position: fixed;
top: 0;
left: 0;
padding: 24px;
width: auto;
height: auto;
overflow: auto;
right: 0;
text-decoration: underline;
text-align: center;
z-index: 800;
outline: none
}
a.m-skip-to-main:focus {
border: 1px dashed #000
}
</style>
<style id="ms-consent-banner-main-styles">.w8hcgFksdo30C8w-bygqu{color:#000}.ydkKdaztSS0AeHWIeIHsQ a{color:#0067B8}.erL690_8JwUW-R4bJRcfl{background-color:#EBEBEB;border:none;color:#000}.erL690_8JwUW-R4bJRcfl:enabled:hover{color:#000;background-color:#DBDBDB;box-shadow:0px 4px 10px rgba(0,0,0,0.25);border:none}.erL690_8JwUW-R4bJRcfl:enabled:focus{background-color:#DBDBDB;box-shadow:0px 4px 10px rgba(0,0,0,0.25);border:2px solid #000}.erL690_8JwUW-R4bJRcfl:disabled{opacity:1;color:rgba(0,0,0,0.2);background-color:rgba(0,0,0,0.2);border:none}._1zNQOqxpBFSokeCLGi_hGr{border:none;background-color:#0067B8;color:#fff}._1zNQOqxpBFSokeCLGi_hGr:enabled:hover{color:#fff;background-color:#0067B8;box-shadow:0px 4px 10px rgba(0,0,0,0.25);border:none}._1zNQOqxpBFSokeCLGi_hGr:enabled:focus{background-color:#0067B8;box-shadow:0px 4px 10px rgba(0,0,0,0.25);border:2px solid #000}._1zNQOqxpBFSokeCLGi_hGr:disabled{opacity:1;color:rgba(0,0,0,0.2);background-color:rgba(0,120,215,0.2);border:none}._23tra1HsiiP6cT-Cka-ycB{position:relative;display:flex;z-index:9999;width:100%;background-color:#F2F2F2;justify-content:space-between;text-align:left}div[dir="rtl"]._23tra1HsiiP6cT-Cka-ycB{text-align:right}._1Upc2NjY8AlDn177YoVj0y{margin:0;padding-left:5%;padding-top:8px;padding-bottom:8px}div[dir="rtl"] ._1Upc2NjY8AlDn177YoVj0y{margin:0;padding:8px 5% 8px 0;float:none}._23tra1HsiiP6cT-Cka-ycB svg{fill:none;max-width:none;max-height:none}._1V_hlU-7jdtPiooHMu89BB{display:table-cell;padding:12px;width:24px;height:24px;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:normal;font-size:24px;line-height:0}.f6QKJD7fhSbnJLarTL-W-{display:table-cell;vertical-align:middle;padding:0;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:normal;font-size:13px;line-height:16px}.f6QKJD7fhSbnJLarTL-W- a{text-decoration:underline}._2j0fmugLb1FgYz6KPuB91w{display:inline-block;margin-left:5%;margin-right:5%;min-width:40%;min-width:calc((150px + 3 * 4px) * 2 + 150px);min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;align-self:center;position:relative}._1XuCi2WhiqeWRUVp3pnFG3{margin:4px;padding:5px;min-width:150px;min-height:36px;vertical-align:top;cursor:pointer;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:20px;text-align:center}._1XuCi2WhiqeWRUVp3pnFG3:focus{box-sizing:border-box}._1XuCi2WhiqeWRUVp3pnFG3:disabled{cursor:not-allowed}._2bvsb3ubApyZ0UGoQA9O9T{display:block;position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.6);overflow:auto;text-align:left}div[dir="rtl"]._2bvsb3ubApyZ0UGoQA9O9T{text-align:right}div[dir="rtl"] ._2bvsb3ubApyZ0UGoQA9O9T{left:auto;right:0}.AFsJE948muYyzCMktdzuk{position:relative;top:8%;margin-bottom:40px;margin-left:auto;margin-right:auto;box-sizing:border-box;width:640px;background-color:#fff;border:1px solid #0067B8}._3kWyBRbW_dgnMiEyx06Fu4{float:right;z-index:1;margin:2px;padding:12px;border:none;cursor:pointer;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:normal;font-size:13px;line-height:13px;display:flex;align-items:center;text-align:center;color:#666;background-color:#fff}div[dir="rtl"] ._3kWyBRbW_dgnMiEyx06Fu4{margin:2px;padding:12px;float:left}.uCYvKvHXrhjNgflv1VqdD{position:static;margin-top:36px;margin-left:36px;margin-right:36px}._17pX1m9O_W--iZbDt3Ta5r{margin-top:0;margin-bottom:12px;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:600;font-size:20px;line-height:24px;text-transform:none}._1kBkHQ1V1wu3kl-YcLgUr6{height:446px;overflow:auto}._20_nXDf6uFs9Q6wxRXG-I-{margin-top:0;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:20px}._20_nXDf6uFs9Q6wxRXG-I- a{text-decoration:underline}dl._2a0NH_GDQEQe5Ynfo7suVH{margin-top:36px;margin-bottom:0;padding:0;list-style:none;text-transform:none}dt._3j_LCPv7fyXv3A8FIXVwZ4{margin-top:20px;float:none;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:600;font-size:18px;line-height:24px;list-style:none}.k-vxTGFbdq1aOZB2HHpjh{margin:0;padding:0;border:none}._2Bucyy75c_ogoU1g-liB5R{margin:0;padding:0;border-bottom:none;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:600;font-size:18px;line-height:24px;text-transform:none}._63gwfzV8dclrsl2cfd90r{display:inline-block;margin-top:0;margin-bottom:13px;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:20px}._1l8wM_4mRYGz3Iu7l3BZR7{display:block}._2UE03QS02aZGkslegN_F-i{display:inline-block;position:relative;left:5px;margin-bottom:13px;margin-right:34px;padding:3px}div[dir="rtl"] ._2UE03QS02aZGkslegN_F-i{margin:0 0 13px 34px;padding:3px;float:none}div[dir="rtl"] ._2UE03QS02aZGkslegN_F-i{left:auto;right:5px}._23tra1HsiiP6cT-Cka-ycB *::before,._2bvsb3ubApyZ0UGoQA9O9T *::before,._23tra1HsiiP6cT-Cka-ycB *::after,._2bvsb3ubApyZ0UGoQA9O9T *::after{box-sizing:inherit}._1HSFn0HzGo6w4ADApV8-c4{outline:2px solid rgba(0,0,0,0.8)}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2{display:inline-block;position:relative;margin-top:0;margin-left:0;margin-right:0;height:0;width:0;border-radius:0;cursor:pointer;outline:none;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2+label::before{display:block;position:absolute;top:5px;left:3px;height:19px;width:19px;content:"";border-radius:50%;border:1px solid #000;background-color:#fff}div[dir="rtl"] input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2+label::before{left:auto;right:3px}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:not(:disabled)+label:hover::before{border:1px solid #0067B8}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:not(:disabled)+label:hover::after{display:block;position:absolute;top:10px;left:8px;height:9px;width:9px;content:"";border-radius:50%;background-color:rgba(0,0,0,0.8)}div[dir="rtl"] input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:not(:disabled)+label:hover::after{left:auto;right:8px}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:not(:disabled)+label:focus::before{border:1px solid #0067B8}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:not(:disabled)+label:focus::after{display:block;position:absolute;top:10px;left:8px;height:9px;width:9px;content:"";border-radius:50%;background-color:#000}div[dir="rtl"] input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:not(:disabled)+label:focus::after{left:auto;right:8px}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:checked+label::after{display:block;position:absolute;top:10px;left:8px;height:9px;width:9px;content:"";border-radius:50%;background-color:#000}div[dir="rtl"] input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:checked+label::after{left:auto;right:8px}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:disabled+label{cursor:not-allowed}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:disabled+label::before{border:1px solid rgba(0,0,0,0.2);background-color:rgba(0,0,0,0.2)}._3RJzeL3l9Rl_lAQEm6VwdX{display:block;position:static;float:right;margin-top:0;margin-bottom:0;margin-left:19px;margin-right:0;padding-top:0;padding-bottom:0;padding-left:8px;padding-right:0;width:80%;width:calc(100% - 19px);font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:20px;text-transform:none;cursor:pointer;box-sizing:border-box}div[dir="rtl"] ._3RJzeL3l9Rl_lAQEm6VwdX{margin:0 19px 0 0;padding:0 8px 0 0;float:left}.nohp3sIG12ZBhzcMnPala{margin-top:20px;margin-bottom:48px}._2uhaEsmeotZ3P-M0AXo2kF{padding:0;width:278px;height:36px;cursor:pointer;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:20px;text-align:center}._2uhaEsmeotZ3P-M0AXo2kF:focus{box-sizing:border-box}._2uhaEsmeotZ3P-M0AXo2kF:disabled{cursor:not-allowed}._3tOu1FJ59c_xz_PmI1lKV5{float:right;padding:0;width:278px;height:36px;cursor:pointer;font-family:Segoe UI, SegoeUI, Arial, sans-serif;font-style:normal;font-weight:normal;font-size:15px;line-height:20px;text-align:center}._3tOu1FJ59c_xz_PmI1lKV5:focus{box-sizing:border-box}._3tOu1FJ59c_xz_PmI1lKV5:disabled{cursor:not-allowed}div[dir="rtl"] ._3tOu1FJ59c_xz_PmI1lKV5{margin:0;padding:0;float:left}@media only screen and (max-width: 768px){._2j0fmugLb1FgYz6KPuB91w,._1Upc2NjY8AlDn177YoVj0y{padding-top:8px;padding-bottom:12px;padding-left:3.75%;padding-right:3.75%;margin:0;width:92.5%}._23tra1HsiiP6cT-Cka-ycB{display:block}._1XuCi2WhiqeWRUVp3pnFG3{margin-bottom:8px;margin-left:0;margin-right:0;width:100%}._2bvsb3ubApyZ0UGoQA9O9T{overflow:hidden}.AFsJE948muYyzCMktdzuk{top:1.8%;width:93.33%;height:96.4%;overflow:hidden}.uCYvKvHXrhjNgflv1VqdD{margin-top:24px;margin-left:24px;margin-right:24px;height:100%}._1kBkHQ1V1wu3kl-YcLgUr6{height:62%;height:calc(100% - 188px);min-height:50%}._2uhaEsmeotZ3P-M0AXo2kF{width:100%}._3tOu1FJ59c_xz_PmI1lKV5{margin-bottom:12px;margin-left:0;width:100%}div[dir="rtl"] ._3tOu1FJ59c_xz_PmI1lKV5{margin:0 0 12px 0;padding:0;float:none}}@media only screen and (max-width: 768px) and (orientation: landscape), only screen and (max-height: 260px), only screen and (max-width: 340px){.AFsJE948muYyzCMktdzuk{overflow:auto}}@media only screen and (max-height: 260px), only screen and (max-width: 340px){._1XuCi2WhiqeWRUVp3pnFG3{min-width:0}._3kWyBRbW_dgnMiEyx06Fu4{padding:3%}.uCYvKvHXrhjNgflv1VqdD{margin-top:3%;margin-left:3%;margin-right:3%}._17pX1m9O_W--iZbDt3Ta5r{margin-bottom:3%}._1kBkHQ1V1wu3kl-YcLgUr6{height:calc(79% - 64px)}.nohp3sIG12ZBhzcMnPala{margin-top:5%;margin-bottom:10%}._3tOu1FJ59c_xz_PmI1lKV5{margin-bottom:3%}div[dir="rtl"] ._3tOu1FJ59c_xz_PmI1lKV5{margin:0 0 3% 0;padding:0;float:none}}
</style><style type="text/css" id="ms-consent-banner-theme-styles">._23tra1HsiiP6cT-Cka-ycB {
background-color: #F2F2F2 !important;
}.w8hcgFksdo30C8w-bygqu {
color: #000000 !important;
}.ydkKdaztSS0AeHWIeIHsQ a {
color: #0067B8 !important;
}._2bvsb3ubApyZ0UGoQA9O9T {
background-color: rgba(255, 255, 255, 0.6) !important;
}.AFsJE948muYyzCMktdzuk {
background-color: #FFFFFF !important;
border: 1px solid #0067B8 !important;
}._3kWyBRbW_dgnMiEyx06Fu4 {
color: #666666 !important;
background-color: #FFFFFF !important;
}._1zNQOqxpBFSokeCLGi_hGr {
border: none !important;
background-color: #0067B8 !important;
color: #FFFFFF !important;
}._1zNQOqxpBFSokeCLGi_hGr:enabled:hover {
color: #FFFFFF !important;
background-color: #0067B8 !important;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
border: none !important;
}._1zNQOqxpBFSokeCLGi_hGr:enabled:focus {
background-color: #0067B8 !important;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
border: 2px solid #000000 !important;
}._1zNQOqxpBFSokeCLGi_hGr:disabled {
opacity: 1 !important;
color: rgba(0, 0, 0, 0.2) !important;
background-color: rgba(0, 120, 215, 0.2) !important;
border: none !important;
}.erL690_8JwUW-R4bJRcfl {
border: none !important;
background-color: #EBEBEB !important;
color: #000000 !important;
}.erL690_8JwUW-R4bJRcfl:enabled:hover {
color: #000000 !important;
background-color: #DBDBDB !important;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
border: none !important;
}.erL690_8JwUW-R4bJRcfl:enabled:focus {
background-color: #DBDBDB !important;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25) !important;
border: 2px solid #000000 !important;
}.erL690_8JwUW-R4bJRcfl:disabled {
opacity: 1 !important;
color: rgba(0, 0, 0, 0.2) !important;
background-color: rgba(0, 0, 0, 0.2) !important;
border: none !important;
}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2 + label::before {
border: 1px solid #000000 !important;
background-color: #FFFFFF !important;
}._1HSFn0HzGo6w4ADApV8-c4 {
outline: 2px solid rgba(0, 0, 0, 0.8) !important;
}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:checked + label::after {
background-color: #000000 !important;
}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2 + label:hover::before {
border: 1px solid #0067B8 !important;
}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2 + label:hover::after {
background-color: rgba(0, 0, 0, 0.8) !important;
}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2 + label:focus::before {
border: 1px solid #0067B8 !important;
}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2 + label:focus::after {
background-color: #000000 !important;
}input[type="radio"]._1dp8Vp5m3HwAqGx8qBmFV2:disabled + label::before {
border: 1px solid rgba(0, 0, 0, 0.2) !important;
background-color: rgba(0, 0, 0, 0.2) !important;
}</style></head>
<body onload="Start()" class="d-flex flex-column h-100">
<a href="#main" class="m-skip-to-main">Skip to main content</a>
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: black;">
<div class="container-fluid">
<a class="navbar-brand" href="/" title="Azure Maps Samples">
<svg width="20" height="20" class="me-2 mb-1" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.2448 35.7947C23.525 42.5775 10.9868 40.9815 4.20483 32.2608C-2.57719 23.5401 -0.981434 11.0005 7.7383 4.21768C7.7953 4.16068 7.85228 4.10369 7.96627 4.04669C16.743 -2.6221 29.2812 -0.855162 35.9492 7.92256C42.5603 16.7003 40.9075 29.0689 32.2448 35.7947Z" fill="url(#paint0_linear)"></path>
<path d="M23.183 5.35754L8.30811 29.0118L26.9444 21.773L23.183 5.35754Z" fill="#9CEBFF"></path>
<path opacity="0.7" d="M20.1626 10.1454L29.3953 32.5457L23.1832 5.35754L20.1626 10.1454Z" fill="white"></path>
<path d="M19.6494 24.623L25.2346 22.457L29.395 32.6027L19.6494 24.623Z" fill="#32BEDD"></path>
<defs>
<linearGradient id="paint0_linear" x1="20.1249" y1="40.1385" x2="20.1249" y2="0.196089" gradientUnits="userSpaceOnUse">
<stop offset="0.0" stop-color="#198AB3"></stop>
<stop offset="0.4417" stop-color="#28B7DB"></stop>
<stop offset="0.7753" stop-color="#32D4F5"></stop>
</linearGradient>
</defs>
</svg>
Azure Maps Samples
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://azuremaps.com" title="About Azure Maps">About</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://docs.azuremaps.com" title="Azure Maps Documentation">Docs</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://demo.azuremaps.com" title="Azure Maps Demo">Demo</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://blog.azuremaps.com" title="Azure Maps Blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://updates.azuremaps.com" title="Azure Maps Updates">Updates</a>
</li>
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="categoryDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" >
Categories
</a>
<ul id="categoryList" class="dropdown-menu dropdown-menu-dark" aria-labelledby="categoryDropdown" style="max-height: calc(100vh - 100px); overflow-y: auto;">
<li><a class="dropdown-item" href="#3d-layer">3D Layer</a></li><li><a class="dropdown-item" href="#animations">Animations</a></li><li><a class="dropdown-item" href="#bubble-layer">Bubble Layer</a></li><li><a class="dropdown-item" href="#controls">Controls</a></li><li><a class="dropdown-item" href="#title">Title</a></li><li><a class="dropdown-item" href="#device-sensors">Device Sensors</a></li><li><a class="dropdown-item" href="#drawing-tools-module">Drawing Tools Module</a></li><li><a class="dropdown-item" href="#geospatial-files">Geospatial Files</a></li><li><a class="dropdown-item" href="#heat-map-layer">Heat Map Layer</a></li><li><a class="dropdown-item" href="#html-markers">HTML Markers</a></li><li><a class="dropdown-item" href="#image-layer">Image Layer</a></li><li><a class="dropdown-item" href="#line-layer">Line Layer</a></li><li><a class="dropdown-item" href="#map">Map</a></li><li><a class="dropdown-item" href="#pmtiles-layer">PMTiles Layer</a></li><li><a class="dropdown-item" href="#polygon-and-polygon-extrusion-layers">Polygon and Polygon Extrusion Layers</a></li><li><a class="dropdown-item" href="#popups">Popups</a></li><li><a class="dropdown-item" href="#rest-services">REST Services</a></li><li><a class="dropdown-item" href="#services-module">Services Module</a></li><li><a class="dropdown-item" href="#spatial-analysis">Spatial Analysis</a></li><li><a class="dropdown-item" href="#spatial-io-module">Spatial IO Module</a></li><li><a class="dropdown-item" href="#spatial-math">Spatial Math</a></li><li><a class="dropdown-item" href="#symbol-layer">Symbol Layer</a></li><li><a class="dropdown-item" href="#third-party-map-controls">Third Party Map Controls</a></li><li><a class="dropdown-item" href="#tile-layers">Tile Layers</a></li><li><a class="dropdown-item" href="#traffic">Traffic</a></li><li><a class="dropdown-item" href="#tutorials">Tutorials</a></li><li><a class="dropdown-item" href="#vector-tiles">Vector tiles</a></li><li><a class="dropdown-item" href="#weather">Weather</a></li>
</ul>
</li> -->
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" id="searchBox" placeholder="Search" aria-label="Search" aria-autocomplete="list" aria-controls="sampleList">
<button class="btn btn-outline-info" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid p-0" style="margin-top: 56px;">
<div id="cookie-banner"><div id="wcpConsentBannerCtrl" class="_23tra1HsiiP6cT-Cka-ycB" dir="ltr" role="alert">
<div class="_1Upc2NjY8AlDn177YoVj0y">
<span class="_1V_hlU-7jdtPiooHMu89BB w8hcgFksdo30C8w-bygqu">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 44 44" width="24px" height="24px" fill="none" stroke="currentColor">
<circle cx="22" cy="22" r="20" stroke-width="2"></circle>
<line x1="22" x2="22" y1="18" y2="33" stroke-width="3"></line>
<line x1="22" x2="22" y1="12" y2="15" stroke-width="3"></line>
</svg>
</span> <!-- used for icon -->
<p class="f6QKJD7fhSbnJLarTL-W- ydkKdaztSS0AeHWIeIHsQ w8hcgFksdo30C8w-bygqu">
We use optional cookies to improve your experience on our websites, such as through social media connections, and to display personalized advertising based on your online activity. If you reject optional cookies, only cookies necessary to provide you the services will be used. You may change your selection by clicking “Manage Cookies” at the bottom of the page. <a target="_blank" href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacy Statement</a> <a target="_blank" href="https://aka.ms/3rdpartycookies">Third-Party Cookies</a>
</p>
</div>
<div class="_2j0fmugLb1FgYz6KPuB91w">
<button type="button" class="_1XuCi2WhiqeWRUVp3pnFG3 erL690_8JwUW-R4bJRcfl">Accept</button>
<button type="button" class="_1XuCi2WhiqeWRUVp3pnFG3 erL690_8JwUW-R4bJRcfl">Reject</button>
<button type="button" class="_1XuCi2WhiqeWRUVp3pnFG3 erL690_8JwUW-R4bJRcfl">Manage cookies</button>
</div>
</div></div>
</div>
<main id="main">
<div class="container px-4 py-5">
<div class="row flex-lg-row-reverse row-cols-lg-2 row-cols-xl-2 align-items-center g-5 py-5 row-cols-1">
<div class="col">
<div id="carouselIndicators" class="carousel slide border rounded-3 shadow-lg slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Store Locator"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="3D Layer"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Weather"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="3" aria-label="Satellite Images"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="4" aria-label="Traffic"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="5" aria-label="Travel Times"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/azuremapsdemo0.jpg" class="d-block w-100" alt="Store Locator">
<div class="container">
<div class="carousel-caption text-start text-black">
<h5>Store Locator</h5>
<p><strong>Help customers find your business locations.</strong></p>
<p><a class="btn btn-info" target="_blank" href="https://github.com/Azure-Samples/Azure-Maps-Locator">Azure Maps Store Locator</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="/images/azuremapsdemo1.jpg" class="d-block w-100" alt="3D layer">
<div class="container">
<div class="carousel-caption text-start text-white">
<h5>3D Layer</h5>
<p><strong>Add 2D and 3D layers to the map using WebGL.</strong></p>
<p><a class="btn btn-info" target="_blank" href="https://demo.azuremaps.com">Azure Maps Demo</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="/images/azuremapsdemo2.jpg" class="d-block w-100" alt="Weather">
<div class="container">
<div class="carousel-caption text-start text-white">
<h5>Weather</h5>
<p><strong>Use current or historical weather information.</strong></p>
<p><a class="btn btn-info" target="_blank" href="https://demo.azuremaps.com">Azure Maps Demo</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="/images/azuremapsdemo4.jpg" class="d-block w-100" alt="Satellite Images">
<div class="container">
<div class="carousel-caption text-start text-black">
<h5>Satellite Images</h5>
<p><strong>See the world in high resolution.</strong></p>
<p><a class="btn btn-info" target="_blank" href="https://demo.azuremaps.com">Azure Maps Demo</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="/images/azuremapsdemo5.jpg" class="d-block w-100" alt="Traffic">
<div class="container">
<div class="carousel-caption text-start text-black">
<h5>Traffic</h5>
<p><strong>Live traffic and accident information.</strong></p>
<p><a class="btn btn-info" target="_blank" href="https://demo.azuremaps.com">Azure Maps Demo</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img src="/images/azuremapsdemo6.jpg" class="d-block w-100" alt="Travel Times">
<div class="container">
<div class="carousel-caption text-start text-white">
<h5>Travel Times</h5>
<p><strong>Calculate travel time using an isochrone.</strong></p>
<p><a class="btn btn-info" target="_blank" href="https://demo.azuremaps.com">Azure Maps Demo</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col">
<h1 class="display-5 fw-bold lh-1 mb-3">Azure Maps Samples</h1>
<p class="lead">
Welcome to the Azure Maps Web Control V3 Code Sample Gallery. This is a collection of <strong>283</strong> code samples that have been made open source on GitHub. Build your location-aware solutions with a seamless development experience. Easily integrate open source and other map controls, as well as Open Geospatial Consortium standards, such as GeoJSON and KML.
</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/" target="_blank" class="btn btn-info btn-lg px-4 me-md-2">Open GitHub Project</a>
<a href="https://aka.ms/AzureMapsGettingStarted" target="_blank" class="btn btn-outline-secondary btn-lg px-4">Getting Started</a>
</div>
</div>
</div>
</div>
<div class="album py-5 bg-light">
<div class="container">
<div id="sampleList" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3">
<div class="w-100"><a name="3d-layer"></a><h3 class="fw-light">3D Layer <small class="text-muted">(7)</small></h3><p>Add custom 2D and 3D layers to the map using WebGL to render powerful visualizations.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/3d-layer/babylon.js/screenshot.jpg" loading="lazy" alt="Babylon custom WebGL layer"><div class="card-body"><h5 class="card-title">Babylon custom WebGL layer</h5><p class="card-text">This sample shows how to create a custom 3D layer with Babylon.js.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="babylon-custom-webgl-layer" data-bs-title="Babylon custom WebGL layer" data-bs-path="/3d-layer/babylon.js" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/babylon.js/babylon.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/3d-layer/babylon.js" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/babylon.js/babylon.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/3d-layer/deck.gl/screenshot.jpg" loading="lazy" alt="Deck GL custom WebGL layer"><div class="card-body"><h5 class="card-title">Deck GL custom WebGL layer</h5><p class="card-text">This sample shows how to create a custom 3D layer with Deck.gl.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="deck-gl-custom-webgl-layer" data-bs-title="Deck GL custom WebGL layer" data-bs-path="/3d-layer/deck.gl" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/deck.gl/deck.gl.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/3d-layer/deck.gl" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/deck.gl/deck.gl.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/3d-layer/flowmap.gl/screenshot.jpg" loading="lazy" alt="Integration with Flowmap.gl"><div class="card-body"><h5 class="card-title">Integration with Flowmap.gl</h5><p class="card-text">This sample shows a flow map on top of Azure Maps using the flowmap.gl module.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="integration-with-flowmap.gl" data-bs-title="Integration with Flowmap.gl" data-bs-path="/3d-layer/flowmap.gl" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/Flowmap.gl/Flowmap.gl.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/3d-layer/flowmap.gl" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/Flowmap.gl/Flowmap.gl.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/3d-layer/newyork/screenshot.gif" loading="lazy" alt="Yellow Cab vs Green Cab Trips in Manhattan"><div class="card-body"><h5 class="card-title">Yellow Cab vs Green Cab Trips in Manhattan</h5><p class="card-text">This sample creates a WebGL trips layer in Manhattan, NY using Deck.gl 3D framework for Azure Maps.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="yellow-cab-vs-green-cab-trips-in-manhattan" data-bs-title="Yellow Cab vs Green Cab Trips in Manhattan" data-bs-path="/3d-layer/newyork" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/newyork/newyork.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/3d-layer/newyork" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/newyork/newyork.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/3d-layer/three.js/screenshot.gif" loading="lazy" alt="Three.js custom WebGL layer"><div class="card-body"><h5 class="card-title">Three.js custom WebGL layer</h5><p class="card-text">This sample shows how to create a custom 3D layer with Three.js.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="three.js-custom-webgl-layer" data-bs-title="Three.js custom WebGL layer" data-bs-path="/3d-layer/three.js" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/three.js/three.js.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/3d-layer/three.js" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/three.js/three.js.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/3d-layer/threebox/screenshot.gif" loading="lazy" alt="Threebox custom WebGL layer"><div class="card-body"><h5 class="card-title">Threebox custom WebGL layer</h5><p class="card-text">This sample shows how to create a custom 3D layer with Threebox.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="threebox-custom-webgl-layer" data-bs-title="Threebox custom WebGL layer" data-bs-path="/3d-layer/threebox" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/Threebox/Threebox.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/3d-layer/threebox" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/Threebox/Threebox.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/3d-layer/webgl/screenshot.jpg" loading="lazy" alt="Simple 2D WebGL layer"><div class="card-body"><h5 class="card-title">Simple 2D WebGL layer</h5><p class="card-text">This sample showcases the creation of a custom WebGL layer that draws a 2D triangle directly on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-2d-webgl-layer" data-bs-title="Simple 2D WebGL layer" data-bs-path="/3d-layer/webgl" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/WebGL/WebGLLayer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/3d-layer/webgl" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/3D-layer/WebGL/WebGLLayer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="animations"></a><h3 class="fw-light">Animations <small class="text-muted">(26)</small></h3><p>Learn how to animate data on the map. Many of these samples leverage the open source Azure Maps Animation module.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-a-choropleth-map/screenshot.gif" loading="lazy" alt="Animate a Choropleth Map"><div class="card-body"><h5 class="card-title">Animate a Choropleth Map</h5><p class="card-text">This sample shows how to create a choropleth map and animate it over time.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-a-choropleth-map" data-bs-title="Animate a Choropleth Map" data-bs-path="/animations/animate-a-choropleth-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20a%20choropleth%20map/Animate%20a%20choropleth%20map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-a-choropleth-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20a%20choropleth%20map/Animate%20a%20choropleth%20map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-a-gps-trace/screenshot.gif" loading="lazy" alt="Animate a GPS trace"><div class="card-body"><h5 class="card-title">Animate a GPS trace</h5><p class="card-text">This sample shows how to smoothly animate a symbol along a route path taking into consideration timestamps for each point in the route path.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-a-gps-trace" data-bs-title="Animate a GPS trace" data-bs-path="/animations/animate-a-gps-trace" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20a%20GPS%20trace/Animate%20a%20GPS%20trace.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-a-gps-trace" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20a%20GPS%20trace/Animate%20a%20GPS%20trace.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-a-line/screenshot.gif" loading="lazy" alt="Animate a Line"><div class="card-body"><h5 class="card-title">Animate a Line</h5><p class="card-text">This sample shows how to animate the position of a line on the map by updating its coordinates and layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-a-line" data-bs-title="Animate a Line" data-bs-path="/animations/animate-a-line" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20a%20Line/Animate%20a%20Line.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-a-line" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20a%20Line/Animate%20a%20Line.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-a-snakeline/screenshot.gif" loading="lazy" alt="Animate a snakeline"><div class="card-body"><h5 class="card-title">Animate a snakeline</h5><p class="card-text">This sample shows how to animate a LineString such that its path is drawn out smoothly over time on top of the map using what is called a snakeline animation.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-a-snakeline" data-bs-title="Animate a snakeline" data-bs-path="/animations/animate-a-snakeline" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20a%20snakeline/Animate%20a%20snakeline.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-a-snakeline" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20a%20snakeline/Animate%20a%20snakeline.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-along-a-path/screenshot.gif" loading="lazy" alt="Animate along a path"><div class="card-body"><h5 class="card-title">Animate along a path</h5><p class="card-text">This sample shows how to animate a symbol along a path on the map smoothly. This sample also includes controls and options for the animation.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-along-a-path" data-bs-title="Animate along a path" data-bs-path="/animations/animate-along-a-path" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20along%20a%20path/Animate%20along%20a%20path.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-along-a-path" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20along%20a%20path/Animate%20along%20a%20path.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-along-a-route-path/screenshot.gif" loading="lazy" alt="Animate along a route path"><div class="card-body"><h5 class="card-title">Animate along a route path</h5><p class="card-text">This sample shows how to smoothly animate a symbol along a route path taking into consideration timestamps for each point in the route path. This sample also includes controls and options for the animation.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-along-a-route-path" data-bs-title="Animate along a route path" data-bs-path="/animations/animate-along-a-route-path" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20along%20a%20route%20path/Animate%20along%20a%20route%20path.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-along-a-route-path" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20along%20a%20route%20path/Animate%20along%20a%20route%20path.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-marker-along-path/screenshot.gif" loading="lazy" alt="Animate marker along path"><div class="card-body"><h5 class="card-title">Animate marker along path</h5><p class="card-text">This sample shows how to easily animate a HTML marker along a path on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-marker-along-path" data-bs-title="Animate marker along path" data-bs-path="/animations/animate-marker-along-path" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20marker%20along%20path/Animate%20marker%20along%20path.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-marker-along-path" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20marker%20along%20path/Animate%20marker%20along%20path.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-multiple-points/screenshot.gif" loading="lazy" alt="Animate multiple points"><div class="card-body"><h5 class="card-title">Animate multiple points</h5><p class="card-text">This sample shows how to animate multiple points on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-multiple-points" data-bs-title="Animate multiple points" data-bs-path="/animations/animate-multiple-points" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20multiple%20points/Animate%20multiple%20points.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-multiple-points" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20multiple%20points/Animate%20multiple%20points.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-point-along-path/screenshot.gif" loading="lazy" alt="Animate point along path"><div class="card-body"><h5 class="card-title">Animate point along path</h5><p class="card-text">This sample shows how to easily animate a point along a path on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-point-along-path" data-bs-title="Animate point along path" data-bs-path="/animations/animate-point-along-path" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20point%20along%20path/Animate%20point%20along%20path.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-point-along-path" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20point%20along%20path/Animate%20point%20along%20path.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-to-new-position-of-marker/screenshot.gif" loading="lazy" alt="Animate to new position of marker"><div class="card-body"><h5 class="card-title">Animate to new position of marker</h5><p class="card-text">This sample shows how to animate a marker on the map to a new coordinate.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-to-new-position-of-marker" data-bs-title="Animate to new position of marker" data-bs-path="/animations/animate-to-new-position-of-marker" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20to%20new%20position%20of%20marker/Animate%20to%20new%20position%20of%20marker.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-to-new-position-of-marker" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20to%20new%20position%20of%20marker/Animate%20to%20new%20position%20of%20marker.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animate-to-new-position-of-point/screenshot.gif" loading="lazy" alt="Animate to new position of point"><div class="card-body"><h5 class="card-title">Animate to new position of point</h5><p class="card-text">This sample shows how to animate a point on the map to a new coordinate.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-to-new-position-of-point" data-bs-title="Animate to new position of point" data-bs-path="/animations/animate-to-new-position-of-point" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20to%20new%20position%20of%20point/Animate%20to%20new%20position%20of%20point.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animate-to-new-position-of-point" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animate%20to%20new%20position%20of%20point/Animate%20to%20new%20position%20of%20point.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animated-tile-layer/screenshot.gif" loading="lazy" alt="Animated tile layer"><div class="card-body"><h5 class="card-title">Animated tile layer</h5><p class="card-text">This sample shows how to animate an sequence of tile layers smoothly.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animated-tile-layer" data-bs-title="Animated tile layer" data-bs-path="/animations/animated-tile-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animated%20tile%20layer/Animated%20tile%20layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animated-tile-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animated%20tile%20layer/Animated%20tile%20layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animated-traffic-flow/screenshot.gif" loading="lazy" alt="Animated traffic flow"><div class="card-body"><h5 class="card-title">Animated traffic flow</h5><p class="card-text">This sample shows how to animate the flow of traffic relative to the congestion level using the flowing dashed line animation.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animated-traffic-flow" data-bs-title="Animated traffic flow" data-bs-path="/animations/animated-traffic-flow" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animated%20traffic%20flow/Animated%20traffic%20flow.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animated-traffic-flow" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animated%20traffic%20flow/Animated%20traffic%20flow.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/animation-easings/screenshot.gif" loading="lazy" alt="Animation easings"><div class="card-body"><h5 class="card-title">Animation easings</h5><p class="card-text">This sample demonstrates the different built in easing functions in the azure-maps-animation library.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animation-easings" data-bs-title="Animation easings" data-bs-path="/animations/animation-easings" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animation%20easings/Animation%20easings.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/animation-easings" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animation%20easings/Animation%20easings.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/bouncing-marker-animation/screenshot.gif" loading="lazy" alt="Bouncing marker animation"><div class="card-body"><h5 class="card-title">Bouncing marker animation</h5><p class="card-text">This sample shows how to animate an HTML marker to make it appear to be bouncing on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="bouncing-marker-animation" data-bs-title="Bouncing marker animation" data-bs-path="/animations/bouncing-marker-animation" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Bouncing%20marker%20animation/Bouncing%20marker%20animation.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/bouncing-marker-animation" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Bouncing%20marker%20animation/Bouncing%20marker%20animation.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/drop-markers-on-interval/screenshot.gif" loading="lazy" alt="Drop markers on interval"><div class="card-body"><h5 class="card-title">Drop markers on interval</h5><p class="card-text">This sample shows how to animate the dropping of multiple HTML markers on an interval to the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drop-markers-on-interval" data-bs-title="Drop markers on interval" data-bs-path="/animations/drop-markers-on-interval" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Drop%20markers%20on%20interval/Drop%20markers%20on%20interval.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/drop-markers-on-interval" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Drop%20markers%20on%20interval/Drop%20markers%20on%20interval.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/drop-multiple-markers-animation/screenshot.gif" loading="lazy" alt="Drop multiple markers animation"><div class="card-body"><h5 class="card-title">Drop multiple markers animation</h5><p class="card-text">This sample shows how to animate the dropping of multiple HTML markers on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drop-multiple-markers-animation" data-bs-title="Drop multiple markers animation" data-bs-path="/animations/drop-multiple-markers-animation" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Drop%20multiple%20markers%20animation/Drop%20multiple%20markers%20animation.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/drop-multiple-markers-animation" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Drop%20multiple%20markers%20animation/Drop%20multiple%20markers%20animation.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/drop-multiple-symbols-animation/screenshot.gif" loading="lazy" alt="Drop multiple symbols animation"><div class="card-body"><h5 class="card-title">Drop multiple symbols animation</h5><p class="card-text">This sample shows how to animate multiple points on the map as dropping symbols.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drop-multiple-symbols-animation" data-bs-title="Drop multiple symbols animation" data-bs-path="/animations/drop-multiple-symbols-animation" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Drop%20multiple%20symbols%20animation/Drop%20multiple%20symbols%20animation.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/drop-multiple-symbols-animation" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Drop%20multiple%20symbols%20animation/Drop%20multiple%20symbols%20animation.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/drop-symbol-animation/screenshot.gif" loading="lazy" alt="Drop symbol animation"><div class="card-body"><h5 class="card-title">Drop symbol animation</h5><p class="card-text">This sample shows how to animate a point on the map as a dropping symbol.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drop-symbol-animation" data-bs-title="Drop symbol animation" data-bs-path="/animations/drop-symbol-animation" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Drop%20symbol%20animation/Drop%20symbol%20animation.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/drop-symbol-animation" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Drop%20symbol%20animation/Drop%20symbol%20animation.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/drop-symbols-on-interval/screenshot.gif" loading="lazy" alt="Drop multiple symbols on interval"><div class="card-body"><h5 class="card-title">Drop multiple symbols on interval</h5><p class="card-text">This sample shows how to animate the dropping of multiple points on an interval to the map using a symbol layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drop-multiple-symbols-on-interval" data-bs-title="Drop multiple symbols on interval" data-bs-path="/animations/drop-symbols-on-interval" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Drop%20symbols%20on%20interval/Drop%20symbols%20on%20interval.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/drop-symbols-on-interval" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Drop%20symbols%20on%20interval/Drop%20symbols%20on%20interval.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/html-marker-pulse-animation/screenshot.gif" loading="lazy" alt="HTML Marker Pulse Animation"><div class="card-body"><h5 class="card-title">HTML Marker Pulse Animation</h5><p class="card-text">This sample shows how to pulse animate the position of a HTML marker on the map using CSS.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="html-marker-pulse-animation" data-bs-title="HTML Marker Pulse Animation" data-bs-path="/animations/html-marker-pulse-animation" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/HTML%20Marker%20Pulse%20Animation/HTML%20Marker%20Pulse%20Animation.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/html-marker-pulse-animation" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/HTML%20Marker%20Pulse%20Animation/HTML%20Marker%20Pulse%20Animation.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/morph-shape-animation/screenshot.gif" loading="lazy" alt="Morph shape animation"><div class="card-body"><h5 class="card-title">Morph shape animation</h5><p class="card-text">This sample shows how to animate the morphing of a shape from one geometry to another.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="morph-shape-animation" data-bs-title="Morph shape animation" data-bs-path="/animations/morph-shape-animation" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Morph%20shape%20animation/Morph%20shape%20animation.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/morph-shape-animation" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Morph%20shape%20animation/Morph%20shape%20animation.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/moving-dashed-line/screenshot.gif" loading="lazy" alt="Animate marker along path"><div class="card-body"><h5 class="card-title">Animate marker along path</h5><p class="card-text">This sample shows how to easily animate a HTML marker along a path on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="animate-marker-along-path" data-bs-title="Animate marker along path" data-bs-path="/animations/moving-dashed-line" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Moving%20dashed%20line/Moving%20dashed%20line.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/moving-dashed-line" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Moving%20dashed%20line/Moving%20dashed%20line.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/pulse-animation-with-bubble-layer/screenshot.gif" loading="lazy" alt="Pulse animation with bubble layer"><div class="card-body"><h5 class="card-title">Pulse animation with bubble layer</h5><p class="card-text">This sample shows how to create a pulse animation using a bubble layer as a pulse.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="pulse-animation-with-bubble-layer" data-bs-title="Pulse animation with bubble layer" data-bs-path="/animations/pulse-animation-with-bubble-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Pulse%20animation%20with%20bubble%20layer/Pulse%20animation%20with%20bubble%20layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/pulse-animation-with-bubble-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Pulse%20animation%20with%20bubble%20layer/Pulse%20animation%20with%20bubble%20layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/simple-html-marker-animation/screenshot.gif" loading="lazy" alt="Simple HTML Marker Animation"><div class="card-body"><h5 class="card-title">Simple HTML Marker Animation</h5><p class="card-text">This sample shows how to animate the position of a HTML marker on the map by updating the coordinates.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-html-marker-animation" data-bs-title="Simple HTML Marker Animation" data-bs-path="/animations/simple-html-marker-animation" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Simple%20HTML%20Marker%20Animation/Simple%20HTML%20Marker%20Animation.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/simple-html-marker-animation" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Simple%20HTML%20Marker%20Animation/Simple%20HTML%20Marker%20Animation.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/animations/simple-symbol-animation/screenshot.gif" loading="lazy" alt="Simple Symbol Animation"><div class="card-body"><h5 class="card-title">Simple Symbol Animation</h5><p class="card-text">This sample shows how to animate the position of a symbol on the map by updating the coordinates.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-symbol-animation" data-bs-title="Simple Symbol Animation" data-bs-path="/animations/simple-symbol-animation" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Simple%20Symbol%20Animation/Simple%20Symbol%20Animation.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/animations/simple-symbol-animation" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Simple%20Symbol%20Animation/Simple%20Symbol%20Animation.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="bubble-layer"></a><h3 class="fw-light">Bubble Layer <small class="text-muted">(5)</small></h3><p>These samples demonstrate different ways to implement the bubble layer to render point based data.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/bubble-layer/bubble-layer-options/screenshot.jpg" loading="lazy" alt="Bubble Layer Options"><div class="card-body"><h5 class="card-title">Bubble Layer Options</h5><p class="card-text">This sample shows how the different options of the bubble layer affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="bubble-layer-options" data-bs-title="Bubble Layer Options" data-bs-path="/bubble-layer/bubble-layer-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Bubble%20Layer/Bubble%20Layer%20Options/Bubble%20Layer%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/bubble-layer/bubble-layer-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Bubble%20Layer/Bubble%20Layer%20Options/Bubble%20Layer%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/bubble-layer/cluster-aggregate-average-values/screenshot.jpg" loading="lazy" alt="Cluster aggregate average values"><div class="card-body"><h5 class="card-title">Cluster aggregate average values</h5><p class="card-text">This sample shows how to calculate an aggregate value over values in a cluster.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="cluster-aggregate-average-values" data-bs-title="Cluster aggregate average values" data-bs-path="/bubble-layer/cluster-aggregate-average-values" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Bubble%20Layer/Cluster%20aggregate%20average%20values/Cluster%20aggregate%20average%20values.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/bubble-layer/cluster-aggregate-average-values" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Bubble%20Layer/Cluster%20aggregate%20average%20values/Cluster%20aggregate%20average%20values.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/bubble-layer/cluster-aggregates/screenshot.jpg" loading="lazy" alt="Cluster aggregates"><div class="card-body"><h5 class="card-title">Cluster aggregates</h5><p class="card-text">This sample shows how to define custom properties on clusters that are defined using data-driven style expression calculation. These calculations aggregate values across all points contained within the cluster.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="cluster-aggregates" data-bs-title="Cluster aggregates" data-bs-path="/bubble-layer/cluster-aggregates" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Bubble%20Layer/Cluster%20aggregates/Cluster%20aggregates.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/bubble-layer/cluster-aggregates" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Bubble%20Layer/Cluster%20aggregates/Cluster%20aggregates.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/bubble-layer/data-driven-bubble-layer-styling/screenshot.jpg" loading="lazy" alt="Data-Driven Bubble Layer Styling"><div class="card-body"><h5 class="card-title">Data-Driven Bubble Layer Styling</h5><p class="card-text">This sample shows how to use data-driven styles on a BubbleLayer to define the radius and color of each circle based on the magnitude of each data point.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="data-driven-bubble-layer-styling" data-bs-title="Data-Driven Bubble Layer Styling" data-bs-path="/bubble-layer/data-driven-bubble-layer-styling" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Bubble%20Layer/Data-Driven%20Bubble%20Layer%20Styling/Data-Driven%20Bubble%20Layer%20Styling.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/bubble-layer/data-driven-bubble-layer-styling" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Bubble%20Layer/Data-Driven%20Bubble%20Layer%20Styling/Data-Driven%20Bubble%20Layer%20Styling.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/bubble-layer/point-clusters-in-bubble-layer/screenshot.jpg" loading="lazy" alt="Point Clusters in Bubble Layer"><div class="card-body"><h5 class="card-title">Point Clusters in Bubble Layer</h5><p class="card-text">This sample shows how to enable point based clustering on a data source and render them differently from individual points on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="point-clusters-in-bubble-layer" data-bs-title="Point Clusters in Bubble Layer" data-bs-path="/bubble-layer/point-clusters-in-bubble-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Bubble%20Layer/Point%20Clusters%20in%20Bubble%20Layer/Point%20Clusters%20in%20Bubble%20Layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/bubble-layer/point-clusters-in-bubble-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Bubble%20Layer/Point%20Clusters%20in%20Bubble%20Layer/Point%20Clusters%20in%20Bubble%20Layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="controls"></a><h3 class="fw-light">Controls <small class="text-muted">(21)</small></h3><p>Add UI controls to the map to create an enhanced user experience.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/bring-data-into-view-control/screenshot.jpg" loading="lazy" alt="Bring Data Into View Control"><div class="card-body"><h5 class="card-title">Bring Data Into View Control</h5><p class="card-text">This sample shows how to create a simple custom control that centers and zooms the map to fit any data that is loaded on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="bring-data-into-view-control" data-bs-title="Bring Data Into View Control" data-bs-path="/controls/bring-data-into-view-control" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Bring%20Data%20Into%20View%20Control/Bring%20Data%20Into%20View%20Control.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/bring-data-into-view-control" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Bring%20Data%20Into%20View%20Control/Bring%20Data%20Into%20View%20Control.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/category-legend-options/screenshot.jpg" loading="lazy" alt="Category legend options"><div class="card-body"><h5 class="card-title">Category legend options</h5><p class="card-text">This sample shows how the different options of the category legend type.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="category-legend-options" data-bs-title="Category legend options" data-bs-path="/controls/category-legend-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Category%20legend%20options/Category%20legend%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/category-legend-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Category%20legend%20options/Category%20legend%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/create-a-layer-control/screenshot.jpg" loading="lazy" alt="Create a layer control"><div class="card-body"><h5 class="card-title">Create a layer control</h5><p class="card-text">This sample loads Mapbox styles of a GeoJSON polygon into Azure Maps.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="create-a-layer-control" data-bs-title="Create a layer control" data-bs-path="/controls/create-a-layer-control" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Create%20a%20layer%20control/Create%20a%20layer%20control.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/create-a-layer-control" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Create%20a%20layer%20control/Create%20a%20layer%20control.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/create-a-legend-control/screenshot.jpg" loading="lazy" alt="Create a legend control"><div class="card-body"><h5 class="card-title">Create a legend control</h5><p class="card-text">TThis sample shows how to create a legend control and add it to the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="create-a-legend-control" data-bs-title="Create a legend control" data-bs-path="/controls/create-a-legend-control" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Create%20a%20legend%20control/Create%20a%20legend%20control.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/create-a-legend-control" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Create%20a%20legend%20control/Create%20a%20legend%20control.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/create-html-legend/screenshot.jpg" loading="lazy" alt="Create HTML legend"><div class="card-body"><h5 class="card-title">Create HTML legend</h5><p class="card-text">This sample shows how to create legends using custom HTML with the legend control.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="create-html-legend" data-bs-title="Create HTML legend" data-bs-path="/controls/create-html-legend" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Create%20HTML%20legend/Create%20HTML%20legend.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/create-html-legend" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Create%20HTML%20legend/Create%20HTML%20legend.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/custom-navigation-controls/screenshot.jpg" loading="lazy" alt="Custom navigation controls"><div class="card-body"><h5 class="card-title">Custom navigation controls</h5><p class="card-text">This sample shows how to create a set of map navigation controls that can be placed anywhere on the page.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="custom-navigation-controls" data-bs-title="Custom navigation controls" data-bs-path="/controls/custom-navigation-controls" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Custom%20navigation%20controls/Custom%20navigation%20controls.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/custom-navigation-controls" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Custom%20navigation%20controls/Custom%20navigation%20controls.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/custom-styled-legend/screenshot.jpg" loading="lazy" alt="Custom styled legend"><div class="card-body"><h5 class="card-title">Custom styled legend</h5><p class="card-text">This sample shows how to create a custom styled legend using CSS.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="custom-styled-legend" data-bs-title="Custom styled legend" data-bs-path="/controls/custom-styled-legend" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Custom%20styled%20legend/Custom%20styled%20legend.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/custom-styled-legend" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Custom%20styled%20legend/Custom%20styled%20legend.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/dynamic-legend-and-layer-controls/screenshot.jpg" loading="lazy" alt="Dynamic legend and layer controls"><div class="card-body"><h5 class="card-title">Dynamic legend and layer controls</h5><p class="card-text">This sample shows how to create use the dynamic legend and layer controls.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="dynamic-legend-and-layer-controls" data-bs-title="Dynamic legend and layer controls" data-bs-path="/controls/dynamic-legend-and-layer-controls" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Dynamic%20legend%20and%20layer%20controls/Dynamic%20legend%20and%20layer%20controls.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/dynamic-legend-and-layer-controls" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Dynamic%20legend%20and%20layer%20controls/Dynamic%20legend%20and%20layer%20controls.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/fullscreen-control/screenshot.jpg" loading="lazy" alt="Fullscreen control"><div class="card-body"><h5 class="card-title">Fullscreen control</h5><p class="card-text">This sample shows how to add a fullscreen button to the map to display it in fullscreen mode.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="fullscreen-control" data-bs-title="Fullscreen control" data-bs-path="/controls/fullscreen-control" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Fullscreen%20control/Fullscreen%20control.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/fullscreen-control" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Fullscreen%20control/Fullscreen%20control.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/fullscreen-control-options/screenshot.jpg" loading="lazy" alt="Fullscreen control options"><div class="card-body"><h5 class="card-title">Fullscreen control options</h5><p class="card-text">This sample shows all the options of the fullscreen control.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="fullscreen-control-options" data-bs-title="Fullscreen control options" data-bs-path="/controls/fullscreen-control-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Fullscreen%20control%20options/Fullscreen%20control%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/fullscreen-control-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Fullscreen%20control%20options/Fullscreen%20control%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/gradient-legend-options/screenshot.jpg" loading="lazy" alt="Gradient legend options"><div class="card-body"><h5 class="card-title">Gradient legend options</h5><p class="card-text">This sample shows how the different options of the gradient legend type.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="gradient-legend-options" data-bs-title="Gradient legend options" data-bs-path="/controls/gradient-legend-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Gradient%20legend%20options/Gradient%20legend%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/gradient-legend-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Gradient%20legend%20options/Gradient%20legend%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/layer-control-options/screenshot.jpg" loading="lazy" alt="Layer control options"><div class="card-body"><h5 class="card-title">Layer control options</h5><p class="card-text">This sample shows how the different options of the legend control change the user experience.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="layer-control-options" data-bs-title="Layer control options" data-bs-path="/controls/layer-control-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Layer%20control%20options/Layer%20control%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/layer-control-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Layer%20control%20options/Layer%20control%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/legend-control-options/screenshot.jpg" loading="lazy" alt="Legend control options"><div class="card-body"><h5 class="card-title">Legend control options</h5><p class="card-text">This sample shows how the different options of the legend control change the user experience.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="legend-control-options" data-bs-title="Legend control options" data-bs-path="/controls/legend-control-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Legend%20control%20options/Legend%20control%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/legend-control-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Legend%20control%20options/Legend%20control%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/map-navigation-control-options/screenshot.gif" loading="lazy" alt="Map Navigation Control Options"><div class="card-body"><h5 class="card-title">Map Navigation Control Options</h5><p class="card-text">This sample shows all the map navigation controls on the map and how they react with different option settings.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="map-navigation-control-options" data-bs-title="Map Navigation Control Options" data-bs-path="/controls/map-navigation-control-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Map%20Navigation%20Control%20Options/Map%20Navigation%20Control%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/map-navigation-control-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Map%20Navigation%20Control%20Options/Map%20Navigation%20Control%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/map-style-picker/screenshot.jpg" loading="lazy" alt="Map Style Picker"><div class="card-body"><h5 class="card-title">Map Style Picker</h5><p class="card-text">This sample shows how to add the map style picker control to the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="map-style-picker" data-bs-title="Map Style Picker" data-bs-path="/controls/map-style-picker" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Map%20Style%20Picker/Map%20Style%20Picker.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/map-style-picker" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Map%20Style%20Picker/Map%20Style%20Picker.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/route-range-control/screenshot.jpg" loading="lazy" alt="Route range control"><div class="card-body"><h5 class="card-title">Route range control</h5><p class="card-text">This sample shows how to add the route range control to the map to query and display a route range polygon.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="route-range-control" data-bs-title="Route range control" data-bs-path="/controls/route-range-control" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Route%20range%20control/Route%20range%20control.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/route-range-control" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Route%20range%20control/Route%20range%20control.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/select-shapes-with-selection-control/screenshot.jpg" loading="lazy" alt="Select shapes with selection control"><div class="card-body"><h5 class="card-title">Select shapes with selection control</h5><p class="card-text"> This sample shows how to use the selection control with a data source of polygons.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="select-shapes-with-selection-control" data-bs-title="Select shapes with selection control" data-bs-path="/controls/select-shapes-with-selection-control" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Select%20shapes%20with%20selection%20control/Select%20shapes%20with%20selection%20control.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/select-shapes-with-selection-control" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Select%20shapes%20with%20selection%20control/Select%20shapes%20with%20selection%20control.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/selection-control/screenshot.jpg" loading="lazy" alt="Selection control"><div class="card-body"><h5 class="card-title">Selection control</h5><p class="card-text">This sample shows how to use the selection control. This control connects to a data source and lets you draw polygon areas on the map and retrieve all the point shapes in the data source that are within that area.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="selection-control" data-bs-title="Selection control" data-bs-path="/controls/selection-control" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Selection%20control/Selection%20control.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/selection-control" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Selection%20control/Selection%20control.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/simple-scale-bar-control/screenshot.jpg" loading="lazy" alt="Simple Scale Bar Control"><div class="card-body"><h5 class="card-title">Simple Scale Bar Control</h5><p class="card-text">This sample shows how to create a custom scale bar control that can be added to the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-scale-bar-control" data-bs-title="Simple Scale Bar Control" data-bs-path="/controls/simple-scale-bar-control" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Simple%20Scale%20Bar%20Control/Simple%20Scale%20Bar%20Control.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/simple-scale-bar-control" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Simple%20Scale%20Bar%20Control/Simple%20Scale%20Bar%20Control.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/spyglass-map-visualization/screenshot.jpg" loading="lazy" alt="Spyglass map visualization"><div class="card-body"><h5 class="card-title">Spyglass map visualization</h5><p class="card-text">This sample shows how to add a spyglass data viewer to the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="spyglass-map-visualization" data-bs-title="Spyglass map visualization" data-bs-path="/controls/spyglass-map-visualization" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Spyglass%20map%20visualization/Spyglass%20map%20visualization.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/spyglass-map-visualization" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Spyglass%20map%20visualization/Spyglass%20map%20visualization.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/controls/spyglass-module-options/screenshot.jpg" loading="lazy" alt="Spyglass module options"><div class="card-body"><h5 class="card-title">Spyglass module options</h5><p class="card-text">This sample shows how all the options of the spyglass module can be used to customize the user experience.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="spyglass-module-options" data-bs-title="Spyglass module options" data-bs-path="/controls/spyglass-module-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Spyglass%20module%20options/Spyglass%20module%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/controls/spyglass-module-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Controls/Spyglass%20module%20options/Spyglass%20module%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="title"></a><h3 class="fw-light">Title <small class="text-muted">(4)</small></h3><p>These samples demonstrate real-life scenarios or highlight key topics.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/demos/car-vs-truck-route/screenshot.jpg" loading="lazy" alt="Car vs Truck Route"><div class="card-body"><h5 class="card-title">Car vs Truck Route</h5><p class="card-text">This sample compares the route a truck has to take to the route a car can take.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="car-vs-truck-route" data-bs-title="Car vs Truck Route" data-bs-path="/demos/car-vs-truck-route" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Demos/Car%20vs%20Truck%20Route/Car%20vs%20Truck%20Route.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/demos/car-vs-truck-route" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Demos/Car%20vs%20Truck%20Route/Car%20vs%20Truck%20Route.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/demos/create-a-choropleth-map/screenshot.jpg" loading="lazy" alt="Create a Choropleth Map"><div class="card-body"><h5 class="card-title">Create a Choropleth Map</h5><p class="card-text">This sample shows how to create a choropleth map. A choropleth map is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="create-a-choropleth-map" data-bs-title="Create a Choropleth Map" data-bs-path="/demos/create-a-choropleth-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Demos/Create%20a%20Choropleth%20Map/Create%20a%20Choropleth%20Map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/demos/create-a-choropleth-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Demos/Create%20a%20Choropleth%20Map/Create%20a%20Choropleth%20Map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/demos/data-driven-styling/screenshot.jpg" loading="lazy" alt="Data-Driven Styling"><div class="card-body"><h5 class="card-title">Data-Driven Styling</h5><p class="card-text">This sample shows some basics around data-driven styling of layers in Azure Maps.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="data-driven-styling" data-bs-title="Data-Driven Styling" data-bs-path="/demos/data-driven-styling" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Demos/Data-Driven%20Styling/Data-Driven%20Styling.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/demos/data-driven-styling" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Demos/Data-Driven%20Styling/Data-Driven%20Styling.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/demos/large-geojson-files/screenshot.jpg" loading="lazy" alt="Large GeoJSON Files"><div class="card-body"><h5 class="card-title">Large GeoJSON Files</h5><p class="card-text">This sample demonstrates loading large GeoJSON files into the Azure Maps Web SDK.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="large-geojson-files" data-bs-title="Large GeoJSON Files" data-bs-path="/demos/large-geojson-files" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Demos/Large%20GeoJSON%20Files/Large%20GeoJSON%20Files.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/demos/large-geojson-files" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Demos/Large%20GeoJSON%20Files/Large%20GeoJSON%20Files.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="device-sensors"></a><h3 class="fw-light">Device Sensors <small class="text-muted">(5)</small></h3><p>See how to access sensors from a devices browser and use them with Azure Maps.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/device-sensors/continuous-user-position-tracking/screenshot.jpg" loading="lazy" alt="Continuous User Position Tracking"><div class="card-body"><h5 class="card-title">Continuous User Position Tracking</h5><p class="card-text">This sample shows how to continuously get the users position information from the browser by using the HTML5 geolocation API and update it on a map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="continuous-user-position-tracking" data-bs-title="Continuous User Position Tracking" data-bs-path="/device-sensors/continuous-user-position-tracking" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Device%20Sensors/Continuous%20User%20Position%20Tracking/Continuous%20User%20Position%20Tracking.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/device-sensors/continuous-user-position-tracking" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Device%20Sensors/Continuous%20User%20Position%20Tracking/Continuous%20User%20Position%20Tracking.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/device-sensors/geolocation-control/screenshot.jpg" loading="lazy" alt="Geolocation control"><div class="card-body"><h5 class="card-title">Geolocation control</h5><p class="card-text">This sample shows how to create a custom geolocation control that displays the users location on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="geolocation-control" data-bs-title="Geolocation control" data-bs-path="/device-sensors/geolocation-control" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Device%20Sensors/Geolocation%20control/Geolocation%20control.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/device-sensors/geolocation-control" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Device%20Sensors/Geolocation%20control/Geolocation%20control.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/device-sensors/geolocation-control-options/screenshot.jpg" loading="lazy" alt="Geolocation control options"><div class="card-body"><h5 class="card-title">Geolocation control options</h5><p class="card-text">This sample shows all the options of the geolocation control.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="geolocation-control-options" data-bs-title="Geolocation control options" data-bs-path="/device-sensors/geolocation-control-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Device%20Sensors/Geolocation%20control%20options/Geolocation%20control%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/device-sensors/geolocation-control-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Device%20Sensors/Geolocation%20control%20options/Geolocation%20control%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/device-sensors/show-a-users-position/screenshot.jpg" loading="lazy" alt="Show a Users Position"><div class="card-body"><h5 class="card-title">Show a Users Position</h5><p class="card-text">This sample shows how to get the users position information from the browser by using the HTML5 geolocation API and show it on a map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="show-a-users-position" data-bs-title="Show a Users Position" data-bs-path="/device-sensors/show-a-users-position" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Device%20Sensors/Show%20a%20Users%20Position/Show%20a%20Users%20Position.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/device-sensors/show-a-users-position" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Device%20Sensors/Show%20a%20Users%20Position/Show%20a%20Users%20Position.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/device-sensors/user-position-accuracy-circle/screenshot.jpg" loading="lazy" alt="User position accuracy circle"><div class="card-body"><h5 class="card-title">User position accuracy circle</h5><p class="card-text"> This sample shows how to display the users position on the map with an accuracy circle.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="user-position-accuracy-circle" data-bs-title="User position accuracy circle" data-bs-path="/device-sensors/user-position-accuracy-circle" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Device%20Sensors/User%20Position%20Accuracy%20Circle/User%20Position%20Accuracy%20Circle.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/device-sensors/user-position-accuracy-circle" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Device%20Sensors/User%20Position%20Accuracy%20Circle/User%20Position%20Accuracy%20Circle.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="drawing-tools-module"></a><h3 class="fw-light">Drawing Tools Module <small class="text-muted">(14)</small></h3><p>Add mouse and touch based drawing capabilities to the map.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/add-drawing-toolbar-to-map/screenshot.jpg" loading="lazy" alt="Add drawing toolbar to map"><div class="card-body"><h5 class="card-title">Add drawing toolbar to map</h5><p class="card-text">This sample shows how to use the Drawing Tools module and display the drawing toolbar on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="add-drawing-toolbar-to-map" data-bs-title="Add drawing toolbar to map" data-bs-path="/drawing-tools-module/add-drawing-toolbar-to-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Add%20drawing%20toolbar%20to%20map/Add%20drawing%20toolbar%20to%20map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/add-drawing-toolbar-to-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Add%20drawing%20toolbar%20to%20map/Add%20drawing%20toolbar%20to%20map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/allow-map-panning-with-drawing-tools/screenshot.gif" loading="lazy" alt="Allow map panning with drawing tools"><div class="card-body"><h5 class="card-title">Allow map panning with drawing tools</h5><p class="card-text">This sample shows how to allow the map to pan when using the drawing tools with the interaction type set to click.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="allow-map-panning-with-drawing-tools" data-bs-title="Allow map panning with drawing tools" data-bs-path="/drawing-tools-module/allow-map-panning-with-drawing-tools" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Allow%20map%20panning%20with%20drawing%20tools/Allow%20map%20panning%20with%20drawing%20tools.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/allow-map-panning-with-drawing-tools" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Allow%20map%20panning%20with%20drawing%20tools/Allow%20map%20panning%20with%20drawing%20tools.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/change-drawing-rendering-style/screenshot.jpg" loading="lazy" alt="Change drawing rendering style"><div class="card-body"><h5 class="card-title">Change drawing rendering style</h5><p class="card-text">This sample shows how to customize the rendering of the drawing shapes in the drawing manager by accessing the rendering layers using the drawingManager.getLayers() function.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="change-drawing-rendering-style" data-bs-title="Change drawing rendering style" data-bs-path="/drawing-tools-module/change-drawing-rendering-style" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Change%20drawing%20rendering%20style/Change%20drawing%20rendering%20style.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/change-drawing-rendering-style" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Change%20drawing%20rendering%20style/Change%20drawing%20rendering%20style.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/create-a-measuring-tool/screenshot.jpg" loading="lazy" alt="Create a measuring tool"><div class="card-body"><h5 class="card-title">Create a measuring tool</h5><p class="card-text">This sample shows how to use the drawing tools to measure distances and areas. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="create-a-measuring-tool" data-bs-title="Create a measuring tool" data-bs-path="/drawing-tools-module/create-a-measuring-tool" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Create%20a%20measuring%20tool/Create%20a%20measuring%20tool.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/create-a-measuring-tool" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Create%20a%20measuring%20tool/Create%20a%20measuring%20tool.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/draw-gridded-polygon/screenshot.jpg" loading="lazy" alt="Draw gridded polygon"><div class="card-body"><h5 class="card-title">Draw gridded polygon</h5><p class="card-text">This sample shows how to calculate a gridded pattern within a drawn polygon based on a physical distances. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="draw-gridded-polygon" data-bs-title="Draw gridded polygon" data-bs-path="/drawing-tools-module/draw-gridded-polygon" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Draw%20gridded%20polygon/Draw%20gridded%20polygon.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/draw-gridded-polygon" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Draw%20gridded%20polygon/Draw%20gridded%20polygon.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/drawing-manager-options/screenshot.jpg" loading="lazy" alt="Drawing manager options"><div class="card-body"><h5 class="card-title">Drawing manager options</h5><p class="card-text">This sample shows how the different options of the drawing manager change the user experience.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drawing-manager-options" data-bs-title="Drawing manager options" data-bs-path="/drawing-tools-module/drawing-manager-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Drawing%20manager%20options/Drawing%20manager%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/drawing-manager-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Drawing%20manager%20options/Drawing%20manager%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/drawing-toolbar-options/screenshot.jpg" loading="lazy" alt="Drawing toolbar options"><div class="card-body"><h5 class="card-title">Drawing toolbar options</h5><p class="card-text">This sample shows how the different options of the drawing toolbar change the user experience.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drawing-toolbar-options" data-bs-title="Drawing toolbar options" data-bs-path="/drawing-tools-module/drawing-toolbar-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Drawing%20toolbar%20options/Drawing%20toolbar%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/drawing-toolbar-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Drawing%20toolbar%20options/Drawing%20toolbar%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/drawing-tools-events/screenshot.jpg" loading="lazy" alt="Drawing tools events"><div class="card-body"><h5 class="card-title">Drawing tools events</h5><p class="card-text">This sample shows how the events in the Drawing Tools module work.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drawing-tools-events" data-bs-title="Drawing tools events" data-bs-path="/drawing-tools-module/drawing-tools-events" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Drawing%20tools%20events/Drawing%20tools%20events.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/drawing-tools-events" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Drawing%20tools%20events/Drawing%20tools%20events.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/get-drawn-shapes-from-drawing-manager/screenshot.jpg" loading="lazy" alt="Get drawn shapes from drawing manager"><div class="card-body"><h5 class="card-title">Get drawn shapes from drawing manager</h5><p class="card-text">This sample shows how to get the shapes that have been drawn on the map using the drawing managers drawingManager.getSource() function.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="get-drawn-shapes-from-drawing-manager" data-bs-title="Get drawn shapes from drawing manager" data-bs-path="/drawing-tools-module/get-drawn-shapes-from-drawing-manager" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Get%20drawn%20shapes%20from%20drawing%20manager/Get%20drawn%20shapes%20from%20drawing%20manager.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/get-drawn-shapes-from-drawing-manager" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Get%20drawn%20shapes%20from%20drawing%20manager/Get%20drawn%20shapes%20from%20drawing%20manager.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/load-data-into-drawing-manager/screenshot.jpg" loading="lazy" alt="Load data into drawing manager"><div class="card-body"><h5 class="card-title">Load data into drawing manager</h5><p class="card-text">This sample shows how to programmatically add shapes to the drawing manager and put them into edit mode. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="load-data-into-drawing-manager" data-bs-title="Load data into drawing manager" data-bs-path="/drawing-tools-module/load-data-into-drawing-manager" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Load%20data%20into%20drawing%20manager/Load%20data%20into%20drawing%20manager.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/load-data-into-drawing-manager" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Load%20data%20into%20drawing%20manager/Load%20data%20into%20drawing%20manager.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/select-data-in-drawn-polygon-area/screenshot.jpg" loading="lazy" alt="Select data in drawn polygon area"><div class="card-body"><h5 class="card-title">Select data in drawn polygon area</h5><p class="card-text">This sample shows how to use the drawing tools to draw polygon areas on the map and select points that are within them. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="select-data-in-drawn-polygon-area" data-bs-title="Select data in drawn polygon area" data-bs-path="/drawing-tools-module/select-data-in-drawn-polygon-area" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Select%20data%20in%20drawn%20polygon%20area/Select%20data%20in%20drawn%20polygon%20area.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/select-data-in-drawn-polygon-area" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Select%20data%20in%20drawn%20polygon%20area/Select%20data%20in%20drawn%20polygon%20area.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/snap-drawn-line-to-roads/screenshot.jpg" loading="lazy" alt="Snap drawn line to roads"><div class="card-body"><h5 class="card-title">Snap drawn line to roads</h5><p class="card-text"> This sample shows how to snap a line drawn using the drawing tools to the road network. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="snap-drawn-line-to-roads" data-bs-title="Snap drawn line to roads" data-bs-path="/drawing-tools-module/snap-drawn-line-to-roads" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Snap%20drawn%20line%20to%20roads/Snap%20drawn%20line%20to%20roads.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/snap-drawn-line-to-roads" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Snap%20drawn%20line%20to%20roads/Snap%20drawn%20line%20to%20roads.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/snap-grid-options/screenshot.jpg" loading="lazy" alt="Snap grid options"><div class="card-body"><h5 class="card-title">Snap grid options</h5><p class="card-text">This sample shows how the different options of the snap grid manager modify how the snapping experience works.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="snap-grid-options" data-bs-title="Snap grid options" data-bs-path="/drawing-tools-module/snap-grid-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Snap%20grid%20options/Snap%20grid%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/snap-grid-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Snap%20grid%20options/Snap%20grid%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/drawing-tools-module/use-a-snapping-grid/screenshot.jpg" loading="lazy" alt="Use a snapping grid"><div class="card-body"><h5 class="card-title">Use a snapping grid</h5><p class="card-text">This sample shows how to use the snap grid manager when dragging HTML markers and/or while drawing shapes.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="use-a-snapping-grid" data-bs-title="Use a snapping grid" data-bs-path="/drawing-tools-module/use-a-snapping-grid" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Use%20a%20snapping%20grid/Use%20a%20snapping%20grid.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/drawing-tools-module/use-a-snapping-grid" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Use%20a%20snapping%20grid/Use%20a%20snapping%20grid.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="geospatial-files"></a><h3 class="fw-light">Geospatial Files <small class="text-muted">(8)</small></h3><p>Examples of how to import and export common geospatial file formats with Azure Maps.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/geospatial-files/add-topojson-data-to-the-map/screenshot.jpg" loading="lazy" alt="Add TopoJSON data to the map"><div class="card-body"><h5 class="card-title">Add TopoJSON data to the map</h5><p class="card-text">This sample shows how to add TopoJSON data to the map, by converting it into GeoJSON in a Web Worker so that map can easily render it.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="add-topojson-data-to-the-map" data-bs-title="Add TopoJSON data to the map" data-bs-path="/geospatial-files/add-topojson-data-to-the-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Add%20TopoJSON%20data%20to%20the%20map/Add%20TopoJSON%20data%20to%20the%20map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/geospatial-files/add-topojson-data-to-the-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Add%20TopoJSON%20data%20to%20the%20map/Add%20TopoJSON%20data%20to%20the%20map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/geospatial-files/drag-and-drop-geojson-file-onto-map/screenshot.gif" loading="lazy" alt="Drag and Drop GeoJSON File onto Map"><div class="card-body"><h5 class="card-title">Drag and Drop GeoJSON File onto Map</h5><p class="card-text">This sample shows how load add support for dragging and dropping GeoJSON files on to the map and having them render.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drag-and-drop-geojson-file-onto-map" data-bs-title="Drag and Drop GeoJSON File onto Map" data-bs-path="/geospatial-files/drag-and-drop-geojson-file-onto-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Drag%20and%20Drop%20GeoJSON%20File%20onto%20Map/Drag%20and%20Drop%20GeoJSON%20File%20onto%20Map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/geospatial-files/drag-and-drop-geojson-file-onto-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Drag%20and%20Drop%20GeoJSON%20File%20onto%20Map/Drag%20and%20Drop%20GeoJSON%20File%20onto%20Map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/geospatial-files/drag-and-drop-shapefiles-onto-the-map/screenshot.gif" loading="lazy" alt="Drag and Drop Shapefiles onto the Map"><div class="card-body"><h5 class="card-title">Drag and Drop Shapefiles onto the Map</h5><p class="card-text">This sample shows how to load zipped shapefile (.shp, .dbf, .prj) files onto the map by dragging and dropping from a local file.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drag-and-drop-shapefiles-onto-the-map" data-bs-title="Drag and Drop Shapefiles onto the Map" data-bs-path="/geospatial-files/drag-and-drop-shapefiles-onto-the-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Drag%20and%20Drop%20Shapefiles%20onto%20the%20Map/Drag%20and%20Drop%20Shapefiles%20onto%20the%20Map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/geospatial-files/drag-and-drop-shapefiles-onto-the-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Drag%20and%20Drop%20Shapefiles%20onto%20the%20Map/Drag%20and%20Drop%20Shapefiles%20onto%20the%20Map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/geospatial-files/extract-and-display-photo-location/screenshot.jpg" loading="lazy" alt="Extract and display photo location"><div class="card-body"><h5 class="card-title">Extract and display photo location</h5><p class="card-text"> This sample shows how to extract location information from images from a URL or by dragging and dropping them onto the map, and display them on the map. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="extract-and-display-photo-location" data-bs-title="Extract and display photo location" data-bs-path="/geospatial-files/extract-and-display-photo-location" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Extract%20and%20display%20photo%20location/Extract%20and%20display%20photo%20location.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/geospatial-files/extract-and-display-photo-location" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Extract%20and%20display%20photo%20location/Extract%20and%20display%20photo%20location.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/geospatial-files/geojson-file-optimizer/screenshot.jpg" loading="lazy" alt="GeoJSON file optimizer"><div class="card-body"><h5 class="card-title">GeoJSON file optimizer</h5><p class="card-text">A simple tool for optimizing geojson files.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="geojson-file-optimizer" data-bs-title="GeoJSON file optimizer" data-bs-path="/geospatial-files/geojson-file-optimizer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/GeoJSON%20file%20optimizer/GeoJSON%20file%20optimizer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/geospatial-files/geojson-file-optimizer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/GeoJSON%20file%20optimizer/GeoJSON%20file%20optimizer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/geospatial-files/load-large-shapefiles-using-a-web-worker/screenshot.jpg" loading="lazy" alt="Load large Shapefiles using a Web Worker"><div class="card-body"><h5 class="card-title">Load large Shapefiles using a Web Worker</h5><p class="card-text">This sample shows how to load large shapefiles (.shp, .dbf, .prj) onto the map using a web worker so that it doesn't freeze the UI.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="load-large-shapefiles-using-a-web-worker" data-bs-title="Load large Shapefiles using a Web Worker" data-bs-path="/geospatial-files/load-large-shapefiles-using-a-web-worker" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Load%20large%20Shapefiles%20using%20a%20Web%20Worker/Load%20large%20Shapefiles%20using%20a%20Web%20Worker.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/geospatial-files/load-large-shapefiles-using-a-web-worker" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Load%20large%20Shapefiles%20using%20a%20Web%20Worker/Load%20large%20Shapefiles%20using%20a%20Web%20Worker.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/geospatial-files/load-shapefiles-onto-the-map/screenshot.jpg" loading="lazy" alt="Load Shapefiles onto the Map"><div class="card-body"><h5 class="card-title">Load Shapefiles onto the Map</h5><p class="card-text">This sample shows how to easily load shapefiles (.shp, .dbf, .prj) onto the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="load-shapefiles-onto-the-map" data-bs-title="Load Shapefiles onto the Map" data-bs-path="/geospatial-files/load-shapefiles-onto-the-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Load%20Shapefiles%20onto%20the%20Map/Load%20Shapefiles%20onto%20the%20Map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/geospatial-files/load-shapefiles-onto-the-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Load%20Shapefiles%20onto%20the%20Map/Load%20Shapefiles%20onto%20the%20Map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/geospatial-files/visualize-excel-data/screenshot.jpg" loading="lazy" alt="Visualize Excel data"><div class="card-body"><h5 class="card-title">Visualize Excel data</h5><p class="card-text">This sample shows how to easily load and visualize a local Excel file on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="visualize-excel-data" data-bs-title="Visualize Excel data" data-bs-path="/geospatial-files/visualize-excel-data" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Visualize%20Excel%20data/Visualize%20Excel%20data.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/geospatial-files/visualize-excel-data" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Geospatial%20Files/Visualize%20Excel%20data/Visualize%20Excel%20data.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="heat-map-layer"></a><h3 class="fw-light">Heat Map Layer <small class="text-muted">(5)</small></h3><p>Heat maps are a type of data visualization used to represent the density of data using a range of colors. They're often used to show the data "hot spots" on a map and are a great way to render large point data sets.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/heat-map-layer/cluster-weighted-heat-map/screenshot.jpg" loading="lazy" alt="Cluster weighted Heat Map"><div class="card-body"><h5 class="card-title">Cluster weighted Heat Map</h5><p class="card-text">This sample shows how to create a heat map that uses clustering on the data source to improve performance for large data sets. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="cluster-weighted-heat-map" data-bs-title="Cluster weighted Heat Map" data-bs-path="/heat-map-layer/cluster-weighted-heat-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Cluster%20weighted%20Heat%20Map/Cluster%20weighted%20Heat%20Map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/heat-map-layer/cluster-weighted-heat-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Cluster%20weighted%20Heat%20Map/Cluster%20weighted%20Heat%20Map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/heat-map-layer/consistent-zoomable-heat-map/screenshot.gif" loading="lazy" alt="Consistent zoomable Heat Map"><div class="card-body"><h5 class="card-title">Consistent zoomable Heat Map</h5><p class="card-text">This sample shows how to create a heat map where the radius of each data point covers the same physical area on the ground and creates a more consistent user experience when zooming the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="consistent-zoomable-heat-map" data-bs-title="Consistent zoomable Heat Map" data-bs-path="/heat-map-layer/consistent-zoomable-heat-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Consistent%20zoomable%20Heat%20Map/Consistent%20zoomable%20Heat%20Map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/heat-map-layer/consistent-zoomable-heat-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Consistent%20zoomable%20Heat%20Map/Consistent%20zoomable%20Heat%20Map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/heat-map-layer/heat-map-layer-options/screenshot.jpg" loading="lazy" alt="Heat Map Layer Options"><div class="card-body"><h5 class="card-title">Heat Map Layer Options</h5><p class="card-text">This sample shows how the different options of the heat map affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="heat-map-layer-options" data-bs-title="Heat Map Layer Options" data-bs-path="/heat-map-layer/heat-map-layer-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Heat%20Map%20Layer%20Options/Heat%20Map%20Layer%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/heat-map-layer/heat-map-layer-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Heat%20Map%20Layer%20Options/Heat%20Map%20Layer%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/heat-map-layer/simple-heat-map-layer/screenshot.jpg" loading="lazy" alt="Simple Heat Map Layer"><div class="card-body"><h5 class="card-title">Simple Heat Map Layer</h5><p class="card-text">This sample shows how to create a simple heat map from a data set of point features.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-heat-map-layer" data-bs-title="Simple Heat Map Layer" data-bs-path="/heat-map-layer/simple-heat-map-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Simple%20Heat%20Map%20Layer/Simple%20Heat%20Map%20Layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/heat-map-layer/simple-heat-map-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Simple%20Heat%20Map%20Layer/Simple%20Heat%20Map%20Layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/heat-map-layer/weighted-heat-map-layer/screenshot.jpg" loading="lazy" alt="Weighted Heat Map Layer"><div class="card-body"><h5 class="card-title">Weighted Heat Map Layer</h5><p class="card-text">This sample shows how to create a heat map which defines the intensity of each data point based on a property.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="weighted-heat-map-layer" data-bs-title="Weighted Heat Map Layer" data-bs-path="/heat-map-layer/weighted-heat-map-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Weighted%20Heat%20Map%20Layer/Weighted%20Heat%20Map%20Layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/heat-map-layer/weighted-heat-map-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Weighted%20Heat%20Map%20Layer/Weighted%20Heat%20Map%20Layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="html-markers"></a><h3 class="fw-light">HTML Markers <small class="text-muted">(13)</small></h3><p>Use traditional HTML and CSS to represent point based data on the map as markers.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/all-built-in-icon-templates-as-html-markers/screenshot.jpg" loading="lazy" alt="All built-in icon templates as HTML markers"><div class="card-body"><h5 class="card-title">All built-in icon templates as HTML markers</h5><p class="card-text">This sample shows all the built-in icon templates rendered as HTML markers.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="all-built-in-icon-templates-as-html-markers" data-bs-title="All built-in icon templates as HTML markers" data-bs-path="/html-markers/all-built-in-icon-templates-as-html-markers" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/All%20built-in%20icon%20templates%20as%20HTML%20markers/All%20built-in%20icon%20templates%20as%20HTML%20markers.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/all-built-in-icon-templates-as-html-markers" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/All%20built-in%20icon%20templates%20as%20HTML%20markers/All%20built-in%20icon%20templates%20as%20HTML%20markers.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/clustered-pie-chart-html-markers/screenshot.jpg" loading="lazy" alt="Clustered Pie Chart HTML Markers"><div class="card-body"><h5 class="card-title">Clustered Pie Chart HTML Markers</h5><p class="card-text">This sample combines the HtmlMarkerLayer class with the PieChartMarker class to create pie charts for clustered markers on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="clustered-pie-chart-html-markers" data-bs-title="Clustered Pie Chart HTML Markers" data-bs-path="/html-markers/clustered-pie-chart-html-markers" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/Clustered%20Pie%20Chart%20HTML%20Markers/Clustered%20Pie%20Chart%20HTML%20Markers.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/clustered-pie-chart-html-markers" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/Clustered%20Pie%20Chart%20HTML%20Markers/Clustered%20Pie%20Chart%20HTML%20Markers.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/css-styled-html-marker/screenshot.gif" loading="lazy" alt="CSS Styled HTML Marker"><div class="card-body"><h5 class="card-title">CSS Styled HTML Marker</h5><p class="card-text">This sample shows how to use CSS and HTML to create a marker on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="css-styled-html-marker" data-bs-title="CSS Styled HTML Marker" data-bs-path="/html-markers/css-styled-html-marker" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/CSS%20Styled%20HTML%20Marker/CSS%20Styled%20HTML%20Marker.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/css-styled-html-marker" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/CSS%20Styled%20HTML%20Marker/CSS%20Styled%20HTML%20Marker.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/draggable-html-marker/screenshot.gif" loading="lazy" alt="Draggable HTML Marker"><div class="card-body"><h5 class="card-title">Draggable HTML Marker</h5><p class="card-text">This sample shows how to make an HTML marker draggable.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="draggable-html-marker" data-bs-title="Draggable HTML Marker" data-bs-path="/html-markers/draggable-html-marker" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/Draggable%20HTML%20Marker/Draggable%20HTML%20Marker.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/draggable-html-marker" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/Draggable%20HTML%20Marker/Draggable%20HTML%20Marker.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/html-marker-events/screenshot.gif" loading="lazy" alt="HTML Marker events"><div class="card-body"><h5 class="card-title">HTML Marker events</h5><p class="card-text">This sample shows how to add events to an HTML marker.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="html-marker-events" data-bs-title="HTML Marker events" data-bs-path="/html-markers/html-marker-events" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20Marker%20events/HTML%20Marker%20events.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/html-marker-events" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20Marker%20events/HTML%20Marker%20events.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/html-marker-layer/screenshot.jpg" loading="lazy" alt="HTML Marker Layer"><div class="card-body"><h5 class="card-title">HTML Marker Layer</h5><p class="card-text">This sample provides a layer which renders point data from a data source as HTML markers on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="html-marker-layer" data-bs-title="HTML Marker Layer" data-bs-path="/html-markers/html-marker-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20Marker%20Layer/HTML%20Marker%20Layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/html-marker-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20Marker%20Layer/HTML%20Marker%20Layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/html-marker-layer-and-vector-tiles/screenshot.jpg" loading="lazy" alt="HTML Marker layer and vector tiles"><div class="card-body"><h5 class="card-title">HTML Marker layer and vector tiles</h5><p class="card-text">This sample shows how to how to use a vector tile service to render point data on the map using HTML markers.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="html-marker-layer-and-vector-tiles" data-bs-title="HTML Marker layer and vector tiles" data-bs-path="/html-markers/html-marker-layer-and-vector-tiles" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20Marker%20layer%20and%20vector%20tiles/HTML%20Marker%20layer%20and%20vector%20tiles.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/html-marker-layer-and-vector-tiles" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20Marker%20layer%20and%20vector%20tiles/HTML%20Marker%20layer%20and%20vector%20tiles.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/html-marker-layer-events/screenshot.gif" loading="lazy" alt="HTML marker layer events"><div class="card-body"><h5 class="card-title">HTML marker layer events</h5><p class="card-text">This sample highlights the name of the events that are firing as you interact with the HTML marker layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="html-marker-layer-events" data-bs-title="HTML marker layer events" data-bs-path="/html-markers/html-marker-layer-events" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20marker%20layer%20events/HTML%20marker%20layer%20events.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/html-marker-layer-events" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20marker%20layer%20events/HTML%20marker%20layer%20events.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/html-marker-with-built-in-icon-template/screenshot.jpg" loading="lazy" alt="HTML Marker with built-in icon template"><div class="card-body"><h5 class="card-title">HTML Marker with built-in icon template</h5><p class="card-text">This sample shows how use image templates with an HTML marker.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="html-marker-with-built-in-icon-template" data-bs-title="HTML Marker with built-in icon template" data-bs-path="/html-markers/html-marker-with-built-in-icon-template" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20Marker%20with%20built-in%20icon%20template/HTML%20Marker%20with%20built-in%20icon%20template.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/html-marker-with-built-in-icon-template" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20Marker%20with%20built-in%20icon%20template/HTML%20Marker%20with%20built-in%20icon%20template.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/html-marker-with-custom-svg-template/screenshot.gif" loading="lazy" alt="HTML Marker with Custom SVG Template"><div class="card-body"><h5 class="card-title">HTML Marker with Custom SVG Template</h5><p class="card-text">This sample shows how to create a custom SVG template and use it with the HtmlMarker class. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="html-marker-with-custom-svg-template" data-bs-title="HTML Marker with Custom SVG Template" data-bs-path="/html-markers/html-marker-with-custom-svg-template" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20Marker%20with%20Custom%20SVG%20Template/HTML%20Marker%20with%20Custom%20SVG%20Template.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/html-marker-with-custom-svg-template" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20Marker%20with%20Custom%20SVG%20Template/HTML%20Marker%20with%20Custom%20SVG%20Template.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/pie-chart-html-marker-options/screenshot.jpg" loading="lazy" alt="Pie chart HTML marker options"><div class="card-body"><h5 class="card-title">Pie chart HTML marker options</h5><p class="card-text">This sample shows how different options of the pie chart marker class change its rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="pie-chart-html-marker-options" data-bs-title="Pie chart HTML marker options" data-bs-path="/html-markers/pie-chart-html-marker-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/Pie%20chart%20HTML%20marker%20options/Pie%20chart%20HTML%20marker%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/pie-chart-html-marker-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/Pie%20chart%20HTML%20marker%20options/Pie%20chart%20HTML%20marker%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/pie-chart-html-markers/screenshot.jpg" loading="lazy" alt="Pie Chart HTML Markers"><div class="card-body"><h5 class="card-title">Pie Chart HTML Markers</h5><p class="card-text">This sample shows how to create a pie chart using an HTML marker.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="pie-chart-html-markers" data-bs-title="Pie Chart HTML Markers" data-bs-path="/html-markers/pie-chart-html-markers" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/Pie%20Chart%20HTML%20Markers/Pie%20Chart%20HTML%20Markers.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/pie-chart-html-markers" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/Pie%20Chart%20HTML%20Markers/Pie%20Chart%20HTML%20Markers.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/html-markers/simple-html-marker/screenshot.jpg" loading="lazy" alt="Simple HTML Marker"><div class="card-body"><h5 class="card-title">Simple HTML Marker</h5><p class="card-text">This sample shows how create a simple HtmlMarker and add it to the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-html-marker" data-bs-title="Simple HTML Marker" data-bs-path="/html-markers/simple-html-marker" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/Simple%20HTML%20Marker/Simple%20HTML%20Marker.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/html-markers/simple-html-marker" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/Simple%20HTML%20Marker/Simple%20HTML%20Marker.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="image-layer"></a><h3 class="fw-light">Image Layer <small class="text-muted">(4)</small></h3><p>See how to overlay images on the map as a layer.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/image-layer/cross-reference-pixels-in-image-layer/screenshot.jpg" loading="lazy" alt="Cross reference pixels in image layer"><div class="card-body"><h5 class="card-title">Cross reference pixels in image layer</h5><p class="card-text">This sample shows how to cross reference pixel positions on a source image with the position of an image overlay on a map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="cross-reference-pixels-in-image-layer" data-bs-title="Cross reference pixels in image layer" data-bs-path="/image-layer/cross-reference-pixels-in-image-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/Cross%20reference%20pixels%20in%20image%20layer/Cross%20reference%20pixels%20in%20image%20layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/image-layer/cross-reference-pixels-in-image-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/Cross%20reference%20pixels%20in%20image%20layer/Cross%20reference%20pixels%20in%20image%20layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/image-layer/image-layer-options/screenshot.jpg" loading="lazy" alt="Image Layer Options"><div class="card-body"><h5 class="card-title">Image Layer Options</h5><p class="card-text">This sample shows how the different options of the image layer affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="image-layer-options" data-bs-title="Image Layer Options" data-bs-path="/image-layer/image-layer-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/Image%20Layer%20Options/Image%20Layer%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/image-layer/image-layer-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/Image%20Layer%20Options/Image%20Layer%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/image-layer/kml-ground-overlay-as-image-layer/screenshot.jpg" loading="lazy" alt="KML Ground Overlay as Image Layer"><div class="card-body"><h5 class="card-title">KML Ground Overlay as Image Layer</h5><p class="card-text">This sample shows how to overlay KML Ground Overlay information as an image layer on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="kml-ground-overlay-as-image-layer" data-bs-title="KML Ground Overlay as Image Layer" data-bs-path="/image-layer/kml-ground-overlay-as-image-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/KML%20Ground%20Overlay%20as%20Image%20Layer/KML%20Ground%20Overlay%20as%20Image%20Layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/image-layer/kml-ground-overlay-as-image-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/KML%20Ground%20Overlay%20as%20Image%20Layer/KML%20Ground%20Overlay%20as%20Image%20Layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/image-layer/simple-image-layer/screenshot.jpg" loading="lazy" alt="Simple Image Layer"><div class="card-body"><h5 class="card-title">Simple Image Layer</h5><p class="card-text">This sample shows how to overlay an image on the map as an Image layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-image-layer" data-bs-title="Simple Image Layer" data-bs-path="/image-layer/simple-image-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/Simple%20Image%20Layer/Simple%20Image%20Layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/image-layer/simple-image-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/Simple%20Image%20Layer/Simple%20Image%20Layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="line-layer"></a><h3 class="fw-light">Line Layer <small class="text-muted">(7)</small></h3><p>Learn how to visualize line and path data on the map using the line layer.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/line-layer/add-arrows-along-a-path/screenshot.jpg" loading="lazy" alt="Add Arrow along a Path"><div class="card-body"><h5 class="card-title">Add Arrow along a Path</h5><p class="card-text">This sample shows how to add arrow icons along a line on the map. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="add-arrow-along-a-path" data-bs-title="Add Arrow along a Path" data-bs-path="/line-layer/add-arrows-along-a-path" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Add%20Arrows%20along%20a%20Path/Add%20Arrows%20along%20a%20Path.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/line-layer/add-arrows-along-a-path" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Add%20Arrows%20along%20a%20Path/Add%20Arrows%20along%20a%20Path.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/line-layer/add-arrows-to-end-of-paths/screenshot.jpg" loading="lazy" alt="Add arrows to end of paths"><div class="card-body"><h5 class="card-title">Add arrows to end of paths</h5><p class="card-text">This sample shows how to add arrow icons along a line on the map. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="add-arrows-to-end-of-paths" data-bs-title="Add arrows to end of paths" data-bs-path="/line-layer/add-arrows-to-end-of-paths" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Add%20arrows%20to%20end%20of%20paths/Add%20arrows%20to%20end%20of%20paths.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/line-layer/add-arrows-to-end-of-paths" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Add%20arrows%20to%20end%20of%20paths/Add%20arrows%20to%20end%20of%20paths.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/line-layer/data-driven-stroke-gradient/screenshot.jpg" loading="lazy" alt="Data-driven stroke gradient"><div class="card-body"><h5 class="card-title">Data-driven stroke gradient</h5><p class="card-text">This sample shows how to create a path between a set of data points can apply a stroke gradient based on properties in each data point.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="data-driven-stroke-gradient" data-bs-title="Data-driven stroke gradient" data-bs-path="/line-layer/data-driven-stroke-gradient" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Data-driven%20stroke%20gradient/Data-driven%20stroke%20gradient.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/line-layer/data-driven-stroke-gradient" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Data-driven%20stroke%20gradient/Data-driven%20stroke%20gradient.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/line-layer/display-isoline-data/screenshot.jpg" loading="lazy" alt="Display isoline data"><div class="card-body"><h5 class="card-title">Display isoline data</h5><p class="card-text">This sample shows how to display isoline data on the map add apply a data driven styling to assign colors. Isolines are also known as contour lines.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="display-isoline-data" data-bs-title="Display isoline data" data-bs-path="/line-layer/display-isoline-data" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Display%20isoline%20data/Display%20isoline%20data.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/line-layer/display-isoline-data" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Display%20isoline%20data/Display%20isoline%20data.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/line-layer/line-layer-options/screenshot.jpg" loading="lazy" alt="Line Layer Options"><div class="card-body"><h5 class="card-title">Line Layer Options</h5><p class="card-text">This sample shows how the different options of the line layer affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="line-layer-options" data-bs-title="Line Layer Options" data-bs-path="/line-layer/line-layer-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Line%20Layer%20Options/Line%20Layer%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/line-layer/line-layer-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Line%20Layer%20Options/Line%20Layer%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/line-layer/line-layer-with-built-in-icon-template/screenshot.jpg" loading="lazy" alt="Line layer with built-in icon template"><div class="card-body"><h5 class="card-title">Line layer with built-in icon template</h5><p class="card-text">This sample shows how to use a built-in icon templates with a line layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="line-layer-with-built-in-icon-template" data-bs-title="Line layer with built-in icon template" data-bs-path="/line-layer/line-layer-with-built-in-icon-template" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Line%20layer%20with%20built-in%20icon%20template/Line%20layer%20with%20built-in%20icon%20template.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/line-layer/line-layer-with-built-in-icon-template" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Line%20layer%20with%20built-in%20icon%20template/Line%20layer%20with%20built-in%20icon%20template.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/line-layer/line-with-stroke-gradient/screenshot.jpg" loading="lazy" alt="Line with Stroke Gradient"><div class="card-body"><h5 class="card-title">Line with Stroke Gradient</h5><p class="card-text">This sample shows how to apply a stroke gradient to a line on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="line-with-stroke-gradient" data-bs-title="Line with Stroke Gradient" data-bs-path="/line-layer/line-with-stroke-gradient" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Line%20with%20Stroke%20Gradient/Line%20with%20Stroke%20Gradient.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/line-layer/line-with-stroke-gradient" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Line%20with%20Stroke%20Gradient/Line%20with%20Stroke%20Gradient.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="map"></a><h3 class="fw-light">Map <small class="text-muted">(27)</small></h3><p>These samples show how to use the many different features of the map.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/add-a-context-menu-to-the-map/screenshot.jpg" loading="lazy" alt="Add a Context Menu to the Map"><div class="card-body"><h5 class="card-title">Add a Context Menu to the Map</h5><p class="card-text">This sample shows how to display a context menu when the user right clicks the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="add-a-context-menu-to-the-map" data-bs-title="Add a Context Menu to the Map" data-bs-path="/map/add-a-context-menu-to-the-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Add%20a%20Context%20Menu%20to%20the%20Map/Add%20a%20Context%20Menu%20to%20the%20Map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/add-a-context-menu-to-the-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Add%20a%20Context%20Menu%20to%20the%20Map/Add%20a%20Context%20Menu%20to%20the%20Map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/add-custom-icon-template-to-atlas-namespace/screenshot.jpg" loading="lazy" alt="Add custom icon template to atlas namespace"><div class="card-body"><h5 class="card-title">Add custom icon template to atlas namespace</h5><p class="card-text">This sample shows how to add more image templates to the atlas namespace.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="add-custom-icon-template-to-atlas-namespace" data-bs-title="Add custom icon template to atlas namespace" data-bs-path="/map/add-custom-icon-template-to-atlas-namespace" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Add%20custom%20icon%20template%20to%20atlas%20namespace/Add%20custom%20icon%20template%20to%20atlas%20namespace.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/add-custom-icon-template-to-atlas-namespace" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Add%20custom%20icon%20template%20to%20atlas%20namespace/Add%20custom%20icon%20template%20to%20atlas%20namespace.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/datasource-and-shape-events/screenshot.jpg" loading="lazy" alt="DataSource and Shape events"><div class="card-body"><h5 class="card-title">DataSource and Shape events</h5><p class="card-text">This sample shows how to the DataSource and Shape events work.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="datasource-and-shape-events" data-bs-title="DataSource and Shape events" data-bs-path="/map/datasource-and-shape-events" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/DataSource%20and%20Shape%20events/DataSource%20and%20Shape%20events.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/datasource-and-shape-events" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/DataSource%20and%20Shape%20events/DataSource%20and%20Shape%20events.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/detect-if-browser-is-supported/screenshot.jpg" loading="lazy" alt="Detect if browser is supported"><div class="card-body"><h5 class="card-title">Detect if browser is supported</h5><p class="card-text">This sample shows how to detect if the browser is supported by the Azure Maps Web SDK. If it is, load the map, otherwise fallback gracefully.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="detect-if-browser-is-supported" data-bs-title="Detect if browser is supported" data-bs-path="/map/detect-if-browser-is-supported" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Detect%20if%20browser%20is%20supported/Detect%20if%20browser%20is%20supported.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/detect-if-browser-is-supported" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Detect%20if%20browser%20is%20supported/Detect%20if%20browser%20is%20supported.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/export-map-as-image/screenshot.jpg" loading="lazy" alt="Export Map as Image"><div class="card-body"><h5 class="card-title">Export Map as Image</h5><p class="card-text">This sample shows how to export the map canvas as an image which can be used in reports or emails.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="export-map-as-image" data-bs-title="Export Map as Image" data-bs-path="/map/export-map-as-image" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Export%20Map%20as%20Image/Export%20Map%20as%20Image.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/export-map-as-image" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Export%20Map%20as%20Image/Export%20Map%20as%20Image.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/icon-template-options/screenshot.jpg" loading="lazy" alt="Icon template options"><div class="card-body"><h5 class="card-title">Icon template options</h5><p class="card-text">This sample shows how the icon template options effect the rendering of built-in icon templates.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="icon-template-options" data-bs-title="Icon template options" data-bs-path="/map/icon-template-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Icon%20template%20options/Icon%20template%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/icon-template-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Icon%20template%20options/Icon%20template%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/inspect-features-under-the-mouse/screenshot.jpg" loading="lazy" alt="Inspect features under the mouse"><div class="card-body"><h5 class="card-title">Inspect features under the mouse</h5><p class="card-text">This sample shows how to access any rendered feature on the map, whether it came from a vector tile source, a GeoJSON file, or is part of the base map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="inspect-features-under-the-mouse" data-bs-title="Inspect features under the mouse" data-bs-path="/map/inspect-features-under-the-mouse" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Inspect%20features%20under%20the%20mouse/Inspect%20features%20under%20the%20mouse.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/inspect-features-under-the-mouse" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Inspect%20features%20under%20the%20mouse/Inspect%20features%20under%20the%20mouse.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/lazy-load-the-map/screenshot.jpg" loading="lazy" alt="Lazy Load the Map"><div class="card-body"><h5 class="card-title">Lazy Load the Map</h5><p class="card-text">This sample shows how to delay the loading of the map SDK until it is needed.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="lazy-load-the-map" data-bs-title="Lazy Load the Map" data-bs-path="/map/lazy-load-the-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Lazy%20Load%20the%20Map/Lazy%20Load%20the%20Map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/lazy-load-the-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Lazy%20Load%20the%20Map/Lazy%20Load%20the%20Map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/limit-map-to-two-finger-panning/screenshot.jpg" loading="lazy" alt="Limit Map to Two Finger Panning"><div class="card-body"><h5 class="card-title">Limit Map to Two Finger Panning</h5><p class="card-text">This sample shows how to limit the map drag functionality such that the user is only able to drag the map when using two fingers. This is useful when using the map API inside of mobile apps where the user is likely to scroll the page using a single finger.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="limit-map-to-two-finger-panning" data-bs-title="Limit Map to Two Finger Panning" data-bs-path="/map/limit-map-to-two-finger-panning" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Limit%20Map%20to%20Two%20Finger%20Panning/Limit%20Map%20to%20Two%20Finger%20Panning.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/limit-map-to-two-finger-panning" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Limit%20Map%20to%20Two%20Finger%20Panning/Limit%20Map%20to%20Two%20Finger%20Panning.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/limit-map-view-with-maxbounds/screenshot.jpg" loading="lazy" alt="Limit map view with maxBounds"><div class="card-body"><h5 class="card-title">Limit map view with maxBounds</h5><p class="card-text">This sample shows how to the limit the map view by using the maxBounds options of the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="limit-map-view-with-maxbounds" data-bs-title="Limit map view with maxBounds" data-bs-path="/map/limit-map-view-with-maxbounds" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Limit%20map%20view%20with%20maxBounds/Limit%20map%20view%20with%20maxBounds.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/limit-map-view-with-maxbounds" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Limit%20map%20view%20with%20maxBounds/Limit%20map%20view%20with%20maxBounds.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/limit-scroll-wheel-zoom/screenshot.jpg" loading="lazy" alt="Limit Scroll Wheel Zoom"><div class="card-body"><h5 class="card-title">Limit Scroll Wheel Zoom</h5><p class="card-text">This sample shows how to limit the scroll zooming functionality of the map such that the map will only be zoomed when the CTRL key is pressed. When the CTRL key is not pressed, the scroll wheel will scroll the page when over the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="limit-scroll-wheel-zoom" data-bs-title="Limit Scroll Wheel Zoom" data-bs-path="/map/limit-scroll-wheel-zoom" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Limit%20Scroll%20Wheel%20Zoom/Limit%20Scroll%20Wheel%20Zoom.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/limit-scroll-wheel-zoom" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Limit%20Scroll%20Wheel%20Zoom/Limit%20Scroll%20Wheel%20Zoom.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/load-map-with-options/screenshot.jpg" loading="lazy" alt="Load Map with Options"><div class="card-body"><h5 class="card-title">Load Map with Options</h5><p class="card-text">This sample shows how to load the map and specify options at the same time.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="load-map-with-options" data-bs-title="Load Map with Options" data-bs-path="/map/load-map-with-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Load%20Map%20with%20Options/Load%20Map%20with%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/load-map-with-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Load%20Map%20with%20Options/Load%20Map%20with%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/map-events/screenshot.jpg" loading="lazy" alt="Map Events"><div class="card-body"><h5 class="card-title">Map Events</h5><p class="card-text">This sample will highlight the name of the events that are firing as you interact with the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="map-events" data-bs-title="Map Events" data-bs-path="/map/map-events" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Map%20Events/Map%20Events.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/map-events" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Map%20Events/Map%20Events.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/map-localization/screenshot.jpg" loading="lazy" alt="Map Localization"><div class="card-body"><h5 class="card-title">Map Localization</h5><p class="card-text">This sample lets you switch the map between all its supported languages.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="map-localization" data-bs-title="Map Localization" data-bs-path="/map/map-localization" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Map%20Localization/Map%20Localization.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/map-localization" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Map%20Localization/Map%20Localization.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/map-style-options/screenshot.jpg" loading="lazy" alt="Map style options"><div class="card-body"><h5 class="card-title">Map style options</h5><p class="card-text">This sample shows how the different style options of the map affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="map-style-options" data-bs-title="Map style options" data-bs-path="/map/map-style-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Map%20style%20options/Map%20style%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/map-style-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Map%20style%20options/Map%20style%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/map-user-interaction-options/screenshot.jpg" loading="lazy" alt="Map user interaction options"><div class="card-body"><h5 class="card-title">Map user interaction options</h5><p class="card-text">This sample shows how the different user interaction options of the map to modify how the map reacts when the user interacts with it.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="map-user-interaction-options" data-bs-title="Map user interaction options" data-bs-path="/map/map-user-interaction-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Map%20user%20interaction%20options/Map%20user%20interaction%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/map-user-interaction-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Map%20user%20interaction%20options/Map%20user%20interaction%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/mini-overview-map/screenshot.jpg" loading="lazy" alt="Mini overview map"><div class="card-body"><h5 class="card-title">Mini overview map</h5><p class="card-text">This sample shows how to create a simple custom control that centers and zooms the map to fit any data that is loaded on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="mini-overview-map" data-bs-title="Mini overview map" data-bs-path="/map/mini-overview-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Mini%20Overview%20Map/Mini%20Overview%20Map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/mini-overview-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Mini%20Overview%20Map/Mini%20Overview%20Map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/mini-overview-map-options/screenshot.jpg" loading="lazy" alt="Mini overview map options"><div class="card-body"><h5 class="card-title">Mini overview map options</h5><p class="card-text">This sample shows how to create a simple custom control that centers and zooms the map to fit any data that is loaded on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="mini-overview-map-options" data-bs-title="Mini overview map options" data-bs-path="/map/mini-overview-map-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Mini%20overview%20map%20options/Mini%20overview%20map%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/mini-overview-map-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Mini%20overview%20map%20options/Mini%20overview%20map%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/mouse-events-with-keys-pressed/screenshot.jpg" loading="lazy" alt="Mouse events with keys pressed"><div class="card-body"><h5 class="card-title">Mouse events with keys pressed</h5><p class="card-text">This sample shows how to monitor keys that are pressed when mouse events on the map. This same approach can be used with layers as well.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="mouse-events-with-keys-pressed" data-bs-title="Mouse events with keys pressed" data-bs-path="/map/mouse-events-with-keys-pressed" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Mouse%20events%20with%20keys%20pressed/Mouse%20events%20with%20keys%20pressed.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/mouse-events-with-keys-pressed" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Mouse%20events%20with%20keys%20pressed/Mouse%20events%20with%20keys%20pressed.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/multiple-maps/screenshot.jpg" loading="lazy" alt="Multiple Maps"><div class="card-body"><h5 class="card-title">Multiple Maps</h5><p class="card-text">This sample shows how to render multiple maps on the same page.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="multiple-maps" data-bs-title="Multiple Maps" data-bs-path="/map/multiple-maps" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Multiple%20Maps/Multiple%20Maps.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/multiple-maps" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Multiple%20Maps/Multiple%20Maps.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/multiple-maps-in-different-lanaguages/screenshot.jpg" loading="lazy" alt="Multiple Maps in Different Languages"><div class="card-body"><h5 class="card-title">Multiple Maps in Different Languages</h5><p class="card-text">This sample shows two maps rendered on the same page, displaying maps in different languages. Press one of the buttons to change the language of the second map instantly.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="multiple-maps-in-different-languages" data-bs-title="Multiple Maps in Different Languages" data-bs-path="/map/multiple-maps-in-different-lanaguages" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Multiple%20Maps%20in%20Different%20Lanaguages/Multiple%20Maps%20in%20Different%20Lanaguages.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/multiple-maps-in-different-lanaguages" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Multiple%20Maps%20in%20Different%20Lanaguages/Multiple%20Maps%20in%20Different%20Lanaguages.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/render-world-copies/screenshot.jpg" loading="lazy" alt="Render world copies"><div class="card-body"><h5 class="card-title">Render world copies</h5><p class="card-text">This sample shows how to the renderWolrdCopies map style option changes the layout of the map when zoomed out.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="render-world-copies" data-bs-title="Render world copies" data-bs-path="/map/render-world-copies" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Render%20world%20copies/Render%20world%20copies.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/render-world-copies" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Render%20world%20copies/Render%20world%20copies.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/swipe-between-two-maps/screenshot.jpg" loading="lazy" alt="Swipe between two maps"><div class="card-body"><h5 class="card-title">Swipe between two maps</h5><p class="card-text">This sample shows how to swipe between two overlapping synchronized maps to view different data sets.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="swipe-between-two-maps" data-bs-title="Swipe between two maps" data-bs-path="/map/swipe-between-two-maps" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Swipe%20between%20two%20maps/Swipe%20between%20two%20maps.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/swipe-between-two-maps" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Swipe%20between%20two%20maps/Swipe%20between%20two%20maps.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/swipe-map-module-options/screenshot.jpg" loading="lazy" alt="Swipe map module options"><div class="card-body"><h5 class="card-title">Swipe map module options</h5><p class="card-text">This sample shows how to swipe between two overlapping synchronized maps to view different data sets.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="swipe-map-module-options" data-bs-title="Swipe map module options" data-bs-path="/map/swipe-map-module-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Swipe%20map%20module%20options/Swipe%20map%20module%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/swipe-map-module-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Swipe%20map%20module%20options/Swipe%20map%20module%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/swipe-map-with-fullscreen-support/screenshot.jpg" loading="lazy" alt="Swipe map with fullscreen support"><div class="card-body"><h5 class="card-title">Swipe map with fullscreen support</h5><p class="card-text">This sample shows how to use the swipe map experience with the fullscreen control.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="swipe-map-with-fullscreen-support" data-bs-title="Swipe map with fullscreen support" data-bs-path="/map/swipe-map-with-fullscreen-support" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Swipe%20map%20with%20fullscreen%20support/Swipe%20map%20with%20fullscreen%20support.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/swipe-map-with-fullscreen-support" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Swipe%20map%20with%20fullscreen%20support/Swipe%20map%20with%20fullscreen%20support.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/synchronize-map-views/screenshot.gif" loading="lazy" alt="Synchronize map views"><div class="card-body"><h5 class="card-title">Synchronize map views</h5><p class="card-text">This sample shows how to synchronize the views of two or more maps.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="synchronize-map-views" data-bs-title="Synchronize map views" data-bs-path="/map/synchronize-map-views" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Synchronize%20map%20views/Synchronize%20map%20views.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/synchronize-map-views" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Synchronize%20map%20views/Synchronize%20map%20views.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/map/update-layer-based-on-map-style/screenshot.gif" loading="lazy" alt="Update layer based on map style"><div class="card-body"><h5 class="card-title">Update layer based on map style</h5><p class="card-text">This sample shows how to monitor the maps style and update the style of a layer accordingly.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="update-layer-based-on-map-style" data-bs-title="Update layer based on map style" data-bs-path="/map/update-layer-based-on-map-style" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Update%20layer%20based%20on%20map%20style/Update%20layer%20based%20on%20map%20style.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/map/update-layer-based-on-map-style" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Update%20layer%20based%20on%20map%20style/Update%20layer%20based%20on%20map%20style.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="pmtiles-layer"></a><h3 class="fw-light">PMTiles Layer <small class="text-muted">(3)</small></h3><p>PMTiles is an open specification for single-file tile pyramids built on compressed Hilbert ordering and queryable via HTTP Range Requests.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/pmtiles/overture-building-theme/screenshot.jpg" loading="lazy" alt="PMTiles Buildings"><div class="card-body"><h5 class="card-title">PMTiles Buildings</h5><p class="card-text">This sample shows how to leverage PMTiles as custom protocol to create data layers using Overture building dataset.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="pmtiles-buildings" data-bs-title="PMTiles Buildings" data-bs-path="/pmtiles/overture-building-theme" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/PMTiles/Overture%20Building%20Theme/Buildings.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/pmtiles/overture-building-theme" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/PMTiles/Overture%20Building%20Theme/Buildings.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/pmtiles/overture-place-theme/screenshot.jpg" loading="lazy" alt="PMTiles Places"><div class="card-body"><h5 class="card-title">PMTiles Places</h5><p class="card-text">This sample shows how to leverage PMTiles as custom protocol to create data layers using Overture Places dataset.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="pmtiles-places" data-bs-title="PMTiles Places" data-bs-path="/pmtiles/overture-place-theme" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/PMTiles/Overture%20Place%20Theme/Places.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/pmtiles/overture-place-theme" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/PMTiles/Overture%20Place%20Theme/Places.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/pmtiles/overture-transportation-theme/screenshot.jpg" loading="lazy" alt="PMTiles Transportation"><div class="card-body"><h5 class="card-title">PMTiles Transportation</h5><p class="card-text">This sample shows how to leverage PMTiles as custom protocol to create data layers using Overture Transportation dataset.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="pmtiles-transportation" data-bs-title="PMTiles Transportation" data-bs-path="/pmtiles/overture-transportation-theme" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/PMTiles/Overture%20Transportation%20Theme/Transportation.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/pmtiles/overture-transportation-theme" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/PMTiles/Overture%20Transportation%20Theme/Transportation.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="polygon-and-polygon-extrusion-layers"></a><h3 class="fw-light">Polygon and Polygon Extrusion Layers <small class="text-muted">(17)</small></h3><p>Learn how to overlay geospatially accurate circles, polygons, and multi-polygons on the map using the polygon and polygon extrusion layers.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/extruded-choropleth-map/screenshot.jpg" loading="lazy" alt="Extruded choropleth map"><div class="card-body"><h5 class="card-title">Extruded choropleth map</h5><p class="card-text">This sample shows how to create a choropleth map of extruded polygons using data driven styling.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="extruded-choropleth-map" data-bs-title="Extruded choropleth map" data-bs-path="/polygons/extruded-choropleth-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Extruded%20choropleth%20map/Extruded%20choropleth%20map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/extruded-choropleth-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Extruded%20choropleth%20map/Extruded%20choropleth%20map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/extruded-gridded-data-source/screenshot.jpg" loading="lazy" alt="Extruded gridded data source"><div class="card-body"><h5 class="card-title">Extruded gridded data source</h5><p class="card-text">This sample shows how to create a 3D polygon extrusions from a gridded data source.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="extruded-gridded-data-source" data-bs-title="Extruded gridded data source" data-bs-path="/polygons/extruded-gridded-data-source" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Extruded%20gridded%20data%20source/Extruded%20gridded%20data%20source.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/extruded-gridded-data-source" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Extruded%20gridded%20data%20source/Extruded%20gridded%20data%20source.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/fill-polygon-with-built-in-icon-template/screenshot.jpg" loading="lazy" alt="Fill polygon with built-in icon template"><div class="card-body"><h5 class="card-title">Fill polygon with built-in icon template</h5><p class="card-text">This sample shows how to use an image template as a fill pattern in a polygon layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="fill-polygon-with-built-in-icon-template" data-bs-title="Fill polygon with built-in icon template" data-bs-path="/polygons/fill-polygon-with-built-in-icon-template" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Fill%20polygon%20with%20built-in%20icon%20template/Fill%20polygon%20with%20built-in%20icon%20template.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/fill-polygon-with-built-in-icon-template" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Fill%20polygon%20with%20built-in%20icon%20template/Fill%20polygon%20with%20built-in%20icon%20template.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/geospatially-accurate-circle/screenshot.jpg" loading="lazy" alt="Geospatially Accurate Circle"><div class="card-body"><h5 class="card-title">Geospatially Accurate Circle</h5><p class="card-text">This sample shows how to use the extended GeoJSON schema defined by Azure Maps to create a geospatially accurate circle on the map with a filled area and a styled outline.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="geospatially-accurate-circle" data-bs-title="Geospatially Accurate Circle" data-bs-path="/polygons/geospatially-accurate-circle" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Geospatially%20Accurate%20Circle/Geospatially%20Accurate%20Circle.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/geospatially-accurate-circle" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Geospatially%20Accurate%20Circle/Geospatially%20Accurate%20Circle.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/gridded-data-source-options/screenshot.jpg" loading="lazy" alt="Gridded data source options"><div class="card-body"><h5 class="card-title">Gridded data source options</h5><p class="card-text">This sample shows all the different options available for the gridded data source module.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="gridded-data-source-options" data-bs-title="Gridded data source options" data-bs-path="/polygons/gridded-data-source-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Gridded%20data%20source%20options/Gridded%20data%20source%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/gridded-data-source-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Gridded%20data%20source%20options/Gridded%20data%20source%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/make-a-geometry-easy-to-update/screenshot.jpg" loading="lazy" alt="Make a geometry easy to update"><div class="card-body"><h5 class="card-title">Make a geometry easy to update</h5><p class="card-text">This sample shows how to wrap a circle GeoJSON object with a shape class. As the value of the radius changes in the shape, the circle renders automatically on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="make-a-geometry-easy-to-update" data-bs-title="Make a geometry easy to update" data-bs-path="/polygons/make-a-geometry-easy-to-update" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Make%20a%20geometry%20easy%20to%20update/Make%20a%20geometry%20easy%20to%20update.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/make-a-geometry-easy-to-update" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Make%20a%20geometry%20easy%20to%20update/Make%20a%20geometry%20easy%20to%20update.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/mercator-projection-and-geospatial-circles/screenshot.jpg" loading="lazy" alt="Mercator Projection and Geospatial Circles"><div class="card-body"><h5 class="card-title">Mercator Projection and Geospatial Circles</h5><p class="card-text">This sample shows how the Mercator projection of the map affects the scale of geospatially accurate objects on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="mercator-projection-and-geospatial-circles" data-bs-title="Mercator Projection and Geospatial Circles" data-bs-path="/polygons/mercator-projection-and-geospatial-circles" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Mercator%20Projection%20and%20Geospatial%20Circles/Mercator%20Projection%20and%20Geospatial%20Circles.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/mercator-projection-and-geospatial-circles" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Mercator%20Projection%20and%20Geospatial%20Circles/Mercator%20Projection%20and%20Geospatial%20Circles.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/polygon-extrusion-layer-options/screenshot.jpg" loading="lazy" alt="Polygon Extrusion Layer Options"><div class="card-body"><h5 class="card-title">Polygon Extrusion Layer Options</h5><p class="card-text">This sample shows how the different options of the polygon extrusion layer affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="polygon-extrusion-layer-options" data-bs-title="Polygon Extrusion Layer Options" data-bs-path="/polygons/polygon-extrusion-layer-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20Extrusion%20Layer%20Options/Polygon%20Extrusion%20Layer%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/polygon-extrusion-layer-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20Extrusion%20Layer%20Options/Polygon%20Extrusion%20Layer%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/polygon-fill-pattern/screenshot.jpg" loading="lazy" alt="Polygon Fill Pattern"><div class="card-body"><h5 class="card-title">Polygon Fill Pattern</h5><p class="card-text">This sample shows how to fill a polygon area using a pattern image rather than a solid color.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="polygon-fill-pattern" data-bs-title="Polygon Fill Pattern" data-bs-path="/polygons/polygon-fill-pattern" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20Fill%20Pattern/Polygon%20Fill%20Pattern.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/polygon-fill-pattern" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20Fill%20Pattern/Polygon%20Fill%20Pattern.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/polygon-hover-style/screenshot.gif" loading="lazy" alt="Polygon Hover Style"><div class="card-body"><h5 class="card-title">Polygon Hover Style</h5><p class="card-text">This sample shows how to create a hover effect on a polygon layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="polygon-hover-style" data-bs-title="Polygon Hover Style" data-bs-path="/polygons/polygon-hover-style" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20Hover%20Style/Polygon%20Hover%20Style.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/polygon-hover-style" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20Hover%20Style/Polygon%20Hover%20Style.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/polygon-labels---calculated/screenshot.jpg" loading="lazy" alt="Polygon labels - calculated"><div class="card-body"><h5 class="card-title">Polygon labels - calculated</h5><p class="card-text">This sample shows how to create labels for polygons by calculating a coordinates and creating a point feature for the label.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="polygon-labels---calculated" data-bs-title="Polygon labels - calculated" data-bs-path="/polygons/polygon-labels---calculated" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20labels%20-%20calculated/Polygon%20labels%20-%20calculated.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/polygon-labels---calculated" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20labels%20-%20calculated/Polygon%20labels%20-%20calculated.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/polygon-labels---symbol-layer/screenshot.jpg" loading="lazy" alt="Polygon labels - symbol layer"><div class="card-body"><h5 class="card-title">Polygon labels - symbol layer</h5><p class="card-text">This sample shows how the symbol layer can be used to automatically render labels for polygons on the map. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="polygon-labels---symbol-layer" data-bs-title="Polygon labels - symbol layer" data-bs-path="/polygons/polygon-labels---symbol-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20labels%20-%20symbol%20layer/Polygon%20labels%20-%20symbol%20layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/polygon-labels---symbol-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20labels%20-%20symbol%20layer/Polygon%20labels%20-%20symbol%20layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/polygon-layer-options/screenshot.jpg" loading="lazy" alt="Polygon Layer Options"><div class="card-body"><h5 class="card-title">Polygon Layer Options</h5><p class="card-text">This sample shows how the different options of the polygon layer affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="polygon-layer-options" data-bs-title="Polygon Layer Options" data-bs-path="/polygons/polygon-layer-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20Layer%20Options/Polygon%20Layer%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/polygon-layer-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20Layer%20Options/Polygon%20Layer%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/polygon-mask-with-dynamic-styling/screenshot.jpg" loading="lazy" alt="Polygon mask with dynamic styling"><div class="card-body"><h5 class="card-title">Polygon mask with dynamic styling</h5><p class="card-text">This sample shows how to dynamically style a polygon mask to align with the current style of the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="polygon-mask-with-dynamic-styling" data-bs-title="Polygon mask with dynamic styling" data-bs-path="/polygons/polygon-mask-with-dynamic-styling" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20mask%20with%20dynamic%20styling/Polygon%20mask%20with%20dynamic%20styling.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/polygon-mask-with-dynamic-styling" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20mask%20with%20dynamic%20styling/Polygon%20mask%20with%20dynamic%20styling.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/polygon-masks/screenshot.jpg" loading="lazy" alt="Polygon masks"><div class="card-body"><h5 class="card-title">Polygon masks</h5><p class="card-text">This sample shows how to create polygon masks for both regular Polygon and MultiPolygon geometries.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="polygon-masks" data-bs-title="Polygon masks" data-bs-path="/polygons/polygon-masks" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20masks/Polygon%20masks.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/polygon-masks" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20masks/Polygon%20masks.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/show-points-of-gridded-data-source/screenshot.jpg" loading="lazy" alt="Show points of gridded data source"><div class="card-body"><h5 class="card-title">Show points of gridded data source</h5><p class="card-text">This sample shows how to overlay a gridded data source on the map and the data points that are aggregated inside.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="show-points-of-gridded-data-source" data-bs-title="Show points of gridded data source" data-bs-path="/polygons/show-points-of-gridded-data-source" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Show%20points%20of%20gridded%20data%20source/Show%20points%20of%20gridded%20data%20source.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/show-points-of-gridded-data-source" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Show%20points%20of%20gridded%20data%20source/Show%20points%20of%20gridded%20data%20source.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/polygons/simple-multipolygon/screenshot.jpg" loading="lazy" alt="Simple MultiPolygon"><div class="card-body"><h5 class="card-title">Simple MultiPolygon</h5><p class="card-text">This sample shows how to render a MultiPolygon on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-multipolygon" data-bs-title="Simple MultiPolygon" data-bs-path="/polygons/simple-multipolygon" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Simple%20MultiPolygon/Simple%20MultiPolygon.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/polygons/simple-multipolygon" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Simple%20MultiPolygon/Simple%20MultiPolygon.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="popups"></a><h3 class="fw-light">Popups <small class="text-muted">(13)</small></h3><p>See how to display information in a popup on the map.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/accessible-popups/screenshot.jpg" loading="lazy" alt="Accessible popups"><div class="card-body"><h5 class="card-title">Accessible popups</h5><p class="card-text">This sample shows how to use popups in a way that users can easily access them using keyboard shortcuts or on mouse click.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="accessible-popups" data-bs-title="Accessible popups" data-bs-path="/popups/accessible-popups" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Accessible%20popups/Accessible%20popups.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/accessible-popups" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Accessible%20popups/Accessible%20popups.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/accessible-shape-selection/screenshot.jpg" loading="lazy" alt="Accessible shape selection"><div class="card-body"><h5 class="card-title">Accessible shape selection</h5><p class="card-text">This sample shows how to add keyboard selection support to shapes by leveraging hidden popups.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="accessible-shape-selection" data-bs-title="Accessible shape selection" data-bs-path="/popups/accessible-shape-selection" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Accessible%20shape%20selection/Accessible%20shape%20selection.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/accessible-shape-selection" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Accessible%20shape%20selection/Accessible%20shape%20selection.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/customize-a-popup/screenshot.jpg" loading="lazy" alt="Customize a popup"><div class="card-body"><h5 class="card-title">Customize a popup</h5><p class="card-text">This sample shows how to customize the look of a popup.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="customize-a-popup" data-bs-title="Customize a popup" data-bs-path="/popups/customize-a-popup" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Customize%20a%20popup/Customize%20a%20popup.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/customize-a-popup" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Customize%20a%20popup/Customize%20a%20popup.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/popup-events/screenshot.jpg" loading="lazy" alt="Popup events"><div class="card-body"><h5 class="card-title">Popup events</h5><p class="card-text">This sample shows how to add events to Popups.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="popup-events" data-bs-title="Popup events" data-bs-path="/popups/popup-events" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popup%20events/Popup%20events.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/popup-events" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popup%20events/Popup%20events.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/popup-templates/screenshot.jpg" loading="lazy" alt="Popup templates"><div class="card-body"><h5 class="card-title">Popup templates</h5><p class="card-text">This sample shows how to use a various popup templates to generate formatted content from porperties of features.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="popup-templates" data-bs-title="Popup templates" data-bs-path="/popups/popup-templates" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popup%20templates/Popup%20templates.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/popup-templates" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popup%20templates/Popup%20templates.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/popup-with-dom-element-content/screenshot.jpg" loading="lazy" alt="Popup with DOM element content"><div class="card-body"><h5 class="card-title">Popup with DOM element content</h5><p class="card-text">This sample shows how to pass in a DOM-element into a popup as content.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="popup-with-dom-element-content" data-bs-title="Popup with DOM element content" data-bs-path="/popups/popup-with-dom-element-content" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popup%20with%20DOM%20element%20content/Popup%20with%20DOM%20element%20content.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/popup-with-dom-element-content" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popup%20with%20DOM%20element%20content/Popup%20with%20DOM%20element%20content.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/popup-with-media-content/screenshot.jpg" loading="lazy" alt="Popup with Media Content"><div class="card-body"><h5 class="card-title">Popup with Media Content</h5><p class="card-text">This sample shows popups that contain media content.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="popup-with-media-content" data-bs-title="Popup with Media Content" data-bs-path="/popups/popup-with-media-content" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popup%20with%20Media%20Content/Popup%20with%20Media%20Content.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/popup-with-media-content" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popup%20with%20Media%20Content/Popup%20with%20Media%20Content.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/popups-on-shapes/screenshot.jpg" loading="lazy" alt="Popups on Shapes"><div class="card-body"><h5 class="card-title">Popups on Shapes</h5><p class="card-text">This sample shows how to display a popup when a user interacts with any shape on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="popups-on-shapes" data-bs-title="Popups on Shapes" data-bs-path="/popups/popups-on-shapes" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popups%20on%20Shapes/Popups%20on%20Shapes.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/popups-on-shapes" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popups%20on%20Shapes/Popups%20on%20Shapes.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/popups-with-leader-lines/screenshot.jpg" loading="lazy" alt="Popups with leader lines"><div class="card-body"><h5 class="card-title">Popups with leader lines</h5><p class="card-text">This sample shows how to add events to Popups.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="popups-with-leader-lines" data-bs-title="Popups with leader lines" data-bs-path="/popups/popups-with-leader-lines" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popups%20with%20leader%20lines/Popups%20with%20leader%20lines.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/popups-with-leader-lines" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popups%20with%20leader%20lines/Popups%20with%20leader%20lines.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/reuse-a-popup-template/screenshot.jpg" loading="lazy" alt="Reuse a popup template"><div class="card-body"><h5 class="card-title">Reuse a popup template</h5><p class="card-text">This sample shows how to use reuse a single popup template with multiple features that share a common set of property fields.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="reuse-a-popup-template" data-bs-title="Reuse a popup template" data-bs-path="/popups/reuse-a-popup-template" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Reuse%20a%20popup%20template/Reuse%20a%20popup%20template.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/reuse-a-popup-template" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Reuse%20a%20popup%20template/Reuse%20a%20popup%20template.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/reusing-popup-with-multiple-pins/screenshot.jpg" loading="lazy" alt="Reusing Popup with Multiple Pins"><div class="card-body"><h5 class="card-title">Reusing Popup with Multiple Pins</h5><p class="card-text">This sample shows popups that contain media content.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="reusing-popup-with-multiple-pins" data-bs-title="Reusing Popup with Multiple Pins" data-bs-path="/popups/reusing-popup-with-multiple-pins" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Reusing%20Popup%20with%20Multiple%20Pins/Reusing%20Popup%20with%20Multiple%20Pins.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/reusing-popup-with-multiple-pins" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Reusing%20Popup%20with%20Multiple%20Pins/Reusing%20Popup%20with%20Multiple%20Pins.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/show-clustered-points-in-popup/screenshot.jpg" loading="lazy" alt="Show clustered points in popup"><div class="card-body"><h5 class="card-title">Show clustered points in popup</h5><p class="card-text">This sample shows how to display selectable list of points within a cluster in a popup. When an item is selected, the content of the popup will update to show the details of the selected point. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="show-clustered-points-in-popup" data-bs-title="Show clustered points in popup" data-bs-path="/popups/show-clustered-points-in-popup" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Show%20clustered%20points%20in%20popup/Show%20clustered%20points%20in%20popup.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/show-clustered-points-in-popup" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Show%20clustered%20points%20in%20popup/Show%20clustered%20points%20in%20popup.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/popups/show-popup-on-hover/screenshot.jpg" loading="lazy" alt="Show popup on hover"><div class="card-body"><h5 class="card-title">Show popup on hover</h5><p class="card-text">This sample shows how to show a popup when the mouse hovers over or touches a shape.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="show-popup-on-hover" data-bs-title="Show popup on hover" data-bs-path="/popups/show-popup-on-hover" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Show%20popup%20on%20hover/Show%20popup%20on%20hover.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/popups/show-popup-on-hover" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Show%20popup%20on%20hover/Show%20popup%20on%20hover.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="rest-services"></a><h3 class="fw-light">REST Services <small class="text-muted">(9)</small></h3><p>Learn how to directly access the Azure Maps REST services from JavaScript.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/rest-services/calculate-a-simple-isochrone/screenshot.jpg" loading="lazy" alt="Calculate a Simple Isochrone"><div class="card-body"><h5 class="card-title">Calculate a Simple Isochrone</h5><p class="card-text">This sample shows how to calculate an isochrone (drive time polygon) using the Azure Maps Route Reachable Range service and display it on the map. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="calculate-a-simple-isochrone" data-bs-title="Calculate a Simple Isochrone" data-bs-path="/rest-services/calculate-a-simple-isochrone" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Calculate%20a%20Simple%20Isochrone/Calculate%20a%20Simple%20Isochrone.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/rest-services/calculate-a-simple-isochrone" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Calculate%20a%20Simple%20Isochrone/Calculate%20a%20Simple%20Isochrone.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/rest-services/fill-address-form-with-autosuggest/screenshot.jpg" loading="lazy" alt="Fill Address Form with Autosuggest"><div class="card-body"><h5 class="card-title">Fill Address Form with Autosuggest</h5><p class="card-text">This sample shows how to use the Azure Maps Search service with JQuery UI's autocomplete widget which provides address suggestions as the user types and which populates a form with the selected suggestion.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="fill-address-form-with-autosuggest" data-bs-title="Fill Address Form with Autosuggest" data-bs-path="/rest-services/fill-address-form-with-autosuggest" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Fill%20Address%20Form%20with%20Autosuggest/Fill%20Address%20Form%20with%20Autosuggest.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/rest-services/fill-address-form-with-autosuggest" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Fill%20Address%20Form%20with%20Autosuggest/Fill%20Address%20Form%20with%20Autosuggest.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/rest-services/geolocation-sample/screenshot.png" loading="lazy" alt="Geolocation Sample"><div class="card-body"><h5 class="card-title">Geolocation Sample</h5><p class="card-text"></p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="geolocation-sample" data-bs-title="Geolocation Sample" data-bs-path="/rest-services/geolocation-sample" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Geolocation%20Sample/Geolocation%20Sample.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/rest-services/geolocation-sample" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Geolocation%20Sample/Geolocation%20Sample.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/rest-services/get-users-timezone/screenshot.png" loading="lazy" alt="Get Users Timezone with Prompt"><div class="card-body"><h5 class="card-title">Get Users Timezone with Prompt</h5><p class="card-text">This sample shows how to determine a users timezone by passing the users location into the Azure Maps REST Timezone service. The users location is retrieved using the HTML5 geolocation API which displays a prompt to the user to share their location.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="get-users-timezone-with-prompt" data-bs-title="Get Users Timezone with Prompt" data-bs-path="/rest-services/get-users-timezone" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Get%20Users%20Timezone/Get%20Users%20Timezone.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/rest-services/get-users-timezone" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Get%20Users%20Timezone/Get%20Users%20Timezone.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/rest-services/mio/screenshot.jpg" loading="lazy" alt="Multi-Itinerary Optimization"><div class="card-body"><h5 class="card-title">Multi-Itinerary Optimization</h5><p class="card-text">This sample shows how to do a Multi-Itinerary Optimization with Azure Maps and the NVIDIA cuOpt optimizer service.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="multi-itinerary-optimization" data-bs-title="Multi-Itinerary Optimization" data-bs-path="/rest-services/mio" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/MIO/mio.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/rest-services/mio" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/MIO/mio.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/rest-services/route-waypoint-optimization/screenshot.jpg" loading="lazy" alt="Route Waypoint Optimization"><div class="card-body"><h5 class="card-title">Route Waypoint Optimization</h5><p class="card-text">This sample shows how to calculate routes with and without waypoint optimization using the Azure Maps REST Route API.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="route-waypoint-optimization" data-bs-title="Route Waypoint Optimization" data-bs-path="/rest-services/route-waypoint-optimization" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Route%20Waypoint%20Optimization/Route%20Waypoint%20Optimization.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/rest-services/route-waypoint-optimization" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Route%20Waypoint%20Optimization/Route%20Waypoint%20Optimization.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/rest-services/search-autosuggest-and-jquery-ui/screenshot.gif" loading="lazy" alt="Search Autosuggest and JQuery UI"><div class="card-body"><h5 class="card-title">Search Autosuggest and JQuery UI</h5><p class="card-text">This sample shows how to create a custom input UI for suggesting possible results for queries against the Azure Maps Search services.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="search-autosuggest-and-jquery-ui" data-bs-title="Search Autosuggest and JQuery UI" data-bs-path="/rest-services/search-autosuggest-and-jquery-ui" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Search%20Autosuggest%20and%20JQuery%20UI/Search%20Autosuggest%20and%20JQuery%20UI.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/rest-services/search-autosuggest-and-jquery-ui" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Search%20Autosuggest%20and%20JQuery%20UI/Search%20Autosuggest%20and%20JQuery%20UI.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/rest-services/simple-rest-directions/screenshot.jpg" loading="lazy" alt="Simple REST Directions (Route)"><div class="card-body"><h5 class="card-title">Simple REST Directions (Route)</h5><p class="card-text">This sample shows how to calculate simple directions between two points using the Azure Maps REST Route API and render it on a map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-rest-directions-(route)" data-bs-title="Simple REST Directions (Route)" data-bs-path="/rest-services/simple-rest-directions" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Simple%20REST%20Directions/Simple%20REST%20Directions.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/rest-services/simple-rest-directions" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Simple%20REST%20Directions/Simple%20REST%20Directions.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/rest-services/simple-rest-geocoding-request/screenshot.jpg" loading="lazy" alt="Simple REST Geocoding Request"><div class="card-body"><h5 class="card-title">Simple REST Geocoding Request</h5><p class="card-text">This sample shows how to use the REST search API directly for geocoding locations.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-rest-geocoding-request" data-bs-title="Simple REST Geocoding Request" data-bs-path="/rest-services/simple-rest-geocoding-request" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Simple%20REST%20Geocoding%20Request/Simple%20REST%20Geocoding%20Request.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/rest-services/simple-rest-geocoding-request" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/REST%20Services/Simple%20REST%20Geocoding%20Request/Simple%20REST%20Geocoding%20Request.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="services-module"></a><h3 class="fw-light">Services Module <small class="text-muted">(14)</small></h3><p>Take advantage of the Services module to simplify integration of the REST services with the Azure Maps Web SDK.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/alternate-routes-with-deviation-constraints/screenshot.jpg" loading="lazy" alt="Alternate routes with deviation constraints"><div class="card-body"><h5 class="card-title">Alternate routes with deviation constraints</h5><p class="card-text">This sample shows the usage of alternative routes, alternative types and supporting points with minimum deviation time and distance constraints.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="alternate-routes-with-deviation-constraints" data-bs-title="Alternate routes with deviation constraints" data-bs-path="/services-module/alternate-routes-with-deviation-constraints" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Alternate%20routes%20with%20deviation%20constraints/Alternate%20routes%20with%20deviation%20constraints.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/alternate-routes-with-deviation-constraints" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Alternate%20routes%20with%20deviation%20constraints/Alternate%20routes%20with%20deviation%20constraints.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/calculate-a-simple-route/screenshot.jpg" loading="lazy" alt="Calculate a simple route"><div class="card-body"><h5 class="card-title">Calculate a simple route</h5><p class="card-text">This sample shows how to calculate a simple route and display it on the map using the Services module for Azure Maps.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="calculate-a-simple-route" data-bs-title="Calculate a simple route" data-bs-path="/services-module/calculate-a-simple-route" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Calculate%20a%20simple%20route/Calculate%20a%20simple%20route.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/calculate-a-simple-route" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Calculate%20a%20simple%20route/Calculate%20a%20simple%20route.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/calculate-spaced-positions-along-route/screenshot.jpg" loading="lazy" alt="Calculate spaced positions along route"><div class="card-body"><h5 class="card-title">Calculate spaced positions along route</h5><p class="card-text">This sample shows how to calculate a evenly spaced out positions along a route, in this case every 10 kilometers.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="calculate-spaced-positions-along-route" data-bs-title="Calculate spaced positions along route" data-bs-path="/services-module/calculate-spaced-positions-along-route" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Calculate%20spaced%20positions%20along%20route/Calculate%20spaced%20positions%20along%20route.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/calculate-spaced-positions-along-route" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Calculate%20spaced%20positions%20along%20route/Calculate%20spaced%20positions%20along%20route.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/draggable-route-lines/screenshot.gif" loading="lazy" alt="Draggable route lines"><div class="card-body"><h5 class="card-title">Draggable route lines</h5><p class="card-text">This sample shows how to calculate a simple route and display it on the map using the Services module for Azure Maps.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="draggable-route-lines" data-bs-title="Draggable route lines" data-bs-path="/services-module/draggable-route-lines" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Draggable%20route%20lines/Draggable%20route%20lines.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/draggable-route-lines" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Draggable%20route%20lines/Draggable%20route%20lines.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/fuzzy-search-using-services-module/screenshot.jpg" loading="lazy" alt="Fuzzy Search with Services Module"><div class="card-body"><h5 class="card-title">Fuzzy Search with Services Module</h5><p class="card-text">This sample shows how to use the Services module for Azure Maps to perform a fuzzy search for points of interests, address, and places. Providing user location information allows the search service choose results that are more local to the user.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="fuzzy-search-with-services-module" data-bs-title="Fuzzy Search with Services Module" data-bs-path="/services-module/fuzzy-search-using-services-module" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Fuzzy%20Search%20using%20Services%20Module/Fuzzy%20Search%20using%20Services%20Module.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/fuzzy-search-using-services-module" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Fuzzy%20Search%20using%20Services%20Module/Fuzzy%20Search%20using%20Services%20Module.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/get-nearest-pois-to-a-set-of-addresses/screenshot.jpg" loading="lazy" alt="Get nearest POIs to a set of addresses"><div class="card-body"><h5 class="card-title">Get nearest POIs to a set of addresses</h5><p class="card-text">This sample shows the nearest POIs to a set of addresses</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="get-nearest-pois-to-a-set-of-addresses" data-bs-title="Get nearest POIs to a set of addresses" data-bs-path="/services-module/get-nearest-pois-to-a-set-of-addresses" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Get%20nearest%20POIs%20to%20a%20set%20of%20addresses/Get%20nearest%20POIs%20to%20a%20set%20of%20addresses.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/get-nearest-pois-to-a-set-of-addresses" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Get%20nearest%20POIs%20to%20a%20set%20of%20addresses/Get%20nearest%20POIs%20to%20a%20set%20of%20addresses.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/load-poi-as-the-map-moves/screenshot.jpg" loading="lazy" alt="Load POIs as the map moves"><div class="card-body"><h5 class="card-title">Load POIs as the map moves</h5><p class="card-text">This sample shows how to load points of interest data on the map as the user moves the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="load-pois-as-the-map-moves" data-bs-title="Load POIs as the map moves" data-bs-path="/services-module/load-poi-as-the-map-moves" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Load%20POI%20as%20the%20map%20moves/Load%20POI%20as%20the%20map%20moves.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/load-poi-as-the-map-moves" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Load%20POI%20as%20the%20map%20moves/Load%20POI%20as%20the%20map%20moves.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/methods-for-geocoding-multiple-addresses/screenshot.jpg" loading="lazy" alt="Methods for geocoding multiple addresses"><div class="card-body"><h5 class="card-title">Methods for geocoding multiple addresses</h5><p class="card-text">This sample shows two different methods for geocoding a bunch of addresses quickly from within a web app.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="methods-for-geocoding-multiple-addresses" data-bs-title="Methods for geocoding multiple addresses" data-bs-path="/services-module/methods-for-geocoding-multiple-addresses" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Methods%20for%20geocoding%20multiple%20addresses/Methods%20for%20geocoding%20multiple%20addresses.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/methods-for-geocoding-multiple-addresses" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Methods%20for%20geocoding%20multiple%20addresses/Methods%20for%20geocoding%20multiple%20addresses.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/page-through-poi-results/screenshot.jpg" loading="lazy" alt="Page through POI results"><div class="card-body"><h5 class="card-title">Page through POI results</h5><p class="card-text">This sample shows how to step through all the results available for a POI query. This sample also creates a list of the results and cross references the list items to the shapes on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="page-through-poi-results" data-bs-title="Page through POI results" data-bs-path="/services-module/page-through-poi-results" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Page%20through%20POI%20results/Page%20through%20POI%20results.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/page-through-poi-results" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Page%20through%20POI%20results/Page%20through%20POI%20results.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/reverse-geocode-using-services-module/screenshot.jpg" loading="lazy" alt="Reverse Geocode with Services Module"><div class="card-body"><h5 class="card-title">Reverse Geocode with Services Module</h5><p class="card-text">This sample shows how to use the Services module for Azure Maps to reverse geocode a coordinate.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="reverse-geocode-with-services-module" data-bs-title="Reverse Geocode with Services Module" data-bs-path="/services-module/reverse-geocode-using-services-module" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Reverse%20Geocode%20using%20Services%20Module/Reverse%20Geocode%20using%20Services%20Module.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/reverse-geocode-using-services-module" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Reverse%20Geocode%20using%20Services%20Module/Reverse%20Geocode%20using%20Services%20Module.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/search-for-boundaries/screenshot.jpg" loading="lazy" alt="Search for boundaries"><div class="card-body"><h5 class="card-title">Search for boundaries</h5><p class="card-text">This sample shows how to use the Services module for Azure Maps to search for locations that have boundaries and display them on the map. Azure Maps provides boundary data for administrative areas such as states, countries, cities, postal codes, and other boundaries such as industrial areas.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="search-for-boundaries" data-bs-title="Search for boundaries" data-bs-path="/services-module/search-for-boundaries" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Search%20for%20boundaries/Search%20for%20boundaries.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/search-for-boundaries" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Search%20for%20boundaries/Search%20for%20boundaries.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/search-for-pois-along-route/screenshot.jpg" loading="lazy" alt="Search for POIs along route"><div class="card-body"><h5 class="card-title">Search for POIs along route</h5><p class="card-text">This sample shows how to retrieve points of interest along a route.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="search-for-pois-along-route" data-bs-title="Search for POIs along route" data-bs-path="/services-module/search-for-pois-along-route" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Search%20for%20POIs%20along%20route/Search%20for%20POIs%20along%20route.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/search-for-pois-along-route" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Search%20for%20POIs%20along%20route/Search%20for%20POIs%20along%20route.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/show-traffic-along-route/screenshot.jpg" loading="lazy" alt="Show traffic along route"><div class="card-body"><h5 class="card-title">Show traffic along route</h5><p class="card-text">This sample shows how to retrieve traffic information along a route using the <b>sectionType</b> option, and color the sections on the map. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="show-traffic-along-route" data-bs-title="Show traffic along route" data-bs-path="/services-module/show-traffic-along-route" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Show%20traffic%20along%20route/Show%20traffic%20along%20route.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/show-traffic-along-route" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Show%20traffic%20along%20route/Show%20traffic%20along%20route.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/services-module/snap-points-to-logical-route-path/screenshot.jpg" loading="lazy" alt="Snap points to logical route path"><div class="card-body"><h5 class="card-title">Snap points to logical route path</h5><p class="card-text">This sample shows how to snap points to the road network to form a logical path using the Azure Maps rest directions service.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="snap-points-to-logical-route-path" data-bs-title="Snap points to logical route path" data-bs-path="/services-module/snap-points-to-logical-route-path" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Snap%20points%20to%20logical%20route%20path/Snap%20points%20to%20logical%20route%20path.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/services-module/snap-points-to-logical-route-path" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Services%20Module/Snap%20points%20to%20logical%20route%20path/Snap%20points%20to%20logical%20route%20path.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="spatial-analysis"></a><h3 class="fw-light">Spatial Analysis <small class="text-muted">(5)</small></h3><p>Gain deep insights with in-depth spatial analysis of data.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-analysis/calculate-nearest-locations/screenshot.jpg" loading="lazy" alt="Calculate nearest locations"><div class="card-body"><h5 class="card-title">Calculate nearest locations</h5><p class="card-text">This sample shows how to do a spatial join between two sets of points based on the shortest stright line distance or travel time along roads using the route matrix service.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="calculate-nearest-locations" data-bs-title="Calculate nearest locations" data-bs-path="/spatial-analysis/calculate-nearest-locations" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Analysis/Calculate%20nearest%20locations/Calculate%20nearest%20locations.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-analysis/calculate-nearest-locations" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Analysis/Calculate%20nearest%20locations/Calculate%20nearest%20locations.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-analysis/census-block-group-analysis/screenshot.jpg" loading="lazy" alt="Census block group analysis"><div class="card-body"><h5 class="card-title">Census block group analysis</h5><p class="card-text">This sample loads census block group data for a state and then retrieves the intersection with an area drawn by the user and calculates an estimated population.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="census-block-group-analysis" data-bs-title="Census block group analysis" data-bs-path="/spatial-analysis/census-block-group-analysis" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Analysis/Census%20block%20group%20analysis/Census%20block%20group%20analysis.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-analysis/census-block-group-analysis" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Analysis/Census%20block%20group%20analysis/Census%20block%20group%20analysis.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-analysis/geojson-routing/screenshot.jpg" loading="lazy" alt="Route along GeoJSON network"><div class="card-body"><h5 class="card-title">Route along GeoJSON network</h5><p class="card-text">This sample shows how to calculate the shortest route path between two points on a network of lines stored in a GeoJSON file. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="route-along-geojson-network" data-bs-title="Route along GeoJSON network" data-bs-path="/spatial-analysis/geojson-routing" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Analysis/GeoJSON%20Routing/Route%20along%20GeoJSON%20network.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-analysis/geojson-routing" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Analysis/GeoJSON%20Routing/Route%20along%20GeoJSON%20network.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-analysis/travel-time-analysis-of-multiple-locations/screenshot.jpg" loading="lazy" alt="Travel time analysis of multiple locations"><div class="card-body"><h5 class="card-title">Travel time analysis of multiple locations</h5><p class="card-text">This sample shows how to add calculate travel times areas for multiple points, and then spatially join these travel time polygons with a secondary set of points to calculate aggregates.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="travel-time-analysis-of-multiple-locations" data-bs-title="Travel time analysis of multiple locations" data-bs-path="/spatial-analysis/travel-time-analysis-of-multiple-locations" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Analysis/Travel%20time%20analysis%20of%20multiple%20locations/Travel%20time%20analysis%20of%20multiple%20locations.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-analysis/travel-time-analysis-of-multiple-locations" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Analysis/Travel%20time%20analysis%20of%20multiple%20locations/Travel%20time%20analysis%20of%20multiple%20locations.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-analysis/voronoi-diagram-analysis/screenshot.jpg" loading="lazy" alt="Voronoi diagram analysis"><div class="card-body"><h5 class="card-title">Voronoi diagram analysis</h5><p class="card-text">This sample shows how to add calculate a Voronoi diagram from a set of points, and then spatially join the Voronoi polygons with a secondary set of points to calculate aggregates. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="voronoi-diagram-analysis" data-bs-title="Voronoi diagram analysis" data-bs-path="/spatial-analysis/voronoi-diagram-analysis" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Analysis/Voronoi%20diagram%20analysis/Voronoi%20diagram%20analysis.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-analysis/voronoi-diagram-analysis" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Analysis/Voronoi%20diagram%20analysis/Voronoi%20diagram%20analysis.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="spatial-io-module"></a><h3 class="fw-light">Spatial IO Module <small class="text-muted">(14)</small></h3><p>Learn how to use the Spatial IO module to easily read and write spatial data and connect to OGC services.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/add-a-delimited-file-(csv)-to-the-map/screenshot.jpg" loading="lazy" alt="Add a delimited file (CSV) to the map"><div class="card-body"><h5 class="card-title">Add a delimited file (CSV) to the map</h5><p class="card-text">This sample shows how to add a delimited file (CSV, TSV, PIPE) to the map by converting it into GeoJSON.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="add-a-delimited-file-(csv)-to-the-map" data-bs-title="Add a delimited file (CSV) to the map" data-bs-path="/spatial-io-module/add-a-delimited-file-(csv)-to-the-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Add%20a%20delimited%20file%20(CSV)%20to%20the%20map/Add%20a%20delimited%20file%20(CSV)%20to%20the%20map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/add-a-delimited-file-(csv)-to-the-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Add%20a%20delimited%20file%20(CSV)%20to%20the%20map/Add%20a%20delimited%20file%20(CSV)%20to%20the%20map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/drag-and-drop-spatial-files-onto-map/screenshot.jpg" loading="lazy" alt="Drag and drop spatial files onto map"><div class="card-body"><h5 class="card-title">Drag and drop spatial files onto map</h5><p class="card-text">Drag and drop one or more KML, KMZ, GeoRSS, GPX, GML, GeoJSON or CSV files onto the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="drag-and-drop-spatial-files-onto-map" data-bs-title="Drag and drop spatial files onto map" data-bs-path="/spatial-io-module/drag-and-drop-spatial-files-onto-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Drag%20and%20drop%20spatial%20files%20onto%20map/Drag%20and%20drop%20spatial%20files%20onto%20map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/drag-and-drop-spatial-files-onto-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Drag%20and%20drop%20spatial%20files%20onto%20map/Drag%20and%20drop%20spatial%20files%20onto%20map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/load-kml-onto-map/screenshot.jpg" loading="lazy" alt="Load KML onto map"><div class="card-body"><h5 class="card-title">Load KML onto map</h5><p class="card-text">This sample shows how to load KML or KMZ files onto the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="load-kml-onto-map" data-bs-title="Load KML onto map" data-bs-path="/spatial-io-module/load-kml-onto-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Load%20KML%20onto%20map/Load%20KML%20onto%20map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/load-kml-onto-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Load%20KML%20onto%20map/Load%20KML%20onto%20map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/load-spatial-data-(simple)/screenshot.jpg" loading="lazy" alt="Load spatial data (simple)"><div class="card-body"><h5 class="card-title">Load spatial data (simple)</h5><p class="card-text">This sample shows how to easily load spatial data using the spatial io module into the map. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="load-spatial-data-(simple)" data-bs-title="Load spatial data (simple)" data-bs-path="/spatial-io-module/load-spatial-data-(simple)" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Load%20spatial%20data%20(simple)/Load%20spatial%20data%20(simple).html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/load-spatial-data-(simple)" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Load%20spatial%20data%20(simple)/Load%20spatial%20data%20(simple).html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/ogc-map-layer-example/screenshot.jpg" loading="lazy" alt="OGC map layer example"><div class="card-body"><h5 class="card-title">OGC map layer example</h5><p class="card-text">This sample shows how to overlay a Web Mapping Service (WMS) or Web Mapping Tile Service (WMTS) on top of the map using the OGC map layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="ogc-map-layer-example" data-bs-title="OGC map layer example" data-bs-path="/spatial-io-module/ogc-map-layer-example" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/OGC%20map%20layer%20example/OGC%20map%20layer%20example.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/ogc-map-layer-example" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/OGC%20map%20layer%20example/OGC%20map%20layer%20example.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/ogc-map-layer-options/screenshot.jpg" loading="lazy" alt="OGC map layer options"><div class="card-body"><h5 class="card-title">OGC map layer options</h5><p class="card-text">This sample shows how the different options of the OGC map layer affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="ogc-map-layer-options" data-bs-title="OGC map layer options" data-bs-path="/spatial-io-module/ogc-map-layer-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/OGC%20map%20layer%20options/OGC%20map%20layer%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/ogc-map-layer-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/OGC%20map%20layer%20options/OGC%20map%20layer%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/ogc-web-map-service-explorer/screenshot.jpg" loading="lazy" alt="OGC Web Map Service explorer"><div class="card-body"><h5 class="card-title">OGC Web Map Service explorer</h5><p class="card-text">This is a simple tool for exploring Web Map Services (WMS) and Web Map Tile Services (WMTS) as layers on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="ogc-web-map-service-explorer" data-bs-title="OGC Web Map Service explorer" data-bs-path="/spatial-io-module/ogc-web-map-service-explorer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/OGC%20Web%20Map%20Service%20explorer/OGC%20Web%20Map%20Service%20explorer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/ogc-web-map-service-explorer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/OGC%20Web%20Map%20Service%20explorer/OGC%20Web%20Map%20Service%20explorer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/read-and-write-well-known-text/screenshot.jpg" loading="lazy" alt="Read and write Well Known Text"><div class="card-body"><h5 class="card-title">Read and write Well Known Text</h5><p class="card-text">This sample shows how to read and write Well Known Text (WKT) strings as GeoJSON.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="read-and-write-well-known-text" data-bs-title="Read and write Well Known Text" data-bs-path="/spatial-io-module/read-and-write-well-known-text" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Read%20and%20write%20Well%20Known%20Text/Read%20and%20write%20Well%20Known%20Text.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/read-and-write-well-known-text" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Read%20and%20write%20Well%20Known%20Text/Read%20and%20write%20Well%20Known%20Text.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/read-well-known-text/screenshot.jpg" loading="lazy" alt="Read Well Known Text"><div class="card-body"><h5 class="card-title">Read Well Known Text</h5><p class="card-text">This sample shows how to easily read Well Known text as GeoJSON.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="read-well-known-text" data-bs-title="Read Well Known Text" data-bs-path="/spatial-io-module/read-well-known-text" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Read%20Well%20Known%20Text/Read%20Well%20Known%20Text.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/read-well-known-text" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Read%20Well%20Known%20Text/Read%20Well%20Known%20Text.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/simple-data-layer-options/screenshot.jpg" loading="lazy" alt="Simple data layer options"><div class="card-body"><h5 class="card-title">Simple data layer options</h5><p class="card-text">This sample shows how the different options of the simple data layer affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-data-layer-options" data-bs-title="Simple data layer options" data-bs-path="/spatial-io-module/simple-data-layer-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Simple%20data%20layer%20options/Simple%20data%20layer%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/simple-data-layer-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Simple%20data%20layer%20options/Simple%20data%20layer%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/simple-wfs-example/screenshot.jpg" loading="lazy" alt="Simple WFS example"><div class="card-body"><h5 class="card-title">Simple WFS example</h5><p class="card-text">This sample shows how to easily query a Web Feature Service (WFS) and overlay the results on a map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-wfs-example" data-bs-title="Simple WFS example" data-bs-path="/spatial-io-module/simple-wfs-example" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Simple%20WFS%20example/Simple%20WFS%20example.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/simple-wfs-example" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Simple%20WFS%20example/Simple%20WFS%20example.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/spatial-data-gallery/screenshot.jpg" loading="lazy" alt="Spatial data gallery"><div class="card-body"><h5 class="card-title">Spatial data gallery</h5><p class="card-text">This sample shows all the different types of spatial data files that can be read with the spatial IO module.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="spatial-data-gallery" data-bs-title="Spatial data gallery" data-bs-path="/spatial-io-module/spatial-data-gallery" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Spatial%20data%20gallery/Spatial%20data%20gallery.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/spatial-data-gallery" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Spatial%20data%20gallery/Spatial%20data%20gallery.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/spatial-data-write-options/screenshot.jpg" loading="lazy" alt="Spatial data write options"><div class="card-body"><h5 class="card-title">Spatial data write options</h5><p class="card-text">This sample shows the different write options for the atlas.io.write function.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="spatial-data-write-options" data-bs-title="Spatial data write options" data-bs-path="/spatial-io-module/spatial-data-write-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Spatial%20data%20write%20options/Spatial%20data%20write%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/spatial-data-write-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/Spatial%20data%20write%20options/Spatial%20data%20write%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-io-module/wfs-service-explorer/screenshot.jpg" loading="lazy" alt="WFS service explorer"><div class="card-body"><h5 class="card-title">WFS service explorer</h5><p class="card-text">This is a simple tool for exploring WFS services on Azure Maps.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="wfs-service-explorer" data-bs-title="WFS service explorer" data-bs-path="/spatial-io-module/wfs-service-explorer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/WFS%20service%20explorer/WFS%20service%20explorer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-io-module/wfs-service-explorer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20IO%20Module/WFS%20service%20explorer/WFS%20service%20explorer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="spatial-math"></a><h3 class="fw-light">Spatial Math <small class="text-muted">(18)</small></h3><p>Learn how to perform common spatial calculations easily with the Azure Maps Web SDK.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/basic-snap-to-road-logic/screenshot.jpg" loading="lazy" alt="Basic snap to road logic"><div class="card-body"><h5 class="card-title">Basic snap to road logic</h5><p class="card-text">This sample shows how to snap individual points to the rendered roads on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="basic-snap-to-road-logic" data-bs-title="Basic snap to road logic" data-bs-path="/spatial-math/basic-snap-to-road-logic" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Basic%20snap%20to%20road%20logic/Basic%20snap%20to%20road%20logic.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/basic-snap-to-road-logic" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Basic%20snap%20to%20road%20logic/Basic%20snap%20to%20road%20logic.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/calculate-a-convex-hull/screenshot.jpg" loading="lazy" alt="Calculate a convex hull"><div class="card-body"><h5 class="card-title">Calculate a convex hull</h5><p class="card-text">This sample shows how to calculate a convex hull from an array of shapes.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="calculate-a-convex-hull" data-bs-title="Calculate a convex hull" data-bs-path="/spatial-math/calculate-a-convex-hull" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Calculate%20a%20convex%20hull/Calculate%20a%20convex%20hull.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/calculate-a-convex-hull" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Calculate%20a%20convex%20hull/Calculate%20a%20convex%20hull.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/calculate-concentric-isochrones/screenshot.jpg" loading="lazy" alt="Calculate concentric isochrones"><div class="card-body"><h5 class="card-title">Calculate concentric isochrones</h5><p class="card-text">This sample shows how to calculate concentric isochrones and cut out overlapping areas so that they are nicely displayed.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="calculate-concentric-isochrones" data-bs-title="Calculate concentric isochrones" data-bs-path="/spatial-math/calculate-concentric-isochrones" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Calculate%20concentric%20isochrones/Calculate%20concentric%20isochrones.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/calculate-concentric-isochrones" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Calculate%20concentric%20isochrones/Calculate%20concentric%20isochrones.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/cardinal-spline-options/screenshot.jpg" loading="lazy" alt="Cardinal Spline Options"><div class="card-body"><h5 class="card-title">Cardinal Spline Options</h5><p class="card-text">This sample provides a set of controls to test the various features of the Cardinal Spline calculation.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="cardinal-spline-options" data-bs-title="Cardinal Spline Options" data-bs-path="/spatial-math/cardinal-spline-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Cardinal%20Spline%20Options/Cardinal%20Spline%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/cardinal-spline-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Cardinal%20Spline%20Options/Cardinal%20Spline%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/convex-hull-and-html-markers/screenshot.gif" loading="lazy" alt="Convex hull and HTML markers"><div class="card-body"><h5 class="card-title">Convex hull and HTML markers</h5><p class="card-text">This sample shows how to calculate a convex hull for a set of HTML markers.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="convex-hull-and-html-markers" data-bs-title="Convex hull and HTML markers" data-bs-path="/spatial-math/convex-hull-and-html-markers" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Convex%20hull%20and%20HTML%20markers/Convex%20hull%20and%20HTML%20markers.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/convex-hull-and-html-markers" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Convex%20hull%20and%20HTML%20markers/Convex%20hull%20and%20HTML%20markers.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/create-3d-isobands-from-isolines/screenshot.jpg" loading="lazy" alt="Create 3D isobands from isolines"><div class="card-body"><h5 class="card-title">Create 3D isobands from isolines</h5><p class="card-text">This sample shows how to create 3D isobands from isoline data and display them on a map with a data driven styling to assign colors.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="create-3d-isobands-from-isolines" data-bs-title="Create 3D isobands from isolines" data-bs-path="/spatial-math/create-3d-isobands-from-isolines" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Create%203D%20isobands%20from%20isolines/Create%203D%20isobands%20from%20isolines.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/create-3d-isobands-from-isolines" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Create%203D%20isobands%20from%20isolines/Create%203D%20isobands%20from%20isolines.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/create-isobands-from-isolines/screenshot.jpg" loading="lazy" alt="Create isobands from isolines"><div class="card-body"><h5 class="card-title">Create isobands from isolines</h5><p class="card-text">This sample shows how to create isobands from isoline data and display them on a map with a data driven styling to assign colors. Isobands represent the areas between isolines.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="create-isobands-from-isolines" data-bs-title="Create isobands from isolines" data-bs-path="/spatial-math/create-isobands-from-isolines" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Create%20isobands%20from%20isolines/Create%20isobands%20from%20isolines.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/create-isobands-from-isolines" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Create%20isobands%20from%20isolines/Create%20isobands%20from%20isolines.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/curved-lines/screenshot.jpg" loading="lazy" alt="Curved lines"><div class="card-body"><h5 class="card-title">Curved lines</h5><p class="card-text">This sample shows three different ways to create curved lines in Azure Maps.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="curved-lines" data-bs-title="Curved lines" data-bs-path="/spatial-math/curved-lines" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Curved%20lines/Curved%20lines.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/curved-lines" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Curved%20lines/Curved%20lines.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/data-binning-points-with-turfjs/screenshot.jpg" loading="lazy" alt="Data binning points with Turfjs"><div class="card-body"><h5 class="card-title">Data binning points with Turfjs</h5><p class="card-text">This sample shows how to create a hexagon grid and perform an aggregate to determine how many points are within each cell of a hexagon grid.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="data-binning-points-with-turfjs" data-bs-title="Data binning points with Turfjs" data-bs-path="/spatial-math/data-binning-points-with-turfjs" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Data%20binning%20points%20with%20Turfjs/Data%20binning%20points%20with%20Turfjs.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/data-binning-points-with-turfjs" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Data%20binning%20points%20with%20Turfjs/Data%20binning%20points%20with%20Turfjs.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/display-cluster-area-with-convex-hull/screenshot.jpg" loading="lazy" alt="Display cluster area with Convex Hull"><div class="card-body"><h5 class="card-title">Display cluster area with Convex Hull</h5><p class="card-text">This sample shows how to display the area of the points contained within a cluster by calculating a convex hull.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="display-cluster-area-with-convex-hull" data-bs-title="Display cluster area with Convex Hull" data-bs-path="/spatial-math/display-cluster-area-with-convex-hull" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Display%20cluster%20area%20with%20Convex%20Hull/Display%20cluster%20area%20with%20Convex%20Hull.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/display-cluster-area-with-convex-hull" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Display%20cluster%20area%20with%20Convex%20Hull/Display%20cluster%20area%20with%20Convex%20Hull.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/filter-data-along-route/screenshot.jpg" loading="lazy" alt="Filter Data Along Route"><div class="card-body"><h5 class="card-title">Filter Data Along Route</h5><p class="card-text">This sample shows how to take a route line, calculate a buffer around it and then filter a set of points to find those that are within the buffer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="filter-data-along-route" data-bs-title="Filter Data Along Route" data-bs-path="/spatial-math/filter-data-along-route" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Filter%20Data%20Along%20Route/Filter%20Data%20Along%20Route.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/filter-data-along-route" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Filter%20Data%20Along%20Route/Filter%20Data%20Along%20Route.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/get-closest-html-marker-to-position/screenshot.jpg" loading="lazy" alt="Get closest HTML marker to position"><div class="card-body"><h5 class="card-title">Get closest HTML marker to position</h5><p class="card-text">This sample shows how to calculate the closest marker to a given position, in this case, where the user clicked on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="get-closest-html-marker-to-position" data-bs-title="Get closest HTML marker to position" data-bs-path="/spatial-math/get-closest-html-marker-to-position" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Get%20closest%20HTML%20marker%20to%20position/Get%20closest%20HTML%20marker%20to%20position.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/get-closest-html-marker-to-position" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Get%20closest%20HTML%20marker%20to%20position/Get%20closest%20HTML%20marker%20to%20position.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/get-closest-point-to-geometry/screenshot.jpg" loading="lazy" alt="Get closest point to geometry"><div class="card-body"><h5 class="card-title">Get closest point to geometry</h5><p class="card-text">This sample shows how to get the closest point on a geometry from another point or position.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="get-closest-point-to-geometry" data-bs-title="Get closest point to geometry" data-bs-path="/spatial-math/get-closest-point-to-geometry" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Get%20closest%20point%20to%20geometry/Get%20closest%20point%20to%20geometry.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/get-closest-point-to-geometry" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Get%20closest%20point%20to%20geometry/Get%20closest%20point%20to%20geometry.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/get-closest-point-to-position/screenshot.jpg" loading="lazy" alt="Get closest point to position"><div class="card-body"><h5 class="card-title">Get closest point to position</h5><p class="card-text">This sample shows how to calculate the closest point to a given coordinate, in this case, where the user clicked on the map. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="get-closest-point-to-position" data-bs-title="Get closest point to position" data-bs-path="/spatial-math/get-closest-point-to-position" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Get%20closest%20point%20to%20position/Get%20closest%20point%20to%20position.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/get-closest-point-to-position" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Get%20closest%20point%20to%20position/Get%20closest%20point%20to%20position.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/get-points-in-current-map-view/screenshot.jpg" loading="lazy" alt="Get points in current map view"><div class="card-body"><h5 class="card-title">Get points in current map view</h5><p class="card-text">This sample shows how to determine which points of a data set are in the current map view.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="get-points-in-current-map-view" data-bs-title="Get points in current map view" data-bs-path="/spatial-math/get-points-in-current-map-view" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Get%20points%20in%20current%20map%20view/Get%20points%20in%20current%20map%20view.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/get-points-in-current-map-view" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Get%20points%20in%20current%20map%20view/Get%20points%20in%20current%20map%20view.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/introduction-to-spatial-math/screenshot.jpg" loading="lazy" alt="Introduction to Spatial Math"><div class="card-body"><h5 class="card-title">Introduction to Spatial Math</h5><p class="card-text">This sample shows how to use many of the built in spatial math functions in the Azure Maps web control.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="introduction-to-spatial-math" data-bs-title="Introduction to Spatial Math" data-bs-path="/spatial-math/introduction-to-spatial-math" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Introduction%20to%20spatial%20math/Introduction%20to%20spatial%20math.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/introduction-to-spatial-math" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Introduction%20to%20spatial%20math/Introduction%20to%20spatial%20math.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/merge-two-polygons-together/screenshot.jpg" loading="lazy" alt="Merge two polygons together"><div class="card-body"><h5 class="card-title">Merge two polygons together</h5><p class="card-text">This sample shows how to merge (union) two polygons together to create a single polygon object.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="merge-two-polygons-together" data-bs-title="Merge two polygons together" data-bs-path="/spatial-math/merge-two-polygons-together" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Merge%20two%20polygons%20together/Merge%20two%20polygons%20together.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/merge-two-polygons-together" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Merge%20two%20polygons%20together/Merge%20two%20polygons%20together.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/spatial-math/simple-cardinal-spline/screenshot.jpg" loading="lazy" alt="Simple Cardinal Spline"><div class="card-body"><h5 class="card-title">Simple Cardinal Spline</h5><p class="card-text">This sample shows how to create a simple cardinal spline and display it on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-cardinal-spline" data-bs-title="Simple Cardinal Spline" data-bs-path="/spatial-math/simple-cardinal-spline" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Simple%20Cardinal%20Spline/Simple%20Cardinal%20Spline.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/spatial-math/simple-cardinal-spline" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Spatial%20Math/Simple%20Cardinal%20Spline/Simple%20Cardinal%20Spline.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="symbol-layer"></a><h3 class="fw-light">Symbol Layer <small class="text-muted">(18)</small></h3><p>Render lots of styled points on the map in a Symbol layer with good performance. If working with smaller data sets use HTML based markers and take advantage of CSS for styling.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/all-built-in-icon-templates-as-symbols/screenshot.jpg" loading="lazy" alt="All built-in icon templates as symbols"><div class="card-body"><h5 class="card-title">All built-in icon templates as symbols</h5><p class="card-text">This sample shows all the built-in icon templates rendered on a symbol layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="all-built-in-icon-templates-as-symbols" data-bs-title="All built-in icon templates as symbols" data-bs-path="/symbol-layer/all-built-in-icon-templates-as-symbols" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/All%20built-in%20icon%20templates%20as%20symbols/All%20built-in%20icon%20templates%20as%20symbols.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/all-built-in-icon-templates-as-symbols" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/All%20built-in%20icon%20templates%20as%20symbols/All%20built-in%20icon%20templates%20as%20symbols.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/change-mouse-cursor-when-hovering-layer/screenshot.gif" loading="lazy" alt="Change Mouse Cursor when Hovering Layer"><div class="card-body"><h5 class="card-title">Change Mouse Cursor when Hovering Layer</h5><p class="card-text">This sample shows how to change the mouse cursor when hovering over shapes in a layer. This will work with the bubble, line, polygon and symbol layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="change-mouse-cursor-when-hovering-layer" data-bs-title="Change Mouse Cursor when Hovering Layer" data-bs-path="/symbol-layer/change-mouse-cursor-when-hovering-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Change%20Mouse%20Cursor%20when%20Hovering%20Layer/Change%20Mouse%20Cursor%20when%20Hovering%20Layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/change-mouse-cursor-when-hovering-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Change%20Mouse%20Cursor%20when%20Hovering%20Layer/Change%20Mouse%20Cursor%20when%20Hovering%20Layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/create-symbols-from-custom-json/screenshot.jpg" loading="lazy" alt="Create Symbols from Custom JSON"><div class="card-body"><h5 class="card-title">Create Symbols from Custom JSON</h5><p class="card-text">This sample shows how to use this JSON data to create clickable symbols on a map, that when clicked, display a popup with the title and description values of the symbol that was clicked.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="create-symbols-from-custom-json" data-bs-title="Create Symbols from Custom JSON" data-bs-path="/symbol-layer/create-symbols-from-custom-json" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Create%20Symbols%20from%20Custom%20JSON/Create%20Symbols%20from%20Custom%20JSON.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/create-symbols-from-custom-json" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Create%20Symbols%20from%20Custom%20JSON/Create%20Symbols%20from%20Custom%20JSON.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/custom-symbol-image-icon/screenshot.jpg" loading="lazy" alt="Custom Symbol Image Icon"><div class="card-body"><h5 class="card-title">Custom Symbol Image Icon</h5><p class="card-text">This sample shows how to add a custom symbol icon to the map resources and then use it render point data with a custom symbol on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="custom-symbol-image-icon" data-bs-title="Custom Symbol Image Icon" data-bs-path="/symbol-layer/custom-symbol-image-icon" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Custom%20Symbol%20Image%20Icon/Custom%20Symbol%20Image%20Icon.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/custom-symbol-image-icon" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Custom%20Symbol%20Image%20Icon/Custom%20Symbol%20Image%20Icon.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/data-driven-symbol-icons/screenshot.jpg" loading="lazy" alt="Data-driven symbol icons"><div class="card-body"><h5 class="card-title">Data-driven symbol icons</h5><p class="card-text">This sample shows how to use multiple custom icons in a single symbol layer by using data-driven styling with an expression.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="data-driven-symbol-icons" data-bs-title="Data-driven symbol icons" data-bs-path="/symbol-layer/data-driven-symbol-icons" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Data-driven%20symbol%20icons/Data-driven%20symbol%20icons.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/data-driven-symbol-icons" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Data-driven%20symbol%20icons/Data-driven%20symbol%20icons.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/display-clusters-with-a-symbol-layer/screenshot.jpg" loading="lazy" alt="Display clusters with a Symbol Layer"><div class="card-body"><h5 class="card-title">Display clusters with a Symbol Layer</h5><p class="card-text">This sample shows how to enable point based clustering on a data source and render them with different symbols.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="display-clusters-with-a-symbol-layer" data-bs-title="Display clusters with a Symbol Layer" data-bs-path="/symbol-layer/display-clusters-with-a-symbol-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Display%20clusters%20with%20a%20Symbol%20layer/Display%20clusters%20with%20a%20Symbol%20layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/display-clusters-with-a-symbol-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Display%20clusters%20with%20a%20Symbol%20layer/Display%20clusters%20with%20a%20Symbol%20layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/draggable-symbols/screenshot.gif" loading="lazy" alt="Draggable Symbols"><div class="card-body"><h5 class="card-title">Draggable Symbols</h5><p class="card-text">This sample shows how to create a symbol layer that lets you drag the symbols using the mouse.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="draggable-symbols" data-bs-title="Draggable Symbols" data-bs-path="/symbol-layer/draggable-symbols" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Draggable%20Symbols/Draggable%20Symbols.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/draggable-symbols" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Draggable%20Symbols/Draggable%20Symbols.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/expanding-spider-clusters/screenshot.gif" loading="lazy" alt="Expanding Spider Clusters"><div class="card-body"><h5 class="card-title">Expanding Spider Clusters</h5><p class="card-text">This sample shows how to visualize the contents of a cluster as a expanded spider cluster layout.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="expanding-spider-clusters" data-bs-title="Expanding Spider Clusters" data-bs-path="/symbol-layer/expanding-spider-clusters" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Expanding%20Spider%20Clusters/Expanding%20Spider%20Clusters.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/expanding-spider-clusters" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Expanding%20Spider%20Clusters/Expanding%20Spider%20Clusters.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/filter-symbols-by-property/screenshot.jpg" loading="lazy" alt="Filter Symbols by Property"><div class="card-body"><h5 class="card-title">Filter Symbols by Property</h5><p class="card-text">This sample shows how to filter symbols on the map by property by creating a layer fro each property value and then toggling the visibility of that layer accordingly. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="filter-symbols-by-property" data-bs-title="Filter Symbols by Property" data-bs-path="/symbol-layer/filter-symbols-by-property" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Filter%20Symbols%20by%20Property/Filter%20Symbols%20by%20Property.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/filter-symbols-by-property" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Filter%20Symbols%20by%20Property/Filter%20Symbols%20by%20Property.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/formatted-text-field/screenshot.jpg" loading="lazy" alt="Formatted text field"><div class="card-body"><h5 class="card-title">Formatted text field</h5><p class="card-text">This sample shows how to format the symbol layers text field.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="formatted-text-field" data-bs-title="Formatted text field" data-bs-path="/symbol-layer/formatted-text-field" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Formatted%20text%20field/Formatted%20text%20field.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/formatted-text-field" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Formatted%20text%20field/Formatted%20text%20field.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/image-sprite-fallback-expression/screenshot.jpg" loading="lazy" alt="Image sprite fallback expression"><div class="card-body"><h5 class="card-title">Image sprite fallback expression</h5><p class="card-text">This sample shows how to use an expression to check to see if an image is available in the maps image sprite, and if it isn't, use a fallback image instead.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="image-sprite-fallback-expression" data-bs-title="Image sprite fallback expression" data-bs-path="/symbol-layer/image-sprite-fallback-expression" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Image%20sprite%20fallback%20expression/Image%20sprite%20fallback%20expression.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/image-sprite-fallback-expression" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Image%20sprite%20fallback%20expression/Image%20sprite%20fallback%20expression.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/load-missing-image-into-sprite/screenshot.jpg" loading="lazy" alt="Load missing image into sprite"><div class="card-body"><h5 class="card-title">Load missing image into sprite</h5><p class="card-text">This sample shows how to add an event that fires when an image is missing from the maps image sprite, and then load in the missing image.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="load-missing-image-into-sprite" data-bs-title="Load missing image into sprite" data-bs-path="/symbol-layer/load-missing-image-into-sprite" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Load%20missing%20image%20into%20sprite/Load%20missing%20image%20into%20sprite.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/load-missing-image-into-sprite" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Load%20missing%20image%20into%20sprite/Load%20missing%20image%20into%20sprite.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/styled-symbol-layer/screenshot.jpg" loading="lazy" alt="Styled Symbol Layer"><div class="card-body"><h5 class="card-title">Styled Symbol Layer</h5><p class="card-text">This sample shows how to create a symbol layer and apply styles to it to customize how it renders each symbol.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="styled-symbol-layer" data-bs-title="Styled Symbol Layer" data-bs-path="/symbol-layer/styled-symbol-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Styled%20Symbol%20Layer/Styled%20Symbol%20Layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/styled-symbol-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Styled%20Symbol%20Layer/Styled%20Symbol%20Layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/symbol-image-selection-state/screenshot.gif" loading="lazy" alt="Symbol image selection state"><div class="card-body"><h5 class="card-title">Symbol image selection state</h5><p class="card-text">This sample shows how to change the image of a symbol based on its selection state. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="symbol-image-selection-state" data-bs-title="Symbol image selection state" data-bs-path="/symbol-layer/symbol-image-selection-state" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Symbol%20image%20selection%20state/Symbol%20image%20selection%20state.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/symbol-image-selection-state" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Symbol%20image%20selection%20state/Symbol%20image%20selection%20state.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/symbol-layer-events/screenshot.gif" loading="lazy" alt="Layer events"><div class="card-body"><h5 class="card-title">Layer events</h5><p class="card-text">This sample highlights the name of the events that are firing as you interact with the Symbol Layer. The Symbol, Bubble, Line and Polygon layer all support the same set of events. The Tile Layer does not support any of these events.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="layer-events" data-bs-title="Layer events" data-bs-path="/symbol-layer/symbol-layer-events" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Symbol%20layer%20events/Symbol%20layer%20events.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/symbol-layer-events" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Symbol%20layer%20events/Symbol%20layer%20events.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/symbol-layer-options/screenshot.jpg" loading="lazy" alt="Symbol Layer Options"><div class="card-body"><h5 class="card-title">Symbol Layer Options</h5><p class="card-text">This sample shows how the different options of the symbol layer affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="symbol-layer-options" data-bs-title="Symbol Layer Options" data-bs-path="/symbol-layer/symbol-layer-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Symbol%20Layer%20Options/Symbol%20Layer%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/symbol-layer-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Symbol%20Layer%20Options/Symbol%20Layer%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/symbol-layer-with-built-in-icon-template/screenshot.jpg" loading="lazy" alt="Symbol layer with built-in icon template"><div class="card-body"><h5 class="card-title">Symbol layer with built-in icon template</h5><p class="card-text">This sample shows how to use a built-in icon template with a symbol layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="symbol-layer-with-built-in-icon-template" data-bs-title="Symbol layer with built-in icon template" data-bs-path="/symbol-layer/symbol-layer-with-built-in-icon-template" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Symbol%20layer%20with%20built-in%20icon%20template/Symbol%20layer%20with%20built-in%20icon%20template.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/symbol-layer-with-built-in-icon-template" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Symbol%20layer%20with%20built-in%20icon%20template/Symbol%20layer%20with%20built-in%20icon%20template.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/symbol-layer/text-format-with-inline-image/screenshot.jpg" loading="lazy" alt="Text format with inline image"><div class="card-body"><h5 class="card-title">Text format with inline image</h5><p class="card-text">This sample shows how to use the text format expression to create a string with an inline icon with the symbol layers textField option.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="text-format-with-inline-image" data-bs-title="Text format with inline image" data-bs-path="/symbol-layer/text-format-with-inline-image" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Text%20format%20with%20inline%20image/Text%20format%20with%20inline%20image.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/symbol-layer/text-format-with-inline-image" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Text%20format%20with%20inline%20image/Text%20format%20with%20inline%20image.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="third-party-map-controls"></a><h3 class="fw-light">Third Party Map Controls <small class="text-muted">(3)</small></h3><p>As good as the Azure Maps Web Control is, there are many 3rd party map controls in which you can import Azure Maps data into which is a great option if you have an existing app built on one of these.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/third-party-map-controls/azure-maps-leaflet-options/screenshot.jpg" loading="lazy" alt="Azure Maps Leaflet options"><div class="card-body"><h5 class="card-title">Azure Maps Leaflet options</h5><p class="card-text">This sample shows how the different options of Azure Maps tile layer can be used in the Leaflet JS map control.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="azure-maps-leaflet-options" data-bs-title="Azure Maps Leaflet options" data-bs-path="/third-party-map-controls/azure-maps-leaflet-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Third%20Party%20Map%20Controls/Azure%20Maps%20Leaflet%20options/Azure%20Maps%20Leaflet%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/third-party-map-controls/azure-maps-leaflet-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Third%20Party%20Map%20Controls/Azure%20Maps%20Leaflet%20options/Azure%20Maps%20Leaflet%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/third-party-map-controls/render-azure-maps-in-leaflet/screenshot.jpg" loading="lazy" alt="Render Azure Maps in Leaflet"><div class="card-body"><h5 class="card-title">Render Azure Maps in Leaflet</h5><p class="card-text">This sample shows how to render Azure Maps Raster Tiles in the Leaflet JS map control.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="render-azure-maps-in-leaflet" data-bs-title="Render Azure Maps in Leaflet" data-bs-path="/third-party-map-controls/render-azure-maps-in-leaflet" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Third%20Party%20Map%20Controls/Render%20Azure%20Maps%20in%20Leaflet/Render%20Azure%20Maps%20in%20Leaflet.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/third-party-map-controls/render-azure-maps-in-leaflet" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Third%20Party%20Map%20Controls/Render%20Azure%20Maps%20in%20Leaflet/Render%20Azure%20Maps%20in%20Leaflet.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/third-party-map-controls/show-azure-maps-in-leaflet-layer-control/screenshot.jpg" loading="lazy" alt="Show Azure Maps in Leaflet layer control"><div class="card-body"><h5 class="card-title">Show Azure Maps in Leaflet layer control</h5><p class="card-text">This sample shows how to create add all the different Azure Maps tile layers to the layer control in leaflet.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="show-azure-maps-in-leaflet-layer-control" data-bs-title="Show Azure Maps in Leaflet layer control" data-bs-path="/third-party-map-controls/show-azure-maps-in-leaflet-layer-control" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Third%20Party%20Map%20Controls/Show%20Azure%20Maps%20in%20Leaflet%20layer%20control/Show%20Azure%20Maps%20in%20Leaflet%20layer%20control.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/third-party-map-controls/show-azure-maps-in-leaflet-layer-control" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Third%20Party%20Map%20Controls/Show%20Azure%20Maps%20in%20Leaflet%20layer%20control/Show%20Azure%20Maps%20in%20Leaflet%20layer%20control.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="tile-layers"></a><h3 class="fw-light">Tile Layers <small class="text-muted">(4)</small></h3><p>Overlay raster tile layers on top the map using the same tiling system used by the base maps.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/tile-layers/tile-layer-options/screenshot.jpg" loading="lazy" alt="Tile Layer Options"><div class="card-body"><h5 class="card-title">Tile Layer Options</h5><p class="card-text">This sample shows how the different options of the tile layer affect rendering.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="tile-layer-options" data-bs-title="Tile Layer Options" data-bs-path="/tile-layers/tile-layer-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/Tile%20Layer%20Options/Tile%20Layer%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/tile-layers/tile-layer-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/Tile%20Layer%20Options/Tile%20Layer%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/tile-layers/tile-layer-using-x,-y-and-z/screenshot.jpg" loading="lazy" alt="Tile Layer using X, Y, and Z"><div class="card-body"><h5 class="card-title">Tile Layer using X, Y, and Z</h5><p class="card-text">This sample shows how to create a simple tile layer which points to a set of tiles which use the x, y, zoom tiling system.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="tile-layer-using-x,-y,-and-z" data-bs-title="Tile Layer using X, Y, and Z" data-bs-path="/tile-layers/tile-layer-using-x,-y-and-z" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/Tile%20Layer%20using%20X,%20Y%20and%20Z/Tile%20Layer%20using%20X,%20Y%20and%20Z.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/tile-layers/tile-layer-using-x,-y-and-z" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/Tile%20Layer%20using%20X,%20Y%20and%20Z/Tile%20Layer%20using%20X,%20Y%20and%20Z.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/tile-layers/wms-tile-layer/screenshot.jpg" loading="lazy" alt="WMS Tile Layer"><div class="card-body"><h5 class="card-title">WMS Tile Layer</h5><p class="card-text">This sample shows how to create a tile layer which points to a Web Mapping Service (WMS).</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="wms-tile-layer" data-bs-title="WMS Tile Layer" data-bs-path="/tile-layers/wms-tile-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/WMS%20Tile%20Layer/WMS%20Tile%20Layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/tile-layers/wms-tile-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/WMS%20Tile%20Layer/WMS%20Tile%20Layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/tile-layers/wmts-tile-layer/screenshot.jpg" loading="lazy" alt="WMTS Tile Layer"><div class="card-body"><h5 class="card-title">WMTS Tile Layer</h5><p class="card-text">This sample shows how to create a tile layer which points to a Web Mapping Tile Service (WMTS).</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="wmts-tile-layer" data-bs-title="WMTS Tile Layer" data-bs-path="/tile-layers/wmts-tile-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/WMTS%20Tile%20Layer/WMTS%20Tile%20Layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/tile-layers/wmts-tile-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/WMTS%20Tile%20Layer/WMTS%20Tile%20Layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="traffic"></a><h3 class="fw-light">Traffic <small class="text-muted">(4)</small></h3><p>Overlay real-time traffic data on the map.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/traffic/traffic-control-options/screenshot.jpg" loading="lazy" alt="Traffic control options"><div class="card-body"><h5 class="card-title">Traffic control options</h5><p class="card-text">This sample shows how to use options with the traffic control. Users can use the traffic control to toggle traffic on and off in the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="traffic-control-options" data-bs-title="Traffic control options" data-bs-path="/traffic/traffic-control-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Traffic/Traffic%20control%20options/Traffic%20control%20options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/traffic/traffic-control-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Traffic/Traffic%20control%20options/Traffic%20control%20options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/traffic/traffic-controls/screenshot.jpg" loading="lazy" alt="Traffic controls"><div class="card-body"><h5 class="card-title">Traffic controls</h5><p class="card-text">This sample shows how to add the traffic control that lets the user toggle the traffic on and off, as well as how to use the traffic legend control. </p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="traffic-controls" data-bs-title="Traffic controls" data-bs-path="/traffic/traffic-controls" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Traffic/Traffic%20controls/Traffic%20controls.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/traffic/traffic-controls" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Traffic/Traffic%20controls/Traffic%20controls.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/traffic/traffic-overlay/screenshot.jpg" loading="lazy" alt="Traffic Overlay"><div class="card-body"><h5 class="card-title">Traffic Overlay</h5><p class="card-text">This sample shows how to show the traffic overlay over top of the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="traffic-overlay" data-bs-title="Traffic Overlay" data-bs-path="/traffic/traffic-overlay" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Traffic/Traffic%20Overlay/Traffic%20Overlay.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/traffic/traffic-overlay" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Traffic/Traffic%20Overlay/Traffic%20Overlay.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/traffic/traffic-overlay-options/screenshot.jpg" loading="lazy" alt="Traffic Overlay Options"><div class="card-body"><h5 class="card-title">Traffic Overlay Options</h5><p class="card-text">This sample shows how the different Traffic Options change how the traffic overlay is rendered on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="traffic-overlay-options" data-bs-title="Traffic Overlay Options" data-bs-path="/traffic/traffic-overlay-options" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Traffic/Traffic%20Overlay%20Options/Traffic%20Overlay%20Options.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/traffic/traffic-overlay-options" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Traffic/Traffic%20Overlay%20Options/Traffic%20Overlay%20Options.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="tutorials"></a><h3 class="fw-light">Tutorials <small class="text-muted">(5)</small></h3><p>These are the finished code samples for the tutorials in the Azure Maps documentation.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/tutorials/interactive-search/screenshot.jpg" loading="lazy" alt="Interactive Search Quickstart"><div class="card-body"><h5 class="card-title">Interactive Search Quickstart</h5><p class="card-text">This tutorial shows how to create an interactive search experience.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="interactive-search-quickstart" data-bs-title="Interactive Search Quickstart" data-bs-path="/tutorials/interactive-search" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tutorials/Interactive%20Search/Interactive%20Search%20Quickstart.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/tutorials/interactive-search" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tutorials/Interactive%20Search/Interactive%20Search%20Quickstart.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/tutorials/route/screenshot.jpg" loading="lazy" alt="Route to a destination"><div class="card-body"><h5 class="card-title">Route to a destination</h5><p class="card-text">This tutorial shows how to calculate a route and display it on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="route-to-a-destination" data-bs-title="Route to a destination" data-bs-path="/tutorials/route" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tutorials/Route/Route%20to%20a%20destination.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/tutorials/route" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tutorials/Route/Route%20to%20a%20destination.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/tutorials/search/screenshot.jpg" loading="lazy" alt="Search for points of interest"><div class="card-body"><h5 class="card-title">Search for points of interest</h5><p class="card-text">This tutorial shows how to search for points of interest and display them on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="search-for-points-of-interest" data-bs-title="Search for points of interest" data-bs-path="/tutorials/search" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tutorials/Search/Search%20for%20points%20of%20interest.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/tutorials/search" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tutorials/Search/Search%20for%20points%20of%20interest.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/tutorials/simple-store-locator/screenshot.jpg" loading="lazy" alt="Simple Store Locator"><div class="card-body"><h5 class="card-title">Simple Store Locator</h5><p class="card-text">This tutorial shows how to create a simple store locator.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="simple-store-locator" data-bs-title="Simple Store Locator" data-bs-path="/tutorials/simple-store-locator" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tutorials/Simple%20Store%20Locator/Simple%20Store%20Locator.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/tutorials/simple-store-locator" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tutorials/Simple%20Store%20Locator/Simple%20Store%20Locator.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/tutorials/truck-route/screenshot.jpg" loading="lazy" alt="Multiple routes by mode of travel"><div class="card-body"><h5 class="card-title">Multiple routes by mode of travel</h5><p class="card-text">This tutorial shows how to perform multiple routes for different modes of travel and display them on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="multiple-routes-by-mode-of-travel" data-bs-title="Multiple routes by mode of travel" data-bs-path="/tutorials/truck-route" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tutorials/Truck%20Route/Multiple%20routes%20by%20mode%20of%20travel.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/tutorials/truck-route" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tutorials/Truck%20Route/Multiple%20routes%20by%20mode%20of%20travel.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="vector-tiles"></a><h3 class="fw-light">Vector tiles <small class="text-muted">(3)</small></h3><p>Vector tiles are an efficient way to render larger data sets on the map.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/vector-tiles/vector-tile-bubble-layer/screenshot.jpg" loading="lazy" alt="Vector tile bubble layer"><div class="card-body"><h5 class="card-title">Vector tile bubble layer</h5><p class="card-text">This sample shows how to how to use a vector tile service to render point data on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="vector-tile-bubble-layer" data-bs-title="Vector tile bubble layer" data-bs-path="/vector-tiles/vector-tile-bubble-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Vector%20tiles/Vector%20tile%20bubble%20layer/Vector%20tile%20bubble%20layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/vector-tiles/vector-tile-bubble-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Vector%20tiles/Vector%20tile%20bubble%20layer/Vector%20tile%20bubble%20layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/vector-tiles/vector-tile-heat-map/screenshot.jpg" loading="lazy" alt="Vector tile heat map"><div class="card-body"><h5 class="card-title">Vector tile heat map</h5><p class="card-text">This sample shows how to how to use a vector tile service to render data as a heat map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="vector-tile-heat-map" data-bs-title="Vector tile heat map" data-bs-path="/vector-tiles/vector-tile-heat-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Vector%20tiles/Vector%20tile%20heat%20map/Vector%20tile%20heat%20map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/vector-tiles/vector-tile-heat-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Vector%20tiles/Vector%20tile%20heat%20map/Vector%20tile%20heat%20map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/vector-tiles/vector-tile-line-layer/screenshot.jpg" loading="lazy" alt="Vector tile line layer"><div class="card-body"><h5 class="card-title">Vector tile line layer</h5><p class="card-text">This sample shows how to how to use a vector tile service to render line data on the map.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="vector-tile-line-layer" data-bs-title="Vector tile line layer" data-bs-path="/vector-tiles/vector-tile-line-layer" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Vector%20tiles/Vector%20tile%20line%20layer/Vector%20tile%20line%20layer.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/vector-tiles/vector-tile-line-layer" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Vector%20tiles/Vector%20tile%20line%20layer/Vector%20tile%20line%20layer.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="w-100"><a name="weather"></a><h3 class="fw-light">Weather <small class="text-muted">(7)</small></h3><p>Azure Maps Weather Services has real-time weather and environmental information available anywhere in the world.</p></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/weather/current-air-quality/screenshot.jpg" loading="lazy" alt="Current Air Quality"><div class="card-body"><h5 class="card-title">Current Air Quality</h5><p class="card-text">This sample shows how to retrieve current Air Quality data using the Azure Maps Weather REST API.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="current-air-quality" data-bs-title="Current Air Quality" data-bs-path="/weather/current-air-quality" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Current%20Air%20Quality/Current%20Air%20Quality.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/weather/current-air-quality" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Current%20Air%20Quality/Current%20Air%20Quality.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/weather/forecasted-air-quality/screenshot.jpg" loading="lazy" alt="Forecasted Air Quality"><div class="card-body"><h5 class="card-title">Forecasted Air Quality</h5><p class="card-text">This sample shows how to retrieve forecasted Air Quality data using the Azure Maps Weather REST API.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="forecasted-air-quality" data-bs-title="Forecasted Air Quality" data-bs-path="/weather/forecasted-air-quality" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Forecasted%20Air%20Quality/Forecasted%20Air%20Quality.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/weather/forecasted-air-quality" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Forecasted%20Air%20Quality/Forecasted%20Air%20Quality.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/weather/get-current-weather-at-a-location/screenshot.jpg" loading="lazy" alt="Get current weather at a location"><div class="card-body"><h5 class="card-title">Get current weather at a location</h5><p class="card-text"> This sample shows how to retrieve weather data using the Azure Maps Current Conditions REST API.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="get-current-weather-at-a-location" data-bs-title="Get current weather at a location" data-bs-path="/weather/get-current-weather-at-a-location" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Get%20current%20weather%20at%20a%20location/Get%20current%20weather%20at%20a%20location.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/weather/get-current-weather-at-a-location" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Get%20current%20weather%20at%20a%20location/Get%20current%20weather%20at%20a%20location.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/weather/get-weather-along-a-route/screenshot.jpg" loading="lazy" alt="Get weather along a route"><div class="card-body"><h5 class="card-title">Get weather along a route</h5><p class="card-text">This sample shows how to retrieve weather data for all the waypoints along a route.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="get-weather-along-a-route" data-bs-title="Get weather along a route" data-bs-path="/weather/get-weather-along-a-route" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Get%20weather%20along%20a%20route/Get%20weather%20along%20a%20route.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/weather/get-weather-along-a-route" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Get%20weather%20along%20a%20route/Get%20weather%20along%20a%20route.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/weather/historical-weather/screenshot.jpg" loading="lazy" alt="Historical Weather"><div class="card-body"><h5 class="card-title">Historical Weather</h5><p class="card-text">This sample shows how to retrieve historical weather data using the Azure Maps Weather REST API.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="historical-weather" data-bs-title="Historical Weather" data-bs-path="/weather/historical-weather" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Historical%20Weather/Historical%20Weather.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/weather/historical-weather" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Historical%20Weather/Historical%20Weather.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/weather/show-weather-overlays-on-a-map/screenshot.jpg" loading="lazy" alt="Show weather overlays on a map"><div class="card-body"><h5 class="card-title">Show weather overlays on a map</h5><p class="card-text">This sample shows how to add weather radar and infrared overlays to the map as a tile layer.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="show-weather-overlays-on-a-map" data-bs-title="Show weather overlays on a map" data-bs-path="/weather/show-weather-overlays-on-a-map" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Show%20weather%20overlays%20on%20a%20map/Show%20weather%20overlays%20on%20a%20map.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/weather/show-weather-overlays-on-a-map" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Show%20weather%20overlays%20on%20a%20map/Show%20weather%20overlays%20on%20a%20map.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div><div class="col"><div class="card shadow-sm"><img class="card-img-top" src="/weather/tropical-storm-locations/screenshot.jpg" loading="lazy" alt="Tropical Storm Locations"><div class="card-body"><h5 class="card-title">Tropical Storm Locations</h5><p class="card-text">Get information of tropical storms, this includes; location coordinates, geometry, basin ID, date, wind details and wind radii.</p><div class="d-flex justify-content-between align-items-center"><div class="btn-group"><button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#sampleModal" data-bs-id="tropical-storm-locations" data-bs-title="Tropical Storm Locations" data-bs-path="/weather/tropical-storm-locations" data-bs-source="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Tropical%20Storm%20Locations/Tropical%20Storm%20Locations.html" aria-describedby="Run the sample in a new popup"><small>Run Sample</small></button><a href="/weather/tropical-storm-locations" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Open the sample in a new Tab"><small>Open In New Tab</small></a><a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Weather/Tropical%20Storm%20Locations/Tropical%20Storm%20Locations.html" target="_blank" class="btn btn-sm btn-outline-secondary" role="button" aria-describedby="Show the source code of the sample"><small>Source Code</small></a></div></div></div></div></div>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-2 pt-0 bg-white">
<div class="container pt-1">
<ul class="nav float-end">
<li class="nav-item"><a href="https://go.microsoft.com/fwlink/?LinkId=206977" class="nav-link px-2 text-black" title="Terms of use">Terms of use</a></li>
<li class="nav-item"><a href="https://go.microsoft.com/fwlink/?LinkID=521839" class="nav-link px-2 text-black" title="Privacy">Privacy</a></li>
<li class="nav-item"><a href="https://go.microsoft.com/fwlink/?linkid=2259814" class="nav-link px-2 text-black" title="Consumer Health Privacy">Consumer Health Privacy</a></li>
<li class="nav-item"><a href="#" onclick="siteConsent.manageConsent()" class="nav-link px-2 text-black" title="Manage cookies">Manage cookies</a></li>
</ul>
<p class="mb-0">Azure Maps © <a href="https://www.microsoft.com/" title="Microsoft Corporation" class="link-secondary">Microsoft</a>, but please <a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/" title="GitHub" class="link-secondary">download</a> and customize it for yourself!</p>
<p class="mb-0">New to Azure Maps? <a href="https://azuremaps.com" title="About Azure Maps" class="link-secondary">Visit the homepage</a> or read our <a href="https://aka.ms/AzureMapsGettingStarted" title="Getting started guide">getting started guide</a>.</p>
</div>
</footer>
<!-- Model -->
<div class="modal fade" id="sampleModal" tabindex="-1" aria-labelledby="sampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="sampleModalLabel">Sample</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="height: calc(100vh - 200px); min-height: 600px;">
<iframe id="sampleModalPath" src="" style="width: 100%; height: 100%; border: none;"></iframe>
</div>
<div class="modal-footer">
<a href="#" target="_blank" class="btn btn-info" id="sampleModalSource">Source Code</a>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/samples.min.js"></script>
<script>
window.WcpConsent && WcpConsent.init("en-US", "cookie-banner", function (err, _siteConsent) {
if (!err) {
siteConsent = _siteConsent;
startAnalytics();
} else {
console.log("Error initializing WcpConsent: " + err);
}
}, onConsentChanged, WcpConsent.themes.light);
function startAnalytics() {
var userConsent = siteConsent.getConsent();
if (userConsent.Analytics === true && userConsent.Advertising === true) {
(function (c, l, a, r, i, t, y) {
c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
})(window, document, "clarity", "script", "abqktua2pr");
}
}
function onConsentChanged(categoryPreferences) {
startAnalytics();
}
</script>
</body></html>