Highlight polygon on hover and click in TileMill

Question

I have created a MapBox.js map with several layers of polygons each with hover/click interactivity to show attributes about each polygon. I want the polygons to become highlighted upon a user hover/click with a darker border to help the user identify a polygon. Something similar to this example. What code would I need to add to make this happen? I'm assuming I need to create a CSS file to define the color and size of the outline but I don't know how to make it work with my JavaScript code. My current source code is here.

Answer 1

No, if you are loading leaflet tile layers, it is not possible to change their style once loaded.

The key difference between your code and the example code you linked to is that the example code renders geoJSON data directly in the browser. Notice this line of code:

var featureLayer = new L.GeoJSON();
//...
map.addLayer(featureLayer);

You are loading you data as a bunch of tile layers, which are pre-rendered .png images, and so can't be restyled in the browser.

With tile layers, all your data is first converted into small png images (either on a server, or locally with something like MapBox's TileMill) for fast load times and nearly no limit on data size; however as a raster source, you lose the ability to manipulate the data itself.

With feature layers loaded from a geojson, you reserve the ability to manipulate your data as a vector--style it in browser, run queries over it, etc--but loading even moderately sized datasets can become an issue.

If you want to be able to restyle your polygons on hover, look at using L.geoJSON() or L.mapbox.featureLayer().