Create and style vector tiles (7 of 7)

Add interactivity to your map by showing a state's population count in a popup.

Prerequisites

Steps

Add a click handler

1. Add a click event handler to the layer USA_States_Population_polygons/39,538,223/1. This layer contains polygon features for U.S. states, each with STATE_NAME and POPULATION attributes.

   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
       map.on("click", "USA_States_Population_polygons/39,538,223/1", (e) => {
   
       });
   

   Expand

2. Inside the click event, create variables to store the state’s name and population. Format the population for readability.

   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
       map.on("click", "USA_States_Population_polygons/39,538,223/1", (e) => {
   
         const name = e.features[0].properties.STATE_NAME;
         const population = new Intl.NumberFormat().format(e.features[0].properties.POPULATION);
   
       });
   

   Expand

Add a popup

1. Inside the click event, create a Popup() object. Set its position using setLngLat, define the content to show the state's name and population count, and add it to 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
   73
   74
   75
   76
   77
   78
   79
   80
   81
       map.on("click", "USA_States_Population_polygons/39,538,223/1", (e) => {
   
         const name = e.features[0].properties.STATE_NAME;
         const population = new Intl.NumberFormat().format(e.features[0].properties.POPULATION);
   
         new maplibregl.Popup()
           .setLngLat(e.lngLat)
           .setHTML(`<b>Name</b>: ${name} <br/><b>Population</b>: ${population}`)
           .addTo(map);
   
       });
   

   Expand

Run the app

Run the app.

When you click on a state, a popup should appear with the state’s name and population.

Congratulations!

You have completed the Create and style vector tiles how-to. The application displays styled vector tiles of U.S. states on a map. It allows you to click on a state and view a popup that shows the state's population.

What's next?

To explore additional ArcGIS capabilities, go to Tutorials.