CodePen Embed - Margate Art Tour Time Demonstration

<!--<img src="https://lh3.googleusercontent.com/_aEvcV6YxK7wAEBE3i7-Qfj_ng3fb71EKKJdeBJ1S9VhQGBncK0JrbQ5M5HWCJkQ10p9RSFnU18_UQ9Al4_LsenIbggzJdQjzwch2Q80dGtN2Y3-at86vSdKgCd-Jxli28P2ZO-9ffunA2MDJAO0_zVnqV8Y4zIZBo_NfnN007FYGWnB6miIhl8fFLZ8cgxQbvxpzS3IqC1bGyEbD4pS5ovPrFWjnE95SIOcxlHnHBtiw0PwQmsUSL05NK4TbncOr9mBoMrpmne3jStRk705LNQRtui9LC0cqch_ZwcmpkulKsVWAPi7BCcmrC8AWp_4P977u4fAm9OPT6maksXDoddBGAGbtA2hLDJMozqZguknMrM-e0Vw1Mo0Zqs3rd6zhRVmi85ou5k999JjL2cuFDu9e63sy1BZLpaX10F8HGHgfvsQZw-t9miYNnMQoQkDyI18IOjFofojmaBuC4sFjSI_deQIOnR_9quqdczsp5V6os3aDRP6iB40h2TrYNf1MgBFouiaf32deE-XtUcgE7oXSFem2_g7PsVdxKBeebYjsC_RTFMnhyrFoPqFzcCb9L_4oomwyVIxw7Q1cFFEzibgeK9JRcAKWjAtcbD3lwDjnaaElr9QDQ=w2350-h1566-no" /> -->

