Display a map with a basemap session (3 of 4)

Use the MapLibre ArcGIS plugin to change the basemap style.

Prerequisites

Steps

Create a BasemapControl

To let users change the basemap style directly from the map UI, you can create a custom control that implements MapLibre's IControl.

1. Create a new BasemapControl that contains a button. This control will serve as the container for the UI elements you will add in the next step.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
       class BasemapControl {
         onAdd(map) {
           const container = document.createElement("div");
           container.innerHTML = `
             <div class="maplibregl-ctrl maplibregl-ctrl-group">
               <button id="basemap-btn" type="button" aria-label="Change basemap"></button>
               <div id="basemap-menu" style="display: none;"></div>
             </div>`;
   
           const button = container.querySelector("#basemap-btn");
           const menu = container.querySelector("#basemap-menu");
   
           // Open/close the menu when button is clicked
           button.addEventListener("click", () => {
             menu.style.display = menu.style.display === "none" ? "flex" : "none";
           });
   
           return container;
         }
       }
   
   

   Expand

2. Add CSS styling to control the layout and appearance of the basemap control and button.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
       html,
       body,
       #map {
         padding: 0;
         margin: 0;
         height: 100%;
         width: 100%;
         font-family: Arial, Helvetica, sans-serif;
         font-size: 14px;
         color: #323232;
       }
   
   
       #basemap-menu {
         position: absolute;
         top: 100%;
         right: 0;
         margin-right: 30px;
         white-space: nowrap;
         max-height: 200px;
         overflow-y: auto;
         background: white;
         z-index: 999;
         box-shadow: 0 2px 8px 0 #0000000a, 0 4px 16px 0 #00000014;
         flex-direction: column;
       }
   
       #basemap-menu div {
         cursor: pointer;
         padding: 6px 10px;
       }
   
       #basemap-menu div:hover {
         background: #eee;
       }
   
       .basemap-control button {
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 0;
         background: white;
         cursor: pointer;
       }
   
       #basemap-btn {
         width: 30px;
         height: 30px;
         background: url("/maplibre-gl-js//images/styles.svg") no-repeat center center;
         background-size: 16px 16px;
       }
   
   

   Expand

3. Use the MapLibre ArcGIS plugin to populate the basemap-menu with ArcGIS styles from the Basemap Styles service. Each style will appear as a clickable item that updates the basemap when selected.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
       class BasemapControl {
         onAdd(map) {
           const container = document.createElement("div");
           container.innerHTML = `
             <div class="maplibregl-ctrl maplibregl-ctrl-group">
               <button id="basemap-btn" type="button" aria-label="Change basemap"></button>
               <div id="basemap-menu" style="display: none;"></div>
             </div>`;
   
           const button = container.querySelector("#basemap-btn");
           const menu = container.querySelector("#basemap-menu");
   
           maplibreArcGIS.BasemapStyle.getSelf().then((styleResponse) => {
             styleResponse.styles
               .filter((s) => !s.deprecated && s.path.startsWith("arcgis/")) // exclude deprecated or non-ArcGIS styles
               .forEach((s) => {
                 const item = document.createElement("div");
                 item.textContent = s.name;
   
                 item.addEventListener("click", () => {
                   basemapStyle.updateStyle({ style: s.path });
                   menu.style.display = "none"
                 });
   
                 menu.appendChild(item);
               });
           });
   
           // Open/close the menu when button is clicked
           button.addEventListener("click", () => {
             menu.style.display = menu.style.display === "none" ? "flex" : "none";
           });
   
           return container;
         }
       }
   
   

   Expand

Attach the BasemapControl

1. Add the BasemapControl to the top right of your map, under the navigation control.
   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
       map.addControl(new BasemapControl(), "top-right");
   

   Expand

Run the app

Run the app.

The map should display a Basemap button on the top right. When you click the button, a selection list will open and allow you to change the basemap style.