├── README.md
├── custom-map.js
├── headeradd.html
├── map_toolbar-mobile.html
├── map_toolbar.html
├── style.css
└── vrsccoptions.png


/README.md:
--------------------------------------------------------------------------------
 1 | # VRS-Charts
 2 | Aviation chart overlays for Virtual Radar Server. For a live example, see http://flights.hillhome.org and http://flights.hillhome.org/VirtualRadar.
 3 | 
 4 | ##Prerequisites
 5 | - VRS installed and running
 6 | - VRS Custom Content Plugin installed
 7 | 
 8 | ##Instructions
 9 | 
10 | - Clone or download the repo into a directory on the machine where VRS is running. Ensure you do not place the files under the Virtual Radar Server directory, since they could be overwritten on upgrades.
11 | - Configure the VRS Custom Content Plugin as shown below
12 | 
13 | ![alt tag](https://raw.github.com/ProHill/VRS-Charts/master/vrsccoptions.png)
14 | 


--------------------------------------------------------------------------------
/custom-map.js:
--------------------------------------------------------------------------------
  1 | <script src="http://maps.googleapis.com/maps/api/js"></script>
  2 | <script type="text/javascript">
  3 | 
  4 |  var map_types = {
  5 |     tac: {
  6 |         max_zoom: 12,
  7 |         default_zoom: 10
  8 |     },
  9 |     sec: {
 10 |         max_zoom: 12,
 11 |         default_zoom: 10
 12 |     },
 13 |     wac: {
 14 |         max_zoom: 10,
 15 |         default_zoom: 9
 16 |     },
 17 |     enrl: {
 18 |         max_zoom: 11,
 19 |         default_zoom: 10
 20 |     },
 21 |     enrh: {
 22 |         max_zoom: 10,
 23 |         default_zoom: 9
 24 |     },
 25 |     "default": {
 26 |         default_zoom: 10,
 27 |         clean_zoom: 7
 28 |     },
 29 |     "Contrast": {
 30 |         default_zoom: 10,
 31 |         clean_zoom: 7
 32 |     }
 33 | };
 34 | 
 35 | function updateMap() {
 36 |     setStateCookie();
 37 | }
 38 | 
 39 | var state_cookie = "vrs_maptype";
 40 | function getStateCookie() {
 41 |     if (document.cookie.length > 0) {
 42 |         start = document.cookie.indexOf(state_cookie + "=");
 43 |         if (start!=-1) {
 44 |             start += state_cookie.length + 1;
 45 |             end = document.cookie.indexOf(";", start);
 46 |             if (end==-1) {
 47 |                 end = document.cookie.length
 48 |             }
 49 |             return document.cookie.substring(start, end)
 50 |         }
 51 |     }
 52 |     return null
 53 | }
 54 | 
 55 | function setStateCookie() {
 56 |     var d = window.GoogleMap.getMapTypeId();
 57 |     var b = new Date();
 58 |     var a = new Date(b.getTime() + 30 * 86400 * 1000);
 59 |     var c = state_cookie + "=" + window.GoogleMap.getCenter().lat() + "|" + window.GoogleMap.getCenter().lng() + "|" + window.GoogleMap.getZoom() + "|" + d + ";expires=" + a.toGMTString();
 60 |     document.cookie = c
 61 | }
 62 | 
 63 | window.contrastStyleArray = [ // The Google map styles to use for the high contrast map.
 64 |         {
 65 |             featureType: 'poi',
 66 |             stylers: [
 67 |                 { visibility: 'off' }
 68 |             ]
 69 |         },{
 70 |             featureType: 'landscape',
 71 |             stylers: [
 72 |                 { saturation: -70 },
 73 |                 { lightness: -30 },
 74 |                 { gamma: 0.80 }
 75 |             ]
 76 |         },{
 77 |             featureType: 'road',
 78 |             stylers: [
 79 |                 { visibility: 'simplified' },
 80 |                 { weight: 0.4 },
 81 |                 { saturation: -70 },
 82 |                 { lightness: -30 },
 83 |                 { gamma: 0.80 }
 84 |             ]
 85 |         },{
 86 |             featureType: 'road',
 87 |             elementType: 'labels',
 88 |             stylers: [
 89 |                 { visibility: 'simplified' },
 90 |                 { saturation: -46 },
 91 |                 { gamma: 1.82 }
 92 |             ]
 93 |         },{
 94 |             featureType: 'administrative',
 95 |             stylers: [
 96 |                 { weight: 1 }
 97 |             ]
 98 |         },{
 99 |             featureType: 'administrative',
100 |             elementType: 'labels',
101 |             stylers: [
102 |                 { saturation: -100 },
103 |                 { weight: 0.1 },
104 |                 { lightness: -60 },
105 |                 { gamma: 2.0 }
106 |             ]
107 |         },{
108 |             featureType: 'water',
109 |             stylers: [
110 |                 { saturation: -72 },
111 |                 { lightness: -25 }
112 |             ]
113 |         },{
114 |             featureType: 'administrative.locality',
115 |             stylers: [
116 |                 { weight: 0.1 }
117 |             ]
118 |         },{
119 |             featureType: 'administrative.province',
120 |             stylers: [
121 |                 { lightness: -43 }
122 |             ]
123 |         },{
124 |             "featureType": "transit.line",
125 |             "stylers": [
126 |                 { "visibility": "off" }
127 |             ]
128 |         },{
129 |             "featureType": "transit.station.bus",
130 |             "stylers": [
131 |                 { "visibility": "off" }
132 |             ]
133 |         },{
134 |             "featureType": "transit.station.rail",
135 |             "stylers": [
136 |                 { "visibility": "off" }
137 |             ]
138 |         }
139 |     ];
140 | 
141 | var l = "hybrid";
142 | 
143 | function getMapTypeOption(a) {
144 |     var b = window.GoogleMap.getMapTypeId();
145 |     if (map_types[b] && map_types[b][a]) {
146 |         return map_types[b][a]
147 |     } else {
148 |         return map_types["default"][a]
149 |     }
150 | }
151 | 
152 | function addMapTypes() {
153 |     for (var b in map_types) {
154 |         if (b == "default") {
155 |             continue
156 |         }
157 |         if (b == "Contrast") {
158 |         	var contrastMap = new google.maps.StyledMapType(window.contrastStyleArray,
159 | 			    {name: "Contrast"});
160 |         	var a = {
161 |             	mapTypeControlOptions: {
162 |       				mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'Contrast']
163 |     				}
164 |             	};
165 | 	        window.GoogleMap.set(a);
166 |             continue
167 |         }
168 |         var a = {
169 |             minZoom: 4,
170 |             maxZoom: map_types[b].max_zoom,
171 |             name: b,
172 |             tileSize: new google.maps.Size(256, 256),
173 |             getTileUrl: (function(c) {
174 |                 return function(f, e) {
175 |                     var d = f.x%(1<<e);
176 |                     if (d < 0) {
177 |                         d = d + (1<<e)
178 |                     }
179 |                     var g = (1<<e) - f.y - 1;
180 |                     return "http://wms.chartbundle.com/tms/1.0.0/" + c + "/" + e + "/" + d + "/" + g + ".png"
181 |                 }
182 |             })(b)
183 |         };
184 |         window.GoogleMap.mapTypes.set(b, new google.maps.ImageMapType(a))
185 |     }
186 | }
187 | 
188 | function changeMapType() {
189 |     var b = document.getElementById("menu_pulldown");
190 |     var a = b.options[b.selectedIndex].value;
191 |     window.GoogleMap.setMapTypeId(a);
192 | }
193 | 
194 | function showMapType() {
195 |     var b = document.getElementById("menu_pulldown");
196 |     for (var a = 0; a < b.options.length; a++) {
197 |         if (b.options[a].value == window.GoogleMap.getMapTypeId()) {
198 |             b.options[a].selected = true;
199 |             break
200 |         }
201 |     }
202 | }
203 | 
204 | 		
205 | 
206 | 
207 |     if(VRS && VRS.globalDispatch && VRS.serverConfig) {
208 |         VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
209 |             // Check to see if this version of the bootstrap raises an event once the map has initialised
210 |             if(bootStrap.hookMapInitialised) {
211 |                 // It has the event - hook it
212 |                 bootStrap.hookMapInitialised(function(pageSettings) {
213 |                 
214 |                     // This is called once the map has been loaded. The jQuery plugin for the map will be
215 |                     // held in pageSettings.mapPlugin. Note that this event is also raised when the page
216 |                     // is loaded in offline mode, so we need to check that mapPlugin is good before we
217 |                     // use it. We're also going to be using stuff specific to Google Maps, so we need to
218 |                     // make sure that the map plugin is wrapping Google Maps.
219 |                     if(pageSettings.mapPlugin && pageSettings.mapPlugin.getNativeType() === 'GoogleMaps') {
220 |                         // Get the Google Maps map handle
221 |                         window.GoogleMap = pageSettings.mapPlugin.getNative();
222 |                         //document.body.onunload = setStateCookie;
223 |                         var b = getStateCookie();
224 | 					    if (b) {
225 | 					    	parts = b.split("|");
226 | 					        f = parseFloat(parts[0]);
227 | 					        a = parseFloat(parts[1]);
228 | 					        m = parseInt(parts[2]);
229 | 					        l = parts[3]
230 | 						    }         
231 |                         window.GoogleMap.set('disableDefaultUI', true);
232 |                         window.GoogleMap.set('showMapControl', false);
233 |                         window.GoogleMap.set('zoomControl', true);                                                                                        
234 |                         addMapTypes();
235 | 					    showMapType();
236 | 					    var existingControlsInTopRight = window.GoogleMap.controls[google.maps.ControlPosition.TOP_RIGHT];
237 | 					    existingControlsInTopRight.push(document.getElementById("main_toolbar"));                                                                 
238 |                         google.maps.event.addListener(window.GoogleMap, "center_changed", function() {
239 |         					localStorage.CenterLat = window.GoogleMap.getCenter().lat();
240 |        						localStorage.CenterLon = window.GoogleMap.getCenter().lng()
241 |     						});
242 |     					google.maps.event.addListener(window.GoogleMap, "zoom_changed", function() {
243 |         					localStorage.ZoomLvl = window.GoogleMap.getZoom()
244 |     						});
245 |                     }
246 |                 });
247 |             }
248 |         });
249 |     }
250 |     
251 | </script>