<div id="map">

  <img class="pin tester" src="https://lh3.googleusercontent.com/T9JgVKq3wQwHHzAWaf0cFM34pLZcUidd89ZHKzr6ZGy7IizHvH6PHfOKWjJ05-QF0i5r2ZZNwJXJ4xURiIalYZITdyD3QYBtPUiPseTvVu4wVKZBbI0HOdOrsY0ePKPxzvTCdwpG47wlCrTj2fM78bhEK6tW7oKU5yW82CPmAcbMJd0XoWi9lGWWLeKjDqj9OnwLpy45URMm9-DphRq3Y8MI3H76X4v3mgtXIOP34hhxLkGE-LO34LexT0IZMnCyFmpzYtzwCd-e1HsbZcR7J530CRKvwa0EtxdQoNv79Y1BvFt7rEE_XI5yOiP3py6bqozSuMN6K5qZPZli8vVsiCYoZfOT8sMbJd2J3anJ4lNmUYSrJMiVmHZclGSMwV-0whb66e-WMXj3yBxBXCtjYbf3Eo-L5d8oZzOe9wn8iOsiiolsdNGgstL7srSJ_1TJMIthYKVdOPfEvAAEQ0qEbEBrkssNwjoFpAuKUo9KBi93n6574RKkELLR9kgJdCnqmzUDEBuXUgDHKLKwfI-qQLILjy20iKjstaagp4V5iFWZFI11sedqBmFUxKUQWFLEX9MMKJSKv_s0xbVkVwP5-L4fXbWqIBdt9ZvpUhzDCISol9mSD9CpNg=w600-h472-no"
  />
  
  <img class="pin ldn" src="https://lh3.googleusercontent.com/T9JgVKq3wQwHHzAWaf0cFM34pLZcUidd89ZHKzr6ZGy7IizHvH6PHfOKWjJ05-QF0i5r2ZZNwJXJ4xURiIalYZITdyD3QYBtPUiPseTvVu4wVKZBbI0HOdOrsY0ePKPxzvTCdwpG47wlCrTj2fM78bhEK6tW7oKU5yW82CPmAcbMJd0XoWi9lGWWLeKjDqj9OnwLpy45URMm9-DphRq3Y8MI3H76X4v3mgtXIOP34hhxLkGE-LO34LexT0IZMnCyFmpzYtzwCd-e1HsbZcR7J530CRKvwa0EtxdQoNv79Y1BvFt7rEE_XI5yOiP3py6bqozSuMN6K5qZPZli8vVsiCYoZfOT8sMbJd2J3anJ4lNmUYSrJMiVmHZclGSMwV-0whb66e-WMXj3yBxBXCtjYbf3Eo-L5d8oZzOe9wn8iOsiiolsdNGgstL7srSJ_1TJMIthYKVdOPfEvAAEQ0qEbEBrkssNwjoFpAuKUo9KBi93n6574RKkELLR9kgJdCnqmzUDEBuXUgDHKLKwfI-qQLILjy20iKjstaagp4V5iFWZFI11sedqBmFUxKUQWFLEX9MMKJSKv_s0xbVkVwP5-L4fXbWqIBdt9ZvpUhzDCISol9mSD9CpNg=w600-h472-no"
  />

  <img class="pin se" src="https://lh3.googleusercontent.com/T9JgVKq3wQwHHzAWaf0cFM34pLZcUidd89ZHKzr6ZGy7IizHvH6PHfOKWjJ05-QF0i5r2ZZNwJXJ4xURiIalYZITdyD3QYBtPUiPseTvVu4wVKZBbI0HOdOrsY0ePKPxzvTCdwpG47wlCrTj2fM78bhEK6tW7oKU5yW82CPmAcbMJd0XoWi9lGWWLeKjDqj9OnwLpy45URMm9-DphRq3Y8MI3H76X4v3mgtXIOP34hhxLkGE-LO34LexT0IZMnCyFmpzYtzwCd-e1HsbZcR7J530CRKvwa0EtxdQoNv79Y1BvFt7rEE_XI5yOiP3py6bqozSuMN6K5qZPZli8vVsiCYoZfOT8sMbJd2J3anJ4lNmUYSrJMiVmHZclGSMwV-0whb66e-WMXj3yBxBXCtjYbf3Eo-L5d8oZzOe9wn8iOsiiolsdNGgstL7srSJ_1TJMIthYKVdOPfEvAAEQ0qEbEBrkssNwjoFpAuKUo9KBi93n6574RKkELLR9kgJdCnqmzUDEBuXUgDHKLKwfI-qQLILjy20iKjstaagp4V5iFWZFI11sedqBmFUxKUQWFLEX9MMKJSKv_s0xbVkVwP5-L4fXbWqIBdt9ZvpUhzDCISol9mSD9CpNg=w600-h472-no"
  />

  <img class="pin her" src="https://lh3.googleusercontent.com/T9JgVKq3wQwHHzAWaf0cFM34pLZcUidd89ZHKzr6ZGy7IizHvH6PHfOKWjJ05-QF0i5r2ZZNwJXJ4xURiIalYZITdyD3QYBtPUiPseTvVu4wVKZBbI0HOdOrsY0ePKPxzvTCdwpG47wlCrTj2fM78bhEK6tW7oKU5yW82CPmAcbMJd0XoWi9lGWWLeKjDqj9OnwLpy45URMm9-DphRq3Y8MI3H76X4v3mgtXIOP34hhxLkGE-LO34LexT0IZMnCyFmpzYtzwCd-e1HsbZcR7J530CRKvwa0EtxdQoNv79Y1BvFt7rEE_XI5yOiP3py6bqozSuMN6K5qZPZli8vVsiCYoZfOT8sMbJd2J3anJ4lNmUYSrJMiVmHZclGSMwV-0whb66e-WMXj3yBxBXCtjYbf3Eo-L5d8oZzOe9wn8iOsiiolsdNGgstL7srSJ_1TJMIthYKVdOPfEvAAEQ0qEbEBrkssNwjoFpAuKUo9KBi93n6574RKkELLR9kgJdCnqmzUDEBuXUgDHKLKwfI-qQLILjy20iKjstaagp4V5iFWZFI11sedqBmFUxKUQWFLEX9MMKJSKv_s0xbVkVwP5-L4fXbWqIBdt9ZvpUhzDCISol9mSD9CpNg=w600-h472-no"
  />

  <img class="pin mar" src="https://lh3.googleusercontent.com/T9JgVKq3wQwHHzAWaf0cFM34pLZcUidd89ZHKzr6ZGy7IizHvH6PHfOKWjJ05-QF0i5r2ZZNwJXJ4xURiIalYZITdyD3QYBtPUiPseTvVu4wVKZBbI0HOdOrsY0ePKPxzvTCdwpG47wlCrTj2fM78bhEK6tW7oKU5yW82CPmAcbMJd0XoWi9lGWWLeKjDqj9OnwLpy45URMm9-DphRq3Y8MI3H76X4v3mgtXIOP34hhxLkGE-LO34LexT0IZMnCyFmpzYtzwCd-e1HsbZcR7J530CRKvwa0EtxdQoNv79Y1BvFt7rEE_XI5yOiP3py6bqozSuMN6K5qZPZli8vVsiCYoZfOT8sMbJd2J3anJ4lNmUYSrJMiVmHZclGSMwV-0whb66e-WMXj3yBxBXCtjYbf3Eo-L5d8oZzOe9wn8iOsiiolsdNGgstL7srSJ_1TJMIthYKVdOPfEvAAEQ0qEbEBrkssNwjoFpAuKUo9KBi93n6574RKkELLR9kgJdCnqmzUDEBuXUgDHKLKwfI-qQLILjy20iKjstaagp4V5iFWZFI11sedqBmFUxKUQWFLEX9MMKJSKv_s0xbVkVwP5-L4fXbWqIBdt9ZvpUhzDCISol9mSD9CpNg=w600-h472-no"
  />

  <img class="pin ram" src="https://lh3.googleusercontent.com/T9JgVKq3wQwHHzAWaf0cFM34pLZcUidd89ZHKzr6ZGy7IizHvH6PHfOKWjJ05-QF0i5r2ZZNwJXJ4xURiIalYZITdyD3QYBtPUiPseTvVu4wVKZBbI0HOdOrsY0ePKPxzvTCdwpG47wlCrTj2fM78bhEK6tW7oKU5yW82CPmAcbMJd0XoWi9lGWWLeKjDqj9OnwLpy45URMm9-DphRq3Y8MI3H76X4v3mgtXIOP34hhxLkGE-LO34LexT0IZMnCyFmpzYtzwCd-e1HsbZcR7J530CRKvwa0EtxdQoNv79Y1BvFt7rEE_XI5yOiP3py6bqozSuMN6K5qZPZli8vVsiCYoZfOT8sMbJd2J3anJ4lNmUYSrJMiVmHZclGSMwV-0whb66e-WMXj3yBxBXCtjYbf3Eo-L5d8oZzOe9wn8iOsiiolsdNGgstL7srSJ_1TJMIthYKVdOPfEvAAEQ0qEbEBrkssNwjoFpAuKUo9KBi93n6574RKkELLR9kgJdCnqmzUDEBuXUgDHKLKwfI-qQLILjy20iKjstaagp4V5iFWZFI11sedqBmFUxKUQWFLEX9MMKJSKv_s0xbVkVwP5-L4fXbWqIBdt9ZvpUhzDCISol9mSD9CpNg=w600-h472-no"
  />

  <img class="pin deal" src="https://lh3.googleusercontent.com/T9JgVKq3wQwHHzAWaf0cFM34pLZcUidd89ZHKzr6ZGy7IizHvH6PHfOKWjJ05-QF0i5r2ZZNwJXJ4xURiIalYZITdyD3QYBtPUiPseTvVu4wVKZBbI0HOdOrsY0ePKPxzvTCdwpG47wlCrTj2fM78bhEK6tW7oKU5yW82CPmAcbMJd0XoWi9lGWWLeKjDqj9OnwLpy45URMm9-DphRq3Y8MI3H76X4v3mgtXIOP34hhxLkGE-LO34LexT0IZMnCyFmpzYtzwCd-e1HsbZcR7J530CRKvwa0EtxdQoNv79Y1BvFt7rEE_XI5yOiP3py6bqozSuMN6K5qZPZli8vVsiCYoZfOT8sMbJd2J3anJ4lNmUYSrJMiVmHZclGSMwV-0whb66e-WMXj3yBxBXCtjYbf3Eo-L5d8oZzOe9wn8iOsiiolsdNGgstL7srSJ_1TJMIthYKVdOPfEvAAEQ0qEbEBrkssNwjoFpAuKUo9KBi93n6574RKkELLR9kgJdCnqmzUDEBuXUgDHKLKwfI-qQLILjy20iKjstaagp4V5iFWZFI11sedqBmFUxKUQWFLEX9MMKJSKv_s0xbVkVwP5-L4fXbWqIBdt9ZvpUhzDCISol9mSD9CpNg=w600-h472-no"
  />

  <img class="pin dov" src="https://lh3.googleusercontent.com/T9JgVKq3wQwHHzAWaf0cFM34pLZcUidd89ZHKzr6ZGy7IizHvH6PHfOKWjJ05-QF0i5r2ZZNwJXJ4xURiIalYZITdyD3QYBtPUiPseTvVu4wVKZBbI0HOdOrsY0ePKPxzvTCdwpG47wlCrTj2fM78bhEK6tW7oKU5yW82CPmAcbMJd0XoWi9lGWWLeKjDqj9OnwLpy45URMm9-DphRq3Y8MI3H76X4v3mgtXIOP34hhxLkGE-LO34LexT0IZMnCyFmpzYtzwCd-e1HsbZcR7J530CRKvwa0EtxdQoNv79Y1BvFt7rEE_XI5yOiP3py6bqozSuMN6K5qZPZli8vVsiCYoZfOT8sMbJd2J3anJ4lNmUYSrJMiVmHZclGSMwV-0whb66e-WMXj3yBxBXCtjYbf3Eo-L5d8oZzOe9wn8iOsiiolsdNGgstL7srSJ_1TJMIthYKVdOPfEvAAEQ0qEbEBrkssNwjoFpAuKUo9KBi93n6574RKkELLR9kgJdCnqmzUDEBuXUgDHKLKwfI-qQLILjy20iKjstaagp4V5iFWZFI11sedqBmFUxKUQWFLEX9MMKJSKv_s0xbVkVwP5-L4fXbWqIBdt9ZvpUhzDCISol9mSD9CpNg=w600-h472-no"
  />

  <img class="boat red" src="https://lh3.googleusercontent.com/p2ff8qdwryvJoVpnLoCcni0K1YRs9z15oxqfK6gm7knEFCioDgzASYNgYmoX1YoaLnQUywB1W3ZjyzldaNYSzHim8iKHbI9xPnQV_yfodjbqx09QfaV2bqsZNmF1MNCj6vPaIsCIW7tLG8aWg_2s1TTEponN0CaMJ24P2_pgh5NV6AAnlM7kMuMWpni74fZKZhSxa_pKRxlyFlghqaNq1Y_O1kWDly6_JwOwM6mJldp-NEAFmHXKD1HmlATEOaKnV8vWl5KUb_6rS7EksBA_KHzcn8cGW7pCWks3vsgn6iO6YUyg20OVq-nng3CT77-P2OqlIcPBvrl2oovwcE52dpSc2dCLcM7DjdbnTj3LBaAG_olEQQIcAeaMwBWR5kiQfTqocyfNuBx6_WDbbVjoTH-VOlfi_XAd8EHHjTfpNr2hKxM46pYUnV7qTkPtB5yj96_dOqlHVoAzpiryqoJ36TRsndkcYoPMt-h9VxuUGQlg2RLN8iBylOxcHREbs6XPNq7BFBtDlWHuLIOyvgEdkE17bjGijSmKsdcdAjObXBWlU-_fPiVgHTwNKZXhwNIFFW1keiVdv31U120NkIkxit_BQ2r2cDIRI4kiLHEv7g0_oyuIQgPzng=s1200-no"
  />

  <img class="boat blue" src="https://lh3.googleusercontent.com/p2ff8qdwryvJoVpnLoCcni0K1YRs9z15oxqfK6gm7knEFCioDgzASYNgYmoX1YoaLnQUywB1W3ZjyzldaNYSzHim8iKHbI9xPnQV_yfodjbqx09QfaV2bqsZNmF1MNCj6vPaIsCIW7tLG8aWg_2s1TTEponN0CaMJ24P2_pgh5NV6AAnlM7kMuMWpni74fZKZhSxa_pKRxlyFlghqaNq1Y_O1kWDly6_JwOwM6mJldp-NEAFmHXKD1HmlATEOaKnV8vWl5KUb_6rS7EksBA_KHzcn8cGW7pCWks3vsgn6iO6YUyg20OVq-nng3CT77-P2OqlIcPBvrl2oovwcE52dpSc2dCLcM7DjdbnTj3LBaAG_olEQQIcAeaMwBWR5kiQfTqocyfNuBx6_WDbbVjoTH-VOlfi_XAd8EHHjTfpNr2hKxM46pYUnV7qTkPtB5yj96_dOqlHVoAzpiryqoJ36TRsndkcYoPMt-h9VxuUGQlg2RLN8iBylOxcHREbs6XPNq7BFBtDlWHuLIOyvgEdkE17bjGijSmKsdcdAjObXBWlU-_fPiVgHTwNKZXhwNIFFW1keiVdv31U120NkIkxit_BQ2r2cDIRI4kiLHEv7g0_oyuIQgPzng=s1200-no"
  />

  <img class="boat green" src="https://lh3.googleusercontent.com/p2ff8qdwryvJoVpnLoCcni0K1YRs9z15oxqfK6gm7knEFCioDgzASYNgYmoX1YoaLnQUywB1W3ZjyzldaNYSzHim8iKHbI9xPnQV_yfodjbqx09QfaV2bqsZNmF1MNCj6vPaIsCIW7tLG8aWg_2s1TTEponN0CaMJ24P2_pgh5NV6AAnlM7kMuMWpni74fZKZhSxa_pKRxlyFlghqaNq1Y_O1kWDly6_JwOwM6mJldp-NEAFmHXKD1HmlATEOaKnV8vWl5KUb_6rS7EksBA_KHzcn8cGW7pCWks3vsgn6iO6YUyg20OVq-nng3CT77-P2OqlIcPBvrl2oovwcE52dpSc2dCLcM7DjdbnTj3LBaAG_olEQQIcAeaMwBWR5kiQfTqocyfNuBx6_WDbbVjoTH-VOlfi_XAd8EHHjTfpNr2hKxM46pYUnV7qTkPtB5yj96_dOqlHVoAzpiryqoJ36TRsndkcYoPMt-h9VxuUGQlg2RLN8iBylOxcHREbs6XPNq7BFBtDlWHuLIOyvgEdkE17bjGijSmKsdcdAjObXBWlU-_fPiVgHTwNKZXhwNIFFW1keiVdv31U120NkIkxit_BQ2r2cDIRI4kiLHEv7g0_oyuIQgPzng=s1200-no"
  />

  <img class="boat yellow" src="https://lh3.googleusercontent.com/p2ff8qdwryvJoVpnLoCcni0K1YRs9z15oxqfK6gm7knEFCioDgzASYNgYmoX1YoaLnQUywB1W3ZjyzldaNYSzHim8iKHbI9xPnQV_yfodjbqx09QfaV2bqsZNmF1MNCj6vPaIsCIW7tLG8aWg_2s1TTEponN0CaMJ24P2_pgh5NV6AAnlM7kMuMWpni74fZKZhSxa_pKRxlyFlghqaNq1Y_O1kWDly6_JwOwM6mJldp-NEAFmHXKD1HmlATEOaKnV8vWl5KUb_6rS7EksBA_KHzcn8cGW7pCWks3vsgn6iO6YUyg20OVq-nng3CT77-P2OqlIcPBvrl2oovwcE52dpSc2dCLcM7DjdbnTj3LBaAG_olEQQIcAeaMwBWR5kiQfTqocyfNuBx6_WDbbVjoTH-VOlfi_XAd8EHHjTfpNr2hKxM46pYUnV7qTkPtB5yj96_dOqlHVoAzpiryqoJ36TRsndkcYoPMt-h9VxuUGQlg2RLN8iBylOxcHREbs6XPNq7BFBtDlWHuLIOyvgEdkE17bjGijSmKsdcdAjObXBWlU-_fPiVgHTwNKZXhwNIFFW1keiVdv31U120NkIkxit_BQ2r2cDIRI4kiLHEv7g0_oyuIQgPzng=s1200-no"
  />

  <img class="boat purple" src="https://lh3.googleusercontent.com/p2ff8qdwryvJoVpnLoCcni0K1YRs9z15oxqfK6gm7knEFCioDgzASYNgYmoX1YoaLnQUywB1W3ZjyzldaNYSzHim8iKHbI9xPnQV_yfodjbqx09QfaV2bqsZNmF1MNCj6vPaIsCIW7tLG8aWg_2s1TTEponN0CaMJ24P2_pgh5NV6AAnlM7kMuMWpni74fZKZhSxa_pKRxlyFlghqaNq1Y_O1kWDly6_JwOwM6mJldp-NEAFmHXKD1HmlATEOaKnV8vWl5KUb_6rS7EksBA_KHzcn8cGW7pCWks3vsgn6iO6YUyg20OVq-nng3CT77-P2OqlIcPBvrl2oovwcE52dpSc2dCLcM7DjdbnTj3LBaAG_olEQQIcAeaMwBWR5kiQfTqocyfNuBx6_WDbbVjoTH-VOlfi_XAd8EHHjTfpNr2hKxM46pYUnV7qTkPtB5yj96_dOqlHVoAzpiryqoJ36TRsndkcYoPMt-h9VxuUGQlg2RLN8iBylOxcHREbs6XPNq7BFBtDlWHuLIOyvgEdkE17bjGijSmKsdcdAjObXBWlU-_fPiVgHTwNKZXhwNIFFW1keiVdv31U120NkIkxit_BQ2r2cDIRI4kiLHEv7g0_oyuIQgPzng=s1200-no"
  />

  <img class="boat orange" src="https://lh3.googleusercontent.com/p2ff8qdwryvJoVpnLoCcni0K1YRs9z15oxqfK6gm7knEFCioDgzASYNgYmoX1YoaLnQUywB1W3ZjyzldaNYSzHim8iKHbI9xPnQV_yfodjbqx09QfaV2bqsZNmF1MNCj6vPaIsCIW7tLG8aWg_2s1TTEponN0CaMJ24P2_pgh5NV6AAnlM7kMuMWpni74fZKZhSxa_pKRxlyFlghqaNq1Y_O1kWDly6_JwOwM6mJldp-NEAFmHXKD1HmlATEOaKnV8vWl5KUb_6rS7EksBA_KHzcn8cGW7pCWks3vsgn6iO6YUyg20OVq-nng3CT77-P2OqlIcPBvrl2oovwcE52dpSc2dCLcM7DjdbnTj3LBaAG_olEQQIcAeaMwBWR5kiQfTqocyfNuBx6_WDbbVjoTH-VOlfi_XAd8EHHjTfpNr2hKxM46pYUnV7qTkPtB5yj96_dOqlHVoAzpiryqoJ36TRsndkcYoPMt-h9VxuUGQlg2RLN8iBylOxcHREbs6XPNq7BFBtDlWHuLIOyvgEdkE17bjGijSmKsdcdAjObXBWlU-_fPiVgHTwNKZXhwNIFFW1keiVdv31U120NkIkxit_BQ2r2cDIRI4kiLHEv7g0_oyuIQgPzng=s1200-no"
  />

  <img class="boat teal" src="https://lh3.googleusercontent.com/p2ff8qdwryvJoVpnLoCcni0K1YRs9z15oxqfK6gm7knEFCioDgzASYNgYmoX1YoaLnQUywB1W3ZjyzldaNYSzHim8iKHbI9xPnQV_yfodjbqx09QfaV2bqsZNmF1MNCj6vPaIsCIW7tLG8aWg_2s1TTEponN0CaMJ24P2_pgh5NV6AAnlM7kMuMWpni74fZKZhSxa_pKRxlyFlghqaNq1Y_O1kWDly6_JwOwM6mJldp-NEAFmHXKD1HmlATEOaKnV8vWl5KUb_6rS7EksBA_KHzcn8cGW7pCWks3vsgn6iO6YUyg20OVq-nng3CT77-P2OqlIcPBvrl2oovwcE52dpSc2dCLcM7DjdbnTj3LBaAG_olEQQIcAeaMwBWR5kiQfTqocyfNuBx6_WDbbVjoTH-VOlfi_XAd8EHHjTfpNr2hKxM46pYUnV7qTkPtB5yj96_dOqlHVoAzpiryqoJ36TRsndkcYoPMt-h9VxuUGQlg2RLN8iBylOxcHREbs6XPNq7BFBtDlWHuLIOyvgEdkE17bjGijSmKsdcdAjObXBWlU-_fPiVgHTwNKZXhwNIFFW1keiVdv31U120NkIkxit_BQ2r2cDIRI4kiLHEv7g0_oyuIQgPzng=s1200-no"
  />

  <img class="boat pink" src="https://lh3.googleusercontent.com/p2ff8qdwryvJoVpnLoCcni0K1YRs9z15oxqfK6gm7knEFCioDgzASYNgYmoX1YoaLnQUywB1W3ZjyzldaNYSzHim8iKHbI9xPnQV_yfodjbqx09QfaV2bqsZNmF1MNCj6vPaIsCIW7tLG8aWg_2s1TTEponN0CaMJ24P2_pgh5NV6AAnlM7kMuMWpni74fZKZhSxa_pKRxlyFlghqaNq1Y_O1kWDly6_JwOwM6mJldp-NEAFmHXKD1HmlATEOaKnV8vWl5KUb_6rS7EksBA_KHzcn8cGW7pCWks3vsgn6iO6YUyg20OVq-nng3CT77-P2OqlIcPBvrl2oovwcE52dpSc2dCLcM7DjdbnTj3LBaAG_olEQQIcAeaMwBWR5kiQfTqocyfNuBx6_WDbbVjoTH-VOlfi_XAd8EHHjTfpNr2hKxM46pYUnV7qTkPtB5yj96_dOqlHVoAzpiryqoJ36TRsndkcYoPMt-h9VxuUGQlg2RLN8iBylOxcHREbs6XPNq7BFBtDlWHuLIOyvgEdkE17bjGijSmKsdcdAjObXBWlU-_fPiVgHTwNKZXhwNIFFW1keiVdv31U120NkIkxit_BQ2r2cDIRI4kiLHEv7g0_oyuIQgPzng=s1200-no"
  />
  
  <div class="time">00:00</div>

