Create and style features (4 of 4)

Add interactivity to your map by showing a city’s population count in a popup.

Prerequisites

Steps

Add mouse event handlers

1. Add a mouseenter event handler on the city-clusters layer. Change the cursor style to a pointer and ensure that the hovered feature is not a cluster.

   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
       map.on('mouseenter', 'city-clusters', (e) => {
         map.getCanvas().style.cursor = 'pointer';
         if (e.features[0].properties.cluster) { return }
   
       });
   
   

   Expand

2. Create variables for the population value and feature coordinates. Format the POPULATION property for readability and extract the coordinates from geometry.coordinates.

   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
       map.on('mouseenter', 'city-clusters', (e) => {
         map.getCanvas().style.cursor = 'pointer';
         if (e.features[0].properties.cluster) { return }
   
         const population = new Intl.NumberFormat().format(e.features[0].properties.POPULATION);
         const coordinates = e.features[0].geometry.coordinates.slice();
   
       });
   

   Expand

3. Add a mouseleave event handler on the city-clusters layer. Reset the cursor style back to default.

   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
       map.on('mouseleave', 'city-clusters', () => {
         map.getCanvas().style.cursor = '';
   
       });
   

   Expand

Add a popup

1. Create a Popup() 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
   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
       const popup = new maplibregl.Popup({
         closeButton: false,
         closeOnClick: false
       });
   
       map.on('mouseenter', 'city-clusters', (e) => {
         map.getCanvas().style.cursor = 'pointer';
         if (e.features[0].properties.cluster) { return }
   
         const population = new Intl.NumberFormat().format(e.features[0].properties.POPULATION);
         const coordinates = e.features[0].geometry.coordinates.slice();
   
       });
   
       map.on('mouseleave', 'city-clusters', () => {
         map.getCanvas().style.cursor = '';
   
       });
   

   Expand

2. Inside the mouseenter event, set the popup's position using setLngLat, define the content to show the city's 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
   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
       const popup = new maplibregl.Popup({
         closeButton: false,
         closeOnClick: false
       });
   
       map.on('mouseenter', 'city-clusters', (e) => {
         map.getCanvas().style.cursor = 'pointer';
         if (e.features[0].properties.cluster) { return }
   
         const population = new Intl.NumberFormat().format(e.features[0].properties.POPULATION);
         const coordinates = e.features[0].geometry.coordinates.slice();
   
         popup.setLngLat(coordinates).setHTML(`<b>Population</b>: ${population}`).addTo(map);
   
       });
   
       map.on('mouseleave', 'city-clusters', () => {
         map.getCanvas().style.cursor = '';
   
       });
   

   Expand

3. Inside the mouseleave event, remove the popup from the map so it doesn’t stay visible after leaving the feature.

   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
       const popup = new maplibregl.Popup({
         closeButton: false,
         closeOnClick: false
       });
   
       map.on('mouseenter', 'city-clusters', (e) => {
         map.getCanvas().style.cursor = 'pointer';
         if (e.features[0].properties.cluster) { return }
   
         const population = new Intl.NumberFormat().format(e.features[0].properties.POPULATION);
         const coordinates = e.features[0].geometry.coordinates.slice();
   
         popup.setLngLat(coordinates).setHTML(`<b>Population</b>: ${population}`).addTo(map);
   
       });
   
       map.on('mouseleave', 'city-clusters', () => {
         map.getCanvas().style.cursor = '';
   
         popup.remove();
   
       });
   

   Expand

Run the app

Run the app.

When you hover over a city, a popup should appear with the city's population.

Congratulations!

You have completed the Create and style features how-to. The application displays clustered U.S. cities with populations over 250,000. It allows you to zoom in on a cluster and hover over it to see its population.

What's next?

To explore additional ArcGIS capabilities, go to Tutorials.