> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Style layers based on geographic inclusion
This example shows how to use a [`'within'` expression](https://docs.mapbox.com/style-spec/reference/expressions/#within) to dynamically style a [circle layer](https://docs.mapbox.com/style-spec/reference/layers/#circle) based on if a point feature falls within a polygon. Points falling within the state of Colorado are colored `#f55442` and those outside of its borders are colored `#484848`.
> Example code:
**JavaScript**
```html
Style layers based on geographic inclusion
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/standard',
config: {
basemap: {
theme: 'monochrome'
}
},
center: [-107.1714, 39.1402],
zoom: 5
});
const coloradoJSON = {
type: 'Polygon',
coordinates: [
[
[-109.05, 41.00069],
[-109.05, 36.99302],
[-102.04209, 36.99302],
[-102.04209, 41.00069],
[-109.05, 41.00069],
[-109.05, 41.00069]
]
]
};
mapRef.current.on('load', () => {
mapRef.current.addSource('colorado', {
type: 'geojson',
data: {
type: 'Feature',
geometry: coloradoJSON
}
});
mapRef.current.addLayer({
id: 'colorado',
type: 'fill',
source: 'colorado',
layout: {},
paint: {
'fill-color': '#088',
'fill-opacity': 0.25
}
});
mapRef.current.addSource('points', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
coordinates: [-104.81437, 41.1369],
type: 'Point'
}
},
{
type: 'Feature',
properties: {},
geometry: {
coordinates: [-104.975, 39.73785],
type: 'Point'
}
},
{
type: 'Feature',
properties: {},
geometry: {
coordinates: [-109.54677, 38.57404],
type: 'Point'
}
},
{
type: 'Feature',
properties: {},
geometry: {
coordinates: [-108.55777, 39.06323],
type: 'Point'
}
},
{
type: 'Feature',
properties: {},
geometry: {
coordinates: [-105.58906, 41.31104],
type: 'Point'
}
}
]
}
});
mapRef.current.addLayer({
id: 'points',
type: 'circle',
source: 'points',
layout: {},
paint: {
'circle-color': [
'case',
['within', coloradoJSON],
'#f55442',
'#484848'
],
'circle-radius': 10
}
});
});
}, []);
return ;
};
export default MapboxExample;
```