Dynamic tiles masking on Leaflet maps. There is no sync when zooming for now, but I hope to add it after Leafle 0.8 will be available. Works only in firefox. Patterns used for creating masks.
xxxxxxxxxx<html><head> <meta charset=UTF-8 /> <title>Dynamic tile masking and more</title> <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' rel='stylesheet' /> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script> <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script> <style> .blur-control { background-color: #fff; box-shadow: rgba(0, 0, 0, 0.65) 0px 1px 5px 0px; } .dropdown-control { box-shadow: rgba(0, 0, 0, 0.65) 0px 1px 5px 0px; background-color: #fff; } .dropdown-control > label { background-color: #fff; border-radius: 4px; padding: 4px; display: block; } .blur-control > label { background-color: #fff; border-radius: 4px; cursor: pointer; display: block; padding: 4px; } .blur-control input { vertical-align: bottom; } </style></head><body> <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div> <script src="dtm.js"></script> <!--SVG filters for map container --> <svg> <defs> <filter id="grayscale"> <feColorMatrix type="saturate" values="0"/> </filter> <filter id="saturate"> <feColorMatrix type="saturate" values="10"/> </filter> <filter id="hue_rotate"> <feColorMatrix type="hueRotate" values="180"/> </filter> <filter id="luminance_mask"> <feColorMatrix type="luminanceToAlpha"/> </filter> <filter id="sepia"> <feColorMatrix type="matrix" values=".343 .669 .119 0 0 .249 .626 .130 0 0 .172 .334 .111 0 0 .000 .000 .000 1 0 "/> </filter> <pattern id="diagonalHatch" width="30" height="30" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse"> <line x1="0" y1="0" x2="0" y2="30" style="stroke:white; stroke-width:25" /> </pattern> <pattern id="diagonalHash" width="30" height="30" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse"> <g> <line x1="0" y1="0" x2="0" y2="30" style="stroke:white; stroke-width:15" /> <line x1="0" y1="0" x2="30" y2="0" style="stroke:white; stroke-width:15" /> </g> </pattern> </defs> </svg> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url
https://d3js.org/d3.v3.min.js
https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js
https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js