├── README.textile ├── ZeroClipboard.swf ├── fonts ├── bembo-bold-webfont.eot ├── bembo-bold-webfont.ttf ├── bembo-bold-webfont.woff ├── syntax-roman-webfont.eot ├── syntax-roman-webfont.ttf ├── syntax-roman-webfont.woff ├── syntax-roman-webfont.svg └── bembo-bold-webfont.svg ├── index.html ├── css └── all.css └── javascript ├── ZeroClipboard.js └── googlemapscolorizr.js /README.textile: -------------------------------------------------------------------------------- 1 | h1. Google Maps Colorizr 2 | 3 | Generates HSL colors for the Google Maps API 3. -------------------------------------------------------------------------------- /ZeroClipboard.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msurguy/GoogleMapsColorizr/master/ZeroClipboard.swf -------------------------------------------------------------------------------- /fonts/bembo-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msurguy/GoogleMapsColorizr/master/fonts/bembo-bold-webfont.eot -------------------------------------------------------------------------------- /fonts/bembo-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msurguy/GoogleMapsColorizr/master/fonts/bembo-bold-webfont.ttf -------------------------------------------------------------------------------- /fonts/bembo-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msurguy/GoogleMapsColorizr/master/fonts/bembo-bold-webfont.woff -------------------------------------------------------------------------------- /fonts/syntax-roman-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msurguy/GoogleMapsColorizr/master/fonts/syntax-roman-webfont.eot -------------------------------------------------------------------------------- /fonts/syntax-roman-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msurguy/GoogleMapsColorizr/master/fonts/syntax-roman-webfont.ttf -------------------------------------------------------------------------------- /fonts/syntax-roman-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msurguy/GoogleMapsColorizr/master/fonts/syntax-roman-webfont.woff -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Google Maps Colorizr 10 | 11 | 12 | 13 | 14 | 15 | 26 | 27 | 28 |

29 |

Google Maps Colorizr

30 |

31 | 35 |

36 |

37 |

38 | 39 |

40 |

41 |

42 |

43 |

44 | Google Maps Colorizr conveniently transfers your HEX RGB colors to the HSL colors used by Google Maps. 45 |

46 |

47 |

Copy the Code

It's in your Clipboard

48 |

49 |