--------------------------------------------------------------------------------
/headeradd.html:
--------------------------------------------------------------------------------
1 | <link rel="stylesheet" href="style.css"></link>
2 | 


--------------------------------------------------------------------------------
/map_toolbar-mobile.html:
--------------------------------------------------------------------------------
 1 |     <div id="main_toolbar" style="margin-top: 4px; width: 90px;">
 2 |       <form id="charts_form" method="post">
 3 |         <select id="menu_pulldown" class="mapChartsButton" onChange="changeMapType()" style="width: 90px; background:#ffffff;">
 4 |           <optgroup label="VFR">
 5 |             <option value="sec">Sectional</option>
 6 |             <option value="tac">Terminal</option>
 7 |             <option value="wac">WAC</option>
 8 |           </optgroup>
 9 |           <optgroup label="IFR">
10 |             <option value="enrl">Low IFR</option>
11 |             <option value="enrh">High IFR</option>
12 |           </optgroup>
13 |           <optgroup label="Google">
14 |             <option value="roadmap">Roadmap</option>
15 |             <option value="hybrid">Satellite</option>
16 |             <option value="terrain">Terrain</option>
17 |             <option value="Contrast">Contrast</option>            
18 |           </optgroup>
19 |         </select>
20 |       </form>
21 |     </div>


