├── .gitignore ├── Cakefile ├── README.md ├── dist ├── leaflet.css.js └── leaflet.css.min.js ├── gh-fork-ribbon.css ├── gh-fork-ribbon.ie.css ├── index.html ├── package.json ├── script.js ├── sprite.js ├── sprites.png └── src ├── leaflet.css ├── leaflet.css.coffee └── leaflet.ie.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ~* 3 | .c9revisions 4 | node_modules -------------------------------------------------------------------------------- /Cakefile: -------------------------------------------------------------------------------- 1 | fs = require 'fs' 2 | coffee = require 'coffee-script' 3 | uglifyjs = require 'uglify-js' 4 | cssc = require 'css-condense' 5 | async = require 'async' 6 | 7 | task 'build', 'build it', () -> 8 | rf = (file, cb)-> 9 | fs.readFile "./src/"+file, "utf8",cb 10 | async.map ["leaflet.css","leaflet.ie.css","leaflet.css.coffee"],rf, (e,files)-> 11 | unless e 12 | css = JSON.stringify [cssc.compress(files[0]),cssc.compress(files[1])] 13 | cs = coffee.compile "cssFiles = #{ css }\n#{ files[2] }" 14 | fs.writeFile './dist/leaflet.css.js', cs 15 | console.log "compliled" 16 | ast = uglifyjs.parse cs 17 | ast.figure_out_scope(); 18 | ast.compute_char_frequency(); 19 | ast.mangle_names(); 20 | fs.writeFile './dist/leaflet.css.min.js', "var css = #{ css };#{ ast.print_to_string() }" 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Leaflet CSS 2 | ========== 3 | 4 | small library to add the css for leaflet without having to bother including ugly conditional comments 5 | 6 | to use instead of including the css files for leaflet in th head, include this after you include leaflet, then it includes it'self automatically 7 | 8 | if you want to call more css in the same way, like maybe for your own plugin, you can do 9 | 10 | ```javascript 11 | L.css(["string of css (optional)","string of css for internet explorer, (also optional)"]); 12 | ``` 13 | build with 14 | ```bash 15 | npm install #install dependencies 16 | cake build # if that gets you an error try this first 17 | npm install -g coffee-script # you may need a sudo 18 | ``` 19 | 20 | demo includes [leaflet.sprite](https://github.com/calvinmetcalf/leaflet.sprite) -------------------------------------------------------------------------------- /dist/leaflet.css.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var LCCS, cssFiles, 3 | __slice = [].slice; 4 | 5 | cssFiles = [".leaflet-image-layer,.leaflet-layer,.leaflet-map-pane,.leaflet-marker-icon,.leaflet-marker-pane,.leaflet-marker-shadow,.leaflet-overlay-pane,.leaflet-overlay-pane svg,.leaflet-popup-pane,.leaflet-shadow-pane,.leaflet-tile,.leaflet-tile-pane,.leaflet-zoom-box{left:0;position:absolute;top:0}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile{-webkit-user-select:none;-moz-user-select:none;user-select:none}.leaflet-container img{max-width:none!important}.leaflet-container img.leaflet-image-layer{max-width:15000px!important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-bottom,.leaflet-top{pointer-events:none;position:absolute;z-index:1000}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{clear:both;float:left;pointer-events:auto;position:relative;z-index:7}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{float:right;margin-right:10px}.leaflet-fade-anim .leaflet-popup,.leaflet-fade-anim .leaflet-tile{opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup,.leaflet-fade-anim .leaflet-tile-loaded{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0,0,0.25,1);-moz-transition:-moz-transform 0.25s cubic-bezier(0,0,0.25,1);-o-transition:-o-transform 0.25s cubic-bezier(0,0,0.25,1);transition:transform 0.25s cubic-bezier(0,0,0.25,1)}.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated,.leaflet-zoom-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-control,.leaflet-popup-pane{cursor:auto}.leaflet-dragging,.leaflet-dragging .leaflet-clickable,.leaflet-dragging .leaflet-container{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container a{color:#0078a8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{background:white;border:2px dotted #05f;height:0;opacity:0.5;width:0}.leaflet-container{background:#ddd;cursor:-webkit-grab;cursor:-moz-grab;font:12px/1.5 \"Helvetica Neue\" , Arial, Helvetica, sans-serif;outline:0;overflow:hidden;-ms-touch-action:none}.leaflet-bar{border:1px solid #888;-webkit-border-radius:5px;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,0.4)}.leaflet-bar-part{background-color:rgba(255,255,255,0.8);border-bottom:1px solid #aaa}.leaflet-bar-part-top{-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.leaflet-bar-part-bottom{border-bottom:0;-webkit-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.leaflet-touch .leaflet-bar{-webkit-border-radius:10px;border-radius:10px}.leaflet-touch .leaflet-bar-part{border-bottom:4px solid rgba(0,0,0,0.3)}.leaflet-touch .leaflet-bar-part-top{-webkit-border-radius:7px 7px 0 0;border-radius:7px 7px 0 0}.leaflet-touch .leaflet-bar-part-bottom{border-bottom:0;-webkit-border-radius:0 0 7px 7px;border-radius:0 0 7px 7px}.leaflet-container .leaflet-control-zoom{margin-left:13px;margin-top:12px}.leaflet-control-zoom a{color:black;height:22px;text-align:center;text-decoration:none;width:22px}.leaflet-control-layers-toggle,.leaflet-control-zoom a{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-control-zoom a:hover{background-color:#fff;color:#777}.leaflet-control-zoom-in{font:bold 18px/24px Arial,Helvetica,sans-serif}.leaflet-control-zoom-out{font:bold 23px/20px Tahoma,Verdana,sans-serif}.leaflet-control-zoom a.leaflet-control-zoom-disabled{background-color:rgba(255,255,255,0.8);color:#bbb;cursor:default}.leaflet-touch .leaflet-control-zoom a{height:30px;width:30px}.leaflet-touch .leaflet-control-zoom-in{font-size:24px;line-height:29px}.leaflet-touch .leaflet-control-zoom-out{font-size:28px;line-height:24px}.leaflet-control-layers{background:#f8f8f9;-webkit-border-radius:8px;border-radius:8px;box-shadow:0 1px 7px rgba(0,0,0,0.4)}.leaflet-control-layers-toggle{background-image:url(images/layers.png);height:36px;width:36px}.leaflet-touch .leaflet-control-layers-toggle{height:44px;width:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{background:#fff;color:#333;padding:6px 10px 6px 6px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label,.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-control-layers-separator{border-top:1px solid #ddd;height:0;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background-color:rgba(255,255,255,0.7);box-shadow:0 0 5px #bbb;margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{color:#333;padding:0 5px}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{background-color:rgba(255,255,255,0.5);border:2px solid #777;border-top:0;box-shadow:0 -1px 5px rgba(0,0,0,0.2);color:black;font-size:11px;line-height:1.1;overflow:hidden;padding:2px 5px 1px;text-shadow:1px 1px 1px #fff;white-space:nowrap}.leaflet-control-scale-line:not(:first-child){border-bottom:0;border-top:2px solid #777;box-shadow:0 2px 5px rgba(0,0,0,0.2);margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-control-zoom{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-control-zoom{border:4px solid rgba(0,0,0,0.3)}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{-webkit-border-radius:20px;border-radius:20px;padding:1px;text-align:left}.leaflet-popup-content{line-height:1.4;margin:14px 20px}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{height:20px;margin:0 auto;overflow:hidden;position:relative;width:40px}.leaflet-popup-tip{height:15px;margin:-8px auto 0;padding:1px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);width:15px}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{background:transparent;color:#c3c3c3;font:16px/14px Tahoma,Verdana,sans-serif;font-weight:bold;height:14px;padding:4px 5px 0 0;position:absolute;right:0;text-align:center;text-decoration:none;top:0;width:18px}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{border-bottom:1px solid #ddd;border-top:1px solid #ddd;overflow:auto}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-editing-icon{-webkit-border-radius:2px;border-radius:2px}", ".leaflet-vml-shape{height:1px;width:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{display:inline}.leaflet-popup-tip{filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678);-ms-filter:\"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)\";margin:0 auto;_margin-top:-3px;width:21px;_width:27px}.leaflet-popup-tip-container{margin-top:-1px}.leaflet-popup-content-wrapper,.leaflet-popup-tip{border:1px solid #999}.leaflet-popup-content-wrapper{zoom:1}.leaflet-control-layers,.leaflet-control-zoom{border:3px solid #999}.leaflet-control-zoom a{background-color:#eee}.leaflet-control-zoom a:hover{background-color:#fff}.leaflet-control-attribution,.leaflet-control-layers,.leaflet-control-scale-line{background:white}.leaflet-zoom-box{filter:alpha(opacity=50)}.leaflet-control-attribution{border-left:1px solid #bbb;border-top:1px solid #bbb}"]; 6 | 7 | LCCS = (function() { 8 | 9 | function LCCS(css) { 10 | var imagePath; 11 | imagePath = L.Icon.Default.imagePath; 12 | css[0] = css[0].replace("url(images", "url(" + imagePath); 13 | this.addStyle(css); 14 | } 15 | 16 | LCCS.prototype.addStyle = function(styles) { 17 | var head, styleElt, styleSheet; 18 | if (document.createStyleSheet) { 19 | styleSheet = document.createStyleSheet(); 20 | styleSheet.cssText = styles.join("\n"); 21 | } else { 22 | head = document.getElementsByTagName("head")[0]; 23 | styleElt = document.createElement("style"); 24 | head.appendChild(styleElt); 25 | styleElt.innerHTML = styles[0]; 26 | } 27 | return true; 28 | }; 29 | 30 | return LCCS; 31 | 32 | })(); 33 | 34 | L.CSS = LCCS; 35 | 36 | L.css = function() { 37 | var params; 38 | params = 1 <= arguments.length ? __slice.call(arguments, 0) : []; 39 | return (function(func, args, ctor) { 40 | ctor.prototype = func.prototype; 41 | var child = new ctor, result = func.apply(child, args); 42 | return Object(result) === result ? result : child; 43 | })(L.CSS, params, function(){}); 44 | }; 45 | 46 | L.css(cssFiles); 47 | 48 | }).call(this); 49 | -------------------------------------------------------------------------------- /dist/leaflet.css.min.js: -------------------------------------------------------------------------------- 1 | var css = [".leaflet-image-layer,.leaflet-layer,.leaflet-map-pane,.leaflet-marker-icon,.leaflet-marker-pane,.leaflet-marker-shadow,.leaflet-overlay-pane,.leaflet-overlay-pane svg,.leaflet-popup-pane,.leaflet-shadow-pane,.leaflet-tile,.leaflet-tile-pane,.leaflet-zoom-box{left:0;position:absolute;top:0}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile{-webkit-user-select:none;-moz-user-select:none;user-select:none}.leaflet-container img{max-width:none!important}.leaflet-container img.leaflet-image-layer{max-width:15000px!important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-bottom,.leaflet-top{pointer-events:none;position:absolute;z-index:1000}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{clear:both;float:left;pointer-events:auto;position:relative;z-index:7}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{float:right;margin-right:10px}.leaflet-fade-anim .leaflet-popup,.leaflet-fade-anim .leaflet-tile{opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup,.leaflet-fade-anim .leaflet-tile-loaded{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0,0,0.25,1);-moz-transition:-moz-transform 0.25s cubic-bezier(0,0,0.25,1);-o-transition:-o-transform 0.25s cubic-bezier(0,0,0.25,1);transition:transform 0.25s cubic-bezier(0,0,0.25,1)}.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated,.leaflet-zoom-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-control,.leaflet-popup-pane{cursor:auto}.leaflet-dragging,.leaflet-dragging .leaflet-clickable,.leaflet-dragging .leaflet-container{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container a{color:#0078a8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{background:white;border:2px dotted #05f;height:0;opacity:0.5;width:0}.leaflet-container{background:#ddd;cursor:-webkit-grab;cursor:-moz-grab;font:12px/1.5 \"Helvetica Neue\" , Arial, Helvetica, sans-serif;outline:0;overflow:hidden;-ms-touch-action:none}.leaflet-bar{border:1px solid #888;-webkit-border-radius:5px;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,0.4)}.leaflet-bar-part{background-color:rgba(255,255,255,0.8);border-bottom:1px solid #aaa}.leaflet-bar-part-top{-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.leaflet-bar-part-bottom{border-bottom:0;-webkit-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.leaflet-touch .leaflet-bar{-webkit-border-radius:10px;border-radius:10px}.leaflet-touch .leaflet-bar-part{border-bottom:4px solid rgba(0,0,0,0.3)}.leaflet-touch .leaflet-bar-part-top{-webkit-border-radius:7px 7px 0 0;border-radius:7px 7px 0 0}.leaflet-touch .leaflet-bar-part-bottom{border-bottom:0;-webkit-border-radius:0 0 7px 7px;border-radius:0 0 7px 7px}.leaflet-container .leaflet-control-zoom{margin-left:13px;margin-top:12px}.leaflet-control-zoom a{color:black;height:22px;text-align:center;text-decoration:none;width:22px}.leaflet-control-layers-toggle,.leaflet-control-zoom a{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-control-zoom a:hover{background-color:#fff;color:#777}.leaflet-control-zoom-in{font:bold 18px/24px Arial,Helvetica,sans-serif}.leaflet-control-zoom-out{font:bold 23px/20px Tahoma,Verdana,sans-serif}.leaflet-control-zoom a.leaflet-control-zoom-disabled{background-color:rgba(255,255,255,0.8);color:#bbb;cursor:default}.leaflet-touch .leaflet-control-zoom a{height:30px;width:30px}.leaflet-touch .leaflet-control-zoom-in{font-size:24px;line-height:29px}.leaflet-touch .leaflet-control-zoom-out{font-size:28px;line-height:24px}.leaflet-control-layers{background:#f8f8f9;-webkit-border-radius:8px;border-radius:8px;box-shadow:0 1px 7px rgba(0,0,0,0.4)}.leaflet-control-layers-toggle{background-image:url(images/layers.png);height:36px;width:36px}.leaflet-touch .leaflet-control-layers-toggle{height:44px;width:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{background:#fff;color:#333;padding:6px 10px 6px 6px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label,.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-control-layers-separator{border-top:1px solid #ddd;height:0;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background-color:rgba(255,255,255,0.7);box-shadow:0 0 5px #bbb;margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{color:#333;padding:0 5px}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{background-color:rgba(255,255,255,0.5);border:2px solid #777;border-top:0;box-shadow:0 -1px 5px rgba(0,0,0,0.2);color:black;font-size:11px;line-height:1.1;overflow:hidden;padding:2px 5px 1px;text-shadow:1px 1px 1px #fff;white-space:nowrap}.leaflet-control-scale-line:not(:first-child){border-bottom:0;border-top:2px solid #777;box-shadow:0 2px 5px rgba(0,0,0,0.2);margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-control-zoom{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-control-zoom{border:4px solid rgba(0,0,0,0.3)}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{-webkit-border-radius:20px;border-radius:20px;padding:1px;text-align:left}.leaflet-popup-content{line-height:1.4;margin:14px 20px}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{height:20px;margin:0 auto;overflow:hidden;position:relative;width:40px}.leaflet-popup-tip{height:15px;margin:-8px auto 0;padding:1px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);width:15px}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{background:transparent;color:#c3c3c3;font:16px/14px Tahoma,Verdana,sans-serif;font-weight:bold;height:14px;padding:4px 5px 0 0;position:absolute;right:0;text-align:center;text-decoration:none;top:0;width:18px}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{border-bottom:1px solid #ddd;border-top:1px solid #ddd;overflow:auto}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-editing-icon{-webkit-border-radius:2px;border-radius:2px}",".leaflet-vml-shape{height:1px;width:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{display:inline}.leaflet-popup-tip{filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678);-ms-filter:\"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)\";margin:0 auto;_margin-top:-3px;width:21px;_width:27px}.leaflet-popup-tip-container{margin-top:-1px}.leaflet-popup-content-wrapper,.leaflet-popup-tip{border:1px solid #999}.leaflet-popup-content-wrapper{zoom:1}.leaflet-control-layers,.leaflet-control-zoom{border:3px solid #999}.leaflet-control-zoom a{background-color:#eee}.leaflet-control-zoom a:hover{background-color:#fff}.leaflet-control-attribution,.leaflet-control-layers,.leaflet-control-scale-line{background:white}.leaflet-zoom-box{filter:alpha(opacity=50)}.leaflet-control-attribution{border-left:1px solid #bbb;border-top:1px solid #bbb}"];(function(){var e,t,l=[].slice;t=['.leaflet-image-layer,.leaflet-layer,.leaflet-map-pane,.leaflet-marker-icon,.leaflet-marker-pane,.leaflet-marker-shadow,.leaflet-overlay-pane,.leaflet-overlay-pane svg,.leaflet-popup-pane,.leaflet-shadow-pane,.leaflet-tile,.leaflet-tile-pane,.leaflet-zoom-box{left:0;position:absolute;top:0}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile{-webkit-user-select:none;-moz-user-select:none;user-select:none}.leaflet-container img{max-width:none!important}.leaflet-container img.leaflet-image-layer{max-width:15000px!important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-bottom,.leaflet-top{pointer-events:none;position:absolute;z-index:1000}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{clear:both;float:left;pointer-events:auto;position:relative;z-index:7}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{float:right;margin-right:10px}.leaflet-fade-anim .leaflet-popup,.leaflet-fade-anim .leaflet-tile{opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup,.leaflet-fade-anim .leaflet-tile-loaded{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0,0,0.25,1);-moz-transition:-moz-transform 0.25s cubic-bezier(0,0,0.25,1);-o-transition:-o-transform 0.25s cubic-bezier(0,0,0.25,1);transition:transform 0.25s cubic-bezier(0,0,0.25,1)}.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated,.leaflet-zoom-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-control,.leaflet-popup-pane{cursor:auto}.leaflet-dragging,.leaflet-dragging .leaflet-clickable,.leaflet-dragging .leaflet-container{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container a{color:#0078a8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{background:white;border:2px dotted #05f;height:0;opacity:0.5;width:0}.leaflet-container{background:#ddd;cursor:-webkit-grab;cursor:-moz-grab;font:12px/1.5 "Helvetica Neue" , Arial, Helvetica, sans-serif;outline:0;overflow:hidden;-ms-touch-action:none}.leaflet-bar{border:1px solid #888;-webkit-border-radius:5px;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,0.4)}.leaflet-bar-part{background-color:rgba(255,255,255,0.8);border-bottom:1px solid #aaa}.leaflet-bar-part-top{-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.leaflet-bar-part-bottom{border-bottom:0;-webkit-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.leaflet-touch .leaflet-bar{-webkit-border-radius:10px;border-radius:10px}.leaflet-touch .leaflet-bar-part{border-bottom:4px solid rgba(0,0,0,0.3)}.leaflet-touch .leaflet-bar-part-top{-webkit-border-radius:7px 7px 0 0;border-radius:7px 7px 0 0}.leaflet-touch .leaflet-bar-part-bottom{border-bottom:0;-webkit-border-radius:0 0 7px 7px;border-radius:0 0 7px 7px}.leaflet-container .leaflet-control-zoom{margin-left:13px;margin-top:12px}.leaflet-control-zoom a{color:black;height:22px;text-align:center;text-decoration:none;width:22px}.leaflet-control-layers-toggle,.leaflet-control-zoom a{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-control-zoom a:hover{background-color:#fff;color:#777}.leaflet-control-zoom-in{font:bold 18px/24px Arial,Helvetica,sans-serif}.leaflet-control-zoom-out{font:bold 23px/20px Tahoma,Verdana,sans-serif}.leaflet-control-zoom a.leaflet-control-zoom-disabled{background-color:rgba(255,255,255,0.8);color:#bbb;cursor:default}.leaflet-touch .leaflet-control-zoom a{height:30px;width:30px}.leaflet-touch .leaflet-control-zoom-in{font-size:24px;line-height:29px}.leaflet-touch .leaflet-control-zoom-out{font-size:28px;line-height:24px}.leaflet-control-layers{background:#f8f8f9;-webkit-border-radius:8px;border-radius:8px;box-shadow:0 1px 7px rgba(0,0,0,0.4)}.leaflet-control-layers-toggle{background-image:url(images/layers.png);height:36px;width:36px}.leaflet-touch .leaflet-control-layers-toggle{height:44px;width:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{background:#fff;color:#333;padding:6px 10px 6px 6px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label,.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-control-layers-separator{border-top:1px solid #ddd;height:0;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background-color:rgba(255,255,255,0.7);box-shadow:0 0 5px #bbb;margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{color:#333;padding:0 5px}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{background-color:rgba(255,255,255,0.5);border:2px solid #777;border-top:0;box-shadow:0 -1px 5px rgba(0,0,0,0.2);color:black;font-size:11px;line-height:1.1;overflow:hidden;padding:2px 5px 1px;text-shadow:1px 1px 1px #fff;white-space:nowrap}.leaflet-control-scale-line:not(:first-child){border-bottom:0;border-top:2px solid #777;box-shadow:0 2px 5px rgba(0,0,0,0.2);margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-control-zoom{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-control-zoom{border:4px solid rgba(0,0,0,0.3)}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{-webkit-border-radius:20px;border-radius:20px;padding:1px;text-align:left}.leaflet-popup-content{line-height:1.4;margin:14px 20px}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{height:20px;margin:0 auto;overflow:hidden;position:relative;width:40px}.leaflet-popup-tip{height:15px;margin:-8px auto 0;padding:1px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);width:15px}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{background:transparent;color:#c3c3c3;font:16px/14px Tahoma,Verdana,sans-serif;font-weight:bold;height:14px;padding:4px 5px 0 0;position:absolute;right:0;text-align:center;text-decoration:none;top:0;width:18px}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{border-bottom:1px solid #ddd;border-top:1px solid #ddd;overflow:auto}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-editing-icon{-webkit-border-radius:2px;border-radius:2px}','.leaflet-vml-shape{height:1px;width:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{display:inline}.leaflet-popup-tip{filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678);-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";margin:0 auto;_margin-top:-3px;width:21px;_width:27px}.leaflet-popup-tip-container{margin-top:-1px}.leaflet-popup-content-wrapper,.leaflet-popup-tip{border:1px solid #999}.leaflet-popup-content-wrapper{zoom:1}.leaflet-control-layers,.leaflet-control-zoom{border:3px solid #999}.leaflet-control-zoom a{background-color:#eee}.leaflet-control-zoom a:hover{background-color:#fff}.leaflet-control-attribution,.leaflet-control-layers,.leaflet-control-scale-line{background:white}.leaflet-zoom-box{filter:alpha(opacity=50)}.leaflet-control-attribution{border-left:1px solid #bbb;border-top:1px solid #bbb}'];e=function(){function e(e){var t;t=L.Icon.Default.imagePath;e[0]=e[0].replace("url(images","url("+t);this.addStyle(e)}e.prototype.addStyle=function(e){var t,l,o;if(document.createStyleSheet){o=document.createStyleSheet();o.cssText=e.join("\n")}else{t=document.getElementsByTagName("head")[0];l=document.createElement("style");t.appendChild(l);l.innerHTML=e[0]}return true};return e}();L.CSS=e;L.css=function(){var e;e=1<=arguments.length?l.call(arguments,0):[];return function(e,t,l){l.prototype=e.prototype;var o=new l,a=e.apply(o,t);return Object(a)===a?a:o}(L.CSS,e,function(){})};L.css(t)}).call(this); -------------------------------------------------------------------------------- /gh-fork-ribbon.css: -------------------------------------------------------------------------------- 1 | /* Left will inherit from right (so we don't need to duplicate code */ 2 | .github-fork-ribbon { 3 | /* The right and left lasses determine the side we attach our banner to */ 4 | position: absolute; 5 | 6 | /* Add a bit of padding to give some substance outside the "stitching" */ 7 | padding: 2px 0; 8 | 9 | /* Set the base colour */ 10 | background-color: #a00; 11 | 12 | /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */ 13 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 0.15))); 14 | background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15)); 15 | background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15)); 16 | background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15)); 17 | background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15)); 18 | background-image: linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15)); 19 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000'); 20 | 21 | /* Add a drop shadow */ 22 | -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5); 23 | box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5); 24 | z-index:5; 25 | } 26 | .github-fork-ribbon a { 27 | /* Set the font */ 28 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 29 | font-size: 13px; 30 | font-weight: 700; 31 | color: white; 32 | 33 | /* Set the text properties */ 34 | text-decoration: none; 35 | text-shadow: 0 -1px rgba(0,0,0,0.5); 36 | text-align: center; 37 | 38 | /* Set the geometry. If you fiddle with these you'll also need to tweak the top and right values in #github-fork-ribbon. */ 39 | width: 200px; 40 | line-height: 20px; 41 | 42 | /* Set the layout properties */ 43 | display: inline-block; 44 | padding: 2px 0; 45 | 46 | /* Add "stitching" effect */ 47 | border-width: 1px 0; 48 | border-style: dotted; 49 | border-color: rgba(255,255,255,0.7); 50 | } 51 | 52 | .github-fork-ribbon-wrapper { 53 | width: 150px; 54 | height: 150px; 55 | position: absolute; 56 | overflow: hidden; 57 | top: 0; 58 | } 59 | 60 | .github-fork-ribbon-wrapper.left { 61 | left: 0; 62 | } 63 | 64 | .github-fork-ribbon-wrapper.right { 65 | right: 0; 66 | } 67 | 68 | .github-fork-ribbon-wrapper.right .github-fork-ribbon { 69 | top: 42px; 70 | right: -43px; 71 | 72 | /* Rotate the banner 45 degrees */ 73 | -webkit-transform: rotate(45deg); 74 | -moz-transform: rotate(45deg); 75 | -o-transform: rotate(45deg); 76 | transform: rotate(45deg); 77 | } 78 | 79 | .github-fork-ribbon-wrapper.left .github-fork-ribbon { 80 | /* Attach to the left of the page */ 81 | top: 42px; 82 | left: -43px; 83 | 84 | /* Rotate the banner -45 degrees */ 85 | -webkit-transform: rotate(-45deg); 86 | -moz-transform: rotate(-45deg); 87 | -o-transform: rotate(-45deg); 88 | transform: rotate(-45deg); 89 | } -------------------------------------------------------------------------------- /gh-fork-ribbon.ie.css: -------------------------------------------------------------------------------- 1 | /* IE voodoo courtesy of http://stackoverflow.com/a/4617511/263871 and 2 | * http://www.useragentman.com/IETransformsTranslator */ 3 | .github-fork-ribbon-wrapper.right .github-fork-ribbon { 4 | /* IE positioning hack (couldn't find a transform-origin alternative for IE) */ 5 | top: -22px; 6 | right: -62px; 7 | 8 | /* IE8+ */ 9 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')"; 10 | /* IE6 and 7 */ 11 | filter: progid:DXImageTransform.Microsoft.Matrix( 12 | M11=0.7071067811865474, 13 | M12=-0.7071067811865477, 14 | M21=0.7071067811865477, 15 | M22=0.7071067811865474, 16 | SizingMethod='auto expand' 17 | ); 18 | } 19 | 20 | .github-fork-ribbon-wrapper.left .github-fork-ribbon { 21 | top: -22px; 22 | left: -22px; 23 | 24 | /* IE8+ */ 25 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')"; 26 | /* IE6 and 7 */ 27 | filter: progid:DXImageTransform.Microsoft.Matrix( 28 | M11=0.7071067811865483, 29 | M12=0.7071067811865467, 30 | M21=-0.7071067811865467, 31 | M22=0.7071067811865483, 32 | SizingMethod='auto expand' 33 | ); 34 | } 35 | 36 | .github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon { 37 | /* IE positioning hack (couldn't find a transform-origin alternative for IE) */ 38 | top: 12px; 39 | left: -22px; 40 | 41 | 42 | /* IE8+ */ 43 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')"; 44 | /* IE6 and 7 */ 45 | /* filter: progid:DXImageTransform.Microsoft.Matrix( 46 | M11=0.7071067811865474, 47 | M12=-0.7071067811865477, 48 | M21=0.7071067811865477, 49 | M22=0.7071067811865474, 50 | SizingMethod='auto expand' 51 | ); 52 | */} 53 | 54 | .github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon { 55 | top: 12px; 56 | right: -62px; 57 | 58 | /* IE8+ */ 59 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')"; 60 | /* IE6 and 7 */ 61 | filter: progid:DXImageTransform.Microsoft.Matrix( 62 | M11=0.7071067811865483, 63 | M12=0.7071067811865467, 64 | M21=-0.7071067811865467, 65 | M22=0.7071067811865483, 66 | SizingMethod='auto expand' 67 | ); 68 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Leaflet Demo 7 | 8 | 9 | 10 | 11 | 12 | 25 | 26 | 29 | 30 |
31 |
32 | Fork me on GitHub 33 |
34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "leaflet-css", 3 | "version": "0.0.1", 4 | "dependencies": { 5 | "coffee-script":"1.x", 6 | "uglify-js" : ">= 0.0.1", 7 | "css-condense":">= 0.0.1", 8 | "async":">= 0.0.1" 9 | }, 10 | "author": { 11 | "name" : "Calvin Metcalf", 12 | "email" : "calvin.metcalf@state.ma.us", 13 | "url" : "http://cwmma.tumblr.com/" 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var m = L.map('map').setView([42.2, -71], 8) 2 | var mq=L.tileLayer("http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpeg", {attribution:'Tiles Courtesy of MapQuest — Map data © OpenStreetMap contributors', subdomains:'1234'}).addTo(m); 3 | L.marker([42,-71], {icon: L.spriteIcon()}).addTo(m); 4 | L.marker([42,-71.5], {icon: L.spriteIcon("red")}).addTo(m); 5 | L.marker([42,-72], {icon: L.spriteIcon("green")}).addTo(m); 6 | L.marker([42,-72.5], {icon: L.spriteIcon("orange")}).addTo(m); 7 | L.marker([42.5,-72.5], {icon: L.spriteIcon("purple")}).addTo(m); 8 | L.marker([42.5,-72], {icon: L.spriteIcon("violet")}).addTo(m); 9 | L.marker([42.5,-71.5], {icon: L.spriteIcon("yellow")}).addTo(m); 10 | L.marker([42.5,-71]).addTo(m); -------------------------------------------------------------------------------- /sprite.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var cssRegular, cssRetina; 4 | 5 | L.spriteIcon = function(color) { 6 | if (color == null) { 7 | color = "blue"; 8 | } 9 | return L.divIcon({ 10 | className: "leaflet-sprite leaflet-sprite-" + color, 11 | iconSize: [42, 41], 12 | iconAnchor: [12, 41] 13 | }); 14 | }; 15 | 16 | cssRegular = ".leaflet-sprite{background:url(sprites.png) no-repeat top left;}\n.leaflet-sprite-blue{ background-position: 0 -132px; width: 41px; height: 41px; } \n.leaflet-sprite-green{ background-position: 0 -355px; width: 41px; height: 41px; } \n.leaflet-sprite-orange{ background-position: 0 -578px; width: 41px; height: 41px; } \n.leaflet-sprite-purple{ background-position: 0 -801px; width: 41px; height: 41px; } \n.leaflet-sprite-red{ background-position: 0 -1024px; width: 41px; height: 41px; } \n.leaflet-sprite-violet{ background-position: 0 -1247px; width: 41px; height: 41px; } \n.leaflet-sprite-yellow{ background-position: 0 -1470px; width: 41px; height: 41px; } "; 17 | 18 | cssRetina = ".leaflet-sprite{\nbackground:url(sprites.png) no-repeat top left;\nbackground-size:41px, 41px\n}\n .leaflet-sprite-blue{ background-position: 0 0; width: 82px; height: 82px; } \n .leaflet-sprite-green{ background-position: 0 -111px; width: 82px; height: 82px; } \n .leaflet-sprite-orange{ background-position: 0 -223px; width: 82px; height: 82px; } \n .leaflet-sprite-purple{ background-position: 0 -334px; width: 82px; height: 82px; } \n .leaflet-sprite-red{ background-position: 0 -446px; width: 82px; height: 82px; } \n .leaflet-sprite-violet{ background-position: 0 -557px; width: 82px; height: 82px; } \n .leaflet-sprite-yellow{ background-position: 0 -669px; width: 82px; height: 82px; } "; 19 | 20 | if (L.Browser.retina) { 21 | L.css([cssRetina]); 22 | } else { 23 | L.css([cssRegular]); 24 | } 25 | }).call(this); -------------------------------------------------------------------------------- /sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calvinmetcalf/leaflet.css/7da27b2d93366339664d062c76ae256b8f925545/sprites.png -------------------------------------------------------------------------------- /src/leaflet.css: -------------------------------------------------------------------------------- 1 | /* required styles */ 2 | 3 | .leaflet-map-pane, 4 | .leaflet-tile, 5 | .leaflet-marker-icon, 6 | .leaflet-marker-shadow, 7 | .leaflet-tile-pane, 8 | .leaflet-overlay-pane, 9 | .leaflet-shadow-pane, 10 | .leaflet-marker-pane, 11 | .leaflet-popup-pane, 12 | .leaflet-overlay-pane svg, 13 | .leaflet-zoom-box, 14 | .leaflet-image-layer, 15 | .leaflet-layer { 16 | position: absolute; 17 | left: 0; 18 | top: 0; 19 | } 20 | .leaflet-container { 21 | overflow: hidden; 22 | -ms-touch-action: none; 23 | } 24 | .leaflet-tile, 25 | .leaflet-marker-icon, 26 | .leaflet-marker-shadow { 27 | -webkit-user-select: none; 28 | -moz-user-select: none; 29 | user-select: none; 30 | } 31 | .leaflet-marker-icon, 32 | .leaflet-marker-shadow { 33 | display: block; 34 | } 35 | /* map is broken in FF if you have max-width: 100% on tiles */ 36 | .leaflet-container img { 37 | max-width: none !important; 38 | } 39 | /* stupid Android 2 doesn't understand "max-width: none" properly */ 40 | .leaflet-container img.leaflet-image-layer { 41 | max-width: 15000px !important; 42 | } 43 | .leaflet-tile { 44 | filter: inherit; 45 | visibility: hidden; 46 | } 47 | .leaflet-tile-loaded { 48 | visibility: inherit; 49 | } 50 | .leaflet-zoom-box { 51 | width: 0; 52 | height: 0; 53 | } 54 | 55 | .leaflet-tile-pane { z-index: 2; } 56 | .leaflet-objects-pane { z-index: 3; } 57 | .leaflet-overlay-pane { z-index: 4; } 58 | .leaflet-shadow-pane { z-index: 5; } 59 | .leaflet-marker-pane { z-index: 6; } 60 | .leaflet-popup-pane { z-index: 7; } 61 | 62 | 63 | /* control positioning */ 64 | 65 | .leaflet-control { 66 | position: relative; 67 | z-index: 7; 68 | pointer-events: auto; 69 | } 70 | .leaflet-top, 71 | .leaflet-bottom { 72 | position: absolute; 73 | z-index: 1000; 74 | pointer-events: none; 75 | } 76 | .leaflet-top { 77 | top: 0; 78 | } 79 | .leaflet-right { 80 | right: 0; 81 | } 82 | .leaflet-bottom { 83 | bottom: 0; 84 | } 85 | .leaflet-left { 86 | left: 0; 87 | } 88 | .leaflet-control { 89 | float: left; 90 | clear: both; 91 | } 92 | .leaflet-right .leaflet-control { 93 | float: right; 94 | } 95 | .leaflet-top .leaflet-control { 96 | margin-top: 10px; 97 | } 98 | .leaflet-bottom .leaflet-control { 99 | margin-bottom: 10px; 100 | } 101 | .leaflet-left .leaflet-control { 102 | margin-left: 10px; 103 | } 104 | .leaflet-right .leaflet-control { 105 | margin-right: 10px; 106 | } 107 | 108 | 109 | /* zoom and fade animations */ 110 | 111 | .leaflet-fade-anim .leaflet-tile, 112 | .leaflet-fade-anim .leaflet-popup { 113 | opacity: 0; 114 | -webkit-transition: opacity 0.2s linear; 115 | -moz-transition: opacity 0.2s linear; 116 | -o-transition: opacity 0.2s linear; 117 | transition: opacity 0.2s linear; 118 | } 119 | .leaflet-fade-anim .leaflet-tile-loaded, 120 | .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { 121 | opacity: 1; 122 | } 123 | 124 | .leaflet-zoom-anim .leaflet-zoom-animated { 125 | -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); 126 | -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); 127 | -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1); 128 | transition: transform 0.25s cubic-bezier(0,0,0.25,1); 129 | } 130 | .leaflet-zoom-anim .leaflet-tile, 131 | .leaflet-pan-anim .leaflet-tile, 132 | .leaflet-touching .leaflet-zoom-animated { 133 | -webkit-transition: none; 134 | -moz-transition: none; 135 | -o-transition: none; 136 | transition: none; 137 | } 138 | 139 | .leaflet-zoom-anim .leaflet-zoom-hide { 140 | visibility: hidden; 141 | } 142 | 143 | 144 | /* cursors */ 145 | 146 | .leaflet-clickable { 147 | cursor: pointer; 148 | } 149 | .leaflet-container { 150 | cursor: -webkit-grab; 151 | cursor: -moz-grab; 152 | } 153 | .leaflet-popup-pane, 154 | .leaflet-control { 155 | cursor: auto; 156 | } 157 | .leaflet-dragging, 158 | .leaflet-dragging .leaflet-clickable, 159 | .leaflet-dragging .leaflet-container { 160 | cursor: move; 161 | cursor: -webkit-grabbing; 162 | cursor: -moz-grabbing; 163 | } 164 | 165 | 166 | /* visual tweaks */ 167 | 168 | .leaflet-container { 169 | background: #ddd; 170 | outline: 0; 171 | } 172 | .leaflet-container a { 173 | color: #0078A8; 174 | } 175 | .leaflet-container a.leaflet-active { 176 | outline: 2px solid orange; 177 | } 178 | .leaflet-zoom-box { 179 | border: 2px dotted #05f; 180 | background: white; 181 | opacity: 0.5; 182 | } 183 | 184 | 185 | /* general typography */ 186 | .leaflet-container { 187 | font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; 188 | } 189 | 190 | 191 | /* general toolbar styles */ 192 | 193 | .leaflet-bar { 194 | box-shadow: 0 0 8px rgba(0,0,0,0.4); 195 | border: 1px solid #888; 196 | -webkit-border-radius: 5px; 197 | border-radius: 5px; 198 | } 199 | .leaflet-bar-part { 200 | background-color: rgba(255, 255, 255, 0.8); 201 | border-bottom: 1px solid #aaa; 202 | } 203 | .leaflet-bar-part-top { 204 | -webkit-border-radius: 4px 4px 0 0; 205 | border-radius: 4px 4px 0 0; 206 | } 207 | .leaflet-bar-part-bottom { 208 | -webkit-border-radius: 0 0 4px 4px; 209 | border-radius: 0 0 4px 4px; 210 | border-bottom: none; 211 | } 212 | 213 | .leaflet-touch .leaflet-bar { 214 | -webkit-border-radius: 10px; 215 | border-radius: 10px; 216 | } 217 | .leaflet-touch .leaflet-bar-part { 218 | border-bottom: 4px solid rgba(0,0,0,0.3); 219 | } 220 | .leaflet-touch .leaflet-bar-part-top { 221 | -webkit-border-radius: 7px 7px 0 0; 222 | border-radius: 7px 7px 0 0; 223 | } 224 | .leaflet-touch .leaflet-bar-part-bottom { 225 | -webkit-border-radius: 0 0 7px 7px; 226 | border-radius: 0 0 7px 7px; 227 | border-bottom: none; 228 | } 229 | 230 | 231 | /* zoom control */ 232 | 233 | .leaflet-container .leaflet-control-zoom { 234 | margin-left: 13px; 235 | margin-top: 12px; 236 | } 237 | .leaflet-control-zoom a { 238 | width: 22px; 239 | height: 22px; 240 | text-align: center; 241 | text-decoration: none; 242 | color: black; 243 | } 244 | .leaflet-control-zoom a, 245 | .leaflet-control-layers-toggle { 246 | background-position: 50% 50%; 247 | background-repeat: no-repeat; 248 | display: block; 249 | } 250 | .leaflet-control-zoom a:hover { 251 | background-color: #fff; 252 | color: #777; 253 | } 254 | .leaflet-control-zoom-in { 255 | font: bold 18px/24px Arial, Helvetica, sans-serif; 256 | } 257 | .leaflet-control-zoom-out { 258 | font: bold 23px/20px Tahoma, Verdana, sans-serif; 259 | } 260 | .leaflet-control-zoom a.leaflet-control-zoom-disabled { 261 | cursor: default; 262 | background-color: rgba(255, 255, 255, 0.8); 263 | color: #bbb; 264 | } 265 | 266 | .leaflet-touch .leaflet-control-zoom a { 267 | width: 30px; 268 | height: 30px; 269 | } 270 | .leaflet-touch .leaflet-control-zoom-in { 271 | font-size: 24px; 272 | line-height: 29px; 273 | } 274 | .leaflet-touch .leaflet-control-zoom-out { 275 | font-size: 28px; 276 | line-height: 24px; 277 | } 278 | 279 | /* layers control */ 280 | 281 | .leaflet-control-layers { 282 | box-shadow: 0 1px 7px rgba(0,0,0,0.4); 283 | background: #f8f8f9; 284 | -webkit-border-radius: 8px; 285 | border-radius: 8px; 286 | } 287 | .leaflet-control-layers-toggle { 288 | background-image: url(images/layers.png); 289 | width: 36px; 290 | height: 36px; 291 | } 292 | .leaflet-touch .leaflet-control-layers-toggle { 293 | width: 44px; 294 | height: 44px; 295 | } 296 | .leaflet-control-layers .leaflet-control-layers-list, 297 | .leaflet-control-layers-expanded .leaflet-control-layers-toggle { 298 | display: none; 299 | } 300 | .leaflet-control-layers-expanded .leaflet-control-layers-list { 301 | display: block; 302 | position: relative; 303 | } 304 | .leaflet-control-layers-expanded { 305 | padding: 6px 10px 6px 6px; 306 | color: #333; 307 | background: #fff; 308 | } 309 | .leaflet-control-layers-selector { 310 | margin-top: 2px; 311 | position: relative; 312 | top: 1px; 313 | } 314 | .leaflet-control-layers label { 315 | display: block; 316 | } 317 | .leaflet-control-layers-separator { 318 | height: 0; 319 | border-top: 1px solid #ddd; 320 | margin: 5px -10px 5px -6px; 321 | } 322 | 323 | 324 | /* attribution and scale controls */ 325 | 326 | .leaflet-container .leaflet-control-attribution { 327 | background-color: rgba(255, 255, 255, 0.7); 328 | box-shadow: 0 0 5px #bbb; 329 | margin: 0; 330 | } 331 | .leaflet-control-attribution, 332 | .leaflet-control-scale-line { 333 | padding: 0 5px; 334 | color: #333; 335 | } 336 | .leaflet-container .leaflet-control-attribution, 337 | .leaflet-container .leaflet-control-scale { 338 | font-size: 11px; 339 | } 340 | .leaflet-left .leaflet-control-scale { 341 | margin-left: 5px; 342 | } 343 | .leaflet-bottom .leaflet-control-scale { 344 | margin-bottom: 5px; 345 | } 346 | .leaflet-control-scale-line { 347 | border: 2px solid #777; 348 | border-top: none; 349 | color: black; 350 | line-height: 1.1; 351 | padding: 2px 5px 1px; 352 | font-size: 11px; 353 | text-shadow: 1px 1px 1px #fff; 354 | background-color: rgba(255, 255, 255, 0.5); 355 | box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2); 356 | white-space: nowrap; 357 | overflow: hidden; 358 | } 359 | .leaflet-control-scale-line:not(:first-child) { 360 | border-top: 2px solid #777; 361 | border-bottom: none; 362 | margin-top: -2px; 363 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 364 | } 365 | .leaflet-control-scale-line:not(:first-child):not(:last-child) { 366 | border-bottom: 2px solid #777; 367 | } 368 | 369 | .leaflet-touch .leaflet-control-attribution, 370 | .leaflet-touch .leaflet-control-layers, 371 | .leaflet-touch .leaflet-control-zoom { 372 | box-shadow: none; 373 | } 374 | .leaflet-touch .leaflet-control-layers, 375 | .leaflet-touch .leaflet-control-zoom { 376 | border: 4px solid rgba(0,0,0,0.3); 377 | } 378 | 379 | 380 | /* popup */ 381 | 382 | .leaflet-popup { 383 | position: absolute; 384 | text-align: center; 385 | } 386 | .leaflet-popup-content-wrapper { 387 | padding: 1px; 388 | text-align: left; 389 | -webkit-border-radius: 20px; 390 | border-radius: 20px; 391 | } 392 | .leaflet-popup-content { 393 | margin: 14px 20px; 394 | line-height: 1.4; 395 | } 396 | .leaflet-popup-content p { 397 | margin: 18px 0; 398 | } 399 | .leaflet-popup-tip-container { 400 | margin: 0 auto; 401 | width: 40px; 402 | height: 20px; 403 | position: relative; 404 | overflow: hidden; 405 | } 406 | .leaflet-popup-tip { 407 | width: 15px; 408 | height: 15px; 409 | padding: 1px; 410 | 411 | margin: -8px auto 0; 412 | 413 | -webkit-transform: rotate(45deg); 414 | -moz-transform: rotate(45deg); 415 | -ms-transform: rotate(45deg); 416 | -o-transform: rotate(45deg); 417 | transform: rotate(45deg); 418 | } 419 | .leaflet-popup-content-wrapper, .leaflet-popup-tip { 420 | background: white; 421 | 422 | box-shadow: 0 3px 14px rgba(0,0,0,0.4); 423 | } 424 | .leaflet-container a.leaflet-popup-close-button { 425 | position: absolute; 426 | top: 0; 427 | right: 0; 428 | padding: 4px 5px 0 0; 429 | text-align: center; 430 | width: 18px; 431 | height: 14px; 432 | font: 16px/14px Tahoma, Verdana, sans-serif; 433 | color: #c3c3c3; 434 | text-decoration: none; 435 | font-weight: bold; 436 | background: transparent; 437 | } 438 | .leaflet-container a.leaflet-popup-close-button:hover { 439 | color: #999; 440 | } 441 | .leaflet-popup-scrolled { 442 | overflow: auto; 443 | border-bottom: 1px solid #ddd; 444 | border-top: 1px solid #ddd; 445 | } 446 | 447 | 448 | /* div icon */ 449 | 450 | .leaflet-div-icon { 451 | background: #fff; 452 | border: 1px solid #666; 453 | } 454 | .leaflet-editing-icon { 455 | -webkit-border-radius: 2px; 456 | border-radius: 2px; 457 | } 458 | -------------------------------------------------------------------------------- /src/leaflet.css.coffee: -------------------------------------------------------------------------------- 1 | class LCCS 2 | constructor : (css)-> 3 | imagePath = L.Icon.Default.imagePath 4 | css[0] = css[0].replace "url(images", "url(#{ imagePath }" 5 | @addStyle css 6 | 7 | addStyle : (styles)-> 8 | if document.createStyleSheet 9 | styleSheet = document.createStyleSheet() 10 | styleSheet.cssText = styles.join("\n") 11 | else 12 | head = document.getElementsByTagName("head")[0] 13 | styleElt = document.createElement "style" 14 | head.appendChild styleElt 15 | styleElt.innerHTML = styles[0] 16 | true; 17 | 18 | L.CSS = LCCS 19 | 20 | L.css = (params...)-> 21 | return new L.CSS(params...) 22 | 23 | L.css(cssFiles) -------------------------------------------------------------------------------- /src/leaflet.ie.css: -------------------------------------------------------------------------------- 1 | .leaflet-vml-shape { 2 | width: 1px; 3 | height: 1px; 4 | } 5 | .lvml { 6 | behavior: url(#default#VML); 7 | display: inline-block; 8 | position: absolute; 9 | } 10 | 11 | .leaflet-control { 12 | display: inline; 13 | } 14 | 15 | .leaflet-popup-tip { 16 | width: 21px; 17 | _width: 27px; 18 | margin: 0 auto; 19 | _margin-top: -3px; 20 | 21 | filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); 22 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; 23 | } 24 | .leaflet-popup-tip-container { 25 | margin-top: -1px; 26 | } 27 | .leaflet-popup-content-wrapper, .leaflet-popup-tip { 28 | border: 1px solid #999; 29 | } 30 | .leaflet-popup-content-wrapper { 31 | zoom: 1; 32 | } 33 | 34 | .leaflet-control-zoom, 35 | .leaflet-control-layers { 36 | border: 3px solid #999; 37 | } 38 | .leaflet-control-zoom a { 39 | background-color: #eee; 40 | } 41 | .leaflet-control-zoom a:hover { 42 | background-color: #fff; 43 | } 44 | .leaflet-control-layers-toggle { 45 | } 46 | .leaflet-control-attribution, 47 | .leaflet-control-layers, 48 | .leaflet-control-scale-line { 49 | background: white; 50 | } 51 | .leaflet-zoom-box { 52 | filter: alpha(opacity=50); 53 | } 54 | .leaflet-control-attribution { 55 | border-top: 1px solid #bbb; 56 | border-left: 1px solid #bbb; 57 | } 58 | --------------------------------------------------------------------------------