50 | 51 | -------------------------------------------------------------------------------- /css/all.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @font-face { 4 | font-family: 'BemboBold'; 5 | src: url('../fonts/bembo-bold-webfont.eot'); 6 | src: local('?'), url('../fonts/bembo-bold-webfont.woff') format('woff'), url('../fonts/bembo-bold-webfont.ttf') format('truetype'), url('../fonts/bembo-bold-webfont.svg#webfontje3cdLn4') format('svg'); 7 | font-weight: normal; 8 | font-style: normal; 9 | } 10 | 11 | @font-face { 12 | font-family: 'SyntaxRoman'; 13 | src: url('../fonts/syntax-roman-webfont.eot'); 14 | src: local('?'), url('../fonts/syntax-roman-webfont.woff') format('woff'), url('../fonts/syntax-roman-webfont.ttf') format('truetype'), url('../fonts/syntax-roman-webfont.svg#webfontzShMuBRP') format('svg'); 15 | font-weight: normal; 16 | font-style: normal; 17 | } 18 | 19 | @media all { 20 | * { 21 | font-family: 'SyntaxRoman', sans-serif; 22 | font-weight:normal; 23 | font-style:normal; 24 | font-size:100.01%; 25 | } 26 | html, body { 27 | height:100%; 28 | width:100%; 29 | min-width:600px; 30 | } 31 | html, body, p{ 32 | margin:0; 33 | padding:0; 34 | } 35 | html { 36 | font-size:14px; 37 | line-height:22px; 38 | color:#111; 39 | background:#444; 40 | } 41 | h1{ 42 | font-family: 'BemboBold', sans-serif; 43 | margin:0; 44 | text-align:center; 45 | font-size:48px; 46 | line-height:78px; 47 | color:#eee; 48 | text-shadow: 0 -1px 2px #222; 49 | } 50 | b{ 51 | font-family: 'BemboBold', sans-serif; 52 | } 53 | a{ 54 | color:#fff; 55 | text-decoration:none; 56 | } 57 | a:hover{ 58 | text-decoration:underline; 59 | } 60 | .left{ 61 | float:left; 62 | } 63 | .right{ 64 | float:right; 65 | } 66 | } 67 | 68 | @media screen, projection, print { 69 | 70 | #head{ 71 | height: 90px; 72 | background:#444; 73 | overflow:hidden; 74 | } 75 | #middle{ 76 | display: block; 77 | } 78 | #footer{ 79 | position: absolute; 80 | bottom: 0; 81 | width:100%; 82 | height:50px; 83 | overflow:auto; 84 | } 85 | #footer p, #version{ 86 | padding:20px 20px 0 20px; 87 | color:#ccc; 88 | } 89 | #footer p{ 90 | float:left; 91 | } 92 | #version{ 93 | float:right; 94 | } 95 | #logo{ 96 | float:right; 97 | margin:5px 5px 0 0; 98 | } 99 | #left{ 100 | position:absolute; 101 | height:auto; 102 | bottom:0; 103 | top:0; 104 | left:0; 105 | right:0; 106 | margin-top:90px; 107 | margin-bottom:50px; 108 | margin-right:0; 109 | margin-left:0; 110 | padding: 0 10px 0 30px; 111 | width:250px; 112 | overflow:auto; 113 | } 114 | #map{ 115 | position:absolute; 116 | height:auto; 117 | bottom:0; 118 | top:0; 119 | left:0; 120 | right:0; 121 | margin-top:90px; 122 | margin-bottom:50px; 123 | margin-right:300px; 124 | margin-left:300px; 125 | background:#ccc !important; 126 | -webkit-border-radius: 10px; 127 | -moz-border-radius: 10px; 128 | border-radius: 10px; 129 | } 130 | #map a{ 131 | color:#fff !important; 132 | } 133 | #right{ 134 | position:absolute; 135 | height:auto; 136 | bottom:0; 137 | top:0; 138 | left:auto; 139 | right:0; 140 | margin-top:90px; 141 | margin-bottom:50px; 142 | margin-right:20px; 143 | margin-left:auto; 144 | width:240px; 145 | padding:10px; 146 | -webkit-border-radius: 10px; 147 | -moz-border-radius: 10px; 148 | border-radius: 10px; 149 | background:#ccc; 150 | } 151 | #copy{ 152 | position:absolute; 153 | height:30px; 154 | width:240px; 155 | bottom:0; 156 | right:0; 157 | padding:10px; 158 | -webkit-border-bottom-right-radius: 10px; 159 | -webkit-border-bottom-left-radius: 10px; 160 | -moz-border-radius-bottomright: 10px; 161 | -moz-border-radius-bottomleft: 10px; 162 | border-bottom-right-radius: 10px; 163 | border-bottom-left-radius: 10px; 164 | background:#ccc; 165 | cursor:pointer; 166 | } 167 | #copy p{ 168 | text-align:center; 169 | font-family: 'BemboBold', sans-serif; 170 | font-size:20px; 171 | line-height:28px; 172 | color:#444; 173 | text-shadow: 0px 1px 1px #eee; 174 | } 175 | #copy:hover, #copy:hover p, #copy.hover, #copy.hover p{ 176 | color:#fff; 177 | text-shadow: 0px -1px 1px #666; 178 | background:#00b7eb; 179 | } 180 | #copy.active, #copy.active p{ 181 | background:#00c000; 182 | color:#fff; 183 | text-shadow: 0px -1px 1px #666; 184 | } 185 | #copy p.default{ 186 | display:block; 187 | } 188 | #copy p.copied{ 189 | display:none; 190 | } 191 | #copy.active p.default{ 192 | display:none; 193 | } 194 | #copy.active p.copied{ 195 | display:block; 196 | } 197 | #json{ 198 | position:absolute; 199 | height:auto; 200 | bottom:0; 201 | top:0; 202 | left:auto; 203 | right:0; 204 | margin-top:85px; 205 | margin-bottom:50px; 206 | margin-right:0; 207 | margin-left:auto; 208 | width:240px; 209 | padding:10px; 210 | background:#fff; 211 | white-space: pre; 212 | overflow:auto; 213 | } 214 | #items{ 215 | width:100%; 216 | } 217 | .item{ 218 | padding:0 0 4px 0; 219 | width:100%; 220 | margin:0 0 20px 0; 221 | background:#ccc; 222 | -webkit-border-radius: 10px; 223 | -moz-border-radius: 10px; 224 | border-radius: 10px; 225 | } 226 | .wrap{ 227 | overflow:auto; 228 | } 229 | .item .headcolor{ 230 | overflow:auto; 231 | -webkit-border-top-right-radius: 10px; 232 | -webkit-border-top-left-radius: 10px; 233 | -moz-border-radius-topright: 10px; 234 | -moz-border-radius-topleft: 10px; 235 | border-top-right-radius: 10px; 236 | border-top-left-radius: 10px; 237 | margin-bottom:10px; 238 | background:#999; 239 | } 240 | .item .dot{ 241 | -webkit-border-radius: 8px; 242 | -moz-border-radius: 8px; 243 | border-radius: 8px; 244 | width:16px; 245 | height:16px; 246 | background:#fff; 247 | float:left; 248 | margin:7px 0 0 10px; 249 | } 250 | .item .left{ 251 | width:50px; 252 | margin-left:10px; 253 | } 254 | .item .left, .item .right{ 255 | height:30px; 256 | } 257 | .item .right{ 258 | float:right; 259 | padding-right:10px; 260 | } 261 | .item select, .item input[type="text"] { 262 | width:150px; 263 | padding:0; 264 | height:24px; 265 | margin:0; 266 | border:0; 267 | } 268 | .item input[type="button"] { 269 | background:transparent; 270 | float:right; 271 | display:block; 272 | border:0; 273 | cursor:pointer; 274 | font-size:20px; 275 | padding:0 0 20px 0; 276 | width:30px; 277 | height:30px; 278 | -webkit-border-top-right-radius: 10px; 279 | -webkit-border-bottom-left-radius: 10px; 280 | -moz-border-radius-topright: 10px; 281 | -moz-border-radius-bottomleft: 10px; 282 | border-top-right-radius: 10px; 283 | border-bottom-left-radius: 10px; 284 | color:#222; 285 | } 286 | .item input[type="button"]:hover{ 287 | text-shadow: 0px -1px 1px #ccc; 288 | color:#e43789; 289 | } 290 | .red{ 291 | background-color:#f99; 292 | } 293 | #add{ 294 | margin:0 0 0 100px; 295 | 296 | border:0; 297 | background:#ccc; 298 | -webkit-border-radius: 10px; 299 | -moz-border-radius: 10px; 300 | border-radius: 10px; 301 | cursor:pointer; 302 | font-size:30px; 303 | line-height:30px; 304 | padding:0 0 2px 1px; 305 | width:40px; 306 | height:40px; 307 | } 308 | #add:hover{ 309 | color:#fff; 310 | text-shadow: 0px -1px 1px #00c7ff; 311 | background:#00b7eb; 312 | } 313 | } -------------------------------------------------------------------------------- /javascript/ZeroClipboard.js: -------------------------------------------------------------------------------- 1 | // Simple Set Clipboard System 2 | // Author: Joseph Huckaby 3 | 4 | var ZeroClipboard = { 5 | 6 | version: "1.0.7", 7 | clients: {}, // registered upload clients on page, indexed by id 8 | moviePath: 'ZeroClipboard.swf', // URL to movie 9 | nextId: 1, // ID of next movie 10 | 11 | $: function(thingy) { 12 | // simple DOM lookup utility function 13 | if (typeof(thingy) == 'string') thingy = document.getElementById(thingy); 14 | if (!thingy.addClass) { 15 | // extend element with a few useful methods 16 | thingy.hide = function() { this.style.display = 'none'; }; 17 | thingy.show = function() { this.style.display = ''; }; 18 | thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; }; 19 | thingy.removeClass = function(name) { 20 | var classes = this.className.split(/\s+/); 21 | var idx = -1; 22 | for (var k = 0; k < classes.length; k++) { 23 | if (classes[k] == name) { idx = k; k = classes.length; } 24 | } 25 | if (idx > -1) { 26 | classes.splice( idx, 1 ); 27 | this.className = classes.join(' '); 28 | } 29 | return this; 30 | }; 31 | thingy.hasClass = function(name) { 32 | return !!this.className.match( new RegExp("\\s*" + name + "\\s*") ); 33 | }; 34 | } 35 | return thingy; 36 | }, 37 | 38 | setMoviePath: function(path) { 39 | // set path to ZeroClipboard.swf 40 | this.moviePath = path; 41 | }, 42 | 43 | dispatch: function(id, eventName, args) { 44 | // receive event from flash movie, send to client 45 | var client = this.clients[id]; 46 | if (client) { 47 | client.receiveEvent(eventName, args); 48 | } 49 | }, 50 | 51 | register: function(id, client) { 52 | // register new client to receive events 53 | this.clients[id] = client; 54 | }, 55 | 56 | getDOMObjectPosition: function(obj, stopObj) { 57 | // get absolute coordinates for dom element 58 | var info = { 59 | left: 0, 60 | top: 0, 61 | width: obj.width ? obj.width : obj.offsetWidth, 62 | height: obj.height ? obj.height : obj.offsetHeight 63 | }; 64 | 65 | while (obj && (obj != stopObj)) { 66 | info.left += obj.offsetLeft; 67 | info.top += obj.offsetTop; 68 | obj = obj.offsetParent; 69 | } 70 | 71 | return info; 72 | }, 73 | 74 | Client: function(elem) { 75 | // constructor for new simple upload client 76 | this.handlers = {}; 77 | 78 | // unique ID 79 | this.id = ZeroClipboard.nextId++; 80 | this.movieId = 'ZeroClipboardMovie_' + this.id; 81 | 82 | // register client with singleton to receive flash events 83 | ZeroClipboard.register(this.id, this); 84 | 85 | // create movie 86 | if (elem) this.glue(elem); 87 | } 88 | }; 89 | 90 | ZeroClipboard.Client.prototype = { 91 | 92 | id: 0, // unique ID for us 93 | ready: false, // whether movie is ready to receive events or not 94 | movie: null, // reference to movie object 95 | clipText: '', // text to copy to clipboard 96 | handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor 97 | cssEffects: true, // enable CSS mouse effects on dom container 98 | handlers: null, // user event handlers 99 | 100 | glue: function(elem, appendElem, stylesToAdd) { 101 | // glue to DOM element 102 | // elem can be ID or actual DOM element object 103 | this.domElement = ZeroClipboard.$(elem); 104 | 105 | // float just above object, or zIndex 99 if dom element isn't set 106 | var zIndex = 99; 107 | if (this.domElement.style.zIndex) { 108 | zIndex = parseInt(this.domElement.style.zIndex, 10) + 1; 109 | } 110 | 111 | if (typeof(appendElem) == 'string') { 112 | appendElem = ZeroClipboard.$(appendElem); 113 | } 114 | else if (typeof(appendElem) == 'undefined') { 115 | appendElem = document.getElementsByTagName('body')[0]; 116 | } 117 | 118 | // find X/Y position of domElement 119 | var box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem); 120 | 121 | // create floating DIV above element 122 | this.div = document.createElement('div'); 123 | var style = this.div.style; 124 | style.position = 'absolute'; 125 | style.left = '' + box.left + 'px'; 126 | style.top = '' + box.top + 'px'; 127 | style.width = '' + box.width + 'px'; 128 | style.height = '' + box.height + 'px'; 129 | style.zIndex = zIndex; 130 | 131 | if (typeof(stylesToAdd) == 'object') { 132 | for (addedStyle in stylesToAdd) { 133 | style[addedStyle] = stylesToAdd[addedStyle]; 134 | } 135 | } 136 | 137 | // style.backgroundColor = '#f00'; // debug 138 | 139 | appendElem.appendChild(this.div); 140 | 141 | this.div.innerHTML = this.getHTML( box.width, box.height ); 142 | }, 143 | 144 | getHTML: function(width, height) { 145 | // return HTML for movie 146 | var html = ''; 147 | var flashvars = 'id=' + this.id + 148 | '&width=' + width + 149 | '&height=' + height; 150 | 151 | if (navigator.userAgent.match(/MSIE/)) { 152 | // IE gets an OBJECT tag 153 | var protocol = location.href.match(/^https/i) ? 'https://' : 'http://'; 154 | html += '

'; 155 | } 156 | else { 157 | // all other browsers get an EMBED tag 158 | html += '

'; 159 | } 160 | return html; 161 | }, 162 | 163 | hide: function() { 164 | // temporarily hide floater offscreen 165 | if (this.div) { 166 | this.div.style.left = '-2000px'; 167 | } 168 | }, 169 | 170 | show: function() { 171 | // show ourselves after a call to hide() 172 | this.reposition(); 173 | }, 174 | 175 | destroy: function() { 176 | // destroy control and floater 177 | if (this.domElement && this.div) { 178 | this.hide(); 179 | this.div.innerHTML = ''; 180 | 181 | var body = document.getElementsByTagName('body')[0]; 182 | try { body.removeChild( this.div ); } catch(e) {;} 183 | 184 | this.domElement = null; 185 | this.div = null; 186 | } 187 | }, 188 | 189 | reposition: function(elem) { 190 | // reposition our floating div, optionally to new container 191 | // warning: container CANNOT change size, only position 192 | if (elem) { 193 | this.domElement = ZeroClipboard.$(elem); 194 | if (!this.domElement) this.hide(); 195 | } 196 | 197 | if (this.domElement && this.div) { 198 | var box = ZeroClipboard.getDOMObjectPosition(this.domElement); 199 | var style = this.div.style; 200 | style.left = '' + box.left + 'px'; 201 | style.top = '' + box.top + 'px'; 202 | } 203 | }, 204 | 205 | setText: function(newText) { 206 | // set text to be copied to clipboard 207 | this.clipText = newText; 208 | if (this.ready) this.movie.setText(newText); 209 | }, 210 | 211 | addEventListener: function(eventName, func) { 212 | // add user event listener for event 213 | // event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel 214 | eventName = eventName.toString().toLowerCase().replace(/^on/, ''); 215 | if (!this.handlers[eventName]) this.handlers[eventName] = []; 216 | this.handlers[eventName].push(func); 217 | }, 218 | 219 | setHandCursor: function(enabled) { 220 | // enable hand cursor (true), or default arrow cursor (false) 221 | this.handCursorEnabled = enabled; 222 | if (this.ready) this.movie.setHandCursor(enabled); 223 | }, 224 | 225 | setCSSEffects: function(enabled) { 226 | // enable or disable CSS effects on DOM container 227 | this.cssEffects = !!enabled; 228 | }, 229 | 230 | receiveEvent: function(eventName, args) { 231 | // receive event from flash 232 | eventName = eventName.toString().toLowerCase().replace(/^on/, ''); 233 | 234 | // special behavior for certain events 235 | switch (eventName) { 236 | case 'load': 237 | // movie claims it is ready, but in IE this isn't always the case... 238 | // bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function 239 | this.movie = document.getElementById(this.movieId); 240 | if (!this.movie) { 241 | var self = this; 242 | setTimeout( function() { self.receiveEvent('load', null); }, 1 ); 243 | return; 244 | } 245 | 246 | // firefox on pc needs a "kick" in order to set these in certain cases 247 | if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) { 248 | var self = this; 249 | setTimeout( function() { self.receiveEvent('load', null); }, 100 ); 250 | this.ready = true; 251 | return; 252 | } 253 | 254 | this.ready = true; 255 | this.movie.setText( this.clipText ); 256 | this.movie.setHandCursor( this.handCursorEnabled ); 257 | break; 258 | 259 | case 'mouseover': 260 | if (this.domElement && this.cssEffects) { 261 | this.domElement.addClass('hover'); 262 | if (this.recoverActive) this.domElement.addClass('active'); 263 | } 264 | break; 265 | 266 | case 'mouseout': 267 | if (this.domElement && this.cssEffects) { 268 | this.recoverActive = false; 269 | if (this.domElement.hasClass('active')) { 270 | this.domElement.removeClass('active'); 271 | this.recoverActive = true; 272 | } 273 | this.domElement.removeClass('hover'); 274 | } 275 | break; 276 | 277 | case 'mousedown': 278 | if (this.domElement && this.cssEffects) { 279 | this.domElement.addClass('active'); 280 | } 281 | break; 282 | 283 | case 'mouseup': 284 | if (this.domElement && this.cssEffects) { 285 | this.domElement.removeClass('active'); 286 | this.recoverActive = false; 287 | } 288 | break; 289 | } // switch eventName 290 | 291 | if (this.handlers[eventName]) { 292 | for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) { 293 | var func = this.handlers[eventName][idx]; 294 | 295 | if (typeof(func) == 'function') { 296 | // actual function reference 297 | func(this, args); 298 | } 299 | else if ((typeof(func) == 'object') && (func.length == 2)) { 300 | // PHP style object + method, i.e. [myObject, 'myMethod'] 301 | func[0][ func[1] ](this, args); 302 | } 303 | else if (typeof(func) == 'string') { 304 | // name of function 305 | window[func](this, args); 306 | } 307 | } // foreach event handler defined 308 | } // user defined handler for event 309 | } 310 | 311 | }; 312 | -------------------------------------------------------------------------------- /javascript/googlemapscolorizr.js: -------------------------------------------------------------------------------- 1 | /* 2 | Name: Google Maps Colorizr 3 | Version: 0.1.5 (01.11.2011) 4 | Author: Marc Köster 5 | Support: http://stadtwerk.org 6 | 7 | Licence: Google Maps Colorizr is licensed under a Creative Commons 8 | Attribution-Noncommercial 3.0 Unported License 9 | (http://creativecommons.org/licenses/by-nc/3.0/). 10 | 11 | You are free: 12 | + to Share - to copy, distribute and transmit the work 13 | + to Remix - to adapt the work 14 | 15 | Under the following conditions: 16 | + Attribution. You must attribute the work in the manner specified by the author or licensor 17 | (but not in any way that suggests that they endorse you or your use of the work). 18 | + Noncommercial. You may not use this work for commercial purposes. 19 | 20 | + For any reuse or distribution, you must make clear to others the license terms of this work. 21 | + Any of the above conditions can be waived if you get permission from the copyright holder. 22 | + Nothing in this license impairs or restricts the author's moral rights. 23 | */ 24 | function googlemapcolorizer() 25 | { 26 | var styles; 27 | var map; 28 | var index; 29 | var googleBaseValues; 30 | 31 | // initialise map and class 32 | this.init = function() 33 | { 34 | //initialise map 35 | var options = { 36 | mapTypeControlOptions: { 37 | mapTypeIds: [ 'Styled'] 38 | }, 39 | center: new google.maps.LatLng(54.32, 10.10), 40 | zoom: 4, 41 | mapTypeId: 'Styled' 42 | }; 43 | 44 | var div = document.getElementById('map'); 45 | this.map = new google.maps.Map(div, options); 46 | var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' }); 47 | this.map.mapTypes.set('Styled', styledMapType); 48 | 49 | 50 | //initialise class 51 | this.setGoogleBaseValues(); 52 | this.index = 0; 53 | this.styles=[]; 54 | this.isValidColor = []; 55 | this.addEventHandler(); 56 | this.appendItemDiv(); 57 | this.writeCode(); 58 | this.getValuesFromUrl(); 59 | 60 | 61 | //initialise Zeroclipboard 62 | var clip = new ZeroClipboard.Client(); 63 | clip.addEventListener( 'mouseDown', function(client) { 64 | clip.setText( document.getElementById('json').innerHTML ); 65 | } ); 66 | clip.glue( 'copy' ); 67 | 68 | }; 69 | 70 | this.addEventHandler = function() 71 | { 72 | google.maps.event.addListener(this.map, 'zoom_changed', function() { 73 | gmc.writeCode(); 74 | }); 75 | google.maps.event.addListener(this.map, 'mouseup', function() { 76 | gmc.writeCode(); 77 | }); 78 | }; 79 | 80 | // sets the base saturation and lightness from google maps 81 | this.setGoogleBaseValues = function() 82 | { 83 | this.googleBaseValues = new Array(); 84 | this.googleBaseValues[0] = new Array("water", 45, 76); 85 | this.googleBaseValues[1] = new Array("landscape", 27, 89); 86 | this.googleBaseValues[2] = new Array("landscape.man_made", 27, 89); 87 | this.googleBaseValues[3] = new Array("landscape.natural", 15, 95); 88 | this.googleBaseValues[4] = new Array("poi", 43, 78); 89 | this.googleBaseValues[5] = new Array("poi.medical", 41, 87); 90 | this.googleBaseValues[6] = new Array("poi.school", 48, 83); 91 | this.googleBaseValues[7] = new Array("poi.business", 15, 85); 92 | this.googleBaseValues[8] = new Array("poi.government", 15, 85); 93 | this.googleBaseValues[9] = new Array("poi.place_of_worship", 15, 85); 94 | this.googleBaseValues[10] = new Array("poi.sports_complex", 15, 85); 95 | this.googleBaseValues[11] = new Array("poi.park", 43, 78); 96 | this.googleBaseValues[12] = new Array("poi.attraction", 43, 78); 97 | this.googleBaseValues[13] = new Array("road", 100, 64); 98 | this.googleBaseValues[14] = new Array("road.highway", 100, 64); 99 | this.googleBaseValues[15] = new Array("road.arterial", 100, 77); 100 | this.googleBaseValues[16] = new Array("road.local", 100, 100); 101 | this.googleBaseValues[17] = new Array("administrative", 0, 51); 102 | this.googleBaseValues[18] = new Array("administrative.country", 0, 51); 103 | this.googleBaseValues[19] = new Array("administrative.land_parcel", 0, 51); 104 | this.googleBaseValues[20] = new Array("administrative.locality", 0, 0); 105 | this.googleBaseValues[21] = new Array("administrative.neighborhood", 0, 51); 106 | this.googleBaseValues[22] = new Array("administrative.province", 0, 51); 107 | this.googleBaseValues[23] = new Array("transit", 0, 75); 108 | 109 | }; 110 | 111 | //appends a new Style 112 | this.appendItemDiv = function() 113 | { 114 | document.getElementById("items").appendChild(this.getItemDiv()); 115 | this.addStyle(); 116 | this.index++; 117 | }; 118 | 119 | //deletes a style 120 | this.deleteItemDiv = function(button) 121 | { 122 | var item = button.parentNode.parentNode.parentNode; 123 | document.getElementById("items").removeChild(item); 124 | this.deleteStyle(parseInt(item.firstChild.value)); 125 | }; 126 | 127 | //when clicked on a drop down Item (with mouse) 128 | this.selectedDropDownItem = function(option) 129 | { 130 | var itemdiv = option.parentNode.parentNode.parentNode.parentNode; 131 | this.checkColor(itemdiv); 132 | }; 133 | 134 | //when Changes a drop down list (with keyboard) 135 | this.selectedDropDown = function(option) 136 | { 137 | var itemdiv = option.parentNode.parentNode.parentNode; 138 | this.checkColor(itemdiv); 139 | }; 140 | 141 | //when changed the color 142 | this.changedColor = function(input) 143 | { 144 | var itemdiv = input.parentNode.parentNode.parentNode; 145 | this.checkColor(itemdiv); 146 | }; 147 | 148 | 149 | //adds a default style to style Array 150 | this.addStyle = function() 151 | { 152 | this.styles.push([]) 153 | this.styles[this.index] = { 154 | featureType: 'water', 155 | elementType: 'all', 156 | stylers: [], 157 | }; 158 | }; 159 | 160 | //delete a style from style Array 161 | this.deleteStyle = function(id) 162 | { 163 | if(id < this.index-1) 164 | { 165 | this.changeHtmlIds(id); 166 | } 167 | this.styles.splice(id, 1); 168 | this.deleteURLParameter(id); 169 | this.index--; 170 | this.renderStyle(); 171 | }; 172 | 173 | //changes the IDs of the HTML Style divs to be equal with Style Array IDs 174 | this.changeHtmlIds = function(deletedId) 175 | { 176 | for(var i = deletedId+1; i < this.index; i++) 177 | { 178 | itemdiv = document.getElementById("item"+i.toString()); 179 | hiddeninput = itemdiv.firstChild; 180 | itemdiv.setAttribute("id", "item"+(i-1)); 181 | hiddeninput.setAttribute("value", i-1); 182 | } 183 | }; 184 | 185 | //returns a new HTML Item Div 186 | this.getItemDiv = function() 187 | { 188 | value = ''; 189 | value += '

'; 190 | value += '

'; 191 | value += '

Feature:

'; 192 | value += '

'; 193 | value += ' '; 218 | value += '

'; 219 | value += '

'; 220 | value += '

'; 221 | value += '

Element:

'; 222 | value += '

'; 223 | value += ' '; 228 | value += '

'; 229 | value += '

'; 230 | value += '

'; 231 | value += '

Visibility:

'; 232 | value += '

'; 233 | value += ' '; 238 | value += '

'; 239 | value += '

'; 240 | value += '

'; 241 | value += '

Color:

'; 242 | value += '

'; 243 | value += '

'; 244 | newItemDiv = document.createElement('div'); 245 | newItemDiv.setAttribute('id',"item"+this.index); 246 | newItemDiv.setAttribute('class',"item"); 247 | newItemDiv.innerHTML = value; 248 | return newItemDiv; 249 | }; 250 | 251 | 252 | //checks if color is valid rgb 253 | this.checkColor = function(item) 254 | { 255 | var id = item.firstChild.value; 256 | var input = item.getElementsByTagName("input")[2]; 257 | var color = input.value; 258 | 259 | if(color.substring(0,1) == "#") 260 | color = color.substring(1,color.length); 261 | if(!isNaN("0x"+color) && (color.length == 0 || color.length == 3 || color.length == 6)){ 262 | this.isValidColor[id] = true; 263 | if(color.length ==3){ 264 | color = color.substring(0,1)+color.substring(0,1)+color.substring(1,2)+color.substring(1,2)+color.substring(2,3)+color.substring(2,3); 265 | } 266 | document.getElementById("dot"+id).style.backgroundColor="#"+color; 267 | input.className=""; 268 | this.Calculate(item, color); 269 | }else{ 270 | input.className="red"; 271 | this.styles[id].stylers = []; 272 | if(this.isValidColor[id] == true) 273 | this.renderStyle(); 274 | this.isValidColor[id] = false; 275 | } 276 | }; 277 | 278 | //calculates HSL values and merge with google base values to get the real color and add them to style Array 279 | this.Calculate=function(item, color){ 280 | var id = item.firstChild.value; 281 | var RGB = color; 282 | var featureType = item.getElementsByTagName("select")[0].value; 283 | var elementType = item.getElementsByTagName("select")[1].value; 284 | var visibility = item.getElementsByTagName("select")[2].value; 285 | 286 | //calculate HSL values 287 | var R = parseInt(RGB.substring(0,2), 16)/255; 288 | var G = parseInt(RGB.substring(2,4), 16)/255; 289 | var B = parseInt(RGB.substring(4,6), 16)/255; 290 | 291 | var min = Math.min(Math.min(R, G), B); 292 | var max = Math.max(Math.max(R, G), B); 293 | var L = ((max+min)/2)*100; 294 | var S; 295 | if(min==max){ 296 | S=0; 297 | }else{ 298 | if(L<50){ 299 | S = ((max-min)/(max+min))*100; 300 | }else{ 301 | S = ((max-min)/(2-max-min))*100; 302 | } 303 | } 304 | 305 | 306 | //get base values 307 | for (var i=0, item; item=this.googleBaseValues[i]; i++) { 308 | if (this.googleBaseValues[i][0] === featureType) { 309 | var Lbase = this.googleBaseValues[i][2]; 310 | var Sbase = this.googleBaseValues[i][1]; 311 | } 312 | } 313 | 314 | //merge HSL and base values 315 | var googleL; 316 | var googleS; 317 | if(LLbase){ 320 | googleL = (L-Lbase)*100/(100-Lbase); 321 | }else{ 322 | googleL = Lbase; 323 | } 324 | 325 | if(SSbase){ 328 | googleS = (S-Sbase)*100/(100-Sbase); 329 | }else{ 330 | googleS = Sbase; 331 | } 332 | 333 | // add to URL 334 | this.addUrlParameter(id,featureType,elementType,color,visibility); 335 | 336 | //add to style Array 337 | this.styles[id].featureType = featureType; 338 | this.styles[id].elementType = elementType; 339 | this.styles[id].stylers = []; 340 | if(color.length > 0) 341 | { 342 | this.styles[id].stylers.push({hue: "#"+color}); 343 | this.styles[id].stylers.push({saturation: Math.round(googleS)}); 344 | this.styles[id].stylers.push({lightness: Math.round(googleL)}); 345 | } 346 | this.styles[id].stylers.push({visibility: visibility}); 347 | this.renderStyle(); 348 | }; 349 | 350 | //update map Style 351 | this.renderStyle = function() 352 | { 353 | var styledMapType = new google.maps.StyledMapType(this.styles, { name: 'Styled' }); 354 | this.map.mapTypes.set('Styled', styledMapType); 355 | this.writeCode(); 356 | } 357 | 358 | this.writeCode = function() 359 | { 360 | 361 | var center = this.map.getCenter(); 362 | var zoom = this.map.getZoom(); 363 | output = "var styles = " 364 | output += this.getJson(); 365 | output += "\nvar options = {\n" 366 | output += " mapTypeControlOptions: {\n" 367 | output += " mapTypeIds: [ 'Styled']\n" 368 | output += " },\n" 369 | output += " center: new google.maps.LatLng("+center.lat()+", "+center.lng()+"),\n" 370 | output += " zoom: "+zoom+",\n" 371 | output += " mapTypeId: 'Styled'\n" 372 | output += "};\n" 373 | output += "var div = document.getElementById('map');\n" 374 | output += "var map = new google.maps.Map(div, options);\n" 375 | output += "var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });\n" 376 | output += "map.mapTypes.set('Styled', styledMapType);\n" 377 | 378 | document.getElementById('json').innerHTML=output; 379 | }; 380 | 381 | 382 | //writes Json 383 | this.getJson = function() 384 | { 385 | var jsonStyles = []; 386 | for (var i = 0; i < this.styles.length; i++) { 387 | jsonStyles[i] = "{\n" 388 | jsonStyles[i] += " featureType: '" + this.styles[i].featureType + "',\n"; 389 | jsonStyles[i] += " elementType: '" + this.styles[i].elementType + "',\n"; 390 | jsonStyles[i] += " stylers: [\n"; 391 | var jsonStylers = [] 392 | for (var j = 0; j < this.styles[i].stylers.length; j++) { 393 | for (var p in this.styles[i].stylers[j]) { 394 | switch (p) { 395 | case 'hue': 396 | jsonStylers[j] = " { " + p + ": '" + this.styles[i].stylers[j][p] + "' }"; 397 | break; 398 | case 'visibility': 399 | jsonStylers[j] = " { " + p + ": '" + this.styles[i].stylers[j][p] + "' }"; 400 | break; 401 | default: 402 | jsonStylers[j] = ' { ' + p + ': ' + this.styles[i].stylers[j][p] + ' }' 403 | } 404 | } 405 | } 406 | jsonStyles[i] += jsonStylers.join(',\n'); 407 | jsonStyles[i] += '\n ]\n'; 408 | jsonStyles[i] += ' }'; 409 | } 410 | var json = '[\n ' + jsonStyles.join(',') + '\n];'; 411 | return json; 412 | } 413 | 414 | this.getValuesFromUrl = function() 415 | { 416 | var strParam = window.location.hash.substr(1); 417 | if(strParam.length > 0) 418 | { 419 | var param = strParam.split("/"); 420 | var id = 0; 421 | for(var i=0; i 0){ 442 | var param = strParam.split("/"); 443 | param[id*4] = feature; 444 | param[id*4+1] = element; 445 | param[id*4+2] = color; 446 | param[id*4+3] = visibility; 447 | window.location.hash = "#"+param.toString().replace(/,/g,"/"); 448 | }else{ 449 | window.location.hash = "#"+feature+"/"+element+"/"+color+"/"+visibility; 450 | } 451 | } 452 | this.deleteURLParameter = function(id) 453 | { 454 | var strParam = window.location.hash.substr(1); 455 | var param = strParam.split("/"); 456 | param.splice(id*4,4); 457 | window.location.hash = "#"+param.toString().replace(/,/g,"/"); 458 | } 459 | } 460 | 461 | var gmc = new googlemapcolorizer(); -------------------------------------------------------------------------------- /fonts/syntax-roman-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /fonts/bembo-bold-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | --------------------------------------------------------------------------------