</div>

<ul class="errorOut">
  <li>http://codepen.io/Oddert/full/rweeeW/</li>
</ul>


<a href='#'><i class="fa fa-play-circle fa-5x playPauseButton"></i></a></br>
<a href='#'><i class="fa fa-repeat fa-5x loopButton"></i></a>

#map {
  width: 900px;
  height: 600px;
  display: block;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url('https://res.cloudinary.com/oddert/image/upload/v1596025282/Screenshot_287.png');
}

@media only screen and (max-width: 900px) {
  #map {
    width: 600px;
    height: 400px;
  }
}

@media only screen and (max-width: 600px) {
  #map {
    width: 300px;
    height: 200px;
  }
}

.pin {
  position: absolute;
  width: 24px;
  height: 20px;
  &.tester {
    border: 3px dashed red;
    top: 82%;
    left: 84%;
    visibility: hidden;
  }
  &.ldn {
    top: 37%;
    left: 6%;
  }
  &.se {
    top: 34%;
    left: 50%;
  }
  &.her {
    top: 55%;
    left: 70%;
  }
  &.mar {
    top: 52%;
    left: 83%;
  }
  &.ram {
    top: 60%;
    left: 85%;
  }
  &.deal {
    top: 74%;
    left: 84%;
  }
  &.dov {
    top: 87%;
    left: 79%;
  }
}

