Display a basemap style (3 of 3)

Use the MapLibre ArcGIS plugin to show places of interest in the basemap style and restrict map interactions.

Prerequisites

Steps

Restrict map boundaries

Prevent the map from being dragged too far outside your area of interest by setting maximum geographical bounds. This ensures the view remains within San Francisco.

1. Set the zoom level to 14 to focus the map on downtown San Francisco.

   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
       const map = new maplibregl.Map({
         container: "map",
         center: [-122.402, 37.789],
   
         zoom: 14,
   
       });
   

   Expand

2. Define the bounds as a southwest and northeast coordinate pair.

   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
       const bounds = [
         [-122.534, 37.727],
         [-122.191, 37.836]
       ];
   

   Expand

3. Pass the bounds array to the maxBounds property of the map.

   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
       const map = new maplibregl.Map({
         container: "map",
         center: [-122.402, 37.789],
   
         zoom: 14,
   
         maxBounds: bounds
   
       });
   

   Expand

Restrict map interaction

To minimize the amount of tile requests and control user navigation, you can restrict map interactions such as zooming, panning, tilting, and rotating.

1. Set map interaction preferences.
   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
       map.dragRotate.disable() // disable map rotation using right click + drag
       map.keyboard.disable(); // disable map rotation using keyboard
       map.touchZoomRotate.disableRotation() // disable map rotation using touch rotation gesture
       map.touchPitch.disable() // disable touch-based pitch
   

   Expand

Display places of interest

1. To display places of interest, such as parks, schools, landmarks, and businesses, add the places parameter to the basemap style object.

   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
         preferences: {
           places: 'all'
         }
   

   Expand

Run the app

Run the app.

The map should display the arcgis/streets style with places of interest in downtown San Francisco, California. The map restrictions limit the number of tiles the application consumes.

Congratulations!

You have completed the Display a basemap style how-to. The application uses the MapLibre ArcGIS plugin and an access token to display a basemap style with preferences. The map also restricts the map bounds and user interactions to minimize tile usage.

What's next?

To explore additional ArcGIS capabilities, go to Tutorials.