Leaflet Mask

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"  data-require="leaflet@0.7.3" data-semver="0.7.3" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js" data-require="leaflet@0.7.3" data-semver="0.7.3"></script>
    <script type="text/javascript" src="L.Mask.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

var map = L.map('map', {
  'center': [14.7053533,121.031448],
  'zoom': 13,
  'layers': [
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data &copy; OpenStreetMap contributors'
    })
  ]
});

var sanbartolome={type:"FeatureCollection",features:[{type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:[[[121.0207986831665,14.71238001066067],[121.02015495300293,14.71200643586981],[121.01968288421631,14.712338502382146],[121.01908206939697,14.712421518931281],[121.0184383392334,14.712172469189156],[121.0180950164795,14.711715877256967],[121.01775169372559,14.71113475887066],[121.01766586303711,14.710512130310955],[121.01783752441405,14.709681956134785],[121.01818084716797,14.708810269851188],[121.01886749267578,14.707648016057705],[121.01895332336426,14.70611217119577],[121.01818084716797,14.705198961020216],[121.01792335510252,14.704742354499942],[121.01783752441405,14.704161217547579],[121.01818084716797,14.703663098928693],[121.01818084716797,14.703497059136536],[121.0185670852661,14.703663098928693],[121.01912498474121,14.703331019218112],[121.01989746093749,14.703538569096404],[121.02054119110106,14.70370460885701],[121.02161407470703,14.703912158380186],[121.0215711593628,14.70436876663671],[121.02178573608397,14.704410276430858],[121.02195739746092,14.703497059136536],[121.02230072021484,14.702417797409819],[121.02380275726317,14.702293266867338],[121.02569103240967,14.702168736253803],[121.02646350860594,14.701878164546082],[121.02706432342528,14.700757384337317],[121.02805137634277,14.700259257953755],[121.02899551391602,14.699179980225122],[121.02981090545653,14.699179980225122],[121.03191375732423,14.699138469436718],[121.03272914886475,14.699076203239365],[121.03275060653685,14.699449800157279],[121.03339433670043,14.69963659837658],[121.03414535522461,14.699595087674995],[121.03498220443726,14.69976113043405],[121.03519678115845,14.69976113043405],[121.03528261184691,14.69984415176623],[121.03601217269896,14.699449800157279],[121.03624820709227,14.699179980225122],[121.03901624679565,14.69996868370533],[121.03953123092651,14.699512066248136],[121.0398530960083,14.699366778675191],[121.04068994522093,14.699781885770053],[121.04114055633545,14.699532821607814],[121.0413122177124,14.699283757161554],[121.04171991348267,14.699408289420186],[121.0417413711548,14.699574332321244],[121.04339361190797,14.700487566020588],[121.0443377494812,14.699532821607814],[121.04448795318604,14.699449800157279],[121.04633331298827,14.700549831815577],[121.04828596115112,14.699449800157279],[121.04929447174072,14.700051704958621],[121.04968070983888,14.700591342335706],[121.04944467544556,14.70121399919081],[121.04987382888793,14.702625348156174],[121.0497236251831,14.702791388611221],[121.04920864105225,14.70277063356125],[121.0489296913147,14.702293266867338],[121.04762077331542,14.70254232788131],[121.04611873626708,14.703642343961583],[121.0454750061035,14.704804619081676],[121.04521751403809,14.704991412720306],[121.04508876800537,14.705219715839354],[121.04195594787598,14.705240470656518],[121.0413122177124,14.707212169289635],[121.04124784469603,14.707648016057705],[121.03998184204102,14.708208389195038],[121.03970289230347,14.708104616500359],[121.03871583938597,14.708540461486441],[121.0380506515503,14.709308376725264],[121.03729963302611,14.709183850113313],[121.03691339492798,14.708976305602194],[121.03669881820677,14.70910083233254],[121.03644132614136,14.70910083233254],[121.03607654571533,14.709453657682731],[121.03358745574951,14.709744219307547],[121.03341579437256,14.710408358711632],[121.0334587097168,14.710532884624905],[121.03257894515991,14.710740427655768],[121.03169918060301,14.710761181948001],[121.03107690811157,14.71049137599503],[121.03081941604613,14.710636656165004],[121.0309910774231,14.711363055564133],[121.03090524673463,14.711757385653923],[121.03021860122679,14.71238001066067],[121.03002548217773,14.713210174572755],[121.0294461250305,14.714164859166916],[121.02940320968627,14.714621445974403],[121.02946758270264,14.714808231211153],[121.02918863296509,14.715327078251933],[121.02910280227661,14.715513862884555],[121.02882385253906,14.715700647357233],[121.0284376144409,14.715742154996123],[121.02777242660522,14.71607421582282],[121.02704286575317,14.71621949227558],[121.02564811706543,14.716862858260502],[121.0254120826721,14.71694587308808],[121.02513313293456,14.716904365678229],[121.02459669113159,14.71644778364871],[121.02384567260741,14.716800597119072],[121.02365255355836,14.716759089681588],[121.02330923080444,14.716364768631571],[121.02230072021484,14.715887431669993],[121.02191448211669,14.715534616722733],[121.0215711593628,14.712919617562784],[121.02139949798585,14.712712076604523],[121.02120637893677,14.71252528957328],[121.0207986831665,14.71238001066067]]]}}]};
var sanbartolome1={type:"FeatureCollection",features:[{type:"Feature",properties:{},geometry:{type:"Polygon",coordinates:[[[121.04564666748045,14.730808905988164],[121.04556083679198,14.729376986829836],[121.04515314102171,14.729376986829836],[121.04483127593993,14.729127956450599],[121.0447883605957,14.727218714090242],[121.04315757751465,14.726803659190255],[121.04324340820312,14.726222581002583],[121.04485273361206,14.726720648115412],[121.04867219924928,14.727197961364011],[121.04860782623291,14.720868287675927],[121.04712724685668,14.720951300978989],[121.04708433151245,14.719457056689269],[121.04712724685668,14.718917465957539],[121.04755640029907,14.718232598875604],[121.04815721511841,14.718792944829868],[121.04913353919983,14.717682628298446],[121.05102181434631,14.719311782392825],[121.05281352996825,14.717039264731355],[121.05459451675416,14.718481641699666],[121.05769515037538,14.714445037548428],[121.05461597442627,14.711944173342486],[121.05950832366945,14.706081039093599],[121.05897188186644,14.7055621700703],[121.05849981307982,14.70578009521028],[121.0579526424408,14.705302735096184],[121.0577917098999,14.705167828787806],[121.05709433555603,14.70540650912283],[121.05606436729431,14.70654802016014],[121.05544209480286,14.70749235659759],[121.0555064678192,14.707824429978333],[121.054927110672,14.708540461486441],[121.05369329452513,14.708696120199113],[121.05327486991882,14.70891404221037],[121.05248093605042,14.709080077882422],[121.05218052864075,14.709557429735995],[121.05213761329652,14.709692333331473],[121.05172991752623,14.709412148847598],[121.05132222175597,14.709723464918598],[121.05082869529724,14.710532884624905],[121.0497236251831,14.710325341396656],[121.04926228523253,14.710460244517469],[121.04888677597046,14.710180061019438],[121.04822158813475,14.709671578937602],[121.04772806167603,14.710014026184215],[121.04685902595521,14.709982894638525],[121.04612946510314,14.710045157725437],[121.04605436325075,14.710211192536972],[121.04620456695555,14.710615901860939],[121.04678392410278,14.710916839076834],[121.04711651802063,14.71135267844687],[121.04681611061095,14.711985681695994],[121.04615092277527,14.71256679781626],[121.04567885398863,14.712857355296048],[121.04526042938232,14.712940371647761],[121.04483127593993,14.712784715962366],[121.04371547698976,14.712037567126806],[121.04352235794067,14.712016812955968],[121.04323267936708,14.712317748239931],[121.04296445846558,14.712763961862594],[121.0429000854492,14.713013010929627],[121.04325413703918,14.713625255344366],[121.04298591613768,14.714465791488294],[121.04295372962952,14.714943131560467],[121.04322195053099,14.715347832107897],[121.04357600212097,14.715596878225487],[121.04401588439941,14.715783662627086],[121.0443377494812,14.715939316172935],[121.04429483413696,14.716115723390619],[121.04398369789122,14.71654117550522],[121.04397296905518,14.716873235115676],[121.04389786720276,14.71720529422065],[121.04364037513733,14.718253352455127],[121.04346871376036,14.71875143777152],[121.04325413703918,14.718803321593224],[121.04286789894103,14.718595786232333],[121.04257822036742,14.718377873890866],[121.04224562644958,14.718346743538586],[121.04183793067932,14.718429757801436],[121.04144096374512,14.718917465957539],[121.04116201400757,14.719073117267152],[121.04107618331909,14.719560823984638],[121.04078650474548,14.720214556810097],[121.04055047035217,14.721283353875215],[121.04040026664732,14.721771055649866],[121.04033589363098,14.721905951692825],[121.04169845581053,14.722227626535446],[121.04141950607301,14.723846370153696],[121.04120492935179,14.725734889185244],[121.04133367538451,14.726471614701252],[121.04179501533508,14.72843274513597],[121.04243874549866,14.728961936039699],[121.04518532752991,14.730757025023513],[121.04564666748045,14.730808905988164]]]}}]};