.boat {
  position: absolute;
  width: 24px;
  height: 20px;
  border-radius: 50%;
  &.red {
    border: 1px solid red;
    top: 37%;
    left: 6%;
  }
  &.blue {
    border: 1px solid blue;
    top: 52%;
    left: 82%;
  }
  &.green {
    border: 1px solid green;
    top: 34%;
    left: 6%;
  }
  &.yellow {
    border: 1px solid yellow;
    top: 49%;
    left: 82%;
  }
  &.purple {
    border: 1px solid purple;
    top: 46%;
    left: 82%;
  }
  &.orange {
    border: 1px solid orange;
    top: 31%;
    left: 6%;
  }
  &.teal {
    border: 1px solid turquoise;
    top: 43%;
    left: 82%;
  }
  &.pink {
    border: 1px solid hotPink;
    top: 88%;
    left: 79%;
  }
}

.time {
  position: absolute;
  top: 15%;
  right: 8%;
  font-family: 'josefin sans', arial;
  font-size: 300%;
}

@media only screen and (max-width: 992px) {
  .time {
    font-size: 200%;
    top: 18%;
    right: 12%;
  }
}

@media only screen and (max-width: 600px) {
  .time {
    font-size: 100%;
  }
}

.underMap {
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

#acc {
  border: 1px solid blue;
  display: inline-block;
  
}

