PageSourceSearch

https://tenatch.com/kiwicat/index.nsp

html tenatch.com collected 2026-09-30 09:48:03 UTC 153,519 bytes, 5,126 lines download raw bytes

1
2
3
4
5
6
7
8
9<!DOCTYPE html>
10<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
11  <head>
12  <title>Tenatch Co-Retailing</title>
13    <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
14    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
15    <meta property="og:type" content="website" />
16    <meta property="og:url" content="https://www.tenatch.com"/>
17	<meta property="og:title" content="Merry Christmas!!&#127876;&#127877;&#129420;"/>
18	<meta property="og:description" content="Tenatch wishes you a Merry Christmas!!!"/>
19	<meta property="og:site_name" content="Tenatch"/>
20    <meta property="og:image" content="http://www.tenatch.com/kiwicat/images/tenatchmas.png">
21    <meta property="og:image:secure_url" content="https://www.tenatch.com/kiwicat/images/tenatchmas.png">
22    
23    <meta name="twitter:image" content="https://www.tenatch.com/kiwicat/images/tenatchmas.png">
24    <link rel="icon" href="favicon_christmas.ico" type="image/x-icon"> 
25	<link rel="shortcut icon" href="favicon_christmas.ico" type="image/x-icon"> 
26
27<!--link rel="stylesheet" href="https://jhammann.github.io/sakura/dist/sakura.min.css"-->
28<link rel="stylesheet" href="js/jquery-sakura.min.css">
29
30
31
32<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
33<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
33
34   
35   
35<script src="https://unpkg.com/[email protected]/leaflet.responsive.popup.js"></script>
35
36<link rel="stylesheet" href="https://unpkg.com/[email protected]/leaflet.responsive.popup.css" />
37   
38   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
39   
39<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
39
40
41<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
42<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
vendor: 1 bytes, line 42
42
43<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
43
44
45<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/autoresize.jquery.js"></script>
45
46
47<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
48
49
50
51<link rel="stylesheet" href="https://noerw.github.io/leaflet-sidebar-v2/css/leaflet-sidebar.css" />
52<script src="https://noerw.github.io/leaflet-sidebar-v2/js/leaflet-sidebar.js"></script>
52
53
54<script src="https://ewoken.github.io/Leaflet.MovingMarker/MovingMarker.js"></script>
54
55<link rel="stylesheet" href="https://www.zimmi.cz/Leaflet-Coordinates-Control/Control.Coordinates.css" />
56<script src="https://www.zimmi.cz/Leaflet-Coordinates-Control/Control.Coordinates.js"></script>
56
57
58   <style>
59
60#loader {
61  
62 
63  //-webkit-animation: spin 2s linear infinite;
64  //animation: spin 2s linear infinite;
65}
66
67#loader_logo {
68  position: absolute;
69  left: 44%;
70  //width: 20%
71  margin: -75px 0 0 -75px;
72  z-index: 1000;
73  //-webkit-animation: spin 2s linear infinite;
74  //animation: spin 2s linear infinite;
75}
76
77#loader_spinner {
78  position: absolute;
79  left: 50%;
80  top: 50%;
81  z-index: 1;
82  width: 150px;
83  height: 150px;
84  margin: -75px 0 0 -75px;
85  border: 16px solid #f3f3f3;
86  border-radius: 50%;
87  border-top: 16px solid #3498db;
88  width: 120px;
89  height: 120px;
90  -webkit-animation: spin 2s linear infinite;
91  animation: spin 2s linear infinite;
92}
93
94@-webkit-keyframes spin {
95  0% { -webkit-transform: rotate(0deg); }
96  100% { -webkit-transform: rotate(360deg); }
97}
98
99@keyframes spin {
100  0% { transform: rotate(0deg); }
101  100% { transform: rotate(360deg); }
102}
103
104/* Add animation to "page content" */
105.animate-bottom {
106  position: relative;
107  -webkit-animation-name: animatebottom;
108  -webkit-animation-duration: 1s;
109  animation-name: animatebottom;
110  animation-duration: 1s
111}
112
113@-webkit-keyframes animatebottom {
114  from { bottom:-100px; opacity:0 } 
115  to { bottom:0px; opacity:1 }
116}
117
118@keyframes animatebottom { 
119  from{ bottom:-100px; opacity:0 } 
120  to{ bottom:0; opacity:1 }
121}   
122
123 
124   
125body {
126    padding: 0;
127    margin: 0;
128}
129html, body, #mapid {
130    height: 100%;
131    width: 100vw;
132}
133.legend {
134	line-height: 18px;
135	color: #555;
136	background: #fff;
137	border: 1px solid #666;
138}
139.legend i {
140	width: 18px;
141	height: 18px;
142	float: left;
143	margin-right: 8px;
144	opacity: 0.7;
145}
146
147.ui-dialog { z-index: 1000 !important ;}
148.view_hidden { display: none; }
149#myTextarea, #event_url, #myImg { width: 100%; }
150
151.expose {
152    position:relative;
153}
154
155#overlay {
156    background:rgba(0,0,0,0.3);
157    display:none;
158    width:100%; height:100%;
159    position:absolute; top:0; left:0; z-index:998;
160}
161
162.vmiddle {
163  display: table-cell;
164  vertical-align: middle;
165  height: 32px;
166  line-height: 32px;
167  border: 2px dashed #f69c55;
168}
169
170.no_undeline {
171  text-decoration: none
172}
173
174.sns_img {
175  width: 384px;
176  height: auto;
177}
178
179.icon_box {
180  border: 0.01em solid;
181}
182
183.bg_white {
184  background: #fff;
185}
186
187.skeleton-sheet {
188	width: 36px; /* Icon width */
189    height: 48px; /* Icon height */
190    display: inline-block; /* Display icon as inline block */
191    background-position: 0 0px; /* Icon background position in sprite */
192    -webkit-transform: scaleX(-1);
193  	transform: scaleX(-1);
194}
195
196.skeleton-sprite {
197    background: url("images/skeleton-36x48.png") no-repeat;
198    width: 36px; /* Icon width */
199    height: 48px; /* Icon height */
200    display: inline-block; /* Display icon as inline block */
201    background-position: 0 0px; /* Icon background position in sprite */
202    
203  	
204}
205
206.flip-horizontally {
207
208	transform:scaleX(-1);
209  	-webkit-transform:scaleX(-1);
210	-moz-transform:scaleX(-1);
211	-ms-transform:scaleX(-1);
212	-o-transform:scaleX(-1);
213}
214
215.sakura {
216	z-index: 1000;
217}
218</style>
219<!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 64 bytes, lines 219-220
219
220<script async src="https://www.googletagmanager.com/gtag/js?id=
220UA-140780598-1
vendor: 12 bytes, line 220
220"></script>
221<script>
222  
vendor: 134 bytes, lines 222-226
222window.dataLayer = window.dataLayer || [];
223  function gtag(){dataLayer.push(arguments);}
224  gtag('js', new Date());
225
226  gtag('config', '
226UA-140780598-1
vendor: 4 bytes, line 226
226');
227</script>
227
228
229<!-- START Load React -->
230
231<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
vendor: 1 bytes, line 231
231
232<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
vendor: 1 bytes, line 232
232
233<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
233
234
235<style>
236.FancyBorder-blue {
237  border-style: solid;
238  border-color: blue;
239}
240.FancyBorder-red {
241  border-style: solid;
242  border-color: red;
243}
244.FancyBorder-green {
245  border-style: solid;
246  border-color: green;
247}
248</style>
249
250<!-- END Load React -->
251  </head>
252<body onload="loadMap();">  
253
254<script src="https://openplans.github.io/Leaflet.AnimatedMarker/src/AnimatedMarker.js"></script>
vendor: 1 bytes, line 254
254
255<script type="text/javascript">
256	    L.LabelOverlay = L.Class.extend({
257        initialize: function(/*LatLng*/ latLng, /*String*/ label, options) {
258            this._latlng = latLng;
259            this._label = label;
260            L.Util.setOptions(this, options);
261        },
262        options: {
263            offset: new L.Point(0, 2)
264        },
265        onAdd: function(map) {
266            this._map = map;
267            if (!this._container) {
268                this._initLayout();
269            }
270            map.getPanes().overlayPane.appendChild(this._container);
271            this._container.innerHTML = this._label;
272            map.on('viewreset', this._reset, this);
273            this._reset();
274        },
275        onRemove: function(map) {
276            map.getPanes().overlayPane.removeChild(this._container);
277            map.off('viewreset', this._reset, this);
278        },
279        _reset: function() {
280            var pos = this._map.latLngToLayerPoint(this._latlng);
281            var op = new L.Point(pos.x + this.options.offset.x, pos.y - this.options.offset.y);
282            L.DomUtil.setPosition(this._container, op);
283        },
284        _initLayout: function() {
285            this._container = L.DomUtil.create('div', 'leaflet-label-overlay');
286        }
287    }); 
288	
289	function getXHttp()
290	{
291		if(window.XMLHttpRequest)
292		{
293			return new XMLHttpRequest();
294		} else {
295			return new ActiveXObject("Microsoft.XMLHTTP");
296		}
297	}
298
299	var mymap = null;
300	var fg_sidebar_added = false;
301	var cn_tower_latlong = [43.642567, -79.387054];
302	var cn_towerIcon = L.icon({
303	        iconUrl: '/kiwicat/images/cn_tower.svg',
304	        //shadowUrl: '/kiwicat/images/cn_tower_shadow.png',
305	        iconSize:     [124, 93], // size of the icon
306	        //iconSize:     [38, 95], // size of the icon
307	        //shadowSize:   [50, 64], // size of the shadow
308	        //shadowSize:   [38, 95], // size of the shadow
309	        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
310	        //shadowAnchor: [4, 62],  // the same for the shadow
311	        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
312	    });
313	   
314	var uoft_name = 'U of T';
315	var uoft_latlong = [43.66363, -79.3943];
316	
317	var uoftIcon = L.icon({
318	        iconUrl: 'https://varsityblues.ca/favicon.ico',
319	        
320	        iconSize:     [16, 16], // size of the icon
321	        iconAnchor:   [-8, -8],
322	        popupAnchor:  [16, 4]
323	    });
324	    
325	var icube_latlong = [43.5478, -79.6642];
326	
327	var icube_name = 'ICUBE';
328	var icubeIcon = L.icon({
329	        iconUrl: 'https://icubeutm.ca/wp-content/uploads/2019/10/cropped-icon-270x270.png',
330	        //iconUrl: 'images/pumpkin_1.gif',
331	        className: "icon_box bg_white",
332	        iconSize:     [16, 16], // size of the icon
333	        iconAnchor:   [-8, -8],
334	        popupAnchor:  [16, 4]
335	    });
336	    
337	var utsc_latlong = [43.7843,-79.1873];
338	
339	var utscIcon = L.icon({
340	        iconUrl: 'https://www.utsc.utoronto.ca/thehub/sites/all/themes/bootstrapDepartments/favicon.ico',
341	        //iconUrl: 'images/pumpkin_2.gif',
342	        className: "icon_box bg_white",
343	        iconSize:     [16, 16], // size of the icon
344	        iconAnchor:   [-8, -8],
345	        popupAnchor:  [16, 4]
346	    }); 
347	
348	var ryerson_latlong = [43.657936, -79.38049];
349	var ryersonIcon = L.icon({
350	        iconUrl: 'https://www.ryerson.ca/favicon.ico',
351	        
352	        iconSize:     [16, 16], // size of the icon
353	        iconAnchor:   [-8, -8],
354	        popupAnchor:  [16, 4]
355	    });
356	    
357	var gbc_latlong = [43.676263, -79.410162];
358	var gbcIcon = L.icon({
359	        //iconUrl: 'https://www.georgebrown.ca/favicon.ico',
360	        iconUrl: 'https://www.georgebrown.ca/themes/custom/de_theme/src/img/favicons/favicon.ico',
361	        
362	        iconSize:     [16, 16], // size of the icon
363	        iconAnchor:   [-8, -8],
364	        popupAnchor:  [16, 4]
365	    });
366	    
367	var to_city_hall_latlong = [43.65314, -79.383965];
368	// 43.6536759,-79.386292
369	var to_city_hallIcon = L.icon({
370	        iconUrl: '/kiwicat/images/city_hall.svg',
371	        
372	        iconSize:     [63, 47], // size of the icon
373	        //iconSize:     [30, 45], // size of the icon
374	        shadowSize:   [50, 64], // size of the shadow
375	        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
376	        shadowAnchor: [4, 62],  // the same for the shadow
377	        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
378	    });
379	    
380	var ca_life_latlong = [43.65125, -79.38755];
381	var ca_lifeIcon = L.icon({
382	        iconUrl: '/kiwicat/images/ca_life.png',
383	        
384	        iconSize:     [40, 45], // size of the icon
385	        shadowSize:   [50, 64], // size of the shadow
386	        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
387	        shadowAnchor: [4, 62],  // the same for the shadow
388	        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
389	    });
390	    
391	var chinatown_latlong = [43.652650, -79.398025];
392	var chinatownIcon = L.icon({
393	        iconUrl: '/kiwicat/images/chinatown.png',
394	        
395	        iconSize:     [45, 45], // size of the icon
396	        shadowSize:   [50, 64], // size of the shadow
397	        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
398	        shadowAnchor: [4, 62],  // the same for the shadow
399	        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
400	    });
401	    
402	var bk_10_latlong = [43.664735,-79.403019]; //  	&#128214; 
403	var bk_10Icon = L.divIcon({
404	        html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128148;</span>" ,
405			 iconSize:     [18, 18],
406			 iconAnchor:   [-9, -9],
407	        popupAnchor:  [18, 4]
408	    });
409	    
410	var eve_1_latlong = [43.767858, -79.412593]; //  	&#128214; 
411	var eve_1Icon = L.divIcon({
412	        html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#x1F388;</span>" ,
413			 className: "dummy",
414			 iconSize:     [18, 18],
415			 iconAnchor:   [-9, -9],
416	        popupAnchor:  [18, 4]
417	    });
418	var eve_1_msg = "&#x1F388;<a href='https://acrossuhub.com/events/city-mosaic-2019/' target='_blank'>CITY MOSAIC</a><br>CITY MOSAIC provides an opportunity for youth and young adults to embark on a Global Journey, getting a TASTE OF EVERY CULTURE in the world without ever having to step foot out of Toronto.";
419	
420	var eve_2_latlong = [43.648004, -79.395076]; //  	&#128214; 
421	var eve_2Icon = L.icon({
422	        iconUrl: 'https://www.eventbrite.ca/favicon.ico',
423	        
424	        iconSize:     [16, 16], // size of the icon
425	        iconAnchor:   [-8, -8],
426	        popupAnchor:  [16, 4]
427	    });
428	var eve_2_msg = "&#x1F388;<a href='https://www.eventbrite.ca/e/city-building-and-civics-torontos-asian-heritage-tickets-61468857006' target='_blank'>Toronto's Asian Heritage</a><br>Join us to discuss and celebrate the contribution of Toronto's Asian community through the lens of city building and civic engagement.";
429	
430	var eve_3_latlong = [43.657608, -79.381461]; //  	&#128214; 
431	var eve_3Icon = L.icon({
432	        iconUrl: 'https://www.meetup.com/mu_static/en-US/favicon.a6878039.ico',
433	        
434	        iconSize:     [16, 16], // size of the icon
435	        iconAnchor:   [-8, -8],
436	        popupAnchor:  [16, 4]
437	    });
438	var eve_3_msg = "&#x1F388;<a href='https://www.meetup.com/Ryerson-Tech-Talks/events/260787731/' target='_blank'>DevOps, Amazon Web Services, Google Cloud...</a><br>Helping Enterprise teams navigate Digital Transformation with DevOps.";
439	
440	var hamilton_latlong = [43.264, -79.9523];
441	var hamilton_Icon = L.icon({
442			 iconUrl: 'images/snowman.gif',
443	        //iconUrl: 'images/spring_birds.gif',
444	        
445	        iconSize:     [60, 80], // size of the icon
446	        iconAnchor:   [3, -8],
447	        popupAnchor:  [32, 24]
448	    });
449	var hamilton_msg = 'Welcome to Hamilton!!!';
450	
451	var church_st_latlong = [43.6620, -79.3793];
452	var church_st_Icon = L.icon({
453	        iconUrl: 'images/black_cat.gif',
454	        
455	        iconSize:     [40, 30], // size of the icon
456	        iconAnchor:   [3, -8],
457	        popupAnchor:  [16, 4]
458	    });
459	var church_st_msg = 'Happy Halloween!!!';
460	    
461// Spadina Ave 43.6496179,-79.398822
462	var labelLocation = new L.LatLng(43.65563942006717, -79.39913749694824);
463    //var labelTitle = new L.LabelOverlay(labelLocation, 'Spadina Ave');
464
465	var txt_lbl_1_latlong = [43.6496179,-79.398822];
466	var txt_lbl_1_icon = L.divIcon({
467	        html: "" ,
468			 className: "dummy"
469	    })
470
471	var xy = function(x, y) {
472	    if (L.Util.isArray(x)) {    // When doing xy([x, y]);
473	        return yx(x[1], x[0]);
474	    }
475	    return yx(y, x);  // When doing xy(x, y);
476	};
477	
478	var lm_layer_grp = L.layerGroup();
479	    var lm_layer_grp_zin = L.layerGroup();
480	    var lm_layer_grp_zin2 = L.layerGroup();
481	    var lm_layer_grp_zout = L.layerGroup();
482	    var lm_layer_grp_zout2 = L.layerGroup();
483	    
484	    var sakura_layer_group = L.layerGroup();
485	    var shop_layer_group = L.layerGroup();
486	    var bk_layer_group = L.layerGroup();
487	    var college_layer_group = L.layerGroup();
488	    var event_layer_group = L.layerGroup();
489	    var halloween_layer_group = L.layerGroup();
490	    var video_layer_group = L.layerGroup();
491	
492	function loadMap()
493	{
494		//https://tiles.stadiamaps.com/styles/stamen_watercolor
495		//http://c.tile.stamen.com/watercolor/
496		//https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}
497		//https://tiles.stadiamaps.com/styles/stamen_watercolor/{z}/{x}/{y}.jpg
498		//http://c.tile.stamen.com/terrain-labels/16/18314/23914.png
499		//https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-labels/{z}/{x}/{y}{r}.{ext}
500	    //http://c.tile.stamen.com/terrain-labels/{z}/{x}/{y}.png
501	    //https://tiles.stadiamaps.com/styles/stamen_watercolor
502		//http://c.tile.stamen.com/terrain-labels/
503		
504		//var baseLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
505		//https://watercolormaps.collection.cooperhewitt.org/tile/watercolor/12/659/1587.jpg
506		var baseLayer = L.tileLayer('https://watercolormaps.collection.cooperhewitt.org/tile/watercolor/{z}/{x}/{y}.{ext}', {
507		    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="https://stamen.com/">Stamen</a>',
508		    maxZoom: 18,
509		    ext: 'jpg'
510		});
511		
512		baseLayer.setOpacity(0.7);
513		
514		//var roadLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain-labels/{z}/{x}/{y}{r}.{ext}', {ext: 'png'});
515		var roadLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}{r}.{ext}', {ext: 'png'});
516		// https://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}{r}.png
517		
518		var railLayer = L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {});
519	    
520	    var baseLayers = {
521			"Base Map": baseLayer,
522			"Road Map": roadLayer,
523			"Rail Map": railLayer
524		};
525		
526	    /*
527	    var lm_layer_grp = L.layerGroup();
528	    var lm_layer_grp_zin = L.layerGroup();
529	    var lm_layer_grp_zin2 = L.layerGroup();
530	    var lm_layer_grp_zout = L.layerGroup();
531	    var lm_layer_grp_zout2 = L.layerGroup();
532	    
533	    var shop_layer_group = L.layerGroup();
534	    var bk_layer_group = L.layerGroup();
535	    var college_layer_group = L.layerGroup();
536	    var event_layer_group = L.layerGroup();
537	    */
538	    
539	    //document.getElementById("loader_logo").style.display = "none";
540	    //if(!$("#loader").fadeOut)
541	    	//document.getElementById("loader").style.display = "none"; // to catch older browsers
542	    //else
543	    	window.setTimeout(function(){
544	    	
545	    		try
546	    		{
547	    			$("#loader_logo").fadeOut("fast", function(){ logo_watermark.addTo(mymap); });
548	    			window.setTimeout(function(){ $("#loader").fadeOut("slow"); }, 1000);
549	    		}
550	    		catch(err)
551	    		{
552	    			//alert(err)
553	    			document.getElementById("loader").style.display = "none"; // to catch older browsers
554	    			logo_watermark.addTo(mymap);
555	    		}
556	    	
557	    		//window.setTimeout(function(){
558					//if(document.getElementById("loader").style.display != "none")
559						//document.getElementById("loader").style.display = "none"; // to catch older browsers
560				//}, 3000);
561			
562			}, 3000);
563	    	    	    
564	    mymap = L.map('mapid', {
565	    	////layers: [baseLayer, roadLayer, sakura_layer_group, shop_layer_group, bk_layer_group, college_layer_group, event_layer_group, halloween_layer_group, video_layer_group]
566	    	layers: [baseLayer, roadLayer, shop_layer_group, bk_layer_group, college_layer_group, event_layer_group, halloween_layer_group, video_layer_group]
567	    }).setView([43.653941,-79.425368], 13); // "name": "FAITH / VOID"
568	    
569	    //}
569).setView([43.64715,  -79.4039], 13); // var queen_bathurst_latlng = [43.64715,  -79.4039];
570	    
571	    //}).setView(uoft_latlong, 13);
572	    
573		
574		
575		//L.control.layers(baseLayers).addTo(mymap);
576		    
577		//mymap = L.map('mapid').fitWorld();
578		//mymap = L.map('mapid').setView(uoft_latlong, 13);
579		//, {zoomControl:false}
580		//L.control.zoom({position: 'topright'}).addTo(mymap);
581	
582		L.Control.Watermark = L.Control.extend({
583    		onAdd: function(map) {
584        //var a = L.DomUtil.create('a');
585        var a = document.createElement('a');
586        var img = L.DomUtil.create('img');
587
588        img.src = 'images/tenatch_logo_beneath_christmas.png';
589        img.style.width = '150px';
590        //img.onclick = 'goHome()';
591        //img.addEventListener('click', goHome);
592        L.DomUtil.addClass(img, 'leaflet-interactive');
593
594		a.href = 'https://tenatch.ca';
595		a.target = '_blank';
596		a.appendChild(img);
597
598        return a;
599    	},
600
601    	onRemove: function(map) {
602        // Nothing to do here
603    	}
604		});
605	
606		L.control.watermark = function(opts) {
607    		return new L.Control.Watermark(opts);
608		}
609
610		//L.control.watermark({ position: 'bottomright' }).addTo(mymap);
611		var logo_watermark = L.control.watermark();
612		//logo_watermark.addTo(mymap);
613		
614		//https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}
615		//L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
616		//    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
617		//    maxZoom: 18,
618		//    id: 'mapbox.streets',
619		//    accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
620		//}).addTo(mymap);
621		
622		//http://c.tile.stamen.com/watercolor/
623		//L.tileLayer('http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg', {
624		//    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
625		//    maxZoom: 18
626		//}).addTo(mymap);
627	    
628	   	var snow_bounds = L.latLngBounds([[43.7808, -79.5984], [43.5647, -79.2114]]);
629		L.imageOverlay("images/snow_layer.gif", snow_bounds).addTo(mymap);
630		
631		//L.rectangle(snow_bounds).addTo(mymap);
632		
633		//mymap.fitBounds(snow_bounds);
634	    
635	    	    
636	    college_layer_group.addLayer(L.marker(uoft_latlong, {icon: uoftIcon}).bindPopup("U of T"));
637	    college_layer_group.addLayer(L.marker(icube_latlong, {icon: icubeIcon}).bindPopup("<img src='https://icubeutm.ca/wp-content/uploads/2021/05/logo-1.png' width='120'/>"));
638	    college_layer_group.addLayer(L.marker(utsc_latlong, {icon: utscIcon}).bindPopup("<img src='https://csec.club/static/770088174dd6a410b3f78eb38273a027/3a985/thehub1.png' width='120'/>"));
639	    college_layer_group.addLayer(L.marker(ryerson_latlong, {icon: ryersonIcon}).bindPopup("Ryerson University"));
640	    college_layer_group.addLayer(L.marker(gbc_latlong, {icon: gbcIcon}).bindPopup("George Brown University"));
641	    
642	    event_layer_group.addLayer(L.marker(eve_1_latlong, {icon: eve_1Icon}).bindPopup(eve_1_msg));
643	    event_layer_group.addLayer(L.marker(eve_2_latlong, {icon: eve_2Icon}).bindPopup(eve_2_msg));
644	    event_layer_group.addLayer(L.marker(eve_3_latlong, {icon: eve_3Icon}).bindPopup(eve_3_msg));
645	    
646	    event_layer_group.addLayer(L.marker(hamilton_latlong, {icon: hamilton_Icon}).bindPopup(hamilton_msg));
647	    //event_layer_group.addLayer(L.marker(church_st_latlong, {icon: church_st_Icon}).bindPopup(church_st_msg));
648	    
649	    //L.marker(cn_tower_latlong, {icon: cn_towerIcon}).addTo(mymap).bindPopup("CN Tower");
650	    //L.marker(to_city_hall_latlong, {icon: to_city_hallIcon}).addTo(mymap).bindPopup("City Hall");
651	    //L.marker(lm_uoft_latlong, {icon: lm_uoftIcon}).addTo(mymap).bindPopup("U of T");
652	    //L.marker(lm_on_parliament_latlong, {icon: lm_on_parliamentIcon}).addTo(mymap).bindPopup("Ontario Provincial Parliament");
653	    //L.marker(lm_rom_latlong, {icon: lm_romIcon}).addTo(mymap).bindPopup("Royal Ontario Museum");
654	    //L.marker(lm_jurassic_park_latlong, {icon: lm_jurassic_parkIcon}).addTo(mymap).bindPopup("Jurassic Park");
655	    
656	    //L.marker(ca_life_latlong, {icon: ca_lifeIcon}).addTo(mymap);
657	    //L.marker(chinatown_latlong, {icon: chinatownIcon}).addTo(mymap);
658
659var lm_icon = "";
660var lm_marker = null;
661
662lm_icon = {icon: 
663L.icon({
664			iconUrl: '/kiwicat/images/cn_tower.svg',
665			iconSize:     [124, 93],
666			iconAnchor:   [62, 46.5]
667})}
668
669lm_marker = L.marker([43.6429, -79.387054], lm_icon).bindPopup("CN Tower");
670lm_layer_grp.addLayer(lm_marker);
671
672
673
674lm_icon = {icon: 
675L.icon({
676			iconUrl: '/kiwicat/images/cn_tower.svg',
677			iconSize:     [248, 186],
678			iconAnchor:   [124, 93]
679})}
680
681lm_marker = L.marker([43.6429, -79.387054], lm_icon).bindPopup("CN Tower");
682lm_layer_grp_zin.addLayer(lm_marker);
683
684
685
686lm_icon = {icon: 
687L.icon({
688			iconUrl: '/kiwicat/images/cn_tower.svg',
689			iconSize:     [496, 372],
690			iconAnchor:   [248, 186]
691})}
692
693lm_marker = L.marker([43.6429, -79.387054], lm_icon).bindPopup("CN Tower");
694lm_layer_grp_zin2.addLayer(lm_marker);
695
696
697
698lm_icon = {icon: 
699L.icon({
700			iconUrl: '/kiwicat/images/cn_tower.svg',
701			iconSize:     [62, 46.5],
702			iconAnchor:   [31, 23.25]
703})}
704
705lm_marker = L.marker([43.6429, -79.387054], lm_icon).bindPopup("CN Tower");
706lm_layer_grp_zout.addLayer(lm_marker);
707
708
709
710lm_icon = {icon: 
711L.icon({
712			iconUrl: '/kiwicat/images/cn_tower.svg',
713			iconSize:     [31, 23.25],
714			iconAnchor:   [15.5, 11.625]
715})}
716
717lm_marker = L.marker([43.6429, -79.387054], lm_icon).bindPopup("CN Tower");
718lm_layer_grp_zout2.addLayer(lm_marker);
719
720
721lm_icon = {icon: 
722L.icon({
723			iconUrl: '/kiwicat/images/parliament.svg',
724			iconSize:     [63, 47],
725			iconAnchor:   [31.5, 23.5]
726})}
727
728lm_marker = L.marker([43.662355, -79.391582], lm_icon).bindPopup("Ontario Parliament");
729lm_layer_grp.addLayer(lm_marker);
730
731
732
733lm_icon = {icon: 
734L.icon({
735			iconUrl: '/kiwicat/images/parliament.svg',
736			iconSize:     [126, 94],
737			iconAnchor:   [63, 47]
738})}
739
740lm_marker = L.marker([43.662355, -79.391582], lm_icon).bindPopup("Ontario Parliament");
741lm_layer_grp_zin.addLayer(lm_marker);
742
743
744
745lm_icon = {icon: 
746L.icon({
747			iconUrl: '/kiwicat/images/parliament.svg',
748			iconSize:     [252, 188],
749			iconAnchor:   [126, 94]
750})}
751
752lm_marker = L.marker([43.662355, -79.391582], lm_icon).bindPopup("Ontario Parliament");
753lm_layer_grp_zin2.addLayer(lm_marker);
754
755
756
757lm_icon = {icon: 
758L.icon({
759			iconUrl: '/kiwicat/images/parliament.svg',
760			iconSize:     [31.5, 23.5],
761			iconAnchor:   [15.75, 11.75]
762})}
763
764lm_marker = L.marker([43.662355, -79.391582], lm_icon).bindPopup("Ontario Parliament");
765lm_layer_grp_zout.addLayer(lm_marker);
766
767
768
769lm_icon = {icon: 
770L.icon({
771			iconUrl: '/kiwicat/images/parliament.svg',
772			iconSize:     [15.75, 11.75],
773			iconAnchor:   [7.875, 5.875]
774})}
775
776lm_marker = L.marker([43.662355, -79.391582], lm_icon).bindPopup("Ontario Parliament");
777lm_layer_grp_zout2.addLayer(lm_marker);
778
779
780lm_icon = {icon: 
781L.icon({
782			iconUrl: '/kiwicat/images/rom.svg',
783			iconSize:     [63, 47],
784			iconAnchor:   [31.5, 23.5]
785})}
786
787lm_marker = L.marker([43.667621, -79.394576], lm_icon).bindPopup("ROM");
788lm_layer_grp.addLayer(lm_marker);
789
790
791
792lm_icon = {icon: 
793L.icon({
794			iconUrl: '/kiwicat/images/rom.svg',
795			iconSize:     [126, 94],
796			iconAnchor:   [63, 47]
797})}
798
799lm_marker = L.marker([43.667621, -79.394576], lm_icon).bindPopup("ROM");
800lm_layer_grp_zin.addLayer(lm_marker);
801
802
803
804lm_icon = {icon: 
805L.icon({
806			iconUrl: '/kiwicat/images/rom.svg',
807			iconSize:     [252, 188],
808			iconAnchor:   [126, 94]
809})}
810
811lm_marker = L.marker([43.667621, -79.394576], lm_icon).bindPopup("ROM");
812lm_layer_grp_zin2.addLayer(lm_marker);
813
814
815
816lm_icon = {icon: 
817L.icon({
818			iconUrl: '/kiwicat/images/rom.svg',
819			iconSize:     [31.5, 23.5],
820			iconAnchor:   [15.75, 11.75]
821})}
822
823lm_marker = L.marker([43.667621, -79.394576], lm_icon).bindPopup("ROM");
824lm_layer_grp_zout.addLayer(lm_marker);
825
826
827
828lm_icon = {icon: 
829L.icon({
830			iconUrl: '/kiwicat/images/rom.svg',
831			iconSize:     [15.75, 11.75],
832			iconAnchor:   [7.875, 5.875]
833})}
834
835lm_marker = L.marker([43.667621, -79.394576], lm_icon).bindPopup("ROM");
836lm_layer_grp_zout2.addLayer(lm_marker);
837
838
839lm_icon = {icon: 
840L.icon({
841			iconUrl: '/kiwicat/images/acc.svg',
842			iconSize:     [63, 47],
843			iconAnchor:   [31.5, 23.5]
844})}
845
846lm_marker = L.marker([43.644, -79.379062], lm_icon).bindPopup("Jurassic Park");
847lm_layer_grp.addLayer(lm_marker);
848
849
850
851lm_icon = {icon: 
852L.icon({
853			iconUrl: '/kiwicat/images/acc.svg',
854			iconSize:     [126, 94],
855			iconAnchor:   [63, 47]
856})}
857
858lm_marker = L.marker([43.644, -79.379062], lm_icon).bindPopup("Jurassic Park");
859lm_layer_grp_zin.addLayer(lm_marker);
860
861
862
863lm_icon = {icon: 
864L.icon({
865			iconUrl: '/kiwicat/images/acc.svg',
866			iconSize:     [252, 188],
867			iconAnchor:   [126, 94]
868})}
869
870lm_marker = L.marker([43.644, -79.379062], lm_icon).bindPopup("Jurassic Park");
871lm_layer_grp_zin2.addLayer(lm_marker);
872
873
874
875lm_icon = {icon: 
876L.icon({
877			iconUrl: '/kiwicat/images/acc.svg',
878			iconSize:     [31.5, 23.5],
879			iconAnchor:   [15.75, 11.75]
880})}
881
882lm_marker = L.marker([43.644, -79.379062], lm_icon).bindPopup("Jurassic Park");
883lm_layer_grp_zout.addLayer(lm_marker);
884
885
886
887lm_icon = {icon: 
888L.icon({
889			iconUrl: '/kiwicat/images/acc.svg',
890			iconSize:     [15.75, 11.75],
891			iconAnchor:   [7.875, 5.875]
892})}
893
894lm_marker = L.marker([43.644, -79.379062], lm_icon).bindPopup("Jurassic Park");
895lm_layer_grp_zout2.addLayer(lm_marker);
896
897
898lm_icon = {icon: 
899L.icon({
900			iconUrl: '/kiwicat/images/uoft.svg',
901			iconSize:     [63, 47],
902			iconAnchor:   [31.5, 23.5]
903})}
904
905lm_marker = L.marker([43.663, -79.396], lm_icon).bindPopup("U of T");
906lm_layer_grp.addLayer(lm_marker);
907
908
909
910lm_icon = {icon: 
911L.icon({
912			iconUrl: '/kiwicat/images/uoft.svg',
913			iconSize:     [126, 94],
914			iconAnchor:   [63, 47]
915})}
916
917lm_marker = L.marker([43.663, -79.396], lm_icon).bindPopup("U of T");
918lm_layer_grp_zin.addLayer(lm_marker);
919
920
921
922lm_icon = {icon: 
923L.icon({
924			iconUrl: '/kiwicat/images/uoft.svg',
925			iconSize:     [252, 188],
926			iconAnchor:   [126, 94]
927})}
928
929lm_marker = L.marker([43.663, -79.396], lm_icon).bindPopup("U of T");
930lm_layer_grp_zin2.addLayer(lm_marker);
931
932
933
934lm_icon = {icon: 
935L.icon({
936			iconUrl: '/kiwicat/images/uoft.svg',
937			iconSize:     [31.5, 23.5],
938			iconAnchor:   [15.75, 11.75]
939})}
940
941lm_marker = L.marker([43.663, -79.396], lm_icon).bindPopup("U of T");
942lm_layer_grp_zout.addLayer(lm_marker);
943
944
945
946lm_icon = {icon: 
947L.icon({
948			iconUrl: '/kiwicat/images/uoft.svg',
949			iconSize:     [15.75, 11.75],
950			iconAnchor:   [7.875, 5.875]
951})}
952
953lm_marker = L.marker([43.663, -79.396], lm_icon).bindPopup("U of T");
954lm_layer_grp_zout2.addLayer(lm_marker);
955
956
957lm_icon = {icon: 
958L.icon({
959			iconUrl: '/kiwicat/images/city_hall.svg',
960			iconSize:     [63, 47],
961			iconAnchor:   [31.5, 23.5]
962})}
963
964lm_marker = L.marker([43.65314, -79.383965], lm_icon).bindPopup("City Hall");
965lm_layer_grp.addLayer(lm_marker);
966
967
968
969lm_icon = {icon: 
970L.icon({
971			iconUrl: '/kiwicat/images/city_hall.svg',
972			iconSize:     [126, 94],
973			iconAnchor:   [63, 47]
974})}
975
976lm_marker = L.marker([43.65314, -79.383965], lm_icon).bindPopup("City Hall");
977lm_layer_grp_zin.addLayer(lm_marker);
978
979
980
981lm_icon = {icon: 
982L.icon({
983			iconUrl: '/kiwicat/images/city_hall.svg',
984			iconSize:     [252, 188],
985			iconAnchor:   [126, 94]
986})}
987
988lm_marker = L.marker([43.65314, -79.383965], lm_icon).bindPopup("City Hall");
989lm_layer_grp_zin2.addLayer(lm_marker);
990
991
992
993lm_icon = {icon: 
994L.icon({
995			iconUrl: '/kiwicat/images/city_hall.svg',
996			iconSize:     [31.5, 23.5],
997			iconAnchor:   [15.75, 11.75]
998})}
999
1000lm_marker = L.marker([43.65314, -79.383965], lm_icon).bindPopup("City Hall");
1001lm_layer_grp_zout.addLayer(lm_marker);
1002
1003
1004
1005lm_icon = {icon: 
1006L.icon({
1007			iconUrl: '/kiwicat/images/city_hall.svg',
1008			iconSize:     [15.75, 11.75],
1009			iconAnchor:   [7.875, 5.875]
1010})}
1011
1012lm_marker = L.marker([43.65314, -79.383965], lm_icon).bindPopup("City Hall");
1013lm_layer_grp_zout2.addLayer(lm_marker);
1014
1015
1016lm_icon = {icon: 
1017L.icon({
1018			iconUrl: '/kiwicat/images/skydome.svg',
1019			iconSize:     [63, 47],
1020			iconAnchor:   [31.5, 23.5]
1021})}
1022
1023lm_marker = L.marker([43.641548, -79.388958], lm_icon).bindPopup("Rogers Centre");
1024lm_layer_grp.addLayer(lm_marker);
1025
1026
1027
1028lm_icon = {icon: 
1029L.icon({
1030			iconUrl: '/kiwicat/images/skydome.svg',
1031			iconSize:     [126, 94],
1032			iconAnchor:   [63, 47]
1033})}
1034
1035lm_marker = L.marker([43.641548, -79.388958], lm_icon).bindPopup("Rogers Centre");
1036lm_layer_grp_zin.addLayer(lm_marker);
1037
1038
1039
1040lm_icon = {icon: 
1041L.icon({
1042			iconUrl: '/kiwicat/images/skydome.svg',
1043			iconSize:     [252, 188],
1044			iconAnchor:   [126, 94]
1045})}
1046
1047lm_marker = L.marker([43.641548, -79.388958], lm_icon).bindPopup("Rogers Centre");
1048lm_layer_grp_zin2.addLayer(lm_marker);
1049
1050
1051
1052lm_icon = {icon: 
1053L.icon({
1054			iconUrl: '/kiwicat/images/skydome.svg',
1055			iconSize:     [31.5, 23.5],
1056			iconAnchor:   [15.75, 11.75]
1057})}
1058
1059lm_marker = L.marker([43.641548, -79.388958], lm_icon).bindPopup("Rogers Centre");
1060lm_layer_grp_zout.addLayer(lm_marker);
1061
1062
1063
1064lm_icon = {icon: 
1065L.icon({
1066			iconUrl: '/kiwicat/images/skydome.svg',
1067			iconSize:     [15.75, 11.75],
1068			iconAnchor:   [7.875, 5.875]
1069})}
1070
1071lm_marker = L.marker([43.641548, -79.388958], lm_icon).bindPopup("Rogers Centre");
1072lm_layer_grp_zout2.addLayer(lm_marker);
1073
1074
1075lm_icon = {icon: 
1076L.icon({
1077			iconUrl: '/kiwicat/images/st_lawrence.svg',
1078			iconSize:     [63, 47],
1079			iconAnchor:   [31.5, 23.5]
1080})}
1081
1082lm_marker = L.marker([43.648759, -79.371632], lm_icon).bindPopup("St. Lawrence Market");
1083lm_layer_grp.addLayer(lm_marker);
1084
1085
1086
1087lm_icon = {icon: 
1088L.icon({
1089			iconUrl: '/kiwicat/images/st_lawrence.svg',
1090			iconSize:     [126, 94],
1091			iconAnchor:   [63, 47]
1092})}
1093
1094lm_marker = L.marker([43.648759, -79.371632], lm_icon).bindPopup("St. Lawrence Market");
1095lm_layer_grp_zin.addLayer(lm_marker);
1096
1097
1098
1099lm_icon = {icon: 
1100L.icon({
1101			iconUrl: '/kiwicat/images/st_lawrence.svg',
1102			iconSize:     [252, 188],
1103			iconAnchor:   [126, 94]
1104})}
1105
1106lm_marker = L.marker([43.648759, -79.371632], lm_icon).bindPopup("St. Lawrence Market");
1107lm_layer_grp_zin2.addLayer(lm_marker);
1108
1109
1110
1111lm_icon = {icon: 
1112L.icon({
1113			iconUrl: '/kiwicat/images/st_lawrence.svg',
1114			iconSize:     [31.5, 23.5],
1115			iconAnchor:   [15.75, 11.75]
1116})}
1117
1118lm_marker = L.marker([43.648759, -79.371632], lm_icon).bindPopup("St. Lawrence Market");
1119lm_layer_grp_zout.addLayer(lm_marker);
1120
1121
1122
1123lm_icon = {icon: 
1124L.icon({
1125			iconUrl: '/kiwicat/images/st_lawrence.svg',
1126			iconSize:     [15.75, 11.75],
1127			iconAnchor:   [7.875, 5.875]
1128})}
1129
1130lm_marker = L.marker([43.648759, -79.371632], lm_icon).bindPopup("St. Lawrence Market");
1131lm_layer_grp_zout2.addLayer(lm_marker);
1132
1133
1134lm_icon = {icon: 
1135L.icon({
1136			iconUrl: '/kiwicat/images/casa_loma.svg',
1137			iconSize:     [63, 47],
1138			iconAnchor:   [31.5, 23.5]
1139})}
1140
1141lm_marker = L.marker([43.678035, -79.409446], lm_icon).bindPopup("Casa Loma");
1142lm_layer_grp.addLayer(lm_marker);
1143
1144
1145
1146lm_icon = {icon: 
1147L.icon({
1148			iconUrl: '/kiwicat/images/casa_loma.svg',
1149			iconSize:     [126, 94],
1150			iconAnchor:   [63, 47]
1151})}
1152
1153lm_marker = L.marker([43.678035, -79.409446], lm_icon).bindPopup("Casa Loma");
1154lm_layer_grp_zin.addLayer(lm_marker);
1155
1156
1157
1158lm_icon = {icon: 
1159L.icon({
1160			iconUrl: '/kiwicat/images/casa_loma.svg',
1161			iconSize:     [252, 188],
1162			iconAnchor:   [126, 94]
1163})}
1164
1165lm_marker = L.marker([43.678035, -79.409446], lm_icon).bindPopup("Casa Loma");
1166lm_layer_grp_zin2.addLayer(lm_marker);
1167
1168
1169
1170lm_icon = {icon: 
1171L.icon({
1172			iconUrl: '/kiwicat/images/casa_loma.svg',
1173			iconSize:     [31.5, 23.5],
1174			iconAnchor:   [15.75, 11.75]
1175})}
1176
1177lm_marker = L.marker([43.678035, -79.409446], lm_icon).bindPopup("Casa Loma");
1178lm_layer_grp_zout.addLayer(lm_marker);
1179
1180
1181
1182lm_icon = {icon: 
1183L.icon({
1184			iconUrl: '/kiwicat/images/casa_loma.svg',
1185			iconSize:     [15.75, 11.75],
1186			iconAnchor:   [7.875, 5.875]
1187})}
1188
1189lm_marker = L.marker([43.678035, -79.409446], lm_icon).bindPopup("Casa Loma");
1190lm_layer_grp_zout2.addLayer(lm_marker);
1191
1192
1193lm_icon = {icon: 
1194L.icon({
1195			iconUrl: '/kiwicat/images/ontario_place.svg',
1196			iconSize:     [63, 47],
1197			iconAnchor:   [31.5, 23.5]
1198})}
1199
1200lm_marker = L.marker([43.630417, -79.414186], lm_icon).bindPopup("Ontario Place");
1201lm_layer_grp.addLayer(lm_marker);
1202
1203
1204
1205lm_icon = {icon: 
1206L.icon({
1207			iconUrl: '/kiwicat/images/ontario_place.svg',
1208			iconSize:     [126, 94],
1209			iconAnchor:   [63, 47]
1210})}
1211
1212lm_
1212marker = L.marker([43.630417, -79.414186], lm_icon).bindPopup("Ontario Place");
1213lm_layer_grp_zin.addLayer(lm_marker);
1214
1215
1216
1217lm_icon = {icon: 
1218L.icon({
1219			iconUrl: '/kiwicat/images/ontario_place.svg',
1220			iconSize:     [252, 188],
1221			iconAnchor:   [126, 94]
1222})}
1223
1224lm_marker = L.marker([43.630417, -79.414186], lm_icon).bindPopup("Ontario Place");
1225lm_layer_grp_zin2.addLayer(lm_marker);
1226
1227
1228
1229lm_icon = {icon: 
1230L.icon({
1231			iconUrl: '/kiwicat/images/ontario_place.svg',
1232			iconSize:     [31.5, 23.5],
1233			iconAnchor:   [15.75, 11.75]
1234})}
1235
1236lm_marker = L.marker([43.630417, -79.414186], lm_icon).bindPopup("Ontario Place");
1237lm_layer_grp_zout.addLayer(lm_marker);
1238
1239
1240
1241lm_icon = {icon: 
1242L.icon({
1243			iconUrl: '/kiwicat/images/ontario_place.svg',
1244			iconSize:     [15.75, 11.75],
1245			iconAnchor:   [7.875, 5.875]
1246})}
1247
1248lm_marker = L.marker([43.630417, -79.414186], lm_icon).bindPopup("Ontario Place");
1249lm_layer_grp_zout2.addLayer(lm_marker);
1250
1251
1252
1253mymap.addLayer(lm_layer_grp);
1254var curr_zoom_stage = 3;
1255var curr_zoom_layer = lm_layer_grp;
1256
1257mymap.on("zoomend", function() {
1258	
1259	var zoomend_level = mymap.getZoom();
1260	var zoomend_stage = 3;
1261	
1262	if(zoomend_level > 17)
1263		zoomend_stage = 5;
1264	else if(zoomend_level > 15)
1265		zoomend_stage = 4;
1266	else if(zoomend_level < 5)
1267		zoomend_stage = 0;
1268	else if(zoomend_level < 8)
1269		zoomend_stage = 1;
1270	else if(zoomend_level < 11)
1271		zoomend_stage = 2;
1272		
1273	if(zoomend_stage != curr_zoom_stage)
1274	{
1275		if(curr_zoom_stage != 0)
1276			mymap.removeLayer(curr_zoom_layer);
1277
1278		if(zoomend_stage == 5)
1279			curr_zoom_layer = lm_layer_grp_zin2;
1280		else if(zoomend_stage == 4)
1281			curr_zoom_layer = lm_layer_grp_zin;
1282		else if(zoomend_stage == 3)
1283			curr_zoom_layer = lm_layer_grp;
1284		else if(zoomend_stage == 2)
1285			curr_zoom_layer = lm_layer_grp_zout;
1286		else if(zoomend_stage == 1)
1287			curr_zoom_layer = lm_layer_grp_zout2;
1288		else
1289			curr_zoom_layer = null; // we don't show it.
1290		
1291		if(zoomend_stage != 0)
1292			mymap.addLayer(curr_zoom_layer);
1293			
1294		curr_zoom_stage = zoomend_stage;
1295	}
1296	
1297});
1298
1299
1300// Sakura
1301var sakura_icon = "";
1302var sakura_marker = null;
1303var sakura_video_popup = "";
1304var sakura_video_embed_code = "";
1305
1306
1307
1308	sakura_icon = {icon: 
1309L.icon({
1310	     	iconUrl: 'images/cherry_blossom_tree.gif',
1311	       iconSize: [64, 48], // size of the icon
1312	       iconAnchor:   [16, 12],
1313	       popupAnchor:  [16, 0]
1314	    })
1315};
1316
1317	sakura_video_embed_code = '<iframe width="640" height="360" src="https://youtube.be/embed/ZUq9r5sQTuI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
1318	sakura_video_popup = '<div><font size="4"><a href="https://onesearch.library.utoronto.ca/library-info/ROBARTS" target="_blank">John P. Robarts Research Library</a>&#127800;</font></div><br />' + sakura_video_embed_code;
1319	
1320	sakura_marker = L.marker([43.6643, -79.3995], sakura_icon).bindPopup(sakura_video_popup, {maxWidth : 640}).bindTooltip('John P. Robarts Research Library', {direction: 'right'});
1321	
1322	
1323	sakura_layer_group.addLayer(sakura_marker);
1324
1325
1326	sakura_icon = {icon: 
1327L.icon({
1328	     	iconUrl: 'images/cherry_blossom_tree.gif',
1329	       iconSize: [64, 48], // size of the icon
1330	       iconAnchor:   [16, 12],
1331	       popupAnchor:  [16, 0]
1332	    })
1333};
1334
1335	sakura_video_embed_code = '<iframe width="640" height="360" src="https://youtube.be/embed/hcc-nZ7wPeg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
1336	sakura_video_popup = '<div><font size="4"><a href="https://www.toronto.ca/data/parks/prd/facilities/complex/629/index.html" target="_blank">Cedarvale Park</a>&#127800;</font></div><br />' + sakura_video_embed_code;
1337	
1338	sakura_marker = L.marker([43.6919, -79.4309], sakura_icon).bindPopup(sakura_video_popup, {maxWidth : 640}).bindTooltip('Cedarvale Park', {direction: 'right'});
1339	
1340	
1341	sakura_layer_group.addLayer(sakura_marker);
1342
1343
1344	sakura_icon = {icon: 
1345L.icon({
1346	     	iconUrl: 'images/cherry_blossom_tree.gif',
1347	       iconSize: [64, 48], // size of the icon
1348	       iconAnchor:   [16, 12],
1349	       popupAnchor:  [16, 0]
1350	    })
1351};
1352
1353	sakura_video_embed_code = '<iframe width="640" height="360" src="https://youtube.be/embed/88Hgnr7i4zc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
1354	sakura_video_popup = '<div><font size="4"><a href="https://trinitybellwoods.ca/" target="_blank">Trinity Belllwoods Park</a>&#127800;</font></div><br />' + sakura_video_embed_code;
1355	
1356	sakura_marker = L.marker([43.6474, -79.4139], sakura_icon).bindPopup(sakura_video_popup, {maxWidth : 640}).bindTooltip('Trinity Belllwoods Park', {direction: 'right'});
1357	
1358	
1359	sakura_layer_group.addLayer(sakura_marker);
1360
1361
1362	sakura_icon = {icon: 
1363L.icon({
1364	     	iconUrl: 'images/cherry_blossom_tree.gif',
1365	       iconSize: [64, 48], // size of the icon
1366	       iconAnchor:   [16, 12],
1367	       popupAnchor:  [16, 0]
1368	    })
1369};
1370
1371	sakura_video_embed_code = '<iframe width="640" height="360" src="https://youtube.be/embed/FBd_o6G_ii8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
1372	sakura_video_popup = '<div><font size="4"><a href="https://www.alltrails.com/trail/canada/ontario/birkdale-ravine" target="_blank">Birkdale Ravine</a>&#127800;</font></div><br />' + sakura_video_embed_code;
1373	
1374	sakura_marker = L.marker([43.7646, -79.2655], sakura_icon).bindPopup(sakura_video_popup, {maxWidth : 640}).bindTooltip('Birkdale Ravine', {direction: 'right'});
1375	
1376	
1377	sakura_layer_group.addLayer(sakura_marker);
1378
1379
1380	sakura_icon = {icon: 
1381L.icon({
1382	     	iconUrl: 'images/cherry_blossom_tree.gif',
1383	       iconSize: [64, 48], // size of the icon
1384	       iconAnchor:   [16, 12],
1385	       popupAnchor:  [16, 0]
1386	    })
1387};
1388
1389	sakura_video_embed_code = '<iframe width="640" height="360" src="https://youtube.be/embed/El-eGtD5VA8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
1390	sakura_video_popup = '<div><font size="4"><a href="https://www.toronto.ca/data/parks/prd/facilities/complex/798/index.html" target="_blank">Centennial Park</a>&#127800;</font></div><br />' + sakura_video_embed_code;
1391	
1392	sakura_marker = L.marker([43.6547, -79.5887], sakura_icon).bindPopup(sakura_video_popup, {maxWidth : 640}).bindTooltip('Centennial Park', {direction: 'right'});
1393	
1394	
1395	sakura_layer_group.addLayer(sakura_marker);
1396
1397
1398	sakura_icon = {icon: 
1399L.icon({
1400	     	iconUrl: 'images/cherry_blossom_tree.gif',
1401	       iconSize: [64, 48], // size of the icon
1402	       iconAnchor:   [16, 12],
1403	       popupAnchor:  [16, 0]
1404	    })
1405};
1406
1407	sakura_video_embed_code = '<iframe width="640" height="360" src="https://youtube.be/embed/-1_H60x2KAo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
1408	sakura_video_popup = '<div><font size="4"><a href="https://www.mississauga.ca/events-and-attractions/parks/kariya-park/" target="_blank">Kariya Park</a>&#127800;</font></div><br />' + sakura_video_embed_code;
1409	
1410	sakura_marker = L.marker([43.5899, -79.6363], sakura_icon).bindPopup(sakura_video_popup, {maxWidth : 640}).bindTooltip('Kariya Park', {direction: 'right'});
1411	
1412	
1413	sakura_layer_group.addLayer(sakura_marker);
1414
1415
1416	sakura_icon = {icon: 
1417L.icon({
1418	     	iconUrl: 'images/cherry_blossom_tree.gif',
1419	       iconSize: [64, 48], // size of the icon
1420	       iconAnchor:   [16, 12],
1421	       popupAnchor:  [16, 0]
1422	    })
1423};
1424
1425	sakura_video_embed_code = '<iframe width="640" height="360" src="https://youtube.be/embed/Er9w6Wnk13k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
1426	sakura_video_popup = '<div><font size="4"><a href="https://utsc.utoronto.ca/news-events/news/buds-bloom-take-look-sakura-trees-u-t-scarborough" target="_blank">Sakura Grove</a>&#127800;</font></div><br />' + sakura_video_embed_code;
1427	
1428	sakura_marker = L.marker([43.7848, -79.1919], sakura_icon).bindPopup(sakura_video_popup, {maxWidth : 640}).bindTooltip('Sakura Grove', {direction: 'right'});
1429	
1430	
1431	sakura_layer_group.addLayer(sakura_marker);
1432
1433
1434	sakura_icon = {icon: 
1435L.icon({
1436	     	iconUrl: 'images/cherry_blossom_tree.gif',
1437	       iconSize: [64, 48], // size of the icon
1438	       iconAnchor:   [16, 12],
1439	       popupAnchor:  [16, 0]
1440	    })
1441};
1442
1443	sakura_video_embed_code = '<iframe width="640" height="360" src="https://youtube.be/embed/IstE12rKpSI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
1444	sakura_video_popup = '<div><font size="4"><a href="https://yfile.news.yorku.ca/2019/05/07/sakura-cherry-trees-on-the-keele-campus-are-poised-to-bloom/" target="_blank">York U Sakura</a>&#127800;</font></div><br />' + sakura_video_embed_code;
1445	
1446	sakura_marker = L.marker([43.7688, -79.5067], sakura_icon).bindPopup(sakura_video_popup, {maxWidth : 640}).bindTooltip('York U Sakura', {direction: 'right'});
1447	
1448	
1449	sakura_layer_group.addLayer(sakura_marker);
1450
1451
1452	sakura_icon = {icon: 
1453L.icon({
1454	     	iconUrl: 'images/cherry_blossom_tree.gif',
1455	       iconSize: [64, 48], // size of the icon
1456	       iconAnchor:   [16, 12],
1457	       popupAnchor:  [16, 0]
1458	    })
1459};
1460
1461	sakura_video_embed_code = '<iframe width="640" height="360" src="https://youtube.be/embed/Fo_lD1Zou6E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
1462	sakura_video_popup = '<div><font size="4"><a href="https://bartman905.wordpress.com/2011/05/13/cherry-blossoms-jccc/" target="_blank">JCCC Sakura</a>&#127800;</font></div><br />' + sakura_video_embed_code;
1463	
1464	sakura_marker = L.marker([43.7258, -79.335], sakura_icon).bindPopup(sakura_video_popup, {maxWidth : 640}).bindTooltip('JCCC Sakura', {direction: 'right'});
1465	
1466	
1467	sakura_layer_group.addLayer(sakura_marker);
1468
1469
1470	    
1471// BookStores:
1472var bk_icon = "";
1473var bk_marker = null;
1474
1475
1476
1477	bk_icon = {icon: 
1478L.
1479
1480icon
1481
1482({
1483
1484
1485	        iconUrl: 'http://www.acadiabooks.com/favicon.ico',
1486	        iconSize:     [16, 16],
1487	        iconAnchor:   [-8, -8],
1488	        popupAnchor:  [16, 4]
1489
1490	    })
1491}
1492	// .addTo(mymap)
1493	bk_marker = L.marker([43.6545, -79.3685], bk_icon).bindPopup(
1494
1495
1496	'<img width="16" src="http://www.acadiabooks.com/favicon.ico">' 
1497
1498	+ " <a target='_blank' rel='nofollow' href='http://www.acadiabooks.com'>Arcadia Bookstore</a><br>A selection of art books, including monographs, photography, architecture and original graphics. Specializes in out-of-print and antiquarian books."
1499	);
1500	
1501	bk_layer_group.addLayer(bk_marker);
1502
1503
1504	bk_icon = {icon: 
1505L.
1506
1507icon
1508
1509({
1510
1511
1512	        iconUrl: 'https://www.anotherstory.ca/i/1157949/favicon.jpg',
1513	        iconSize:     [16, 16],
1514	        iconAnchor:   [-8, -8],
1515	        popupAnchor:  [16, 4]
1516
1517	    })
1518}
1519	// .addTo(mymap)
1520	bk_marker = L.marker([43.648175, -79.44967], bk_icon).bindPopup(
1521
1522
1523	'<img width="16" src="https://www.anotherstory.ca/i/1157949/favicon.jpg">' 
1524
1525	+ " <a target='_blank' rel='nofollow' href='http://www.anotherstory.ca'>Another Story Bookshop</a><br>Selling books for children and adults with an emphasis on social justice, equity and diversity."
1526	);
1527	
1528	bk_layer_group.addLayer(bk_marker);
1529
1530
1531	bk_icon = {icon: 
1532L.
1533
1534divIcon
1535
1536({
1537
1538
1539			html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128214;</span>" ,
1540			className: "dummy",
1541			iconSize:     [18, 18],
1542			iconAnchor:   [-9, -9],
1543	       popupAnchor:  [18, 4]
1544
1545	    })
1546}
1547	// .addTo(mymap)
1548	bk_marker = L.marker([43.718166, -79.391038], bk_icon).bindPopup(
1549
1550
1551	'&#128214;'
1552
1553	+ " <a target='_blank' rel='nofollow' href='http://www.atticus-books.com'>Atticus Books</a><br>Selling books for children and adults with an emphasis on social justice, equity and diversity."
1554	);
1555	
1556	bk_layer_group.addLayer(bk_marker);
1557
1558
1559	bk_icon = {icon: 
1560L.
1561
1562icon
1563
1564({
1565
1566
1567	        iconUrl: 'https://bakkaphoenixbooks.com/i/1684035/favicon.png',
1568	        iconSize:     [16, 16],
1569	        iconAnchor:   [-8, -8],
1570	        popupAnchor:  [16, 4]
1571
1572	    })
1573}
1574	// .addTo(mymap)
1575	bk_marker = L.marker([43.662937, -79.403347], bk_icon).bindPopup(
1576
1577
1578	'<img width="16" src="https://bakkaphoenixbooks.com/i/1684035/favicon.png">' 
1579
1580	+ " <a target='_blank' rel='nofollow' href='https://bakkaphoenixbooks.com/'>Bakka-Phoenix</a><br>Science fiction specialty bookstore. Includes new releases, staff information, hours of operation and contact details, reviews, news, and location."
1581	);
1582	
1583	bk_layer_group.addLayer(bk_marker);
1584
1585
1586	bk_icon = {icon: 
1587L.
1588
1589divIcon
1590
1591({
1592
1593
1594			html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128214;</span>" ,
1595			className: "dummy",
1596			iconSize:     [18, 18],
1597			iconAnchor:   [-9, -9],
1598	       popupAnchor:  [18, 4]
1599
1600	    })
1601}
1602	// .addTo(mymap)
1603	bk_marker = L.marker([43.65646, -79.40876], bk_icon).bindPopup(
1604
1605
1606	'&#128214;'
1607
1608	+ " <a target='_blank' rel='nofollow' href='http://balfourbooks.squarespace.com/'>Balfour Books</a><br>Second-hand bookstore for art, history, photography, design, cooking, children's books, philosophy and fiction."
1609	);
1610	
1611	bk_layer_group.addLayer(bk_marker);
1612
1613
1614	bk_icon = {icon: 
1615L.
1616
1617divIcon
1618
1619({
1620
1621
1622			html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128214;</span>" ,
1623			className: "dummy",
1624			iconSize:     [18, 18],
1625			iconAnchor:   [-9, -9],
1626	       popupAnchor:  [18, 4]
1627
1628	    })
1629}
1630	// .addTo(mymap)
1631	bk_marker = L.marker([43.66582, -79.4068], bk_icon).bindPopup(
1632
1633
1634	'&#128214;'
1635
1636	+ " <a target='_blank' rel='nofollow' href='http://www.bmvbooks.com/'>BMV Books</a><br>Offers a variety of used and new books, CD, DVD, vinyl records at affordable prices."
1637	);
1638	
1639	bk_layer_group.addLayer(bk_marker);
1640
1641
1642	bk_icon = {icon: 
1643L.
1644
1645divIcon
1646
1647({
1648
1649
1650			html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128214;</span>" ,
1651			className: "dummy",
1652			iconSize:     [18, 18],
1653			iconAnchor:   [-9, -9],
1654	       popupAnchor:  [18, 4]
1655
1656	    })
1657}
1658	// .addTo(mymap)
1659	bk_marker = L.marker([43.668696, -79.395017], bk_icon).bindPopup(
1660
1661
1662	'&#128214;'
1663
1664	+ " <a target='_blank' rel='nofollow' href='http://bobmillerbookroom.com/'>Bob Miller Book Room</a><br>Toronto's centrally located Academic Book Store specializing in the Humanities & Social Sciences. Serving the Academic Community for over 35 years."
1665	);
1666	
1667	bk_layer_group.addLayer(bk_marker);
1668
1669
1670	bk_icon = {icon: 
1671L.
1672
1673divIcon
1674
1675({
1676
1677
1678			html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128214;</span>" ,
1679			className: "dummy",
1680			iconSize:     [18, 18],
1681			iconAnchor:   [-9, -9],
1682	       popupAnchor:  [18, 4]
1683
1684	    })
1685}
1686	// .addTo(mymap)
1687	bk_marker = L.marker([43.65741, -79.402], bk_icon).bindPopup(
1688
1689
1690	'&#128214;'
1691
1692	+ " <a target='_blank' rel='nofollow' href='http://www.beguilingbooksandart.com/'>The Beguiling</a><br>Retailing comics and related culture. Showcasing alternative, underground and avant-garde graphic story telling."
1693	);
1694	
1695	bk_layer_group.addLayer(bk_marker);
1696
1697
1698	bk_icon = {icon: 
1699L.
1700
1701icon
1702
1703({
1704
1705
1706	        iconUrl: 'https://benmcnallybooks.com/wp-content/uploads/2017/01/cropped-Faviconben-32x32.png',
1707	        iconSize:     [16, 16],
1708	        iconAnchor:   [-8, -8],
1709	        popupAnchor:  [16, 4]
1710
1711	    })
1712}
1713	// .addTo(mymap)
1714	bk_marker = L.marker([43.650816, -79.381326], bk_icon).bindPopup(
1715
1716
1717	'<img width="16" src="https://benmcnallybooks.com/wp-content/uploads/2017/01/cropped-Faviconben-32x32.png">' 
1718
1719	+ " <a target='_blank' rel='nofollow' href='https://benmcnallybooks.com/'>Ben McNally Books</a><br>A spacious bookstore in downtown Toronto. Has regular events and book reviews."
1720	);
1721	
1722	bk_layer_group.addLayer(bk_marker);
1723
1724
1725	bk_icon = {icon: 
1726L.
1727
1728divIcon
1729
1730({
1731
1732
1733			html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128214;</span>" ,
1734			className: "dummy",
1735			iconSize: 
1735    [18, 18],
1736			iconAnchor:   [-9, -9],
1737	       popupAnchor:  [18, 4]
1738
1739	    })
1740}
1741	// .addTo(mymap)
1742	bk_marker = L.marker([43.67775, -79.35288], bk_icon).bindPopup(
1743
1744
1745	'&#128214;'
1746
1747	+ " <a target='_blank' rel='nofollow' href='http://www.bookcity.ca/'>Book City</a><br>Independent bookseller with several outlets in Toronto."
1748	);
1749	
1750	bk_layer_group.addLayer(bk_marker);
1751
1752
1753	bk_icon = {icon: 
1754L.
1755
1756icon
1757
1758({
1759
1760
1761	        iconUrl: 'http://www.contacteditions.ca/.control/favicon.ico',
1762	        iconSize:     [16, 16],
1763	        iconAnchor:   [-8, -8],
1764	        popupAnchor:  [16, 4]
1765
1766	    })
1767}
1768	// .addTo(mymap)
1769	bk_marker = L.marker([43.677763, -79.406394], bk_icon).bindPopup(
1770
1771
1772	'<img width="16" src="http://www.contacteditions.ca/.control/favicon.ico">' 
1773
1774	+ " <a target='_blank' rel='nofollow' href='http://www.contacteditions.ca/'>Contact Editions</a><br>Used book store, specializing in rare and used books on art, history, literature, and the humanities."
1775	);
1776	
1777	bk_layer_group.addLayer(bk_marker);
1778
1779
1780	bk_icon = {icon: 
1781L.
1782
1783icon
1784
1785({
1786
1787
1788	        iconUrl: 'http://www.davidmasonbooks.com/favicon.ico',
1789	        iconSize:     [16, 16],
1790	        iconAnchor:   [-8, -8],
1791	        popupAnchor:  [16, 4]
1792
1793	    })
1794}
1795	// .addTo(mymap)
1796	bk_marker = L.marker([43.647133, -79.394308], bk_icon).bindPopup(
1797
1798
1799	'<img width="16" src="http://www.davidmasonbooks.com/favicon.ico">' 
1800
1801	+ " <a target='_blank' rel='nofollow' href='http://www.davidmasonbooks.com/'>David Mason Books</a><br>A vintage bookstore with many rare first edition books."
1802	);
1803	
1804	bk_layer_group.addLayer(bk_marker);
1805
1806
1807	bk_icon = {icon: 
1808L.
1809
1810icon
1811
1812({
1813
1814
1815	        iconUrl: 'https://www.adifferentbooklist.com/i/1188585/favicon.jpg',
1816	        iconSize:     [16, 16],
1817	        iconAnchor:   [-8, -8],
1818	        popupAnchor:  [16, 4]
1819
1820	    })
1821}
1822	// .addTo(mymap)
1823	bk_marker = L.marker([43.664478, -79.410787], bk_icon).bindPopup(
1824
1825
1826	'<img width="16" src="https://www.adifferentbooklist.com/i/1188585/favicon.jpg">' 
1827
1828	+ " <a target='_blank' rel='nofollow' href='https://www.adifferentbooklist.com/'>A Different Booklist</a><br>Bookstore with a focus on African and Caribbean literature."
1829	);
1830	
1831	bk_layer_group.addLayer(bk_marker);
1832
1833
1834	bk_icon = {icon: 
1835L.
1836
1837icon
1838
1839({
1840
1841
1842	        iconUrl: 'https://cdn.shopify.com/s/files/1/0999/9684/t/2/assets/favicon.png',
1843	        iconSize:     [16, 16],
1844	        iconAnchor:   [-8, -8],
1845	        popupAnchor:  [16, 4]
1846
1847	    })
1848}
1849	// .addTo(mymap)
1850	bk_marker = L.marker([43.653941, -79.425368], bk_icon).bindPopup(
1851
1852
1853	'<img width="16" src="https://cdn.shopify.com/s/files/1/0999/9684/t/2/assets/favicon.png">' 
1854
1855	+ " <a target='_blank' rel='nofollow' href='https://faithvoidshop.com/'>FAITH / VOID</a><br>Subculture shop specializing in vinyl records, cassettes, zines, comics, printed matter and soft goods."
1856	);
1857	
1858	bk_layer_group.addLayer(bk_marker);
1859
1860
1861	bk_icon = {icon: 
1862L.
1863
1864icon
1865
1866({
1867
1868
1869	        iconUrl: 'https://www.flyingbooks.ca/favicon.ico',
1870	        iconSize:     [16, 16],
1871	        iconAnchor:   [-8, -8],
1872	        popupAnchor:  [16, 4]
1873
1874	    })
1875}
1876	// .addTo(mymap)
1877	bk_marker = L.marker([43.64376, -79.42185], bk_icon).bindPopup(
1878
1879
1880	'<img width="16" src="https://www.flyingbooks.ca/favicon.ico">' 
1881
1882	+ " <a target='_blank' rel='nofollow' href='https://www.flyingbooks.ca/'>Flying Books</a><br>A small bookstore with a limited selection of specially chosen books. Each book is comes labeled with a helpful staff review."
1883	);
1884	
1885	bk_layer_group.addLayer(bk_marker);
1886
1887
1888	bk_icon = {icon: 
1889L.
1890
1891icon
1892
1893({
1894
1895
1896	        iconUrl: 'https://cdn.shopify.com/s/files/1/0220/8638/t/5/assets/logo.png',
1897	        iconSize:     [16, 16],
1898	        iconAnchor:   [-8, -8],
1899	        popupAnchor:  [16, 4]
1900
1901	    })
1902}
1903	// .addTo(mymap)
1904	bk_marker = L.marker([43.665219, -79.380589], bk_icon).bindPopup(
1905
1906
1907	'<img width="16" src="https://cdn.shopify.com/s/files/1/0220/8638/t/5/assets/logo.png">' 
1908
1909	+ " <a target='_blank' rel='nofollow' href='https://www.gladdaybookshop.com/'>Glad Day Bookshop</a><br>Lesbian, Gay, Bi, Trans and Queer Bookstore."
1910	);
1911	
1912	bk_layer_group.addLayer(bk_marker);
1913
1914
1915	bk_icon = {icon: 
1916L.
1917
1918divIcon
1919
1920({
1921
1922
1923			html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128214;</span>" ,
1924			className: "dummy",
1925			iconSize:     [18, 18],
1926			iconAnchor:   [-9, -9],
1927	       popupAnchor:  [18, 4]
1928
1929	    })
1930}
1931	// .addTo(mymap)
1932	bk_marker = L.marker([43.67642, -79.408092], bk_icon).bindPopup(
1933
1934
1935	'&#128214;'
1936
1937	+ " <a target='_blank' rel='nofollow' href='http://www.ansoncartwright.com/'>Hugh Anson-Cartwright</a><br>Antiquarian bookseller. Books, maps and prints."
1938	);
1939	
1940	bk_layer_group.addLayer(bk_marker);
1941
1942
1943	bk_icon = {icon: 
1944L.
1945
1946divIcon
1947
1948({
1949
1950
1951			html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128214;</span>" ,
1952			className: "dummy",
1953			iconSize:     [18, 18],
1954			iconAnchor:   [-9, -9],
1955	       popupAnchor:  [18, 4]
1956
1957	    })
1958}
1959	// .addTo(mymap)
1960	bk_marker = L.marker([43.66029, -79.432708], bk_icon).bindPopup(
1961
1962
1963	'&#128214;'
1964
1965	+ " <a target='_blank' rel='nofollow' href='http://www.monkeyspaw.com/'>The Monkey's Paw</a><br>Books and curiousities. Secondhand bookshop specializing in uncommon scholarly and out-of-print books, ephemera, manual typewriters, biological specimens."
1966	);
1967	
1968	bk_layer_group.addLayer(bk_marker);
1969
1970
1971	bk_icon = {icon: 
1972L.
1973
1974icon
1975
1976({
1977
1978
1979	        iconUrl: 'https://novelspot.ca/i/7604122/favicon.png',
1980	        iconSize:     [16, 16],
1981	        iconAnchor:   [-8, -8],
1982	        popupAnchor:  [16, 4]
1983
1984	    })
1985}
1986	// .addTo(mymap)
1987	bk_marker = L.marker([43.661782, -79.519827], bk_icon).bindPopup(
1988
1989
1990	'<img width="16" src="https://novelspot.ca/i/7604122/favicon.png">' 
1991
1992	+ " <a target='_blank' rel='nofollow' href='https://novelspot.ca/'>A Novel Spot Bookshop</a><br>Bookshop with a selection of bios, mysteries, classics, cookbooks, history, and children's books."
1993	);
1994	
1995	bk_layer_group.addLayer(bk_marker);
1996
1997
1998	bk_icon = {icon: 
1999L.
2000
2001icon
2002
2003({
2004
2005
2006	        iconUrl: 'https://cdn.shopify.com/s/files/1/1127/8710/t/2/assets/favicon.png',
2007	        iconSize:     [16, 16],
2008	        iconAnchor:   [-8, -8],
2009	        popupAnchor:  [16, 4]
2010
2011	    })
2012}
2013	// .addTo(mymap)
2014	bk_marker = L.marker([43.671695, -79.387207], bk_icon).bindPopup(
2015
2016
2017	'<img width="16" src="https://cdn.shopify.com/s/files/1/1127/8710/t/2/assets/favicon.png">' 
2018
2019	+ " <a target='_blank' rel='nofollow' href='https://page-panel.mysh
2019opify.com/'>Page & Panel</a><br>A comics, graphic novels and original artwork store."
2020	);
2021	
2022	bk_layer_group.addLayer(bk_marker);
2023
2024
2025	bk_icon = {icon: 
2026L.
2027
2028divIcon
2029
2030({
2031
2032
2033			html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128214;</span>" ,
2034			className: "dummy",
2035			iconSize:     [18, 18],
2036			iconAnchor:   [-9, -9],
2037	       popupAnchor:  [18, 4]
2038
2039	    })
2040}
2041	// .addTo(mymap)
2042	bk_marker = L.marker([43.66566, -79.46694], bk_icon).bindPopup(
2043
2044
2045	'&#128214;'
2046
2047	+ " <a target='_blank' rel='nofollow' href='http://pandemonium.ca/blog/about/'>Pandemonium</a><br>Sells used and new books, CD, DVD, vinyl records."
2048	);
2049	
2050	bk_layer_group.addLayer(bk_marker);
2051
2052
2053	bk_icon = {icon: 
2054L.
2055
2056icon
2057
2058({
2059
2060
2061	        iconUrl: 'https://cdn.shopify.com/s/files/1/2000/1583/files/logo_32x32.png',
2062	        iconSize:     [16, 16],
2063	        iconAnchor:   [-8, -8],
2064	        popupAnchor:  [16, 4]
2065
2066	    })
2067}
2068	// .addTo(mymap)
2069	bk_marker = L.marker([43.656848, -79.380988], bk_icon).bindPopup(
2070
2071
2072	'<img width="16" src="https://cdn.shopify.com/s/files/1/2000/1583/files/logo_32x32.png">' 
2073
2074	+ " <a target='_blank' rel='nofollow' href='https://www.silversnail.com/'>Silver Snail Comics</a><br>Comic book and action figure store. Also sells some merchandise online."
2075	);
2076	
2077	bk_layer_group.addLayer(bk_marker);
2078
2079
2080	bk_icon = {icon: 
2081L.
2082
2083icon
2084
2085({
2086
2087
2088	        iconUrl: 'https://sleuthofbakerstreet.ca/i/1584200/favicon.png',
2089	        iconSize:     [16, 16],
2090	        iconAnchor:   [-8, -8],
2091	        popupAnchor:  [16, 4]
2092
2093	    })
2094}
2095	// .addTo(mymap)
2096	bk_marker = L.marker([43.702988, -79.363913], bk_icon).bindPopup(
2097
2098
2099	'<img width="16" src="https://sleuthofbakerstreet.ca/i/1584200/favicon.png">' 
2100
2101	+ " <a target='_blank' rel='nofollow' href='https://sleuthofbakerstreet.ca/'>Sleuth of Baker Street</a><br>Book store offering new and out-of-print, American, British, and Canadian mysteries. Includes bestsellers, newsletter, recommended reading, and dates of author signing events."
2102	);
2103	
2104	bk_layer_group.addLayer(bk_marker);
2105
2106
2107	bk_icon = {icon: 
2108L.
2109
2110icon
2111
2112({
2113
2114
2115	        iconUrl: 'https://www.steventemplebooks.com/wp-content/uploads/2017/04/cropped-logo0-32x32.jpg',
2116	        iconSize:     [16, 16],
2117	        iconAnchor:   [-8, -8],
2118	        popupAnchor:  [16, 4]
2119
2120	    })
2121}
2122	// .addTo(mymap)
2123	bk_marker = L.marker([42.98296, -79.23515], bk_icon).bindPopup(
2124
2125
2126	'<img width="16" src="https://www.steventemplebooks.com/wp-content/uploads/2017/04/cropped-logo0-32x32.jpg">' 
2127
2128	+ " <a target='_blank' rel='nofollow' href='https://www.steventemplebooks.com/'>Steven Temple Books</a><br>Dealing in fine and rare books for collectors and libraries in Canadian literature, mystery, juvenile, non-fiction and antiquarian books in various fields."
2129	);
2130	
2131	bk_layer_group.addLayer(bk_marker);
2132
2133
2134	bk_icon = {icon: 
2135L.
2136
2137icon
2138
2139({
2140
2141
2142	        iconUrl: 'http://swipe.com/favicon.ico',
2143	        iconSize:     [16, 16],
2144	        iconAnchor:   [-8, -8],
2145	        popupAnchor:  [16, 4]
2146
2147	    })
2148}
2149	// .addTo(mymap)
2150	bk_marker = L.marker([43.647847, -79.394372], bk_icon).bindPopup(
2151
2152
2153	'<img width="16" src="http://swipe.com/favicon.ico">' 
2154
2155	+ " <a target='_blank' rel='nofollow' href='http://swipe.com/'>Swipe</a><br>Selling books on advertising and design."
2156	);
2157	
2158	bk_layer_group.addLayer(bk_marker);
2159
2160
2161	bk_icon = {icon: 
2162L.
2163
2164divIcon
2165
2166({
2167
2168
2169			html: "<span style='font-size: 16px; line-height: normal; text-align: center; padding: 70px 0; margin: auto;'>&#128214;</span>" ,
2170			className: "dummy",
2171			iconSize:     [18, 18],
2172			iconAnchor:   [-9, -9],
2173	       popupAnchor:  [18, 4]
2174
2175	    })
2176}
2177	// .addTo(mymap)
2178	bk_marker = L.marker([43.6455, -79.41155], bk_icon).bindPopup(
2179
2180
2181	'&#128214;'
2182
2183	+ " <a target='_blank' rel='nofollow' href='https://typebooks.ca/'>TYPE Books</a><br>Bookstore with a focus on local artists, design, cooking and arts-and-crafts."
2184	);
2185	
2186	bk_layer_group.addLayer(bk_marker);
2187
2188
2189	bk_icon = {icon: 
2190L.
2191
2192icon
2193
2194({
2195
2196
2197	        iconUrl: 'http://zoinks.ca/blog/wp-content/uploads/2015/12/cropped-logo_512-32x32.png',
2198	        iconSize:     [16, 16],
2199	        iconAnchor:   [-8, -8],
2200	        popupAnchor:  [16, 4]
2201
2202	    })
2203}
2204	// .addTo(mymap)
2205	bk_marker = L.marker([43.660702, -79.430964], bk_icon).bindPopup(
2206
2207
2208	'<img width="16" src="http://zoinks.ca/blog/wp-content/uploads/2015/12/cropped-logo_512-32x32.png">' 
2209
2210	+ " <a target='_blank' rel='nofollow' href='http://zoinks.ca/blog/'>Zoinks Music and Books</a><br>Sells used books, CDs, LPs and DVDs."
2211	);
2212	
2213	bk_layer_group.addLayer(bk_marker);
2214
2215
2216    // .addTo(mymap)
2217	bk_marker = L.marker(bk_10_latlong, {icon:bk_10Icon}).bindPopup('&#128148; <a href="https://thevarsity.ca/2019/01/27/from-ten-editions-to-none-its-a-loss-to-the-city/">Ten Editions</a><br>Ten Editions closed at the end of last year.<br>No thanks to U of T.');
2218	    
2219	bk_layer_group.addLayer(bk_marker);
2220	
2221	 // Shops:
2222	var shop_icon = "";
2223	var shop_marker = null;
2224	
2225	var shop_1_name = 'Mika';
2226	var shop_1_url = 'https://www.mikafleur.com/';
2227	
2228	var shop_1_latlong = [43.649737,-79.434793]; //  	&#128214; 
2229	var shop_1Icon = L.icon({
2230	        iconUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT2ywl354CuDdA9L8QIGXGIvK_IFXPdi40z-GgSasU8tF7Ai95a',
2231	        className: "icon_box bg_white",
2232	        iconSize:     [16, 16], // size of the icon
2233	        iconAnchor:   [-8, -8],
2234	        popupAnchor:  [16, 4]
2235	    });
2236	
2237	shop_marker = L.marker(shop_1_latlong, {icon:shop_1Icon}).bindPopup('<div class="vmiddle"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT2ywl354CuDdA9L8QIGXGIvK_IFXPdi40z-GgSasU8tF7Ai95a" width="32" /> <a href="https://mikafleur.weebly.com/" target="_blank"><font size="5">MIKA</font></a></div>Mika offers her unique design skills in both floristry and pottery<br /><iframe width="640" height="360" src="https://www.youtube.com/embed/UuaM44TpA9o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
2238		{maxWidth : 640});
2239	
2240	shop_layer_group.addLayer(shop_marker);
2241
2242//-----------------
2243// comfeeliving
2244// https://www.comfeeliving.com - interiors - pillows - Grimsby, Ontario, Canada [43.1929, -79.5621]
2245	
2246	var shop_2_name = 'Comfee Cushions';
2247	var shop_2_url = 'https://www.comfeeliving.com/';
2248	var shop_2_latlong = [43.1929, -79.5621]; //  	&#128214; 
2249	var shop_2Icon = L.icon({
2250	        iconUrl: 'https://cdn.shopify.com/s/files/1/0272/4053/0033/files/CL_Button_RGB_32x32.jpg',
2251	        className: "icon_box",
2252	        iconSize:     [16, 16], // size of the icon
2253	        iconAnchor:   [-8, -8],
2254	        popupAnchor:  [16, 4]
2255	    });
2256	
2257	var shop_2_blog_url = 'https://tenatch.ca/2020/04/21/blood-circulation-cushions-promote-health-benefits/';
2258	var shop_2_meta_json = { site_name: "Tenatch", image: "https://tenatch.ca/wp-content/uploads/2020/07/comfee.jpeg", "image:width": "600", "image:height": "600", description: "Kerri-Lee Benson began her entrepreneurial journey at a garage sale, discovering a mechanism to improve her blood circulation cushions.", type: "article", title: "Blood Circulation Cushions Promote Health Benefits - Tenatch", locale: "en_US", url: "https://tenatch.ca/2020/04/21/blood-circulation-cushions-promote-health-benefits/" };
2259	var shop_2_description = 'In 2009,  Kerri-Lee stumbled across the device now used in comfee cushion. As a creative opportunist, she immediately saw the value in it, and redesigned the application into what is now the Comfee Cushion.'
2260	
2261	shop_marker = L.marker(shop_2_latlong, {icon:shop_2Icon})
2262	.bindPopup('<div><img src="' + shop_2Icon.options.iconUrl + '" height="20" /> <a href="' + shop_2_url + '" target="_blank"><font size="5">' + shop_2_name + '</font></a></div>' + shop_2_description + '<center><a href="' + shop_2_meta_json.url + '" target="_blank"><img src="' + shop_2_meta_json.image + '" class="sns_img" /></a><br />' + shop_2_meta_json.description + ' <a href="' + shop_2_meta_json.url + '" target="_blank">#MORE</a></center>',
2263	{maxWidth : 560});
2264	
2265	shop_layer_group.addLayer(shop_marker);
2266
2267//-----------------
2268// ShawnPaulThompsonArt
2269// https://shawnpaulthompsonart.myshopify.com/ - art - painting - Parkdale [43.6404, -79.4372]
2270	
2271	var shop_3_name = 'ShawnPaulThompsonArt';
2272	var shop_3_url = 'https://shawnpaulthompsonart.myshopify.com/';
2273	var shop_3_latlong = [43.6677, -79.3554]; //  	&#128214; 
2274	var shop_3Icon = L.icon({
2275	        iconUrl: 'https://cdn.shopify.com/s/files/1/0413/8064/2969/files/sptlogo_120x.png',
2276	        //className: "icon_box",
2277	        iconSize:     [16, 16], // size of the icon
2278	        iconAnchor:   [-8, -8],
2279	        popupAnchor:  [16, 4]
2280	    });
2281	
2282	shop_marker = L.marker(shop_3_latlong, {icon:shop_3Icon}).bindPopup('<div><img src="' + shop_3Icon.options.iconUrl + '" width="20" /> <a href="' + shop_3_url + '" target="_blank"><font size="5">' + shop_3_name + '</font></a></div>He is an Abstract Contemporary Painter working in Acrylic and Mixed Mediums. His process begins in layered applications which are peeled back to reveal an abstract story, feeling or world. His palette knife and brush are his preferred tools which allow him to construct, deconstruct, and reveal a hidden narrative.<br />',
2283		{maxWidth : 560});
2284	
2285	shop_layer_group.addLayer(shop_marker);
2286
2287//-----------------
2288// The Chemist Tree
2289// https://chemisttree.com - gifts - t-shirts, cards, tote bags - Milton, Ontario, Canada [43.5130  -79.8826]
2290	
2291	var shop_4_name = 'The Chemist Tree';
2292	var shop_4_url = 'https://chemisttree.com';
2293	var shop_4_latlong = [43.5130, -79.8826]; //  	&#128214; 
2294	var shop_4Icon = L.icon({
2295	        iconUrl: 'https://cdn.shopify.com/s/files/1/0746/3217/t/20/assets/favicon.png',
2296	        className: "icon_box",
2297	        iconSize:     [16, 16], // size of the icon
2298	        iconAnchor:   [-8, -8],
2299	        popupAnchor:  [16, 4]
2300	    });
2301		
2302	var shop_4_blog_url = 'https://tenatch.ca/2020/04/12/chemistry-cards-for-the-science-lover-in-all-of-us/';
2303	var shop_4_meta_json = { site_name: "Tenatch", image: "https://tenatch.ca/wp-content/uploads/2020/07/chemist.jpeg", "image:width": "600", "image:height": "600", description: "When science and art collaborate, amazing things happen. Rovena studied science, but art is her passion. Learn about her chemistry cards!", type: "article", title: "Chemistry Cards For Any Occasion - Tenatch", locale: "en_US", url: "https://tenatch.ca/2020/04/12/chemistry-cards-for-the-science-lover-in-all-of-us/" };
2304	var shop_4_description = 'The Chemist Tree is a collection of fun chemistry-inspired handmade goods including greeting cards, posters, pin-back buttons, tote bags and more.'
2305	
2306	shop_marker = L.marker(shop_4_latlong, {icon:shop_4Icon})
2307	.bindPopup('<div><img src="' + shop_4Icon.options.iconUrl + '" height="20" /> <a href="' + shop_4_url + '" target="_blank"><font size="5">' + shop_4_name + '</font></a></div>' + shop_4_description + '<center><a href="' + shop_4_meta_json.url + '" target="_blank"><img src="' + shop_4_meta_json.image + '" class="sns_img" /></a><br />' + shop_4_meta_json.description + ' <a href="' + shop_4_meta_json.url + '" target="_blank">#MORE</a></center>',
2308	{maxWidth : 560});
2309	
2310	shop_layer_group.addLayer(shop_marker);
2311	
2312//-----------------
2313// Catalina Sánchez
2314// https://catalinasanchez.ca - stationary - notebooks - Yonge[43.6598, -79.3838]
2315	
2316	var shop_5_name = 'Catalina Sanchez';
2317	var shop_5_url = 'https://catalinasanchez.ca';
2318	var shop_5_latlong = [43.6437, -79.3746]; //  	&#128214; 
2319	var shop_5Icon = L.icon({
2320	        iconUrl: 'https://cdn.shopify.com/s/files/1/0259/3836/2467/files/Asset_5_32x32.png',
2321	        className: "icon_box",
2322	        iconSize:     [16, 16], // size of the icon
2323	        iconAnchor:   [-8, -8],
2324	        popupAnchor:  [16, 4]
2325	    });
2326	
2327	var shop_5_blog_url = 'https://tenatch.ca/2020/06/16/catalina-sanchez-notebooks-are-perfect-for-you/';
2328	var shop_5_meta_json = { site_name: "Tenatch", image: "https://tenatch.ca/wp-content/uploads/2020/07/notebooks.jpeg", "image:width": "540", "image:height": "540", description: "Catalina Sanchez notebooks fully embrace the fascination with durable, physical storage spaces for our most prized possessions: our words", type: "article", title: "Catalina Sanchez Notebooks Are Perfect For You! - Tenatch", locale: "en_US", url: "https://tenatch.ca/2020/06/16/catalina-sanchez-notebooks-are-perfect-for-you/" };
2329	var shop_5_description = 'Catalina Sanchez is a brand of handmade notebooks entirely made by hand. Handcrafted in Toronto with locally-sourced materials. We believe that the most fabulou
2329s ideas come from a notebook and a pen and that feeling is also an inspiration for us.'
2330	
2331	shop_marker = L.marker(shop_5_latlong, {icon:shop_5Icon})
2332	.bindPopup('<div><img src="' + shop_5Icon.options.iconUrl + '" height="20" /> <a href="' + shop_5_url + '" target="_blank"><font size="5">' + shop_5_name + '</font></a></div>' + shop_5_description + '<center><a href="' + shop_5_meta_json.url + '" target="_blank"><img src="' + shop_5_meta_json.image + '" class="sns_img" /></a><br />' + shop_5_meta_json.description + ' <a href="' + shop_5_meta_json.url + '" target="_blank">#MORE</a></center>',
2333	{maxWidth : 560});
2334	
2335	shop_layer_group.addLayer(shop_marker);
2336	
2337//-----------------
2338// More Than Lips
2339// https://morethanlips.net - skin care - lip balm - Chinatown [43.6526, -79.3979]
2340	
2341	var shop_6_name = 'More Than Lips';
2342	var shop_6_url = 'https://morethanlips.net';
2343	var shop_6_latlong = [43.6495, -79.395]; //  	&#128214; 
2344	var shop_6Icon = L.icon({
2345	        iconUrl: 'https://cdn.shopify.com/s/files/1/0278/9372/7303/files/Untitled_design_100x100.png',
2346	        className: "icon_box bg_white",
2347	        iconSize:     [16, 16], // size of the icon
2348	        iconAnchor:   [-8, -8],
2349	        popupAnchor:  [16, 4]
2350	    });
2351	
2352	// https://cdn.shopify.com/s/files/1/0278/9372/7303/files/MTL_Logo_7_360x.png
2353	
2354	var shop_6_blog_url = 'https://tenatch.ca/2020/05/12/this-lip-balm-is-about-more-than-lips/';
2355	var shop_6_meta_json = { site_name: "Tenatch", image: "https://tenatch.ca/wp-content/uploads/2020/07/lips.jpeg", "image:width": "628", "image:height": "314", description: "Time to open up the kissing booth? If it is, Jessica and her company More Than Lips lip balm will get your lips ready for the big event.", type: "article", title: "This Lip Balm Is About More Than Lips - Tenatch", locale: "en_US", url: "https://tenatch.ca/2020/05/12/this-lip-balm-is-about-more-than-lips/" };
2356	
2357	//.bindPopup('<div><img src="' + shop_6Icon.options.iconUrl + '" height="20" /> <a href="' + shop_6_url + '" target="_blank"><font size="5">' + shop_6_name + '</font></a></div>More Than Lips is dedicated to a simple yet powerful approach, using only ethically sourced and sustainable ingredients with no animal products, by-products, or testing, we can change the way people care for their lips, for themselves and for the planet.<br />',
2358	
2359	shop_marker = L.marker(shop_6_latlong, {icon:shop_6Icon})
2360	.bindPopup('<div><img src="' + shop_6Icon.options.iconUrl + '" height="20" /> <a href="' + shop_6_url + '" target="_blank"><font size="5">' + shop_6_name + '</font></a></div>More Than Lips is dedicated to a simple yet powerful approach, using only ethically sourced and sustainable ingredients with no animal products, by-products, or testing, we can change the way people care for their lips, for themselves and for the planet.<center><a href="' + shop_6_meta_json.url + '" target="_blank"><img src="' + shop_6_meta_json.image + '" class="sns_img" /></a><br />' + shop_6_meta_json.description + ' <a href="' + shop_6_meta_json.url + '" target="_blank">#MORE</a></center>',
2361	{maxWidth : 560});
2362	
2363	shop_layer_group.addLayer(shop_marker);
2364
2365	// videos:
2366	var video_icon = "";
2367	var video_marker = null;
2368	
2369	
2370	
2371	
2372	
2373	var cne_latlong = [43.6354, -79.4186];
2374	var cne_icon = L.icon({
2375	        iconUrl: 'https://theex.com/favicon.ico',
2376	        className: "icon_box bg_white",
2377	        iconSize:     [16, 16], // size of the icon
2378	        iconAnchor:   [-8, -8],
2379	        popupAnchor:  [16, 4]
2380	    });
2381	    
2382	L.marker(cne_latlong, {icon: cne_icon}).addTo(mymap);
2383	
2384	var video_name = 'CNE';
2385	var video_url = 'https://theex.com/';
2386	var video_latlong = [43.6354, -79.4186]; //  	&#128214; 
2387	var video_title = 'Canada National Exhibition';
2388	var video_title_img_src = 'https://ccaa.life/wp-content/uploads/2017/10/CNELogo.gif';
2389	var video_icon = null;
2390	var video_popup = null;
2391
2392// Start Ms Pumpkin
2393 	var ms_pumpkin_icon_s = L.icon({
2394			iconUrl: 'images/ms_pumpkin.png',
2395			iconSize: [48, 36], // size of the icon
2396	       iconAnchor:   [6, 8],
2397	       popupAnchor:  [18, 0]
2398			});
2399	
2400	var ms_pumpkin_icon_m = L.icon({
2401			iconUrl: 'images/ms_pumpkin.png',
2402			iconSize: [64, 48], // size of the icon
2403	       iconAnchor:   [16, 12],
2404	       popupAnchor:  [16, 0]
2405			});
2406			
2407	var ms_pumpkin_icon_l = L.icon({
2408			iconUrl: 'images/ms_pumpkin.png',
2409			iconSize: [80, 60], // size of the icon
2410	       iconAnchor:   [22, 22],
2411	       popupAnchor:  [18, -12]
2412			});
2413	
2414	video_icon = ms_pumpkin_icon_m;
2415	video_latlong = [43.6342, -79.4118];
2416	//video_embed_code = '<iframe width="640" height="360" src="https://www.youtube.com/embed/IiYDlZvwGug" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
2417	video_embed_code = '<iframe width="640" height="360" scrolling="no" frameborder="0" style="border: none;" src="https://www.bitchute.com/embed/khEYCeiokj9J/"></iframe>';
2418	video_popup = '<div class="vmiddle"><img src="' + video_title_img_src + '" width="32" /> <a href="' + video_url + '" target="_blank"><font size="5">' + video_name +'</font></a></div>' + video_title + '<br />' + video_embed_code;
2419	
2420	video_marker = L.marker(video_latlong, {icon:video_icon}).bindPopup(video_popup, {maxWidth : 640});
2421	
2422	video_layer_group.addLayer(video_marker);
2423
2424// End Ms Pumpkin
2425
2426// Start Neko K
2427 	var neko_k_icon_s = L.icon({
2428			iconUrl: 'images/neko_k.png',
2429			iconSize: [48, 36], // size of the icon
2430	       iconAnchor:   [6, 8],
2431	       popupAnchor:  [18, 0]
2432			});
2433	
2434	var neko_k_icon_m = L.icon({
2435			iconUrl: 'images/neko_k.png',
2436			iconSize: [64, 48], // size of the icon
2437	       iconAnchor:   [16, 12],
2438	       popupAnchor:  [16, 0]
2439			});
2440			
2441	var neko_k_icon_l = L.icon({
2442			iconUrl: 'images/neko_k.png',
2443			iconSize: [80, 60], // size of the icon
2444	       iconAnchor:   [22, 22],
2445	       popupAnchor:  [18, -12]
2446			});
2447	
2448	video_icon = neko_k_icon_m;
2449	video_latlong = [43.8157, -79.3469];
2450	video_url = 'https://jtown.ca/';
2451	video_title_img_src = 'images/j_town.png';
2452	
2453	video_embed_code = '<iframe width="640" height="360" scrolling="no" frameborder="0" style="border: none;" src="https://www.bitchute.com/embed/9T2opH19xs80/"></iframe>';
2454	video_popup = '<div><a href="' + video_url + '" class="no_undeline" target="_blank"><img src="' + video_title_img_src + '" height="32" /></a></div><br />' + video_embed_code;
2455	
2456	video_marker = L.marker(video_latlong, {icon:video_icon}).bindPopup(video_popup, {maxWidth : 640});
2457	
2458	video_layer_group.addLayer(video_marker);
2459
2460// End Neko K
2461
2462// Start Ice Cream E
2463 	var ice_cream_e_icon_s = L.icon({
2464			iconUrl: 'images/ice_cream_e.png',
2465			iconSize: [48, 36], // size of the icon
2466	       iconAnchor:   [6, 8],
2467	       popupAnchor:  [18, 0]
2468			});
2469	
2470	var ice_cream_e_icon_m = L.icon({
2471			iconUrl: 'images/ice_cream_e.png',
2472			iconSize: [64, 48], // size of the icon
2473	       iconAnchor:   [16, 12],
2474	       popupAnchor:  [16, 0]
2475			});
2476			
2477	var ice_cream_e_icon_l = L.icon({
2478			iconUrl: 'images/ice_cream_e.png',
2479			iconSize: [80, 60], // size of the icon
2480	       iconAnchor:   [22, 22],
2481	       popupAnchor:  [18, -12]
2482			});
2483	
2484	video_icon = ice_cream_e_icon_m;
2485	video_latlong = [43.6316, -79.4207];
2486	video_url = 'https://cynthiasbathlab.square.site/';
2487	
2488	video_title = 'Canada National Exhibition';
2489	video_title_img_src = 'https://ccaa.life/wp-content/uploads/2017/10/CNELogo.gif';
2490	
2491	video_embed_code = '<iframe width="640" height="360" scrolling="no" frameborder="0" style="border: none;" src="https://www.bitchute.com/embed/lQu58mjUtJVW/"></iframe>';
2492	video_popup = '<div><a href="' + video_url + '" class="no_undeline" target="_blank"><img src="images/cynthias_bath_lab.png" height="32" /> <img src="' + video_title_img_src + '" width="32" /></a></div><br />' + video_embed_code;
2493	
2494	video_marker = L.marker(video_latlong, {icon:video_icon}).bindPopup(video_popup, {maxWidth : 640});
2495	
2496	video_layer_group.addLayer(video_marker);
2497
2498// End Ice Cream E
2499
2500// Start Ricoffee
2501//  
2502
2503	var ricoffee_icon_s = L.icon({
2504			iconUrl: 'images/ricoffee.png',
2505			iconSize: [48, 36], // size of the icon
2506	       iconAnchor:   [6, 8],
2507	       popupAnchor:  [18, 0]
2508			});
2509	
2510	var ricoffee_icon_m = L.icon({
2511			iconUrl: 'images/ricoffee.png',
2512			iconSize: [64, 48], // size of the icon
2513	       iconAnchor:   [16, 12],
2514	       popupAnchor:  [16, 0]
2515			});
2516			
2517	var ricoffee_icon_l = L.icon({
2518			iconUrl: 'images/ricoffee.png',
2519			iconSize: [80, 60], // size of the icon
2520	       iconAnchor:   [22, 22],
2521	       popupAnchor:  [18, -12]
2522			});
2523	
2524	video_icon = ricoffee_icon_m;
2525	video_latlong = [43.6702, -79.3919];
2526	video_url = 'https://omusubibarsuzume.com/';
2527	video_title_img_src = 'https://img1.wsimg.com/isteam/ip/651c1373-f9af-470a-9f53-4624c7011a4a/suzume-logo-facebook.jpeg';
2528	
2529	var og_url = 'http://tenatch.ca/2019/10/18/i-struck-gold-when-i-found-goldstruck-coffee/';
2530	var og_title = 'I Struck Gold when I Found GoldStruck Coffee';
2531	var og_description = 'What I love about Goldstruck Coffee is not only the tasty drinks and chocolate, but also it can be anything depending on the purpose.';
2532	var og_image = 'https://i0.wp.com/tenatch.ca/wp-content/uploads/2022/06/eb73e-goldstruck_coffee6-scaled-1-e1640467753486.jpg';
2533	
2534	video_embed_code = '<iframe width="640" height="360" scrolling="no" frameborder="0" style="border: none;" src="https://www.bitchute.com/embed/dSc74QJgXSTY/"></iframe>';
2535	video_popup = '<div><a href="' + og_url + '" target="_blank"><h2>' + og_title + '</h2></a><a href="' + og_url + '" target="_blank"><img src="' + og_image + '" width="480" /></a><br />' + og_description + ' <a href="' + og_url + '" target="_blank">Read Blog</a></div>';
2536	
2537	video_marker = L.marker(video_latlong, {icon:video_icon}).bindPopup(video_popup, {maxWidth : 480});
2538	
2539	video_layer_group.addLayer(video_marker);
2540
2541// End Ricoffee
2542
2543// Start Midorizaurus
2544 	var midorizaurus_icon_s = L.icon({
2545			iconUrl: 'images/midorizaurus.png',
2546			iconSize: [48, 36], // size of the icon
2547	       iconAnchor:   [6, 8],
2548	       popupAnchor:  [18, 0]
2549			});
2550	
2551	var midorizaurus_icon_m = L.icon({
2552			iconUrl: 'images/midorizaurus.png',
2553			iconSize: [64, 48], // size of the icon
2554	       iconAnchor:   [16, 12],
2555	       popupAnchor:  [16, 0]
2556			});
2557			
2558	var midorizaurus_icon_l = L.icon({
2559			iconUrl: 'images/midorizaurus.png',
2560			iconSize: [80, 60], // size of the icon
2561	       iconAnchor:   [22, 22],
2562	       popupAnchor:  [18, -12]
2563			});
2564	
2565	video_icon = midorizaurus_icon_m;
2566	video_latlong = [43.6522, -79.405];
2567	video_url = 'https://omusubibarsuzume.com/';
2568	video_title_img_src = 'https://img1.wsimg.com/isteam/ip/651c1373-f9af-470a-9f53-4624c7011a4a/suzume-logo-facebook.jpeg';
2569	
2570	video_embed_code = '<iframe width="640" height="360" scrolling="no" frameborder="0" style="border: none;" src="https://www.bitchute.com/embed/dSc74QJgXSTY/"></iframe>';
2571	video_popup = '<div><a href="' + video_url + '" class="no_undeline" target="_blank"><img src="' + video_title_img_src + '" height="32" /></a></div><br />' + video_embed_code;
2572	
2573	video_marker = L.marker(video_latlong, {icon:video_icon}).bindPopup(video_popup, {maxWidth : 640});
2574	
2575	video_layer_group.addLayer(video_marker);
2576
2577// End Midorizaurus
2578
2579// Start Ramen M
2580 	var ramen_m_icon_s = L.icon({
2581			iconUrl: 'images/ramen_m.png',
2582			iconSize: [48, 36], // size of the icon
2583	       iconAnchor:   [6, 8],
2584	       popupAnchor:  [18, 0]
2585			});
2586	
2587	var ramen_m_icon_m = L.icon({
2588			iconUrl: 'images/ramen_m.png',
2589			iconSize: [64, 48], // size of the icon
2590	       iconAnchor:   [16, 12],
2591	       popupAnchor:  [16, 0]
2592			});
2593			
2594	var ramen_m_icon_l = L.icon({
2595			iconUrl: 'images/ramen_m.png',
2596			iconSize: [80, 60], // size of the icon
2597	       iconAnchor:   [22, 22],
2598	       popupAnchor:  [18, -12]
2599			});
2600	
2601	video_icon = ramen_m_icon_m;
2602	video_latlong = [43.649737,-79.43465];
2603	video_url = 'https://www.mikafleur.com/';
2604	var video_name = 'MIKA';
2605	video_title_img_src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT2ywl354CuDdA9L8QIGXGIvK_IFXPdi40z-GgSasU8tF7Ai95a';
2606	
2607	video_embed_code = '<iframe width="640" height="360" scrolling="no" frameborder="0" style="border: none;" src="https://www.bitchute.com/embed/5V9zF0RmyqF5/"></iframe>';
2608	video_popup = '<div class="vmiddle"><img src="' + video_title_img_src + '" width="32" /> <a href="' + video_url + '" target="_blank"><font size="5">' + video_name +'</font></a></div><br />' + video_embed_code;
2609	
2610	video_marker = L.marker(video_latlong, {icon:video_icon}).bindPopup(video_popup, {maxWidth : 640});
2611	
2612	video_layer_group.addLayer(video_marker);
2613
2614// End Ramen M
2615
2616// Start highpark_sakura
2617 	var highpark_sakura_icon_s = L.icon({
2618			iconUrl: 'images/cherry_blossom_tree.gif',
2619			iconSize: [48, 36], // size of the icon
2620	       iconAnchor:   [6, 8],
2621	       popupAnchor:  [18, 0]
2622			});
2623	
2624	var highpark_sakura_icon_m = L.icon({
2625			iconUrl: 'images/cherry_blossom_tree.gif',
2626			iconSize: [64, 48], // size of the icon
2627	       iconAnchor:   [16, 12],
2628	       popupAnchor:  [16, 0]
2629			});
2630			
2631	var highpark_sakura_icon_l = L.icon({
2632			iconUrl: 'images/cherry_blossom_tree.gif',
2633			iconSize: [80, 60], // size of the icon
2634	       iconAnchor:   [22, 22],
2635	       popupAnchor:  [18, -12]
2636			});
2637	
2638	video_icon = highpark_sakura_icon_m;
2639	video_latlong = [43.6472 , -79.4656];
2640	video_url = 'https://www.highparktoronto.com/cherry-trees.php';
2641	video_title_img_src = 'https://www.highparktoronto.com/images/logo.jpg';
2642	
2643	video_embed_code = '<iframe width="640" height="360" src="https://www.youtube.com/embed/7ZT0kqx4erw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
2644	video_popup = '<div><a href="' + video_url + '" class="no_undeline" target="_blank"><img src="' + video_title_img_src + '" height="32" /></a></div><br />' + video_embed_code;
2645	
2646	video_marker = L.marker(video_latlong, {icon:video_icon}).bindPopup(video_popup, {maxWidth : 640}).bindTooltip('High Park', {direction: 'right'});;
2647	
2648	//video_layer_group.addLayer(video_marker);
2649	sakura_layer_group.addLayer(video_marker);
2650
2651// End Midorizaurus
2652
2653		////L.control.layers(null, { "&#127800; sakura": sakura_layer_group, "&#128717; shops": shop_layer_group, "&#128249; videos": video_layer_group, "&#128214; bookstores": bk_layer_group, "&#127979; colleges": college_layer_group, "&#x1F388; events": event_layer_group}, { "collapsed": false, "position": "bottomright" }).addTo(mymap);
2654		L.control.layers(null, { "&#128717; shops": shop_layer_group, "&#128249; videos": video_layer_group, "&#128214; bookstores": bk_layer_group, "&#127979; colleges": college_layer_group, "&#x1F388; events": event_layer_group}, { "collapsed": false, "position": "bottomright" }).addTo(mymap);
2655	    
2656    	//L.marker(txt_lbl_1_latlong, {icon: txt_lbl_1_icon}).addTo(mymap);
2657    	//L.marker(txt_lbl_1_latlong, {icon: txt_lbl_1_icon}).bindTooltip('Spadina Ave').addTo(mymap).openTooltip();
2658    
2659	    //mymap.addLayer(labelTitle);
2660	    
2661	    var helloPopup = L.popup().setContent('Hello World!');
2662	    var helloTooltip = L.tooltip().setContent('Hello World!');
2663	    
2664		L.easyButton('<div>&#x1F310;</div>', function(btn, map){
2665    		//helloPopup.setLatLng(map.getCenter()).openOn(map);
2666    		mymap.locate({setView: true, maxZoom: 16});
2667			mymap.on('locationfound', onLocationFound);
2668			mymap.on('locationerror', onLocationError);
2669		}).addTo(mymap);
2670		//, {position: 'topright'}
2671	    	    		
2672		//&#128196;
2673		// <i class="fa fa-bars"></i>
2674		L.easyButton('<i class="fa fa-bars"></i>', function(btn, map){
2675    		//helloPopup.setLatLng(map.getCenter()).openOn(map);
2676    		
2677			var xhttp = getXHttp();
2678			
2679			xhttp.onreadystatechange = function() {
2680				if(this.readyState == 4 && this.status == 200)
2681				{
2682					var helloResponsivePopup = L.responsivePopup({ hasTip: false, keepInView: true }).setContent(xhttp.responseText);
2683    			
2684					helloResponsivePopup.setLatLng(map.getCenter()).openOn(map);
2685					//alert(xhttp.responseText);
2686				}
2687			};
2688    	   
2689    	   //xhttp.open("GET", "home.nsp", true);
2690    	   //xhttp.send();
2691    	   
2692    	   //$( function() {
2693			//$( "#dialog" ).dialog({ width: 600 });
2694			//} );
2695			
2696			
2697			toggleSidebar();
2698    		
2699		}).addTo(mymap);
2700		
2701		function toggleSidebar()
2702		{
2703			if(fg_sidebar_added)
2704			{
2705				sidebar.addTo(mymap); // strange hack to fix the problem with sidebar not handling remove properly
2706				mymap.removeControl(sidebar);
2707				$("#sidebar").css("display", "none");
2708				fg_sidebar_added = false;
2709			}
2710			else
2711			{
2712				sidebar.addTo(mymap);
2713				$("#sidebar").css("display", "block");
2714				fg_sidebar_added = true;
2715				loadReact();
2716			}
2717	}
2718		
2719		//var legend = L.control({position: 'bottomright'});
2720		
2721		//legend.onAdd = function (map) {
2722		
2723			//var div = L.DomUtil.create('div', 'info legend');
2724			
2725			//div.innerHTML = 'Legend:<form><br><input name="bookstore" type="checkbox" onclick="handleLegendOnClick(this)" checked> Hello World!!<br><br></form>';
2726		
2727			//return div;
2728		//};
2729		
2730		//legend.addTo(mymap);
2731		
2732		// Ugly hack.
2733		//"<div>Points of Interest:</div>"
2734		var label_div = document.createElement("div");
2735		label_div.className = "expose";
2736		label_div.innerHTML = "Points of Interest:"
2737		document.getElementsByClassName("leaflet-control-layers-overlays")[0].prepend(label_div);
2738		//document.getElementsByClassName("leaflet-control-layers-overlays")[0].appendHtml("<a href=''>more...</a>");
2739		
2740		// shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
2741		//alert("Loaded");
2742		
2743		
2744		
2745		//var sidebar = L.control.sidebar({
2746    	//autopan: false,       // whether to maintain the centered map point when opening the sidebar
2747    	//closeButton: true,    // whether t add a close button to the panes
2748    	//container: 'sidebar', // the DOM container or #ID of a predefined sidebar container that should be used
2749    	//position: 'left',     // left or right
2750		//}).addTo(mymap);
2751		
2752		var sidebar = L.control.sidebar('sidebar').addTo(mymap);
2753		
2754		
2755		 //L.DomUtil.removeClass(sidebar, 'visible');
2756		 //sidebar.hide();
2757		 //$("#sidebar").css("visibility", "hidden");
2758		 //$("#sidebar").css("position", "static");
2759		 		
2760		/* add a new panel */
2761var panelContent = {
2762    id: 'userinfo',                     // UID, used to access the panel
2763    tab: '<i class="fa fa-gear"></i>',  // content can be passed as HTML string,
2764    //pane: someDomNode.innerHTML,        // DOM elements can be passed, too
2765    title: 'Your Profile',              // an optional pane header
2766    position: 'bottom'                  // optional vertical alignment, defaults to 'top'
2767};
2768sidebar.addPanel(panelContent);
2769
2770/* add an external link */
2771sidebar.addPanel({
2772    id: 'ghlink',
2773    tab: '<i class="fa fa-github"></i>',
2774    button: 'https://github.com/debisoft/tenatch',
2775});
2776
2777/* add a button with click listener */
2778sidebar.addPanel({
2779    id: 'click',
2780    tab: '<i class="fa fa-info"></i>',
2781    button: function (event) { 
2782    //console.log(event); 
2783    $( "#dialog" ).dialog();
2784    }
2785});
2786
2787/* remove a panel */
2788sidebar.removePanel('userinfo');
2789
2790/* en- / disable a panel */
2791//sidebar.disablePanel('userinfo');
2792//sidebar.enablePanel('userinfo');
2793
2794fg_sidebar_added = true;
2795toggleSidebar();
2796	
2797		
2798		//mymap.on('click', function(e)
2799		//{
2800			//alert(e.latlng.lat + ", " + e.latlng.lng);
2801		//});
2802		
2803		//window.setTimeout(
2804		//$( function() {
2805			//$( "#dialog" ).dialog();
2806			//} );
2807		//, 5000);
2808		
2809		//$('.leaflet-control-layers').click(function(e){
2810    		//$(this).css('z-index','99999');
2811    		//$('#overlay').fadeIn(300);
2812		//});
2813		
2814		//$('.expose').css('z-index','1001');
2815    	$('#overlay').fadeIn(2000);
2816    	
2817    	//$('.expose').css('animation','blinker 1s linear infinite;');
2818    	$('.expose').css('color','#f00');
2819    	
2820    	for(var i = 0; i < 8; i++)
2821    		$('.expose').fadeOut(500, function(){$('.expose').css('background-color','#ff0')}).fadeIn(500, function(){$('.expose').css('background-color','')});
2822
2823		//$('#overlay').click(function(e){
2824    		$('#overlay').fadeOut(5000, function(){
2825       		//$('.expose').css('z-index','800');
2826       			$('.expose').css('color','');
2827    		});
2828		//});
2829
2830//------------------------------------------
2831// flyPlane
2832/***
2833window.setTimeout(function(){ flyPlane([[
2834            43.661662688047954,
2835            -79.24678802490234
2836          ],
2837          [
2838          	43.66364961297997,
2839            -79.61929321289062
2840          ]]) }, 10000);
2841***/
2842//-------------------------------------------
2843
2844//-------------------------------------------
2845// Santa
2846
2847/*
2848		window.setTimeout(function(){ flySanta([[
2849            43.661662688047954,
2850            -79.24678802490234
2851          ],
2852          [
2853          	43.66364961297997,
2854            -79.61929321289062
2855          ]]) }, 30000);
2856*/       
2857	   var santa_LL = [[43.6722, -79.1886], [43.66364961297997, -79.61929321289062], [42.9906, -80.7179]];
2858	   var santa_TT = [                                        120000,             600000];
2859		var santa_msg = '<font color="red">M</font><font color="green">e</font><font color="red">r</font><font color="green">r</font><font color="red">y</font> <font color="red">C</font><font color="green">h</font><font color="red">r</font><font color="green">i</font><font color="red">s</font><font color="green">t</font><font color="red">m</font><font color="green">a</font><font color="red">s</font><font color="green">!</font><font color="red">!</font><br /><iframe width="640" height="360" src="https://www.youtube.com/embed/taE3PwurhYM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
2860		
2861		window.setTimeout(function(){ 
2862		moveSanta(
2863			santa_LL,
2864          santa_TT,
2865          santa_msg
2866          ) }, 3000);
2867
2868//-------------------------------------------
2869
2870		window.setTimeout(function(){ moveDeer(
2871			halloween_route_arr.slice().reverse(),
2872          halloween_time_arr.map(time => time * 0.25).reverse(),
2873          halloween_name_arr.slice().reverse(),
2874          'Merry Christmas!! Going to ',
2875          	'...'
2876          ) }, 1000);
2877		
2878		window.setTimeout(function(){ moveBunny(
2879			halloween_route_arr.slice().reverse(),
2880          halloween_time_arr.map(time => time * 0.5).reverse(),
2881          halloween_name_arr.slice().reverse(),
2882          'Hopping to ',
2883          	'...'
2884          ) }, 1000);
2885		
2886		/*
2887		window.setTimeout(function(){ flyGhost([[
2888            43.661662688047954,
2889            -79.24678802490234
2890          ],
2891          [
2892          	43.66364961297997,
2893            -79.61929321289062
2894          ]]) }, 10000);
2895          */
2896
2897
2898/*
2899		window.setTimeout(function(){ moveReaper([
2900            [43.678035, -79.409446],
2901    		[38.8895, -77.0352],
2902    		[ 51.5134, -0.0889],		        
2903            [41.9022, 12.4572]
2904          ],
2905          [3600000, 3600000, 3600000],
2906          'Time to pay the Piper...'
2907          ) }, 60000);
2908        
2909        window.setTimeout(function(){ flyWitch([[
2910            43.661662688047954,
2911            -79.24678802490234
2912          ],
2913          [
2914          	43.66364961297997,
2915            -79.61929321289062
2916          ]],
2917          'Trick or Treat!! Heading to YYZ...'
2918          ) }, 10000);
2919         
2920        window.setTimeout(function(){ moveDragon(
2921        	6,
2922        	false,
2923        	5,          
2924			halloween_route_arr,
2925          halloween_time_arr.map(time => time * 0.1),
2926          halloween_name_arr,
2927          'Trick or Treat!! Flying to ',
2928          	'...'
2929          ) }, 6000);
2930        window.setTimeout(function(){ moveCat(
2931			halloween_route_arr.slice().reverse(),
2932          halloween_time_arr.map(time => time * 0.25).reverse(),
2933          halloween_name_arr.slice().reverse(),
2934          'Trick or Treat!! Going to ',
2935          	'...'
2936          ) }, 9000);
2937          
2938       window.setTimeout(function(){ moveFrank(
2939			halloween_route_arr,
2940          halloween_time_arr.map(time => time * 1.5),
2941          halloween_name_arr,
2942          'Trick or Treat!! Going to ',
2943          	'...'
2944          ) }, 20000);
2945          
2946		window.setTimeout(function(){ moveWalker(
2947			[church_st_latlong, eve_1_latlong],
2948          	[180000],
2949            ['home', 'to the Halloween Party'],
2950          'Trick or Treat!! Going ',
2951          	'...'
2952          ) }, 20000);
2953          
2954		window.setTimeout(function(){ moveZombie([
2955            uoft_latlong,
2956            utsc_latlong
2957          ],
2958          [360000],
2959          'Trick or Treat!! Heading to UTSC...'
2960          ) }, 30000);
2961	
2962		window.setTimeout(function(){ moveGhost1(
2963			[icube_latlong, uoft_latlong],
2964          	[180000],
2965            ['UTM', 'UofT'],
2966          'Trick or Treat!! Going to ',
2967          	'...'
2968          ) }, 30000);
2969        
2970        window.setTimeout(function(){ moveGhost2(
2971			[utsc_latlong, uoft_latlong],
2972          	[180000],
2973            ['UTSC', 'UofT'],
2974          'Trick or Treat!! Going to ',
2975          	'...'
2976          ) }, 50000);
2977          	
2978		window.setTimeout(function(){ moveGhost4(
2979			halloween_route_arr,
2980          halloween_time_arr,
2981          'Trick or Treat!!'
2982          ) }, 3000);
2983        
2984        window.setTimeout(function(){ moveGhost5(
2985			halloween_route_arr.slice().reverse(),
2986          halloween_time_arr.slice().reverse(),
2987          'Trick or Treat!!'
2988          ) }, 3000);  
2989		
2990		window.setTimeout(function(){ 
2991		
2992		
2993			moveGhost3(
2994			halloween_route_arr.slice().sort((a, b) => 0.5 - Math.random()),
2995          halloween_time_arr,
2996          'Trick or Treat!!'
2997          ) }, 3000);  		
2998				//window.setTimeout(loadAfterMap, 5000);
2999				
3000				*/
3001				
3002		// Start Shinigami Dee
3003		var popup_content = '<div><video id="shinigamidee_player" width="640" controls poster="https://static-3.bitchute.com/live/cover_images/fdRQEWyBXe7l/u8aJdgLTyHS5_640x360.jpg" ratio="16x9"><source src="https://zn21g5kls-n995.bitchute.com/fdRQEWyBXe7l/u8aJdgLTyHS5.mp4" type="video/mp4" /></video></div>'
3004		
3005		var queen_spadina_latlng = [43.6487, -79.3965];
3006		var queen_bathurst_latlng = [43.64715,  -79.4039];
3007		var spadina_bathurst_LL = [queen_spadina_latlng, queen_bathurst_latlng];
3008		L.marker(queen_bathurst_latlng).addTo(mymap);
3009		L.polyline(spadina_bathurst_LL).addTo(mymap);
3010		
3011		var shinigamidee_icon = L.icon({
3012			iconUrl: 'images/shinigami_d.png',
3013			iconSize: [36, 48], // size of the icon
3014	       iconAnchor:   [12, 48],
3015	       popupAnchor:  [8, -48]
3016			});
3017			
3018		
3019			
3020		var markerD = L.Marker.movingMarker(spadina_bathurst_LL, [156000], {icon: shinigamidee_icon}).addTo(mymap);
3021		markerD.once('click', function() {
3022			//markerD.start();
3023			markerD.closePopup();
3024			markerD.unbindPopup();
3025			
3026			markerD.bindPopup(popup_content, {maxWidth : 640}).openPopup();
3027			setTimeout(function() {
3028				const video = document.querySelector('video#shinigamidee_player');
3029				video.addEventListener('playing', e => {
3030					setTimeout(function() {
3031						markerD.start();
3032					}, 16500);	
3033				});	
3034			}, 1000);
3035			
3036			
3037			/*
3038			markerD.on('click', function() {
3039				if(markerD.isRunning()) {
3040					markerD.pause();
3041				} // if(markerD.isRunning())
3042				else {
3043					markerD.start();
3044				} // else
3045			});
3046			
3047			
3048			*/
3049		});
3050		
3051	
3052		
3053		//markerD.bindPopup('<b>Click me to start!&#127800;</b>', {closeOnClick: false});
3054		//markerD.openPopup();
3055		
3056		// End Shinigami Dee
3057		
3058		// Start Yokozuna Nick
3059		var video_name = 'City of Crafts';
3060		var video_url = 'https://www.cityofcraft.com/';
3061		var video_latlong = [43.6430, -79.4232]; 
3062		//var video_title = 'City of Crafts';
3063		var video_title_img_src = 'images/city_of_craft.png';
3064		var video_icon = null;
3065		var video_popup = null;
3066		
3067 		var yokozuna_nick_icon_s = L.icon({
3068			iconUrl: 'images/yokozuna_nick.png',
3069			iconSize: [48, 36], // size of the icon
3070	       iconAnchor:   [6, 8],
3071	       popupAnchor:  [18, 0]
3072			});
3073	
3074		var yokozuna_nick_icon_m = L.icon({
3075			iconUrl: 'images/yokozuna_nick.png',
3076			iconSize: [64, 48], // size of the icon
3077	       iconAnchor:   [16, 12],
3078	       popupAnchor:  [16, 0]
3079			});
3080			
3081		var yokozuna_nick_icon_l = L.icon({
3082			iconUrl: 'images/yokozuna_nick.png',
3083			iconSize: [80, 60], // size of the icon
3084	       iconAnchor:   [22, 22],
3085	       popupAnchor:  [18, -12]
3086			});
3087	
3088		video_icon = yokozuna_nick_icon_l;
3089		video_latlong = [43.6431, -79.4232];
3090
3091		//video_embed_code = '<iframe width="640" height="360" scrolling="no" frameborder="0" style="border: none;" src="https://www.youtube.com/embed/d0h7zCHy8K0"></iframe>';
3092		video_embed_code = '<iframe width="640" height="360" scrolling="no" frameborder="0" style="border: none;" src="https://www.bitchute.com/embed/o9QeOq0ncSsu/"></iframe>';
3093		video_popup = '<div class="vmiddle"><img src="' + video_title_img_src + '" width="32" /> <a href="' + video_url + '" target="_blank"><font size="5">' + video_name +'</font></a></div>' + video_embed_code;
3094	
3095		video_marker = L.marker(video_latlong, {icon:video_icon}).bindPopup(video_popup, {maxWidth : 640});
3096	
3097		video_layer_group.addLayer(video_marker);
3098		
3099		video_marker.once('click', function() {
3100			video_marker.closePopup();
3101			video_marker.unbindPopup();
3102			
3103			video_marker.bindPopup(video_popup, {maxWidth : 640}).openPopup();
3104		});
3105		
3106		video_marker.bindPopup('<b>Click me to start!&#127877;</b>', {closeOnClick: false});
3107		video_marker.openPopup();
3108
3109// End Yokozuna Nick
3110				
3111	} // function loadMap()
3112
3113/*
3114
3115{
3116		"name": "A Novel Spot Bookshop",
3117		"desc": "Bookshop with a selection of bios, mysteries, classics, cookbooks, history, and children's books.",
3118		"web_url": "https://novelspot.ca/",
3119		"icon_url": "https://novelspot.ca/i/7604122/favicon.png",
3120		"lat_lng": [43.661782,-79.519827],
3121		"addr": "270 The Kingsway, Etobicoke ON M9A 3T7"
3122	}
3123	
31240. U of T
31251. ShawnPaulThompsonArt - var shop_3_name = 'ShawnPaulThompsonArt';
31262. Catalina Sanchez - var shop_5_name = 'Catalina Sanchez';
31273. More Than Lips - var shop_6_name = 'More Than Lips';
31284. Mika - var shop_1_name = 'Mika';
31295. A Novel Spot Bookshop
31306. Icube
31317. The Chemist Tree - var shop_4_name = 'The Chemist Tree';
31328. Hamilton - Hamiltion [43.2645,  -79.9523]
31339. Comfee Cushions - var shop_2_name = 'Comfee Cushions';
3134	
3135*/
3136
3137 // Shops:
3138	var shop_1_name = 'Mika';
3139	var shop_1_url = 'https://mikafleur.weebly.com/';
3140	
3141	var shop_1_latlong = [43.649737,-79.434793]; //  	&#128214; 
3142
3143//-----------------
3144// comfeeliving
3145// https://www.comfeeliving.com - interiors - pillows - Grimsby, Ontario, Canada [43.1929, -79.5621]
3146	
3147	var shop_2_name = 'Comfee Cushions';
3148	var shop_2_url = 'https://www.comfeeliving.com/';
3149	var shop_2_latlong = [43.1929, -79.5621]; //  	&#128214; 
3150
3151//-----------------
3152// ShawnPaulThompsonArt
3153// https://shawnpaulthompsonart.myshopify.com/ - art - painting - Parkdale [43.6404, -79.4372]
3154	
3155	var shop_3_name = 'ShawnPaulThompsonArt';
3156	var shop_3_url = 'https://shawnpaulthompsonart.myshopify.com/';
3157	var shop_3_latlong = [43.6677, -79.3554]; //  	&#128214; 
3158
3159//-----------------
3160// The Chemist Tree
3161// https://chemisttree.com - gifts - t-shirts, cards, tote bags - Milton, Ontario, Canada [43.5130  -79.8826]
3162	
3163	var shop_4_name = 'The Chemist Tree';
3164	var shop_4_url = 'https://chemisttree.com';
3165	var shop_4_latlong = [43.5130, -79.8826]; //  	&#128214; 
3166	
3167//-----------------
3168// Catalina Sánchez
3169// https://catalinasanchez.ca - stationary - notebooks - Yonge[43.6598, -79.3838]
3170	
3171	var shop_5_name = 'Catalina Sanchez';
3172	var shop_5_url = 'https://catalinasanchez.ca';
3173	var shop_5_latlong = [43.6437, -79.3746]; //  	&#128214; 
3174	
3175//-----------------
3176// More Than Lips
3177// https://morethanlips.net - skin care - lip balm - Chinatown [43.6526, -79.3979]
3178	
3179	var shop_6_name = 'More Than Lips';
3180	var shop_6_url = 'https://morethanlips.net';
3181	var shop_6_latlong = [43.6495, -79.395]; //  	&#128214; 
3182
3183var shop_novel_name = 'A Novel Spot Bookshop';
3184var shop_novel_latlong = [43.661782,-79.519827];
3185
3186var hamilton_name = 'Hamilton';
3187var hamilton_latlong = [43.2645,  -79.9523];
3188
3189halloween_name_arr = [
3190			uoft_name,
3191			shop_3_name,
3192          shop_5_name,
3193          shop_6_name,
3194          shop_1_name,
3195      		shop_novel_name,    
3196          	icube_name,
3197          	shop_4_name,
3198          	hamilton_name,
3199          	shop_2_name
3200];
3201
3202var halloween_route_arr = [
3203			uoft_latlong,
3204			shop_3_latlong,
3205          shop_5_latlong,
3206          shop_6_latlong,
3207          shop_1_latlong,
3208      		shop_novel_latlong,    
3209          	icube_latlong,
3210          	shop_4_latlong,
3211          	hamilton_latlong,
3212          	shop_2_latlong
3213];
3214
3215var route_s = 30000;
3216var route_m = 60000;
3217var route_l = 120000;
3218
3219var halloween_time_arr = [
3220	route_m, // 0-1
3221	route_m, // 1-2
3222	route_s, // 2-3
3223	route_s, // 3-4
3224	route_m, // 4-5
3225	route_l, // 5-6
3226	route_l, // 6-7
3227	route_l, // 7-8
3228	route_l // 8-9
3229] 
3230
3231	//function handleLegendOnClick(cb)
3232	//{
3233		
3234	//} // function handleLegendOnClick(cb)
3235	
3236	//function setLayerVisibility()
3237	//{
3238	
3239	//} // 
3240	
3241	function goHome()
3242	{
3243		window.open('home.nsp', '_blank');
3244	}
3245	
3246	function onLocationFound(e) {
3247	    var radius = e.accuracy / 2;
3248
3249	    //alert(cn_tower_latlong);
3250	    
3251	    L.marker(e.latlng).addTo(mymap).bindPopup("You are within " + radiu
3251s + " meters from this point").openPopup();
3252
3253	    L.circle(e.latlng, radius).addTo(mymap);
3254	    
3255	    var travel = L.polyline([e.latlng, cn_tower_latlong]).addTo(mymap);
3256	    
3257	}
3258
3259	function onLocationError(e) {
3260	    alert(e.message);
3261	}
3262	
3263	function flySanta(point_arr)
3264	{
3265		var plane_icon = L.icon({
3266			iconUrl: 'images/e2w/santa2.gif',
3267			iconSize: [192, 64],
3268			});
3269			
3270		var animatedMarker = L.animatedMarker(L.polyline(point_arr).getLatLngs(), {
3271			icon: plane_icon,
3272			autoStart: false,
3273			onEnd: function() {
3274				window.setTimeout(function(){ mymap.removeLayer(animatedMarker); }, 4000);
3275			}
3276		}).bindPopup('Heading to YYZ...');
3277	
3278		console.log("bearings: " + bearing(point_arr[0][0], point_arr[0][1], point_arr[1][0], point_arr[1][1]));
3279		
3280		mymap.addLayer(animatedMarker);
3281		window.setTimeout(function(){ animatedMarker.start(); }, 1000);
3282	}
3283	
3284	function moveSanta(point_arr, time_arr, popup_msg) {
3285		var icon_param = {
3286			iconName: 'santa2.gif',
3287	        
3288	        iconSize:     [192, 64], // size of the icon
3289	        iconAnchor:   [96, 32],
3290	        popupAnchor:  [50, -17]
3291			};
3292			
3293		moveObject(icon_param, point_arr, time_arr, popup_msg);
3294	} // function moveDrone(point_arr, time_arr, popup_msg)
3295	
3296	function flyPlane(point_arr)
3297	{
3298		var plane_icon = L.icon({
3299			iconUrl: 'images/crj_700_w.png',
3300			shadowUrl: 'images/crj_700_shadow_w.png'
3301			});
3302			
3303		var animatedMarker = L.animatedMarker(L.polyline(point_arr).getLatLngs(), {
3304			icon: plane_icon,
3305			autoStart: false,
3306			onEnd: function() {
3307				window.setTimeout(function(){ mymap.removeLayer(animatedMarker); }, 4000);
3308			}
3309		}).bindPopup('Heading to YYZ...');
3310	
3311		console.log("bearings: " + bearing(point_arr[0][0], point_arr[0][1], point_arr[1][0], point_arr[1][1]));
3312		
3313		mymap.addLayer(animatedMarker);
3314		window.setTimeout(function(){ animatedMarker.start(); }, 1000);
3315	}
3316	
3317	
3318	
3319	function flyGhost(point_arr)
3320	{
3321		var ghost_icon = L.divIcon({
3322		className: 'skeleton-sprite flip-horizontally',
3323		iconSize: [36, 48],
3324		bgPos: [0, 0]
3325		//html: '<a>Here!!</a>'
3326		
3327		});
3328		
3329		var ghost_icon2 = L.divIcon({
3330		className: 'skeleton-sprite flip-horizontally',
3331		iconSize: [36, 48],
3332		bgPos: [36, 48]
3333		//html: '<a>Here!!</a>'
3334		
3335		});
3336		console.log("ghost_icon", ghost_icon);
3337		
3338		var ghost_icon3 = L.icon({
3339			iconUrl: 'images/frank_w2e.gif',
3340			iconSize: [72, 96],
3341			className: 'flip-horizontally'
3342			});
3343		
3344		var nMarker = L.marker([point_arr[0][0], point_arr[0][1]], {icon: ghost_icon2});
3345		halloween_layer_group.addLayer(nMarker);
3346			
3347		var animatedMarker = L.animatedMarker(L.polyline(point_arr).getLatLngs(), {
3348			icon: ghost_icon3,
3349			autoStart: false,
3350			onEnd: function() {
3351				window.setTimeout(function(){ halloween_layer_group.removeLayer(animatedMarker); }, 4000);
3352			}
3353		}).bindPopup('Trick or Treat!! Heading to YYZ...');
3354		
3355		console.log("animatedMarker", animatedMarker);
3356	
3357		console.log("bearings: " + bearing(point_arr[0][0], point_arr[0][1], point_arr[1][0], point_arr[1][1]));
3358		
3359		halloween_layer_group.addLayer(animatedMarker);
3360		
3361		window.setTimeout(function(){
3362		
3363			animatedMarker.start();
3364			
3365			window.setTimeout(function(){
3366			
3367			animatedMarker.options = {
3368			icon: ghost_icon2,
3369			autoStart: false,
3370			onEnd: function() {
3371				window.setTimeout(function(){ halloween_layer_group.removeLayer(animatedMarker); }, 4000);
3372			}
3373			}
3374			console.log("animatedMarker", animatedMarker);
3375			}, 10000);
3376			
3377		}, 1000);
3378	}
3379	
3380	var moving_obj_icon_map = new Map();
3381	
3382	function moveDragon(curr_index, fg_order_increasing, next_index, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix) {
3383		console.log('moveDragon!!');
3384		
3385		var icon_param = {
3386			iconName: 'flying_dragon.gif',
3387			iconSize: [100, 90],
3388			className: null
3389			};
3390		
3391		stepObject(icon_param, curr_index, fg_order_increasing, next_index, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3392	} // function moveDragon(curr_index, fg_order_increasing, next_index, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix)
3393	
3394	function moveBunny(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix) {
3395		console.log('moveBunny!!');
3396		
3397		var icon_param = {
3398			iconName: 'hopping_bunny.gif',
3399			iconSize: [26, 32],
3400			className: null
3401			};
3402		
3403		stepObject(icon_param, 0, true, 1, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3404	} // moveBunny(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix)
3405	
3406	function moveDeer(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix) {
3407		console.log('moveDeer!!');
3408		
3409		var icon_param = {
3410			iconName: 'running_deer.gif',
3411			iconSize: [32, 32],
3412			className: null
3413			};
3414		
3415		stepObject(icon_param, 0, true, 1, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3416	} // moveDeer(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix)
3417	
3418	function moveCat(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix) {
3419		console.log('moveCat!!');
3420		
3421		var icon_param = {
3422			iconName: 'running_cat.gif',
3423			iconSize: [90, 90],
3424			className: null
3425			};
3426		
3427		stepObject(icon_param, 0, true, 1, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3428	} // moveCat(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix)
3429	
3430	function moveFrank(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix) {
3431		console.log('moveFrank!!');
3432		
3433		var icon_param = {
3434			iconName: 'walking_frank.gif',
3435			iconSize: [50, 50],
3436			className: null
3437			};
3438		
3439		stepObject(icon_param, 0, true, 1, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3440	} // moveFrank(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix)
3441	
3442	function moveWalker(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix) {
3443		console.log('moveWalker!!');
3444		
3445		var icon_param = {
3446			iconName: 'walking_walker.gif',
3447			iconSize: [25, 25],
3448			className: null
3449			};
3450		
3451		stepObject(icon_param, 0, true, 1, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3452	} // moveWalker(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix)
3453	
3454	function moveGhost1(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix) {
3455		
3456		var icon_param = {
3457			iconName: 'flying_ghost1.gif',
3458			iconSize: [25, 25],
3459			className: null
3460			};
3461		
3462		stepObject(icon_param, 0, true, 1, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3463	} // moveGhost1(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix)
3464	
3465	function moveGhost2(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix) {
3466		
3467		var icon_param = {
3468			iconName: 'flying_ghost2.gif',
3469			iconSize: [25, 25],
3470			className: null
3471			};
3472		
3473		stepObject(icon_param, 0, true, 1, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3474	} // moveGhost2(point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix)
3475	
3476	function stepObject(icon_param, curr_index, fg_order_increasing, next_index, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix) {
3477	
3478		
3479	
3480		var direction = getDirectionEW(point_arr[curr_index][0], point_arr[curr_index][1], point_arr[next_index][0], point_arr[next_index][1]);
3481		console.log("direction: " + direction);
3482		
3483		var icon_uri = 'images/' + direction + '/' + icon_param.iconName;
3484		
3485		var dir_icon = moving_obj_icon_map.get(icon_uri);
3486		
3487		if(!dir_icon) {
3488			dir_icon = L.icon({
3489				iconUrl: icon_uri,
3490				iconSize: icon_param.iconSize,
3491				className: icon_param.className,
3492				popupAnchor: [0, -13]
3493			});
3494			
3495			moving_obj_icon_map.set(icon_uri, dir_icon);
3496		} // if(!dir_icon)
3497		
3498		var route_path_arr = [point_arr[curr_index], point_arr[next_index]];
3499		var route_time_arr = null;
3500		
3501		if(fg_order_increasing)
3502			route_time_arr = [time_arr[curr_index]];
3503		else
3504			route_time_arr = [time_arr[curr_index - 1]]; // we need to offset by 1 in reverse.
3505		
3506		var myMovingMarker = L.Marker.movingMarker(
3507		route_path_arr, route_time_arr, {
3508			icon: dir_icon,
3509			autostart: true
3510		}
3511		
3512		);
3513		
3514		if(popup_msg_prefix  && popup_msg_postfix)
3515			myMovingMarker.bindPopup(popup_msg_prefix + name_arr[next_index] + popup_msg_postfix);
3516		
3517		halloween_layer_group.addLayer(myMovingMarker);
3518		
3519		console.log("myMovingMarker", myMovingMarker);
3520		myMovingMarker.start();
3521		
3522		myMovingMarker.on('end',
3523			function() {
3524				console.log('end!');
3525				
3526				if(fg_order_increasing) {
3527					if(next_index == point_arr.length - 1) {
3528						// at the end. reverse direction
3529						stepObject(icon_param, next_index, !fg_order_increasing, curr_index, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3530						
3531					} // if(next_index == point_arr.length - 1)
3532					else {
3533						stepObject(icon_param, next_index, fg_order_increasing, next_index + 1, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3534					} // else
3535					
3536				} // if(fg_order_increasing)
3537				else
3538				{
3539					if(next_index == 0) {
3540						// at the end. reverse direction
3541						stepObject(icon_param, next_index, !fg_order_increasing, curr_index, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3542						
3543					} // if(next_index == point_arr.length -1)
3544					else {
3545						stepObject(icon_param, next_index, fg_order_increasing, next_index - 1, point_arr, time_arr, name_arr, popup_msg_prefix, popup_msg_postfix);
3546					} // else
3547				} // else
3548				
3549				halloween_layer_group.removeLayer(myMovingMarker);
3550			}
3551		)
3552		
3553	} // function stepObject(icon_param, point_arr, popup_msg)
3554	
3555	function moveReaper(point_arr, time_arr, popup_msg) {
3556		var icon_param = {
3557			iconName: 'flying_reaper.gif',
3558			iconSize: [33, 33],
3559			className: null
3560			};
3561			
3562		moveObject(icon_param, point_arr, time_arr, popup_msg);
3563	} // function moveReaper(point_arr, time_arr, popup_msg)
3564	
3565	function moveZombie(point_arr, time_arr, popup_msg) {
3566		var icon_param = {
3567			iconName: 'walking_zombie.gif',
3568			iconSize: [33, 33],
3569			className: null
3570			};
3571			
3572		moveObject(icon_param, point_arr, time_arr, popup_msg);
3573	} // function moveZombie(point_arr, time_arr, popup_msg)
3574	
3575	function moveGhost4(point_arr, time_arr, popup_msg) {
3576		var icon_param = {
3577			iconName: 'flying_ghost4.gif',
3578			iconSize: [40, 40],
3579			className: null
3580			};
3581			
3582		moveObject(icon_param, point_arr, time_arr, popup_msg);
3583	} // function moveGhost4(point_arr, time_arr, popup_msg)
3584	
3585	function moveGhost5(point_arr, time_arr, popup_msg) {
3586		var icon_param = {
3587			iconName: 'flying_ghost5.gif',
3588			iconSize: [40, 40],
3589			className: null
3590			};
3591			
3592		moveObject(icon_param, point_arr, time_arr, popup_msg);
3593	} // function moveGhost5(point_arr, time_arr, popup_msg)
3594	
3595	function moveGhost3(point_arr, time_arr, popup_msg) {
3596		var icon_param = {
3597			iconName: 'flying_ghost3.gif',
3598			iconSize: [50, 50],
3599			className: null
3600			};
3601			
3602		moveObject(icon_param, point_arr, time_arr, popup_msg);
3603	} // function moveGhost3(point_arr, time_arr, popup_msg)
3604	
3605	function moveObject(icon_param, point_arr, time_arr, popup_msg) {
3606		var direction = getDirectionEW(point_arr[0][0], point_arr[0][1], point_arr[1][0], point_arr[1][1]);
3607		console.log("direction: " + direction);
3608		
3609		//icon_param[]
3610		
3611		var dir_icon = L.icon({
3612			iconUrl: 'images/' + direction + '/' + icon_param.iconName,
3613			iconSize: icon_param.iconSize,
3614			className: icon_param.className,
3615			popupAnchor: icon_param.popupAnchor
3616			});
3617		
3618		var myMovingMarker = L.Marker.movingMarker(
3619		point_arr, time_arr, {
3620			icon: dir_icon,
3621			autostart: true,
3622			loop: true,
3623			zIndexOffset: 10000
3624		}
3625		
3626		);
3627		
3628		if(popup_msg)
3629			myMovingMarker.bindPopup(popup_msg, {maxWidth : 640});
3630		
3631		//halloween_layer_group.addLayer(myMovingMarker);
3632		mymap.addLayer(myMovingMarker);
3633		
3634		console.log("myMovingMarker", myMovingMarker);
3635		myMovingMarker.start();
3636		
3637	} // function moveObject(icon_param, point_arr, popup_msg)
3638	
3639	function flyWitch(point_arr, popup_msg)
3640	{
3641		var icon_param = {
3642			iconName: 'flying_witch.gif',
3643			iconSize: [50, 50],
3644			className: null
3645			};
3646			
3647		flyObjectOnce(icon_param, point_arr, popup_msg);
3648	} // function flyWitch(point_arr, popup_msg)
3649	
3650	
3651	function flyObjectOnce(icon_param, point_arr, popup_msg) {
3652		
3653		console.log("icon_param", icon_param);
3654		
3655		var direction = getDirectionEW(point_arr[0][0], point_arr[0][1], point_arr[1][0], point_arr[1][1]);
3656		console.log("direction: " + direction);
3657		
3658		//icon_param[]
3659		
3660		var dir_icon = L.icon({
3661			iconUrl: 'images/' + direction + '/' + icon_param.iconName,
3662			iconSize: icon_param.iconSize,
3663			className: icon_param.className
3664			});
3665		
3666		//var nMarker = L.marker([point_arr[0][0], point_arr[0][1]], {icon: param_icon});
3667		//mymap.addLayer(nMarker);
3668			
3669		var animatedMarker = L.animatedMarker(L.polyline(point_arr).getLatLngs(), {
3670			icon: dir_icon,
3671			autoStart: false,
3672			onEnd: function() {
3673				window.setTimeout(function(){ mymap.removeLayer(animatedMarker); }, 4000);
3674			}
3675		});
3676		
3677		if(popup_msg)
3678			animatedMarker.bindPopup(popup_msg);
3679		
3680		//console.log("animatedMarker", animatedMarker);
3681	
3682		
3683		mymap.addLayer(animatedMarker);
3684		
3685		//lm_layer_grp.addLayer(animatedMarker);
3686		
3687		window.setTimeout(function(){
3688		
3689			animatedMarker.start();
3690			
3691			/*
3692			window.setTimeout(function(){
3693			
3694			var oppdir = "w2e";
3695			
3696			if(oppdir == direction)
3697				oppdir = "e2w";
3698				
3699			console.log("oppdir", oppdir);
3700				
3701			var oppdir_icon = L.icon({
3702			iconUrl: 'images/' + oppdir + '/' + icon_param.iconName,
3703			iconSize: icon_param.iconSize,
3704			className: icon_param.className
3705			});
3706			
3707			animatedMarker.setIcon(oppdir_icon);
3708			
3709			}, 10000);
3710			*/
3711			
3712			/*
3713			window.setTimeout(function(){
3714			
3715			animatedMarker.options = {
3716			icon: ghost_icon2,
3717			autoStart: false,
3718			onEnd: function() {
3719				window.setTimeout(function(){ mymap.removeLayer(animatedMarker); }, 4000);
3720			}
3721			}
3722			console.log("animatedMarker", animatedMarker);
3723			}, 10000);
3724			*/
3725			
3726		}, 1000);
3727	} // function flyObjectOnce(icon_param, point_arr, popup_msg)
3728	
3729	function getDirectionEW(startLat, startLng, destLat, destLng) {
3730		var direction = "w2e";
3731		var bearing_degrees = bearing(startLat, startLng, destLat, destLng);
3732		
3733		if(bearing_degrees > 180)
3734			direction = "e2w"
3735			
3736		return direction;
3737	} // function getDirectionEW(startLat, startLng, destLat, destLng)
3738	
3739	// Converts from degrees to radians.
3740	function toRadians(degrees) {
3741  		return degrees * Math.PI / 180;
3742	};
3743 
3744	// Converts from radians to degrees.
3745	function toDegrees(radians) {
3746  		return radians * 180 / Math.PI;
3747	}
3748
3749
3750	function bearing(startLat, startLng, destLat, destLng) {
3751  		startLat = toRadians(startLat);
3752  		startLng = toRadians(startLng);
3753  		destLat = toRadians(destLat);
3754  		destLng = toRadians(destLng);
3755
3756  		y = Math.sin(destLng - startLng) * Math.cos(destLat);
3757  		x = Math.cos(startLat) * Math.sin(destLat) -
3758        	Math.sin(startLat) * Math.cos(destLat) * Math.cos(destLng - startLng);
3759  		brng = Math.atan2(y, x);
3760  		brng = toDegrees(brng);
3761  		return (brng + 360) % 360;
3762	}
3763
3764	
3765	var fg_image_loaded = false; // a hack
3766	
3767	$(document).ready(function() {
3768		$("#myTextarea").keyup(function() {
3769			//$( "#myTextarea" ).autoResize();
3770			
3771			var currentText = $(this).val();
3772			
3773			var meta_obj = scanText(currentText);
3774			
3775			if($("#myImg").length == 0 & meta_obj.hasUrl && isUrlValid(meta_obj.url))
3776			{
3777				//$(".output").text(meta_obj.url);
3778				
3779				var xhttp = getXHttp();
3780			
3781				xhttp.onreadystatechange = function() {
3782					if(this.readyState == 4 && this.status == 200)
3783					{
3784						//var meta_obj = extractMeta(xhttp.responseText);
3785						var meta_json = jQuery.parseJSON(xhttp.responseText);
3786						
3787						console.log("meta_json: ", meta_json);
3788									
3789						if(meta_json.image && !fg_image_loaded)
3790						{
3791							fg_image_loaded = true;
3792							//$(".output").text(meta_json.image);
3793							$(".output").prepend('<img id="myImg" src="' + meta_json.image + '" />');
3794						}
3795					}
3796				};
3797				
3798				
3799				
3800				//xhttp.open("GET", meta_obj.url, true);
3801				
3802				xhttp.open("GET", '/hey/?url=' + encodeURIComponent(meta_obj.url), true);
3803				
3804    	   		xhttp.send();
3805				
3806			}
3807		});
3808		
3809		//$("#event_url").focusout(function() {
3810			
3811			//var currentText = $(this).val();
3812			
3813			//$(".output").text(currentText);
3814		//});
3815	});
3816	
3817	function findLatLng()
3818	{
3819		var address = $("#address").val();
3820		
3821		var xhttp = getXHttp();
3822			
3823		xhttp.onreadystatechange = function() {
3824			if(this.readyState == 4 && this.status == 200)
3825			{
3826				var meta_json = jQuery.parseJSON(xhttp.responseText);
3827						
3828				if(meta_json.results && meta_json.results[0].locations && meta_json.results[0].locations[0] && meta_json.results[0].locations[0].latLng)
3829				{
3830					var location_latlng = meta_json.results[0].locations[0].latLng;
3831					
3832					//alert('[' + location_latlng.lat +',' + location_latlng.lng + ']');
3833					L.marker(location_latlng).addTo(mymap).bindPopup("Event location").openPopup();
3834					var view_latlng = location_latlng;
3835					view_latlng.lat += 0.001;
3835 // 43.661386 - 43.660599 
3836					mymap.setView(view_latlng, 18);
3837					$( "#dialog" ).dialog({ position: 'top' })
3838					$("#dialog_submit").prop("disabled", false);
3839					$("#dialog_submit").css("display", "block");
3840				}
3841				else
3842					alert('404 Place Not Found.');
3843			}
3844		};		
3845				
3846		xhttp.open("GET", '/world/?location=' + encodeURIComponent(address), true);
3847				
3848    	xhttp.send();
3849	}
3850	
3851	function isUrlValid(url) {
3852    	return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url);
3853	}
3854	
3855	function scanText(text)
3856	{
3857		var ret_obj = new Object();
3858		ret_obj.hasUrl = false;
3859		
3860		if(text.indexOf('http://') != - 1)
3861		{
3862			ret_obj.hasUrl = true;
3863			ret_obj.url = extractUrl(text, 'http://');
3864		}
3865		else if(text.indexOf('https://') != - 1)
3866		{
3867			ret_obj.hasUrl = true;
3868			ret_obj.url = extractUrl(text, 'https://');
3869		}
3870		
3871		return ret_obj;
3872	}
3873	
3874	function extractUrl(text, protocol)
3875	{
3876		var ret_text = text.trim();
3877		
3878		return ret_text.substring(ret_text.indexOf(protocol));
3879		
3880	}
3881	
3882	function extractMeta(text)
3883	{
3884		var ret_obj = new Object();
3885		ret_obj.hasOgImg = false;
3886		
3887		html_dom = $.parseHTML(text, null, false);
3888		
3889		$.each(html_dom, function (i, el) {
3890			if(el.nodeName == 'meta')
3891			{
3892				if(el.property.trim().toLowerCase() == 'og:image')
3893				{
3894					ret_obj.hasOgImg = true;
3895					ret_obj.img_url = el.content.trim();
3896				} 
3897			} 
3898		});
3899		
3900		return ret_obj;
3901	}
3902	
3903	// react
3904	
3905	const e = React.createElement;
3906	
3907	class LikeButton extends React.Component
3908	{
3909		constructor(props)
3910		{
3911			super(props);
3912			this.state = { liked: false};
3913		} // constructor(props)
3914		
3915		render()
3916		{
3917			if(this.state.liked)
3918			{
3919				return 'You liked this!';
3920			} // if(this.state.liked)
3921			
3922			return e
3923			(
3924				'button',
3925				{
3926					onClick: () => this.setState({liked: true})
3927				},
3928				'Like'
3929			);
3930		} // render()
3931		
3932	} // class LikeButton extends React.Component
3933	
3934	function loadReact2()
3935	{
3936		const domContainer = document.querySelector('#like_btn_test');
3937		ReactDOM.render(e(LikeButton), domContainer);	
3938	} // function loadReact()
3939</script>
vendor: 1 bytes, line 3939
3939
3940<script type="text/babel">
3941
3942function Welcome(props)
3943{
3944	return <h1>Hello, {props.name}</h1>;
3945} // function Welcome(props)
3946
3947function formatName(user)
3948{
3949	return user.firstName + ' ' + user.lastName;
3950} // function formatName(user)
3951
3952function getGreeting(user2)
3953{
3954	if(user2)
3955	{
3956		return <h1>Hello, {formatName(user2)}!</h1>;
3957	} // if(user)
3958	else
3959		return <h1>Hello, Stranger.</h1>;
3960} // function getGreeting(user)
3961
3962class Welcome2 extends React.Component
3963{
3964	render()
3965	{
3966		return <h1>Hello2, {this.props.name}</h1>;
3967	} // render()
3968} // class Welcome2 extends React.Component
3969
3970function WelcomeParty(props)
3971{
3972	return (
3973		<div>
3974			<Welcome name='Reactor' />
3975			<Welcome2 name='Reactor2' />
3976			<Welcome name='Reactor3' />
3977		</div>
3978	);
3979}
3980
3981function Avatar(props)
3982{
3983	return (
3984		<img className="Avatar"
3985		width="160"
3986		src={props.user.avatarUrl}
3987		alt={props.user.name}
3988		/>
3989	);
3990} // function Avatar(props)
3991
3992function UserInfo(props)
3993{
3994	return (
3995		<div className="UserInfo">
3996			<Avatar user={props.user} />
3997			<div className="UserInfo-name">
3998				{props.user.name}
3999			</div>
4000		</div>
4001	);
4002} // function UserInfo(props)
4003
4004function Comment(props)
4005{
4006	return (
4007		<div className="Comment">
4008			<UserInfo user={props.author} />
4009				
4010			<div className="Comment-text">
4011				{props.author.text}
4012			</div>
4013			<div className="Comment-date">
4014				{props.author.date}
4015			</div>
4016		</div>
4017	);
4018} // function Comment(props)
4019
4020let author =
4021{
4022	name: "Shakespear",
4023	avatarUrl: "images/aussiecat_poster_512.jpg",
4024	text: "Great comment!!",
4025	date: (new Date()).toString()
4026};
4027
4028function Clock(props)
4029{
4030	return (
4031		<div>
4032			<h1>Hello, world clock!</h1>
4033			<h2>It's {props.date.toLocaleTimeString()}.</h2>
4034		</div>
4035	);
4036}
4037
4038class Clock2 extends React.Component
4039{
4040	constructor(props)
4041	{
4042		super(props);
4043		this.state = {date: new Date()};
4044	} // constructor(props)
4045	
4046	componentDidMount()
4047	{
4048		console.log("componentDidMount()");
4049		this.timerID = setInterval(
4050			() => this.tick(),
4051			1000
4052		);
4053	} // componentDidMount()
4054	
4055	componentWillUnmount()
4056	{
4057		clearInterval(this.timerID);
4058	} // componentWillUnmount()
4059	
4060	tick()
4061	{
4062		this.setState({
4063			date: new Date()
4064		});
4065	} // tick()
4066	
4067	render()
4068	{
4069		return (
4070			<div>
4071			<h2>Hello, world clock3! It's {this.state.date.toLocaleTimeString()}.</h2>
4072		</div>
4073		);
4074	} // render()
4075} // class Clock2 extends React.Component
4076
4077function Clock3()
4078{
4079	return (
4080		<div>
4081			<Clock2 />
4082			<Clock2 />
4083			<Clock2 />
4084		</div>
4085	);
4086} // function Clock3
4087
4088function Form()
4089{
4090	function handleSubmit(e)
4091	{
4092		e.preventDefault();
4093		console.log('You clicked submit.');
4094	} // function handleSubmit(e)
4095		
4096		return (
4097			<form onSubmit={handleSubmit}>
4098				<button type="submit">Submit</button>
4099			</form>
4100		);
4101		
4102	
4103} // function Form()
4104
4105class Toggle extends React.Component
4106{
4107	constructor(props)
4108	{
4109		super(props);
4110		this.state = {isToggleOn: true};
4111		
4112		// This binding is necessary
4113		this.handleClick = this.handleClick.bind(this);
4114	} // constructor(props)
4115	
4116	handleClick(i, e)
4117	{
4118		//console.log("(" + i + "): ", e);
4119		this.setState(
4120			prevState => (
4121				{
4122					isToggleOn: !prevState.isToggleOn
4123				}	
4124			)
4125		);
4126	} // handleClick()
4127	
4128	render()
4129	{
4130	/*
4131		let ret_elm = "";
4132		
4133		for(let i = 0; i < 3; i++) (
4134		
4135			ret_elm += <button onClick={this.handleClick(i)}>
4136				{this.state.isToggleOn ? 'ON' : 'OFF'}
4137			</button>
4138		);
4139		
4140		return ret_elm;
4141		*/
4142		
4143		return <button onClick={this.handleClick}>
4144				{this.state.isToggleOn ? 'ON' : 'OFF'}
4145			</button>;
4146	} // render()
4147} // class Toggle extends React.Component
4148
4149function UserGreeting(props)
4150{
4151	return <h1>Welcome back!</h1>;
4152} // function UserGreeting(props)
4153
4154function GuestGreeting(props)
4155{
4156	return <h1>Please sign up.</h1>;
4157} // function GuestGreeting(props)
4158
4159function Greeting(props)
4160{
4161	const isLoggedIn = props.isLoggedIn;
4162	
4163	if(isLoggedIn)
4164	{
4165		return <UserGreeting />;
4166	} // is(isLoggedIn)
4167	else
4168		return <GuestGreeting />;
4169} // function Greeting(props)
4170
4171function LoginButton(props)
4172{
4173	return (
4174		<button onClick={props.onClick}>Login</button>
4175	);
4176} // function LoginButton(props)
4177
4178function LogoutButton(props)
4179{
4180	return (
4181		<button onClick={props.onClick}>Logout</button>
4182	);
4183} // function LogoutButton(props)
4184
4185class LoginControl extends React.Component
4186{
4187	constructor(props)
4188	{
4189		super(props);
4190		this.handleLoginClick = this.handleLoginClick.bind(this);
4191		this.handleLogoutClick = this.handleLogoutClick.bind(this);
4192		this.state = {isLoggedIn: false};
4193	} // constructor(props)
4194	
4195	handleLoginClick()
4196	{
4197		this.setState({isLoggedIn: true});
4198	} // handleLoginClick()
4199	
4200	handleLogoutClick()
4201	{
4202		this.setState({isLoggedIn: false});
4203	} // handleLoginClick()
4204	
4205	render()
4206	{
4207		const isLoggedIn = this.state.isLoggedIn;
4208		let button;
4209		if(isLoggedIn)
4210		{
4211			button = <LogoutButton onClick={this.handleLogoutClick} />;
4212		} // if(isLoggedIn)
4213		else
4214		{
4215			button = <LoginButton onClick={this.handleLoginClick} />;
4216		} // else
4217		
4218		return	(
4219			<div>
4220				<Greeting isLoggedIn={isLoggedIn} />
4221				The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
4222				{button}
4223			</div>
4224		);
4225	} // render()
4226	
4227} // class LoginControl extends React.Component
4228
4229class WarnPage extends React.Component
4230{
4231	constructor(props) {
4232		super(props);
4233		this.state = {showWarning: true};
4234		this.handleToggleClick = this.handleToggleClick.bind(this);
4235	} // constructor(props)
4236	
4237	handleToggleClick()
4238	{
4239		this.setState(
4240			state => ({
4241			showWarning: !state.showWarning
4242		}));
4243	} // handleToggleClick()
4244	
4245	render() {
4246		return (
4247			<div>
4248				<WarningBanner warn={this.state.showWarning} />
4249				<button onClick={this.handleToggleClick}>
4250					{this.state.showWarning ? 'Hide' : 'Show'}
4251				</button>
4252			</div>
4253		);
4254	} // render()
4255} // class WarnPage extends React.Component
4256
4257function Mailbox(props)
4258{
4259	const unreadMessages = props.unreadMessages;
4260	return (
4261		<div>
4262			<h1>Hello!</h1>
4263			{unreadMessages.length > 0 &&
4264				<h2>You have {unreadMessages.length} unread messages.</h2>
4265			}
4266		</div>
4267	);
4268} // function Mailbox(props)
4269
4270function WarningBanner(props)
4271{
4272	if(!props.warn)
4273	{
4274		return null;
4275	} // if(!props.warn)
4276	
4277	return (
4278		<div className="warning">Warning!</div>
4279	);
4280} // function WarningBanner(props)
4281
4282function ListItem(props) {
4283	const value = props.value;
4284	return (
4285		<li>{value}</li>
4286	);
4287} // function ListItem(props)
4288
4289function NumberList(props) {
4290
4291/*
4292	const listItems = props.map((number) =>
4293		<ListItem key={number.toString()} value={number} />
4294	);
4295	
4296	return listItems;
4297	*/
4298	
4299	return (<ul>{props.map((number) =>
4300		<ListItem key={number.toString()} value={number} />)}</ul>);
4301} // function NumberList(props)
4302
4303function Blog(props) {
4304	const sidebar = (
4305		<ul>
4306			{props.posts.map((post) =>
4307				<li key={post.id}>
4308					{post.title}
4309				</li>
4310			)}
4311		</ul>
4312	);
4313	
4314	const content = props.posts.map((post) =>
4315		<Post key={post.id} id={post.id} title={post.title} content={post.content} />
4316	);
4317	return (
4318		<div>
4319			{sidebar}
4320			<hr />
4321			{content}
4322		</div>
4323	);
4324} // function Blog(props)
4325
4326function Post(props) {
4327	return (
4328		<div key={props.id}>
4329			<h3>{props.title}</h3>
4330			<p>{props.content}</p>
4331		</div>
4332	);
4333} // function Post(props)
4334
4335class NameForm extends React.Component {
4336	constructor(props) {
4337		super(props);
4338		this.state = {value: ''};
4339		
4340		this.handleChange = this.handleChange.bind(this);
4341		this.handleSubmit = this.handleSubmit.bind(this);
4342	} // constructor(props)
4343	
4344	handleChange(event) {
4345		//console.log(event.target.value);
4346		this.setState({value: event.target.value});
4347	} // handleChange(event)
4348	
4349	handleSubmit(event) {
4350		alert('A name was submitted: ' + this.state.value);
4351		event.preventDefault();
4352	} // handleSubmit(event)
4353	
4354	render() {
4355		return (
4356			<form onSubmit={this.handleSubmit}>
4357				<label>
4358					Name: <input type="text" value={this.state.value} onChange={this.handleChange} />
4359				</label>
4360				<input type="submit" value="Submit" />
4361			</form>
4362		);
4363	} // render()
4364} // class NameForm extends React.Component
4365
4366class EssayForm extends React.Component {
4367	
4368	constructor(props) {
4369		super(props);
4370		this.state = {
4371			value: 'PLease write an essay about your favorite DOM element.'
4372		};
4373		
4374		this.handleChange = this.handleChange.bind(this);
4375		this.handleSubmit = this.handleSubmit.bind(this);
4376	} // constructor(props)
4377	
4378	handleChange(event) {
4379		//console.log(event.target.value);
4380		this.setState({value: event.target.value});
4381	} // handleChange(event)
4382	
4383	handleSubmit(event) {
4384		alert('An essay was submitted: ' + this.state.value);
4385		event.preventDefault();
4386	} // handleSubmit(event)
4387	
4388	render() {
4389		return (
4390			<form onSubmit={this.handleSubmit}>
4391				<label>
4392					Essay:
4393					<textarea value={this.state.value} onChange={this.handleChange} />
4394				</label>
4395				<input type="submit" value="submit" />
4396			</form>
4397		);
4398	} // render()
4399} // class EssayForm extends React.Component
4400
4401class FlavorForm extends React.Component {
4402	
4403	constructor(props) {
4404		super(props);
4405		this.state = {value: 'coconut'};
4406		
4407		this.handleChange = this.handleChange.bind(this);
4408		this.handleSubmit = this.handleSubmit.bind(this);
4409	} // constructor(props)
4410	
4411	handleChange(event) {
4412		//console.log(event.target.value);
4413		this.setState({value: event.target.value});
4414	} // handleChange(event)
4415	
4416	handleSubmit(event) {
4417		alert('Your favorite flavor is: ' + this.state.value);
4418	} // handleSubmit(event)	
4419	
4420	render() {
4421		return (
4422			<form onSubmit={this.handleSubmit}>
4423				<label>
4424					Pick your favorite flavor:
4425					<select value={this.state.value} onChange={this.handleChange}>
4426						<option value="grapefruit">Grapefruit</option>
4427						<option value="lime">Lime</option>
4428						<option value="coconut">Coconut</option>
4429						<option value="mango">Mango</option>
4430						<option value="strawberry">Strawberry</option>
4431					</select>
4432					{/*<!--select multiple={true} value={['coffee', 'tea', 'Cocoa']} onChange={this.handleChange}></select-->*/}
4433				</label>
4434				<input type="submit" value="Submit" />
4435			</form>
4436		);
4437	} // render()
4438} // class FlavorForm extends React.Component
4439
4440class Reservation extends React.Component {
4441	constructor(props) {
4442		super(props);
4443		this.state = {
4444			isGoing: true,
4445			numberOfGuests: 2
4446		};
4447		
4448		this.handleInputChange = this.handleInputChange.bind(this);
4449	} // constructor(props)
4450	
4451	handleInputChange(event) {
4452		const target = event.target;
4453		const value = target.type === 'checkbox' ? target.checked : target.value;
4454		const name = target.name;
4455		
4456		this.setState({[name]: value});
4457		console.log(name, value);
4458	} // handleInputChange(event)
4459	
4460	render() {
4461		return (
4462			<form>
4463				<label>
4464					Is going:
4465					<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} />
4466				</label>
4467				<br />
4468				<label>
4469					Number of guests:
4470					<input name="numberOfGuests" type="number" value={this.state.numberOfGuests}
4470 onChange={this.handleInputChange} />
4471				</label>
4472			</form>
4473		);
4474	} // render() {
4475	
4476} // class Reservation extends React.Component
4477
4478function BoilingVerdict(props) {
4479	if (props.celsius >= 100) {
4480		return <p>The water would boil.</p>;
4481	} // if (props.celsius >= 100)
4482	return <p>The water would not boil.</p>;
4483} // function BoilingVerdict(props)
4484
4485const scaleNames = {
4486	c: 'Celsius',
4487	f: 'Fahrenheit'
4488};
4489
4490function toCelsius(fahrenheit) {
4491	return (fahrenheit - 32) * 5 / 9;
4492} // function toCelsius(fahrenheit)
4493
4494function toFahrenheit(celsius) {
4495	return (celsius * 9 / 5) + 32;
4496} // function toFahrenheit(celsius)
4497
4498function tryConvert(temperature, convert) {
4499	const input = parseFloat(temperature);
4500	if (Number.isNaN(input)) {
4501		return '';
4502	}
4503	const output = convert(input);
4504	const rounded = Math.round(output * 1000) / 1000;
4505	return rounded.toString();
4506} // function tryConvert(temperature, convert)
4507
4508class TemperatureInput extends React.Component {
4509	constructor(props) {
4510		super(props);
4511		this.handleChange = this.handleChange.bind(this);
4512		this.state = {temperature: ''};
4513	} // constructor(props)
4514	
4515	handleChange(e) {
4516		//this.setState({temperature: e.target.value});
4517		this.props.onTemperatureChange(e.target.value);
4518	} // handleChange(e)
4519	
4520	render() {
4521		//const temperature = this.state.temperature;
4522		const temperature = this.props.temperature;
4523		const scale = this.props.scale;
4524		return (
4525		<fieldset>
4526			<legend>Enter temperature in {scaleNames[scale]}:</legend>
4527			<input value={temperature} onChange={this.handleChange} />
4528			
4529			
4530		</fieldset>
4531		);
4532	} // render()
4533	
4534} // class TemperatureInput extends React.Component
4535
4536class Calculator extends React.Component {
4537	constructor(props) {
4538		super(props);
4539		this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
4540		this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
4541		this.state = {temperature: '', scale: 'c'};
4542	} // constructor(props)
4543	
4544	handleCelsiusChange(temperature) {
4545		this.setState({scale: 'c', temperature});
4546	} // handleCelsiusChange(temperature)
4547	
4548	handleFahrenheitChange(temperature) {
4549		this.setState({scale: 'f', temperature});
4550	} // handleFahrenheitChange(temperature)
4551	
4552	render() {
4553		const scale = this.state.scale;
4554		const temperature = this.state.temperature;
4555		const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
4556		const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
4557		return (
4558			<div>
4559			<TemperatureInput scale="c"
4560				temperature={celsius}
4561				onTemperatureChange={this.handleCelsiusChange}
4562			/>
4563			<TemperatureInput scale="f"
4564				temperature={fahrenheit}
4565				onTemperatureChange={this.handleFahrenheitChange}
4566			/>
4567			<BoilingVerdict celsius={parseFloat(celsius)} />
4568			</div>
4569		);
4570	} // render()
4571} // class Calculator extends React.Component
4572
4573class Calculator2 extends React.Component {
4574	constructor(props) {
4575		super(props);
4576		this.handleChange = this.handleChange.bind(this);
4577		this.state = {temperature: ''};
4578	} // constructor(props)
4579	
4580	handleChange(e) {
4581		this.setState({temperature: e.target.value});
4582	} // handleChange(e)
4583	
4584	render() {
4585		const temperature = this.state.temperature;
4586		
4587		return (
4588		<fieldset>
4589			<legend>Enter temperature in celsius:</legend>
4590			<input value={temperature} onChange={this.handleChange} />
4591			<BoilingVerdict celsius={parseFloat(temperature)} />
4592			
4593		</fieldset>
4594		);
4595	} // render()
4596} // class Calculator2 extends React.Component
4597
4598function FancyBorder(props) {
4599	return (
4600		<div className={'FancyBorder FancyBorder-' + props.color}>
4601			{props.children}
4602		</div>
4603	);
4604} // function FancyBorder(props)
4605
4606function Dialog(props) {
4607	return (
4608		<FancyBorder color="blue">
4609			<h1 className="Dialog-title">
4610				{props.title}
4611			</h1>
4612			<p className="Dialog-message">
4613				{props.message}
4614			</p>
4615			{props.children}
4616		</FancyBorder>
4617	);
4618} // function WelcomeDialog()
4619
4620function WelcomeDialog(props) {
4621	return (
4622		<Dialog title="Welcome" message="Thank you for visiting our spacecraft!" />
4623	);
4624} // function WelcomeDialog()
4625
4626class SignUpDialog extends React.Component
4627{
4628	constructor(props)
4629	{
4630		super(props);
4631		this.handleChange = this.handleChange.bind(this);
4632		this.handleSignUp = this.handleSignUp.bind(this);	
4633		this.state = {login: ''};
4634	} // constructor(props)
4635	
4636	render() {
4637		return (
4638			<Dialog title="Mars Exploration Program" message="How should we refer to you?">
4639				<input value={this.state.login} onChange={this.handleChange} />
4639
4640				<button onClick={this.handleSignUp}>Sign Me Up!</button>
4641			</Dialog>
4642		); // return
4643	} // render()
4644	
4645	handleChange(e) {
4646		this.setState({login: e.target.value});
4647	} // handleChange(e)
4648	
4649	handleSignUp() {
4650		alert(`Welcome aboard, ${this.state.login}!`);
4651	} // handleSignUp()
4652	
4653} // class SignUpDialog extends React.Component
4654
4655function SplitPane(props) {
4656	return (
4657		<div className="SplitPane">
4658			<div className="SplitPane-left">
4659				{props.left}
4660			</div>
4661			<div className="SplitPane-right">
4662				{props.right}
4663			</div>
4664		</div>
4665	);
4666} // function SplitPane(props)
4667
4668function App(props) {
4669	return (
4670		<SplitPane left={
4671			<FancyBorder color="green">
4672			<h1 className="Dialog-title">
4673				Welcome
4674			</h1>
4675		</FancyBorder>
4676		} right={
4677			<FancyBorder color="red">
4678			<p className="Dialog-message">
4679				Thank you for visiting our spacecraft!
4680			</p>
4681		</FancyBorder>
4682		} />
4683	);
4684} // function App()
4685
4686let product_arr = [
4687	{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
4688	{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
4689	{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
4690	{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
4691	{category: "Electronics", price: "$399.99", stocked: true, name: "iPhone 5"},
4692	{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
4693]
4694
4695class FilterableProductTable extends React.Component {
4696	display_list_arr = [];
4697	
4698	constructor(props) {
4699		super(props);
4700		console.log(props.json);
4701		this.display_list_arr = props.json;
4702		
4703		this.state = {search_term: "", fg_do_stock_filter: false};
4704			
4705		this.onChangeSearch = this.onChangeSearch.bind(this);
4706		this.onChangeFilter = this.onChangeFilter.bind(this);
4707	} // constructor(props)
4708	
4709	onChangeSearch(e) {
4710		console.log(e.target.value);
4711		this.setState({search_term: e.target.value, fg_do_stock_filter: this.state.fg_do_stock_filter});
4712	} // onChangeSearch(e)
4713	
4714	onChangeFilter(e) {
4715		console.log(e.target.checked);
4716		this.setState({search_term: this.state.search_term, fg_do_stock_filter: e.target.checked});
4717		//this.render();
4718	} // onChangeFilter(e)
4719	
4720	render() {
4721		console.log("this.state.search_term: " + this.state.search_term);
4722		console.log("this.state.fg_do_stock_filter: " + this.state.fg_do_stock_filter);
4723		
4724		return (
4725			<div>
4726				<SearchBar onChangeSearch={this.onChangeSearch} searchTerm={this.state.search_term} doStockFilter={this.state.fg_do_stock_filter} onChangeFilter={this.onChangeFilter} />
4727				<ProductTable list={this.display_list_arr} searchTerm={this.state.search_term} doStockFilter={this.state.fg_do_stock_filter} />
4728			</div>
4729		);
4730	} // render() 
4731} // class FilterableProductTable extends React.Component
4732
4733class SearchBar extends React.Component {
4734
4735	props;
4736	
4737	constructor(props) {
4738		super(props);
4739		this.props = props;
4740	} // constructor(props)
4741	
4742	render() {
4743			
4744		return (
4745			<form>
4746				<input type="text" name="search" onChange={this.props.onChangeSearch} value={this.props.searchTerm} placeHolder="Enter item name" />
4747				<input type="checkbox" name="stock_filter" onChange={this.props.onChangeFilter} value={this.props.doStockFilter} /> In stock only
4748			</form>
4749		);
4750	} // render() 
4751} // class SearchBar extends React.Component
4752
4753class ProductTable extends React.Component {
4754
4755	display_category_item_map = new Map();
4756	display_list = [];
4757	//search_term = "";
4758	//fg_do_stock_filter = false;
4759	//myprops = null;
4760	
4761	constructor(props) {
4762		super(props);
4763		
4764		//this.search_term = props.searchTerm;
4765		//this.fg_do_stock_filter = props.doStockFilter;
4766		//this.processList(props.list, props.searchTerm, props.doStockFilter);
4767		this.display_list = props.list;
4768		//this.myprops = props;
4769	} // constructor(props)
4770	
4771	processList(list, search_term, fg_do_stock_filter) {
4772		
4773		this.display_category_item_map.clear(); // reset
4774		
4775		for(let item of list) {
4776						
4777			console.log("fg_do_stock_filter", fg_do_stock_filter);
4778			console.log("search_term", search_term);
4779			console.log('item: ', item);
4780			
4781			if(fg_do_stock_filter && !item.stocked)
4782			{
4783				console.log('skipped: ', item);
4784				continue; // skip
4785			}
4786				
4787			if(search_term != "" && item.name.toLowerCase().indexOf(search_term.toLowerCase()) == -1)
4788				continue; // skip
4789			
4790			let display_item_list = this.display_category_item_map.get(item.category);
4791			
4792			if(display_item_list == null)
4793			{
4794				display_item_list = [];
4795				this.display_category_item_map.set(item.category, display_item_list);
4796			}
4797			
4798			console.log('added: ', item);
4799			display_item_list.push(item);
4800		} // for(let item of list)
4801	} // processList(list) 
4802	
4803	render() {
4804	
4805			this.processList(this.display_list, this.props.searchTerm, this.props.doStockFilter);
4806			
4807			let categories = []
4808			let keys = this.display_category_item_map.keys();
4809			for(let category_name of keys) {
4810				categories.push(category_name);
4811			}
4812			
4813			console.log(categories);
4814			
4815			let display_category_arr = categories.map((key) =>
4816				<ProductCategoryRow key={key} name={key} products={this.display_category_item_map.get(key)} />
4817				);
4818			
4819		return (
4820		<table><tbody><tr><td>Name</td><td>Price</td></tr>
4821		{display_category_arr}
4822		</tbody></table>
4823		);
4824	} // render() 
4825} // class ProductTable extends React.Component
4826
4827class ProductCategoryRow extends React.Component {
4828	name = '';
4829	
4830	constructor(props) {
4831		super(props);
4832		this.name = props.name;
4833	} // constructor(props)
4834	
4835	render() {
4836		return (
4837			<tr><td colSpan='2'><table><tbody>
4838			<tr><td colSpan='2'>{this.name}</td></tr>
4839			<ProductRow products={this.props.products} />
4840			</tbody></table></td></tr>
4841		);
4842	} // render() 
4843} // class ProductCategoryRow extends React.Component
4844
4845class ProductRow extends React.Component {
4846	//products = [];
4847	
4848	constructor(props) {
4849		super(props);
4850		console.log('props.products', props.products);
4851		//this.products = props.products;
4852	} // constructor(props)
4853	
4854	render() {
4855	
4856		let product_items = this.props.products.map((product, index) => 
4857			<tr key={index} ><td>{product.name}</td><td>{product.price}</td></tr>
4858		);
4859		
4860		console.log("product_items", product_items);
4861		
4862		return product_items;
4863	} // render() 
4864} // class ProductRow extends React.Component
4865
4866function SimpleDialog(props) {
4867	return (
4868			<div>
4869			<h1 className="Dialog-title">
4870				{props.title}
4871			</h1>
4872			<p className="Dialog-message">
4873				{props.message}
4874			</p>
4875			{props.children}
4876			</div>
4877	);
4878}
4879
4880class LoginDialog extends React.Component
4881{
4882	constructor(props)
4883	{
4884		super(props);
4885		this.handleUserChange = this.handleUserChange.bind(this);
4886		this.handlePassChange = this.handlePassChange.bind(this);
4887		this.handleLogin = this.handleLogin.bind(this);
4888		this.state = {user: '', pass: ''};
4889	} // constructor(props)
4890	
4891	render() {
4892		return (
4893			<SimpleDialog title="Login" message="Enter Credentials">
4894				Username <input value={this.state.user} onChange={this.handleUserChange} />
4894<br />
4895				PassWord <input value={this.state.pass} onChange={this.handlePassChange} type="password" /><br />
4896				<button onClick={this.handleLogin}>Login</button>
4897			</SimpleDialog>
4898		); // return
4899	} // render()
4900	
4901	handleUserChange(e) {
4902		this.setState({user: e.target.value, pass: this.state.pass});
4903	} // handleChange(e)
4904	
4905	handlePassChange(e) {
4906		this.setState({user: this.state.user, pass: e.target.value});
4907	} // handlePassChange(e)
4908	
4909	handleLogin() {
4910		if(this.state.user)
4911			alert(`Sorry, ${this.state.user}!`);
4912	} // handleLogin()
4913	
4914} // class LoginDialog extends React.Component
4915
4916class CaptureDialog extends React.Component
4917{
4918	coordCapture = new L.Control.Coordinates();
4919	
4920	constructor(props)
4921	{
4922		super(props);
4923		this.handleLatChange = this.handleLatChange.bind(this);
4924		this.handleLngChange = this.handleLngChange.bind(this);
4925		this.handleToggle = this.handleToggle.bind(this);
4926		this.onMapClick = this.onMapClick.bind(this);
4927		this.state = {lat: '', lng: '', fg_capture: false};
4928		
4929	} // constructor(props)
4930	
4931	render() {
4932		return (
4933			<SimpleDialog title="Capture" message="Capture!">
4934				Lat <input value={this.state.user} onChange={this.handleLatChange} /><br />
4935				Lng <input value={this.state.pass} onChange={this.handleLngChange} /><br />
4936				<button onClick={this.handleToggle}>Toggle</button>
4937			</SimpleDialog>
4938		); // return
4939	} // render()
4940	
4941	handleLatChange(e) {
4942		console.log(this.state);
4943		this.setState({lat: e.target.value, lng: this.state.lng, fg_capture: this.state.fg_capture});
4944	} // handleChange(e)
4945	
4946	handleLngChange(e) {
4947		console.log(this.state);
4948		this.setState({lat: this.state.lat, lng: e.target.value, fg_capture: this.state.fg_capture});
4949	} // handlePassChange(e)
4950	
4951	handleToggle(e) {
4952		let fg_toggle = !this.state.fg_capture;
4953		
4954		console.log(this.coordCapture);
4955		
4956		if(fg_toggle) {
4957				//console.log(this.state);
4958				this.coordCapture.addTo(mymap);
4959				mymap.on('click', this.onMapClick);
4960				
4961		} // if(fg_toggle)
4962		else
4963		{
4964			this.coordCapture.remove(mymap);
4965		}
4966			
4967		
4968		this.setState({lat: this.state.lat, lng: this.state.lng, fg_capture: fg_toggle});
4969		console.log(this.state);
4970	} // handleLogin()
4971	
4972	onMapClick(e) {
4973		console.log(e);
4974		if(this.state.fg_capture)
4975			this.coordCapture.setCoordinates(e);
4976	} // function onMapClick(e)
4977	
4978} // class CaptureDialog extends React.Component
4979
4980let fg_react_loaded = false;
4981
4982function loadReact() {
4983	if(fg_react_loaded)
4984		return; // skip.
4985	else
4986		fg_react_loaded = true;
4987		
4988	const element = <div><LoginDialog /></div>;
4989      ReactDOM.render(
4990        element,
4991        document.getElementById('root')
4992      );
4993      
4994    const captureElement = <div><CaptureDialog /></div>;
4995      ReactDOM.render(
4996        captureElement,
4997        document.getElementById('settingsRoot')
4998      );
4999      
5000} // function loadReact()
5001
5002function loadReact3()
5003{
5004	if(fg_react_loaded)
5005		return; // skip.
5006	else
5007		fg_react_loaded = true;
5008		
5009	const user = {
5010		firstName: 'Harper',
5011		lastName: 'Perez3'
5012	}
5013	
5014	const messages1 = [];
5015	const messages = ['React', 'Re: React', 'Re:Re: React'];
5016	
5017	const numbers = [1, 2, 3, 4, 5, 6];
5018	const listItems = NumberList(numbers);
5019	
5020	const posts = [
5021		{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
5022		{id: 2, title: 'Installation', content: 'You can install React from npm.'},
5023		{id: 3, title: 'Tutorials', content: 'Have to learn...'}
5024	];
5025	
5026	const element = <div>{getGreeting(user)}<h2>Good to see you here!</h2><FilterableProductTable json={product_arr} /><SignUpDialog /><Calculator /><Reservation /><NameForm /><EssayForm /><Form /><FlavorForm /><LoginControl /><Blog posts={posts} /><Mailbox unreadMessages={messages} /><WarnPage /><Toggle />list: <ul>{listItems}</ul><div id='time' /><WelcomeParty /><Comment author={author} /></div>;
5027      ReactDOM.render(
5028        element,
5029        document.getElementById('root')
5030      );
5031      
5032      //function tick()
5033      //{
5034      	ReactDOM.render(<Clock3 />, document.getElementById('time'));
5035      //} // function tick()
5036      
5037      //setInterval(tick, 1000);
5038} // function loadReact()
5039 </script>
5039
5040
5041 
5041<script src="https://jhammann.github.io/sakura/dist/sakura.js"></script>
5041
5042    
5042<script>
5043      //var sakura = new Sakura('#mapid');
5044    </script>
5044
5045 
5046 
5046<script src="js/jquery-sakura.min.js"></script>
5046    
5047
5048<script>
5049    // domReady
5050    //$(function() {
5051        //$('body').sakura();
5052    //});
5053
5054    // windowLoad
5055    $(window).load(function() {
5056        ////$('div#mapid').sakura();
5057    });
5058</script>
5058   
5059
5060<div id="loader"><div id="loader_logo"><img id="loader_logo" src='images/tenatchmas.png'></div><div id="loader_spinner"></div></div>
5061<div id="mapid"></div>
5062
5063<div id="dialog" class="view_hidden" title="Suggest an event">
5064	<form>
5065	<textarea id="myTextarea" rows="4" placeholder="Type something here..."></textarea>
5066	<div><input type="text" id="address" name="address" placeholder="event address..." /><button type="button" onclick="findLatLng()">Find</button></div>
5067	
5068	<div class="output"></div>
5069	<input id="dialog_submit" class="view_hidden" type="submit" value="Submit event suggestion" disabled />
5070	</form>
5071</div>
5072
5073
5074<div id="sidebar" class="leaflet-sidebar collapsed view_hidden">
5075    <!-- Nav tabs -->
5076    <div class="leaflet-sidebar-tabs">
5077        <ul role="tablist"> <!-- top aligned tabs -->
5078            
5079            <li><a href="#home" role="tab"><img src='favicon.ico' width="40"></a></li-->
5080            <li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
5081            <li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
5082        </ul>
5083
5084        <ul role="tablist"> <!-- bottom aligned tabs -->
5085            <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
5086        </ul>
5087    </div>
5088
5089    <!-- Tab panes -->
5090    <div class="leaflet-sidebar-content">
5091        <div class="leaflet-sidebar-pane" id="home">
5092            <h1 class="leaflet-sidebar-header">
5093                Who are We?
5094                <div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div>
5095            </h1>
5096            <p>Grouping Local Small Business Entrepreneurs into Great Spaces</p>
5097            <p>Tenatch's vision is to create an impactful platform that supports local small business entrepreneurs by combining complementary businesses from all social and cultural backgrounds expand their business opportunities and create a more sustainable future.</p>
5098            <p>We want to get you out of the building, and enjoy the fine city you are living in!</p>
5099              <a href="https://tenatch.ca" target="_blank"><img src="images/tenatch_bnm.jpeg" /></a>
5100        </div>
5101
5102        <div class="leaflet-sidebar-pane" id="messages">
5103            <h1 class="leaflet-sidebar-header">Messages<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
5104        </div>
5105
5106        <div class="leaflet-sidebar-pane" id="profile">
5107            <h1 class="leaflet-sidebar-header">Profile<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
5108            <div id="root"></div>
5109        </div>
5110        
5111        <div class="leaflet-sidebar-pane" id="settings">
5112            <h1 class="leaflet-sidebar-header">
5113                Settings
5114                <div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div>
5115            </h1>
5116            <div id="settingsRoot"></div>
5117        </div>
5118        
5119    </div>
5120    
5121</div>
5122<div id="overlay"></div>
5123
5124
5125</body>
5126</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.