var coordinates = sanbartolome.features[0].geometry.coordinates[0];
var coordinates1 = sanbartolome1.features[0].geometry.coordinates[0];
var latLngs = [];
for (i=0; i<coordinates.length; i++) {
    latLngs.push(new L.LatLng(coordinates[i][1], coordinates[i][0]));
}
for (i=0; i<coordinates1.length; i++) {
    latLngs.push(new L.LatLng(coordinates1[i][1], coordinates1[i][0]));
}

L.mask(latLngs).addTo(map);

var options = {
  style: function (feature) {
    return {
      "color": "yellow",
      "weight": 5,
      "opacity": 1,
      "fillColor": "red",
      "fillOpacity": 0.1
    };
  }
};

var layerpoly = new L.geoJson(sanbartolome.features,options).addTo(map);
var layerpoly1 = new L.geoJson(sanbartolome1.features,options).addTo(map);

body {
  margin: 0;
}
html, body, #map {
  height: 100%;
}

Leaflet is an open source JavaScript library for **mobile-friendly interactive maps**.
It is developed by [Vladimir Agafonkin][] of [MapBox][] with a team of dedicated [contributors][].
Weighing just about 30 KB of gzipped JS code, it has all the [features][] most developers ever need for online maps.

Leaflet is designed with *simplicity*, *performance* and *usability* in mind.
It works efficiently across all major desktop and mobile platforms out of the box,
taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too.
It can be extended with a huge amount of [plugins][],
has a beautiful, easy to use and [well-documented][] API
and a simple, readable [source code][] that is a joy to [contribute][] to.