.errorOut {
  list-style: none;
  position: absolute;
  right: 0px;
  top: 10px;
  width: 325px;
}

li {
  margin: 3px 0px 3px 0px;
}

@media only screen and (max-width: 1500px) {
  .errorOut {
    position: absolute;
    top: 600px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    z-index: 50;
  }
}

@media only screen and (max-width: 900px) {
  .errorOut {
    top: 400px;
  }
}

@media only screen and (max-width: 600px) {
  .errorOut {
    top: 270px;
  }
}

i {
  display: inline-block;
  position: fixed;
  text-shadow: 5px 5px 10px rgba(8,8,8,0.3);
  &.playPauseButton {
    left: 20px;
    top: 10px;
  }
  &.loopButton {
    left: 20px;
    top: 100px;
  }
}

@media only screen and (max-width: 600px) {
  i {
  display: inline-block;
  position: fixed;
  text-shadow: 5px 5px 10px rgba(8,8,8,0.3);
  transform: translateX(-50%) scale(0.5);
  &.playPauseButton {
    top: 200px;
    left: 20%;
  }
  &.loopButton {
    top: 200px;
    left: 80%;
  }
}
}

View Compiled

var time = 500;
var play = false;
var stop = false;
var clockSpeed = 1000;
var width = 600;
var loop = true;

