CODEWITHSUNDEEP
mapboxmapbox-gl-js
swade77
swade77

Reputation: 33

Hover effect for Countries

SO I am new to Mapbox but I am trying to make countries change color on hover. I have seen the hover tutorial on the Docs for states but I am having difficulty finding the right type, data, and source for countries. I have the Mapbox Countries v1 already added to the map from studio. When I try to run this code I get either that it can't find source:"country_boundaries" or "country-boundaries". I know it's something simple but appreciate the help. Thanks.

 var hoveredStateId = null;
 
map.on('load', function () {
==>>map.addSource('states', {
==>>'type': 'geojson',
==>>'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
});

map.addLayer({
'id': 'state-fills',
==>>'type': 'fill',
==>>'source': 'states',
'layout': {},
'paint': {
'fill-color': '#627BC1',
'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
1,
0.5
]
}
});
 
map.addLayer({
'id': 'state-borders',
==>>'type': 'line',
==>>'source': 'states',
'layout': {},
'paint': {
'line-color': '#627BC1',
'line-width': 2
}
});

Upvotes: 0

Views: 1613

Answers (1)

wittrup
wittrup

Reputation: 1565

Below you will find a complete example I've put together from findings at https://docs.mapbox.com/ and other places on the internet.

Please note that this uses Mapbox example token and http://geojson.xyz/ directly, you should download the data and host it yourself if used in an production environment.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Display a map on a webpage</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
        <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
        <style>
            body { margin: 0; padding: 0; }
            #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            mapboxgl.accessToken = 'pk.eyJ1Ijoid2l0dHJ1cCIsImEiOiJjbDc1NnFpaWIwYzZqM3VudGptdjUzNWZ1In0.R5FpTsM0CeaxLhq8i8Qmyg';
            const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-74.5, 40], // starting position [lng, lat]
            zoom: 0.31741259330687854
        });
        
        map.on('load', function () {
            map.addSource('cbs', {  // country-boundaries-simplified
                'type': 'geojson',
                'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_countries.geojson'
            });
            
            map.addLayer({
                "id": "cf",  // country-fills
                "type": "fill",
                "source": "cbs",
                "layout": {},
                "paint": {
                    "fill-color": "#627BC1",
                    "fill-opacity": 0.5
                }
            });
            
            map.addLayer({
                "id": "cb",  // country borders
                "type": "line",
                "source": "cbs",
                "layout": {},
                "paint": {
                    "line-color": "#627BC1",
                    "line-width": 2
                }
            });
            
            map.addLayer({
                "id": "cfh",  // country-fills-hover",
                "type": "fill",
                "source": "cbs",
                "layout": {},
                "paint": {
                    "fill-color": "#FFFFFF",
                    "fill-opacity": 1
                },
                "filter": ["==", "name", ""]
            });
            
            // When the user moves their mouse over the page, we look for features
            // at the mouse position (e.point) and within the states layer (states-fill).
            // If a feature is found, then we'll update the filter in the state-fills-hover
            // layer to only show that state, thus making a hover effect.
            map.on("mousemove", function(e) {
                var features = map.queryRenderedFeatures(e.point, { layers: ["cf"] });
                
                if (features.length) {
                    map.getCanvas().style.cursor = 'pointer';
                    map.setFilter("cfh", ["==", "name", features[0].properties.name]);
                    } else {
                    map.setFilter("cfh", ["==", "name", ""]);
                    map.getCanvas().style.cursor = '';
                }
            });
            
            // Reset the state-fills-hover layer's filter when the mouse leaves the map
            map.on("mouseout", function() {
                map.getCanvas().style.cursor = 'auto';
                map.setFilter("cfh", ["==", "name", ""]);
            });
            
            map.on("click", function(e) {
                var features = map.queryRenderedFeatures(e.point, { layers: ["cf"] });
                if (features.length) {
                    console.log(e, features[0].properties.name);
                }
            });
            
        });
        
    </script>
    
</body>
</html>

Upvotes: 1

Related Questions