For more info, docs and tutorials, check out the [official website][].<br>
For **Leaflet downloads** (including the built master version), check out the [download page][].

We're happy to meet new contributors.
If you want to **get involved** with Leaflet development, check out the [contribution guide][contribute].
Let's make the best mapping library that will ever exist,
and push the limits of what's possible with online maps!

 [Vladimir Agafonkin]: http://agafonkin.com/en
 [contributors]: https://github.com/Leaflet/Leaflet/graphs/contributors
 [features]: http://leafletjs.com/features.html
 [plugins]: http://leafletjs.com/plugins.html
 [well-documented]: http://leafletjs.com/reference.html "Leaflet API reference"
 [source code]: https://github.com/Leaflet/Leaflet "Leaflet GitHub repository"
 [hosted on GitHub]: http://github.com/Leaflet/Leaflet
 [contribute]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"
 [official website]: http://leafletjs.com
 [download page]: http://leafletjs.com/download.html
 [MapBox]: https://mapbox.com

L.Mask = L.Polygon.extend({

    options: {
        stroke: false,
        color: '#333',
        fillOpacity: 0.5,
        clickable: true,
        outerBounds: new L.LatLngBounds([-90, -360], [90, 360])
    },

    initialize: function (latLngs, options) {

         var outerBoundsLatLngs = [
            this.options.outerBounds.getSouthWest(),
            this.options.outerBounds.getNorthWest(),
            this.options.outerBounds.getNorthEast(),
            this.options.outerBounds.getSouthEast()
        ];

        L.Polygon.prototype.initialize.call(this, [outerBoundsLatLngs, latLngs], options);  
    }

});

L.mask = function (latLngs, options) {
    return new L.Mask(latLngs, options);
};