function playLoop() {
  if (play === false) {
    play = true;
    console.log('(11) play is: ' + play);
    
    var count = setInterval(function() {
      time += 10;
      if (time >= 1440 || play === false) {
        clearInterval(count);
        play = false;
        console.log('(18) play is: ' + play);
        console.log('timer stoped');
        
        if (loop === false && time >= 1440){
          time = 0;
          $('.playPauseButton').removeClass('fa-stop-circle');
          $('.playPauseButton').addClass('fa-play-circle');
          playPauseButton = 'play';
        }
        
        if (loop === true && time >= 1440) {
          time = 0;
          console.log('restarting loop');
          reset();
          playLoop();
        }
      }
      var disp = parseTime();
      checkBoats(disp);
      $(".time").html(disp);
    }, clockSpeed);
    //interval
    
  } else {
    play = false;
    console.log('(42) play is: ' + play);
  } //ekfgw
}

var playPauseButton = 'play';

$('.playPauseButton').on('click', function() {
  if (playPauseButton == 'stop') {
    $('.playPauseButton').removeClass('fa-stop-circle');
    $('.playPauseButton').addClass('fa-play-circle');
    playPauseButton = 'play';
    play = false;
    
  } else {
    $('.playPauseButton').removeClass('fa-play-circle');
    $('.playPauseButton').addClass('fa-stop-circle');
    playPauseButton = 'stop';
    playLoop();
    
  }
});

var loopButton = 'yesLoop';

$('.loopButton').on('click', function() {
  if (loopButton == 'noLoop') {
    $('.loopButton').removeClass('fa-ban');
    loopButton = 'yesLoop';
    loop = true;
    console.log("loop is true");
  } else {
    $('.loopButton').addClass('fa-ban');
    loopButton = 'noLoop';
    loop = false;
    console.log("loop is false");
  }
});

function parseTime() {
  var hours = (time - time % 60) / 60;
  var mins = Math.round(time % 60);

  if (hours < 10) {
    hours = "0" + hours;
  }

  if (mins < 10) {
    mins = "0" + mins;
  }

  return hours + ":" + mins;
}

var ranMultiplier = 1;

function moveBoat(boat, location) {
  var top = '0px';
  var left = '0px';
  var ran = Math.round(Math.random() * ranMultiplier);
  
  switch (location) {
    case 'ldn':
      top = 37;
      left = 6;
      break;
    case 'halfldn':
      top = 43;
      left = 26;
      break;
    case 'se':
      top = 34;
      left = 50;
      break;
    case 'halfse':
      top = 43;
      left = 60;
      break;
    case 'her':
      top = 55;
      left = 70;
      break;
    case 'halfher':
      top = 54;
      left = 76;
      break;
    case 'mar':
      top = 52;
      left = 83;
      break;
    case 'halfmar':
      top = 57;
      left = 89;
      break;
    case 'ram':
      top = 60;
      left = 85;
      break;
    case 'halfram':
      top = 68;
      left = 84;
      break;
    case 'deal':
      top = 74;
      left = 84;
      break;
    case 'halfdeal':
      top = 82;
      left = 84;
      break;
    case 'dov':
      top = 87;
      left = 79;
      break;
    default:
      console.log("ERROR -switch line 52");
      var t = parseTime();
      $('.errorOut').append('<li> Error at: ' + t + '</li>');
                  }
  var plusOrNo = Math.round(Math.random() * 1);
  ran = plusOrNo === 0 ? ran : ran - (ran * 2);
  
  var select = document.getElementsByClassName(boat);
  top += ran;
  left += ran;
  top = top.toString() + '%';
  left = left.toString() + '%';
  $(select).animate({top: top, left: left}, 'slow');
}

