1<!DOCTYPE html><!-- Last Published: Thu Feb 27 2020 17:12:24 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="logistical.webflow.io" data-wf-page="5bafec821270adb87de1b37b" data-wf-site="5bafec821270ad81dde1b376"><head><meta charset="utf-8"/><link href="https://assets.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>ShipGo</title><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://assets.website-files.com/5bafec821270ad81dde1b376/css/logistical.9fe8f24d7.css" rel="stylesheet" type="text/css"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>
1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
1<script type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"] }});</script>
1<script src="https://use.typekit.net/ixm7gsx.js" type="text/javascript"></script>
1<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
1<link href="https://cdn.prod.website-files.com/5bafec821270ad81dde1b376/5bb2766d8202b90fc7d1a3db_cargo-ship%20(1).png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/5bafec821270ad81dde1b376/5bb2767846d449105b2b65bb_cargo-ship.png" rel="apple-touch-icon"/></head><body class="body-2"><div class="dashboard"><div class="navigation"><div class="profile"><div class="avatar space-right"></div><div class="text-block">Hello, Dale!</div></div><div class="nav-btn-parent"><div class="nav-btn on"><div class="nav-status on"></div><div class="text-block-2">Shipments</div></div><div class="nav-btn"><div class="nav-status"></div><div class="text-block-3">Quotes</div></div><div class="nav-btn"><div class="nav-status"></div><div class="text-block-4">Documents</div></div><div class="nav-btn"><div class="nav-status"></div><div class="text-block-5">Billing</div></div><div class="nav-btn"><div class="nav-status"></div><div class="text-block-5">Support</div></div></div></div><div class="nav-mobile"><div class="profile flex-right"><div><div class="avatar space-right"></div><div class="text-block">Alec Sukoski</div></div><div>ï</div></div><div class="nav-btn-parent"><div class="nav-btn on"><div class="nav-status on"></div><div>Dashboard</div></div><div class="nav-btn"><div class="nav-status"></div><div>Members</div></div><div class="nav-btn"><div class="nav-status"></div><div>Database</div></div><div class="nav-btn"><div class="nav-status"></div><div>Statistics</div></div><div class="nav-btn"><div class="nav-status"></div><div>Settings</div></div></div></div><div class="body"><div class="div-block-8"><div class="avatar space-right"></div></div><div class="flex-between"><div class="div-block-10"><div class="description-caps">SHIPMENT </div><div class="data large">482</div></div><div class="div-block-11"><div class="description-caps">Product</div><div class="data large">21,000</div></div><div class="div-block-12"><div class="description-caps">total price</div><div class="data large">$4,483.21</div></div><div class="div-block-13"><div class="description-caps">DAYS </div><div class="data large">2</div></div></div><div class="flex-between mobile-spread mobile-d"><div><div class="description-caps no-underline">DESTINATION:Â </div></div><div><div class="chip estimatedarrivaltime">Long Beach, CA</div></div></div><div class="flex-between mobile-spread"><div><div class="description-caps no-underline">tOTAL FREIGHT COST:Â </div></div><div><div class="chip">$5,294.93</div></div></div><div class="div-block-2"><div class="webgl-earth-demo"><div id="globe" data-geo-globe="1" class="globe">loading globe...</div><div class="collection-list-wrapper w-hidden-main w-hidden-medium w-hidden-small w-hidden-tiny w-dyn-list"><div role="list" class="locations w-dyn-items"><div data-geo-place="1" role="listitem" class="location w-dyn-item"><h1 class="location__name">Port Arrival Destination | 2 Days</h1><img alt="" src="" class="image w-dyn-bind-empty"/><div data-geo-coordinates="1" class="location__coordinates">33.74507, -118.24607</div></div><div data-geo-place="1" role="listitem" class="location w-dyn-item"><h1 class="location__name">#PING482 | Current Location | Est. 8 Days </h1><img alt="" src="" class="image w-dyn-bind-empty"/><div data-geo-coordinates="1" class="location__coordinates">30.00000, -170.00000</div></div></div></div></div></div><div class="flex hor-spread w-hidden-main w-hidden-medium w-hidden-small w-hidden-tiny"><div class="flex hor-l bottom"><div class="bar"><div class="bar-active"></div></div><div class="description-caps small">Jan</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _40"></div></div><div class="description-caps small">FEB</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _30"></div></div><div class="description-caps small">Mar</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active"></div></div><div class="description-caps small">APR</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _80"></div></div><div class="description-caps small">
1MAY</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _70"></div></div><div class="description-caps small">JUN</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _90"></div></div><div class="description-caps small">Jul</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _30"></div></div><div class="description-caps small">Aug</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _70"></div></div><div class="description-caps small">OCT</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _90"></div></div><div class="description-caps small">NOV</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _40"></div></div><div class="description-caps small">DEC</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _80"></div></div><div class="description-caps small">JAN</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _70"></div></div><div class="description-caps small">FEB</div></div><div class="flex hor-l bottom"><div class="bar"><div class="bar-active _100"></div></div><div class="description-caps small">MAR</div></div></div><div class="div-block-3"><div class="flex-between w-hidden-main w-hidden-medium w-hidden-small w-hidden-tiny"><div class="div-block-5"><div class="div-block-7"><div class="description-caps">Total Growth</div><div class="bar hor"><div class="bar-active hor"></div></div></div><div class="div-block-7"><div class="description-caps">Total Growth</div><div class="bar hor"><div class="bar-active hor"></div></div></div><div class="div-block-7"><div class="description-caps">Total Growth</div><div class="bar hor"><div class="bar-active hor"></div></div></div></div><div class="div-block-5"><div class="div-block-7"><div class="description-caps">Total Growth</div><div class="bar hor"><div class="bar-active hor"></div></div></div><div class="div-block-7"><div class="description-caps">Total Growth</div><div class="bar hor"><div class="bar-active hor"></div></div></div><div class="div-block-7"><div class="description-caps">Total Growth</div><div class="bar hor"><div class="bar-active hor"></div></div></div></div></div></div></div></div><div class="w-embed w-script">
1<script src="https://www.webglearth.com/v2/api.js"></script>
vendor: 1 bytes, line 1
1
2<script> 3 4// Reference: http://www.webglearth.org/api 5 6document.addEventListener('DOMContentLoaded', function() { 7 $('[data-geo-globe]').each(function(globeIndex, globeEl) { 8 var $globe = $(globeEl); 9 $globe.text(''); 10 11 var globeId = $globe.attr('data-geo-globe'); 12 13 var earth = new WE.map(globeEl, { 14 tilting: false, 15 }); 16 WE.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo( 17 earth 18 ); 19 20 var markers = []; 21 var firstCoords; 22 $('[data-geo-place="' + globeId + '"]').each(function(index, el) { 23 var $el = $(el); 24 var coordinates = $el 25 .children('[data-geo-coordinates]') 26 .text() 27 .split(',') 28 .map(Number); 29 if (!firstCoords) { firstCoords = coordinates }; 30 var marker = WE.marker(coordinates).addTo(earth); 31 marker.bindPopup(el.innerHTML, 200, true); 32 markers.push(marker); 33 $el.click(function() { 34 earth.panTo(coordinates, {duration: 500}); 35 // Close other popups 36 markers.forEach(function(m) { 37 m.closePopup(); 38 }); 39 marker.openPopup(); 40 }); 41 }); 42 43 // Center the first marker 44 earth.setView(firstCoords, 2); 45 }); 46}); 47 48</script>
48</div><header class="header"><div class="div-block w-hidden-main w-hidden-medium w-hidden-small w-hidden-tiny"><h2 class="heading">Globes and stuff for Webflow!</h2><a href="https://forum.webflow.com/t/component-to-render-3d-globe-with-markers/66925" class="button w-button">Feedback</a><a href="https://preview.webflow.com/preview/geo-components?utm_medium=showcase&utm_source=geo-components&preview=beccaa751c39debfa21ce633e6c5909d" class="button w-button">Preview</a><a href="https://webflow.com/website/Geo-Components-for-Webflow" class="button button_last w-button">Clone</a></div></header><div class="rich-text-block w-hidden-main w-hidden-medium w-hidden-small w-hidden-tiny w-richtext"><h2>The globe is populated with places from the collection</h2><p>The globe element has the custom attribute <strong>data-geo-globe="1"</strong></p><figure style="max-width:237px" class="w-richtext-align-center w-richtext-figure-type-image"><div><img src="https://cdn.prod.website-files.com/5bafec821270ad81dde1b376/5bafec821270ad2023e1b381_custom-attributes-globe.png" alt=""/></div></figure><p>The collections list <strong>item</strong> has the custom attribute <strong>data-geo-place="1"</strong></p><figure style="max-width:234px" class="w-richtext-align-center w-richtext-figure-type-image"><div><img src="https://cdn.prod.website-files.com/5bafec821270ad81dde1b376/5bafec821270ad2e7de1b37f_custom-attributes-place.png" alt=""/></div></figure><p>The element <strong>with the coordinates in each item</strong> has the custom attribute <strong>data-geo-coordinates="1"</strong></p><figure style="max-width:236px" class="w-richtext-align-center w-richtext-figure-type-image"><div><img src="https://cdn.prod.website-files.com/5bafec821270ad81dde1b376/5bafec821270ad5a1de1b380_custom-attributes-coordinates.png" alt=""/></div></figure><p>View the script block source below for the magic, or copy the embed element if you've cloned the site ð</p><p>The script:</p><ul role="list"><li>loads the <a href="https://www.webglearth.com/">WebGL Earth</a> library and starts the globe with <a href="https://www.openstreetmap.org/">Open Street Map</a> tiles</li><li>copies the html for each <strong>data-geo-place</strong> element to a marker for the globe</li><li>adds click listeners to those place elements to open the marker and pan to it</li></ul></div>
48<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5bafec821270ad81dde1b376" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
48<script src="https://assets.website-files.com/5bafec821270ad81dde1b376/js/logistical.3de626f58.js" type="text/javascript"></script>
48</body></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.