Mask a feature

Show only a certain feature by inverting a shape

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Mask a feature</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>

<script src='/mapbox.js/assets/data/us-states.js'></script>
<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([32.7872, -86.6381], 6);

// First: choose our state. You could also load your own data.
// The important part is that what you get out is a GeoJSON Feature
// object, or something you turn into one.
var state = statesData.features[0];

// coordinate rings in geojson fit inside of each other: the donut
// and then the hole, let's make the outer donut everything and the
// inner donut the state.
state.geometry.coordinates = [
    // the world
    [
        [-180, -90],
        [-180, 90],
        [180, 90],
        [180, -90],
        [-180, -90]
    ],
    // the state
    state.geometry.coordinates[0]
];

// statesData comes from the 'us-states.js' script included above
var statesLayer = L.geoJson(state, {
  fillOpacity: 1,
  fillColor: '#fff',
  weight: 0
}).addTo(map);
</script>
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example