function checkBoats(currT) {
  switch (currT) {
    case '09:00':
      moveBoat('red', 'halfldn');
      moveBoat('blue', 'halfher');
      moveBoat('yellow', 'halfher');
      moveBoat('teal', 'halfmar');
      moveBoat('pink', 'halfdeal');
      break;
    case '09:20':
      moveBoat('teal', 'ram');
      moveBoat('pink', 'deal');
      break;
    case '09:30':
      moveBoat('blue', 'her');
      moevBoat('teal', 'halfram');
      break;
    case '09:50':
      moveBoat('blue', 'halfse');
      moveBoat('teal', 'deal');
      moveBoat('pink', 'halfram');
      break;
    case '10:00':
      moveBoat('green', 'halfldn');
      moveBoat('yellow', 'halfse');
      break;
    case '10:10':
      moveBoat('pink', 'ram');
      break;
    case '10:20':
      moveBoat('teal', 'halfdeal');
      moveBoat('pink', 'halfmar');
      break;
    case '10:30':
      moveBoat('red', 'se');
      moveBoat('blue', 'se');
      break;
    case '10:40':
      moveBoat('teal', 'dov');
      moveBoat('pink', 'mar');
      logBoat('10:40', 'Teal', 'Dover');
      logBoat('10:40', 'Pink', 'Margate');
      break;
    case '11:00':
      moveBoat('green', 'halfse');
      moveBoat('yellow', 'halfldn');
      moveBoat('orange', 'halfldn');
      break;
    case '12:00':
      moveBoat('green', 'mar');
      moveBoat('yellow', 'ldn');
      moveBoat('orange', 'halfse');
      moveBoat('purple', 'halfher');
      moveBoat('teal', 'halfdeal');
      moveBoat('pink', 'halfmar');
      logBoat('12:00', 'Green', 'Margate');
      logBoat('12:00', 'Yellow', 'London');
      break;
    case '12:20':
      moveBoat('teal', 'deal');
      moveBoat('pink', 'ram');
      break;
    case '12:30':
      moveBoat('red', 'halfse');
      moveBoat('blue', 'halfldn');
      moveBoat('pink', 'halfram');
      break;
    case '12:50':
      moveBoat('teal', 'halfram');
      moveBoat('pink', 'deal');
      break;
    case '13:00':
      moveBoat('orange', 'mar');
      moveBoat('purple', 'halfse');
      logBoat('13:00', 'Orange', 'Margate');
      break;
    case '13:10':
      moveBoat('red', 'her');
      moveBoat('teal', 'ram');
      break;
    case '13:20':
      moveBoat('teal', 'halfmar');
      moveBoat('pink', 'halfdeal');
      break;
    case '13:40':
      moveBoat('red', 'halfher');
      moveBoat('teal', 'mar');
      moveBoat('pink', 'dov');
      logBoat('13:40', 'Teal', 'Margate');
      logBoat('13:40', 'Pink', 'Dover');
      break;
    case '14:00':
      moveBoat('red', 'mar');
      moveBoat('blue', 'ldn');
      moveBoat('green', 'halfher');
      moveBoat('purple', 'halfldn');
      logBoat('14:00', 'Red', 'Margate');
      logBoat('14:00', 'Blue', 'London');
      break;
    case '15:00':
      moveBoat('green', 'halfse');
      moveBoat('yellow', 'halfldn');
      moveBoat('purple', 'ldn');
      moveBoat('orange', 'halfmar');
      moveBoat('pink', 'halfdeal');
      logBoat('15:00', 'Purple', 'London');
      break;
    case '15:20':
      moveBoat('orange', 'ram');
      moveBoat('pink', 'deal');
      break;
    case '15:30':
      moveBoat('orange', 'halfram');
      break;
    case '15:50':
      moveBoat('orange', 'deal');
      moveBoat('pink', 'halfram');
      break;
    case '16:00':
      moveBoat('green', 'halfldn');
      moveBoat('red', 'halfher');
      moveBoat('yellow', 'halfse');
      break;
    case '16:10':
      moveBoat('pink', 'ram');
      break;
    case '16:20':
      moveBoat('orange', 'halfdeal');
      moveBoat('pink', 'halfmar');
      break;
    case '16:30':
      moveBoat('teal', 'halfmar');
      break;
    case '16:40':
      moveBoat('orange', 'dov');
      moveBoat('pink', 'mar');
      logBoat('16:40', 'Orange', 'Dover');
      logBoat('16:40', 'Pink', 'Margate');
      break;
    case '16:50':
      moveBoat('teal', 'ram');
      break;
    case '17:00':
      moveBoat('blue', 'halfldn');
      moveBoat('green', 'ldn');
      moveBoat('red', 'halfse');
      moveBoat('yellow', 'mar');
      moveBoat('teal', 'halfram');
      moveboat('purple', 'halfldn');
      logBoat('17:00', 'Green', 'London');
      logBoat('17:00', 'Yellow', 'Margate');
      break;
    case '17:20':
      moveBoat('teal', 'deal');
      break;
    case '17:50':
      moveBoat('teal', 'halfdeal');
      break;
    case '18:00':
      moveBoat('blue', 'halfse');
      moveBoat('red', 'halfldn');
      moveBoat('yellow', 'halfher');
      moveBoat('orange', 'halfdeal');
      moveBoat('pink', 'halfmar');
      moveboat('purple', 'se');
      break;
    case '18:10':
      moveBoat('teal', 'dov');
      logBoat('18:10', 'Teal', 'Dover');
      break;
    case '18:20':
      moveBoat('orange', 'deal');
      moveBoat('pink', 'ram');
      break;
    case '18:30':
      moveBoat('pink', 'halfram');
      break;
    case '18:50':
      moveBoat('orange', 'halfram');
      moveBoat('pink', 'deal');
      break;
    case '19:00':
      moveBoat('green', 'halfldn');
      moveBoat('blue', 'mar');
      moveBoat('red', 'ldn');
      moveBoat('yellow', 'halfse');
      moveboat('purple', 'halfse');
      logBoat('19:00', 'Red', 'London');
      logBoat('19:00', 'Blue', 'Margate');
      break;
    case '19:10':
      moveBoat('orange', 'ram');
      break;
    case '19:20':
      moveBoat('orange', 'halfmar');
      moveBoat('pink', 'halfdeal');
      break;
    case '19:30':
      moveBoat('teal', 'halfdeal');
      break;
    case '19:40':
      moveBoat('orange', 'mar');
      moveBoat('pink', 'dov');
      console.log('19:40 ORANGE arrives MARGATE (dep 18:00)');
      console.log('19:40 PINK (Fin) arrives DOVER (dep 18:00)');
      logBoat('21:20', 'Orange', 'Margate');
      logBoat('21:20', 'Pink', 'Dover');
      break;
    case '19:50':
      moveBoat('teal', 'deal');
      break;
    case '20:00':
      moveBoat('green', 'halfse');
      moveBoat('yellow', 'halfldn');
      moveboat('purple', 'mar');
      logBoat('20:00', 'Purple', 'Margate');
      break;
    case '20:20':
      moveBoat('teal', 'halfram');
      break;
    case '20:40':
      moveBoat('teal', 'ram');
      break;
    case '20:50':
      moveBoat('teal', 'halfmar');
      break;
    case '21:00':
      moveBoat('red', 'halfldn');
      moveBoat('blue', 'halfse');
      moveBoat('green', 'mar');
      moveBoat('yellow', 'ldn');
      moveBoat('orange', 'halfmar');
      logBoat('21:00', 'Green', 'Margate');
      logBoat('21:00', 'Yellow', 'London');
      break;
    case '21:20':
      moveBoat('orange', 'ram');
      moveBoat('teal', 'mar');
      logBoat('21:20', 'Teal', 'Margate');
      break;
    case '20:30':
      moveBoat('orange', 'halfram');
      break;
    case '21:50':
      moveBoat('orange', 'deal');
      break;
    case '22:00':
      moveBoat('red', 'halfse');
      moveBoat('blue', 'halfldn');
      break;
    case '22:20':
      moveBoat('orange', 'halfdeal');
      break;
    case '22:40':
      moveBoat('orange', 'dov');
      logBoat('22:40', 'Orange', 'Dover');
      break;
    case '23:00':
      moveBoat('red', 'mar');
      moveBoat('blue', 'ldn');
      logBoat('23:00', 'Red', 'Margate');
      logBoat('23:00', 'Blue', 'London');
      break;
               }
}