--------------------------------------------------------------------------------
/map_toolbar.html:
--------------------------------------------------------------------------------
 1 |     <div id="main_toolbar">
 2 |       <form id="charts_form" method="post">
 3 |         <select id="menu_pulldown" class="mapChartsButton" onChange="changeMapType()">
 4 |           <optgroup label="VFR">
 5 |             <option value="sec">Sectional</option>
 6 |             <option value="tac">Terminal</option>
 7 |             <option value="wac">WAC</option>
 8 |           </optgroup>
 9 |           <optgroup label="IFR">
10 |             <option value="enrl">Low IFR</option>
11 |             <option value="enrh">High IFR</option>
12 |           </optgroup>
13 |           <optgroup label="Google">
14 |             <option value="roadmap">Roadmap</option>
15 |             <option value="hybrid">Satellite</option>
16 |             <option value="terrain">Terrain</option>
17 |             <option value="Contrast">Contrast</option>            
18 |           </optgroup>
19 |         </select>
20 |       </form>
21 |     </div>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | #main_toolbar {
 2 | 	padding: 0px;
 3 | 	padding-left: 5px;
 4 | 	margin-top: 4px;
 5 |     margin-bottom: 0px;
 6 |     margin-right: 5px;
 7 |     border: 1px solid #000;
 8 |     width: 120px;
 9 |     height: 20px;
10 |     vertical-align: middle;
11 |     border-radius: 0px;
12 |     overflow: hidden;
13 |     background-color: #fff;
14 |     background: #fff url("http://maps.gstatic.com/mapfiles/arrow-down.png") no-repeat 90% 50%;
15 | }
16 | 
17 | .mapChartsButton {
18 |     padding: 0px;
19 |     margin: 0;
20 |     margin-left: 0px;
21 |     margin-bottom: 0px;
22 |     width: 120px;
23 |     height: 20px;
24 |     vertical-align: middle;
25 |     border: 1px solid #000;
26 |     box-shadow: none;
27 |     background-color: transparent;
28 |     background-image: none;
29 |     -webkit-appearance: none;
30 |        -moz-appearance: none;
31 |             appearance: none;
32 | }
33 | 
34 | 
35 | form#charts_form{
36 |   width: 120px;
37 |   height: 20px;
38 |   vertical-align: middle;
39 |   padding: 0px;
40 |   padding-bottom:0px;
41 |   margin: 0px;
42 |   }
43 | 
44 | form select.mapChartsButton{
45 |     padding: 0px 0px;
46 |     width: 120px;
47 |     margin-bottom: 0px;
48 |     height: 20px;
49 |     border: none;
50 |     outline: none;
51 |     box-shadow: none;
52 |     background-color: transparent;
53 |     background-image: none;
54 |     -webkit-appearance: none;
55 |        -moz-appearance: none;
56 |             appearance: none;
57 | 	}
58 | 	
59 | form select.mapButton{
60 |     padding: 0px 0px;
61 |     width: 120px;
62 |     margin-bottom: 0px;
63 |     height: 20px;
64 |     border: none;
65 |     outline: none;
66 |     box-shadow: none;
67 |     background-color: transparent;
68 |     background-image: none;
69 |     -webkit-appearance: none;
70 |        -moz-appearance: none;
71 |             appearance: none;
72 | 	}


--------------------------------------------------------------------------------
/vrsccoptions.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProHill/VRS-Charts/68e9439681a8abe3b590cadbe5700d3e04c8d0f7/vrsccoptions.png


--------------------------------------------------------------------------------