$('.inputText').keypress(function(event){
  if (event.which == 13) {
    var inp = $('.inputText').val();
    var h = Number(inp.slice(0, 2));
    var m = Number(inp.slice(3, 5));
    time = (h*60) + m;
    console.log(time);
  }
});

var dayPos = [
  {
    boat: 'red',
    start: 'ldn',
    end: 'mar'
  },
  {
    boat: 'blue',
    start: 'mar',
    end: 'ldn'
  },
  {
    boat: 'green',
    start: 'ldn',
    end: 'mar'
  },
  {
    boat: 'yellow',
    start: 'mar',
    end: 'ldn'
  },
  {
    boat: 'orange',
    start: 'ldn',
    end: 'dov'
  },
  {
    boat: 'purple',
    start: 'mar',
    end: 'ldn'
  },
  {
    boat: 'teal',
    start: 'mar',
    end: 'mar'
  },
  {
    boat: 'pink',
    start: 'dov',
    end: 'dov'
  },
];

var tog = 'end';

function toggle(p) {
  
  ranMultiplier = 4;
  
  console.log('Displaying positions for the ' + tog + ' of the day');
  for (var i=0; i < dayPos.length; i++) {
    moveBoat(dayPos[i].boat, dayPos[i][tog]);
  }
  
  if (tog == 'start') {
    tog = 'end';
  } else {
    tog = 'start';
  }
  
  ranMultiplier = 1;
}

var startPositionCoords = [
  {
    boat: 'red',
    top: '37%',
    left: '6%'
  },
  {
    boat: 'blue',
    top: '52%',
    left: '82%'
  },
  {
    boat: 'green',
    top: '34%',
    left: '6%'
  },
  {
    boat: 'yellow',
    top: '49%',
    left: '82%'
  },
  {
    boat: 'purple',
    top: '46%',
    left: '82%'
  },
  {
    boat: 'orange',
    top: '31%',
    left: '6%'
  },
  {
    boat: 'teal',
    top: '43%',
    left: '82%'
  },
  {
    boat: 'pink',
    top: '88%',
    left: '79%'
  },
];

function reset() {
  $('.boat').fadeOut();
  var l = setTimeout(function() {
    for (var r=0; r<startPositionCoords.length; r++) {
    var ship = document.getElementsByClassName(startPositionCoords[r].boat);
    var topVal = startPositionCoords[r].top;
    var leftVal = startPositionCoords[r].left;
    $(ship).css('top', topVal);
    $(ship).css('left', leftVal);
    }
  }, 500);
  
  
  var p = setTimeout(function() {
    $('.boat').fadeIn();
    console.log('boats reset');
  }, 1000);
}

function logBoat(arriveTime, arriveBoat, arriveStation) {
  var at = arriveTime;
  var ab = arriveBoat;
  var as = arriveStation;
  var message = "(" + at + ") " + ab + " boat arrives at " + as;
  console.log(message);
  $('.errorOut').prepend("<li>" + message + "</li>");
}


function testLog(num) {
  if (num == NaN || num < 1) {
    num = 1;
  }
  for (e=0; e<num; e++) {
    logBoat('13:40', 'Teal', 'halfldn');
  }
}

/*
$(document).ready(function() {
  logBoat(3);
  testLog(3);
});
*/

This Pen is owned by Robyn Veitch on CodePen.

See more by @Oddert on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External CSS

External JavaScript