cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="map">
</div>

<noscript>You need JS to view this</noscript>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            
          
!
            
              html, body, #map {
  height:100%
}

body {
  margin:0;
}
            
          
!
            
              /**
  * straight out of 2010!
  * everything is var, no let or const
  * jQuery 1.x saves the day with $.ajax and prettyPhoto lightbox plug-in
  * Unfortunately prettyPhoto lightbox hardcodes video embed URLs to http, so videos don't load in CodePen's https context
**/
var map;
var infoWindow;

$(document).ready(function() {
  initialize();
  loadData();
  $(".gallery a[rel^='prettyPhoto']").prettyPhoto({ theme: "facebook", social_tools: '' });
});

function initialize() {
  // make map
  var latlng = new google.maps.LatLng(50.110256, -122.937098);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById("map"), myOptions);

  // make info window
  infoWindow = new google.maps.InfoWindow({
    maxWidth: 500
  });
}

function loadData() {
  // new for 2017 CodePen embed - this used to be an $.ajax request. Now data is hardcoded in the pen
  loadedData(hardcodedData);
}

function loadedData(data) {
  // loop through json, get map points

   // new for CodePen embed in 2017 - use inline base64 encoded icons
  const iconsNamesToFiles = {
    'greencircle.png':greenCircleIcon,
    'blackdiamond.png':blackDiamondIcon,
    'bluesquare.png':blueSquareIcon,
    'doubleblackdiamond.png':doubleBlackDiamondIcon,
  };
  
  for (var i = 0; i < data.mapAnnotations.length; i++) {
    var annotation = data.mapAnnotations[i];
    var outerIconURL;
    var vimeoID, vimeoEmbed, useLightbox;
    var markerContent;

    var point = new google.maps.LatLng(annotation.la, annotation.lo);

    outerIconURL = annotation.outericon
      ? iconsNamesToFiles[annotation.outericon] //data.rootIconFolder + annotation.outericon
      : null;
    vimeoID = annotation.vimeoid;

    if (vimeoID) {
      var wmode = "window";
      // new embed code for 2017, unfortunately prettyPhoto hardcodes the URL to http:// so it doesn't play in CodePen's HTTP's environment
      markerContent ='https://vimeo.com/'+ vimeoID +'?title=0&byline=0&portrait=0';
      useLightbox = true;
    } else {
      markerContent =
        "<div style='font-family:helvetica, arial, sans-serif; font-size:95%'><h4 style='margin:0'>" +
        annotation.title +
        "</h4>" +
        annotation.sub +
        "</div>";
      useLightbox = false;
    }

    var marker = makeMarker(
      point,
      annotation.title,
      markerContent,
      useLightbox,
      outerIconURL
    );
  }
}

// make marker and setup info window popup
function makeMarker(point, name, html, useLightbox, outerIconURL) {
  var marker = new google.maps.Marker({
    position: point,
    map: map,
    icon: outerIconURL,
    useLightbox: useLightbox
  });

  google.maps.event.addListener(marker, "click", function() {
    infoWindow.close();

    if (marker.useLightbox) {
      $.prettyPhoto.open(html);
    } else {
      infoWindow.open(map, marker);
      infoWindow.setContent(html);
    }
  });

  return marker;
}

const hardcodedData = {
  rootVideoFolder: "http://www.campofchampions.com/iphone/videos/",
  rootIconFolder: "https://www.campofchampions.com/iphone/images/icons/",

  mapAnnotations: [
    {
      title: "Private Glacier Terrain Park",
      sub: "Largest Summer Park in The World",
      la: "50.092428",
      lo: "-122.886063"
    },
    {
      title: "The Dorm",
      sub: "Front desk, 6/10, demo room, and sleep",
      la: "50.110256",
      lo: "-122.946488"
    },
    {
      title: "The Dorm 2",
      sub: "More sleep",
      la: "50.109915",
      lo: "-122.945906"
    },
    {
      title: "The Compound",
      sub: "Miniramp, games, BBQs",
      la: "50.111031",
      lo: "-122.94577"
    },
    {
      title: "Dumken Donuts",
      sub: "Mini Donuts, sugar, choc,maple, vanilla dips",
      la: "50.111066",
      lo: "-122.946098"
    },
    {
      title: "Airdome",
      sub: "Jumps and a foam pit for bikers",
      la: "50.109245",
      lo: "-122.943299",
      videourl: "2009/airdome.mp4",
      innericon: "icon-play.png"
    },
    {
      title: "Garibaldi Lift Co.",
      sub: "Bike Campers eat lunch  at base of the Boneyard",
      la: "50.112663",
      lo: "-122.95402"
    },
    {
      title: "The Boneyard",
      sub: "Where coach Greg Watts won Crankworx Slopestyle",
      la: "50.111026",
      lo: "-122.953286"
    },
    {
      title: "Wizard Express",
      sub: "Boarders and skiers upload here",
      la: "50.115469",
      lo: "-122.947522"
    },
    {
      title: "Fitzsimmons Express",
      sub: "Bikers load here",
      la: "50.112876",
      lo: "-122.953303"
    },
    {
      title: "Whistler Skate Park",
      sub: "Because one perfect miniramp isn't enough",
      la: "50.117328",
      lo: "-122.951093",
      videourl: "2010/TheWhistlerSkatePark.mp4",
      innericon: "icon-play.png"
    },
    {
      title: "Water Ramps",
      sub: "Skiers, it's backflip time!",
      la: "50.111846",
      lo: "-122.939781",
      videourl: "2009/WaterRamps.mp4",
      innericon: "icon-play.png"
    },
    {
      title: "Driving Range",
      sub: "Finally, something you can beat your coaches at",
      la: "50.112832",
      lo: "-122.957252"
    },
    {
      title: "Showcase Snowboards",
      sub: "Snowboard shop",
      la: "50.113833",
      lo: "-122.954596"
    },
    {
      title: "Can-Ski",
      sub: "Ski shop",
      la: "50.113618",
      lo: "-122.955211"
    },
    {
      title: "Summit Sports",
      sub: "Bike shop (downstairs)",
      la: "50.113542",
      lo: "-122.955244"
    },
    {
      title: "21 Steps",
      sub: "Breakfast and lift tickets",
      la: "50.115081",
      lo: "-122.954816"
    },
    {
      title: "7-11",
      sub: "Slurpees and food",
      la: "50.118572",
      lo: "-122.957895"
    },
    {
      title: "McDonald's",
      sub: "Are you from space?",
      la: "50.119919",
      lo: "-122.957563"
    },
    {
      title: "Splitz Grill",
      sub: "The best burgers in town by a mile",
      la: "50.118276",
      lo: "-122.957659"
    },
    {
      title: "The Circle",
      sub: "Steve Harris's snowboard and skate shop",
      la: "50.118351",
      lo: "-122.957481"
    },
    {
      title: "Dups Mexican Food",
      sub: "Burritos the size of your head.",
      la: "50.118875",
      lo: "-122.957309"
    },
    {
      title: "Great Glass Elevator Candy Store",
      sub: "Every kind of candy you can imagine",
      la: "50.119304",
      lo: "-122.956239"
    },
    {
      title: "Medals Plaza",
      sub: "Devo played here!",
      la: "50.119085",
      lo: "-122.954573"
    },
    {
      title: "Whistler Dirt Jumps",
      sub: "As if this town doesn't rule",
      la: "50.116462",
      lo: "-122.95119",
      innericon: "icon-play.png",
      videourl: "2010/OpeningDayDirtJumps.mp4"
    },
    {
      title: "Mini Golf",
      sub: "Epic course. Take a mulligan Kinger!",
      la: "50.115829",
      lo: "-122.946996"
    },
    {
      title: "Glacier Shuttle Pick Up",
      sub: "Meet here from 2:00 - 4:30 for a ride to The Dorm",
      la: "50.11601",
      lo: "-122.94862"
    },
    {
      title: "Crank It Up",
      sub: "",
      la: "50.099691",
      lo: "-122.948243",
      innericon: "icon-play.png",
      outericon: "bluesquare.png",
      videourl: "2010/helmetcam/CrankItUp.mp4",
      vimeoid: "13945871",
      BEWARE: "OF DUPLICATES"
    },
    {
      title: "B-Line",
      sub: "",
      la: "50.099588",
      lo: "-122.950735",
      videourl: "2010/helmetcam/UpperBLine.mp4",
      vimeoid: "13972725",
      innericon: "icon-play.png",
      outericon: "bluesquare.png"
    },
    {
      title: "Bear Cub",
      sub: "",
      la: "50.076879",
      lo: "-122.956776",
      videourl: "2010/helmetcam/BearCub.mp4",
      vimeoid: "13929643",
      innericon: "icon-play.png",
      outericon: "bluesquare.png"
    },
    {
      title: "Bear Cub Wall Ride",
      sub: "",
      la: "50.085155",
      lo: "-122.958461",
      videourl: "2010/helmetcam/BearCubWallRide.mp4",
      vimeoid: "13951132",
      innericon: "icon-play.png"
    },
    {
      title: "Canadian Open",
      sub: "",
      la: "50.109318",
      lo: "-122.953641",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "blackdiamond.png"
    },
    {
      title: "Captain Safety",
      sub: "",
      la: "50.088241",
      lo: "-122.958675",
      videourl: "2010/helmetcam/CaptainSafety.mp4",
      vimeoid: "13929801",
      innericon: "icon-play.png",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Crabapple Hits",
      sub: "",
      la: "50.099707",
      lo: "-122.955800",
      videourl: "2010/helmetcam/CrabappleHits.mp4",
      vimeoid: "13945843",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Crack Addict",
      sub: "",
      la: "50.106060",
      lo: "-122.956925",
      videourl: "2010/helmetcam/CrackAddict.mp4",
      vimeoid: "13945863",
      innericon: "icon-play.png",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Cruise Control",
      sub: "",
      la: "50.099707",
      lo: "-122.955900",
      videourl: "2010/helmetcam/CruiseControl.mp4",
      vimeoid: "13950329",
      innericon: "icon-play.png",
      outericon: "greencircle.png"
    },
    {
      title: "D1",
      sub: "",
      la: "50.095191",
      lo: "-122.955106",
      videourl: "2010/helmetcam/D1.mp4",
      vimeoid: "13929839",
      innericon: "icon-play.png",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Devils Club",
      sub: "",
      la: "50.105667",
      lo: "-122.957380",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "bluesquare.png"
    },
    {
      title: "Dirt Merchant",
      sub: "",
      la: "50.097615",
      lo: "-122.958204",
      videourl: "2010/helmetcam/DirtMerchant.mp4",
      vimeoid: "13930059",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Double Vision",
      sub: "",
      la: "50.109770",
      lo: "-122.953734",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "blackdiamond.png"
    },
    {
      title: "Drop In Clinic",
      sub: "",
      la: "50.089650",
      lo: "-122.964974",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Expressway",
      sub: "",
      la: "50.091747",
      lo: "-122.963233",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "bluesquare.png"
    },
    {
      title: "Fantastic",
      sub: "",
      la: "50.099537",
      lo: "-122.950199",
      videourl: "2010/helmetcam/Fantastic.mp4",
      vimeoid: "13930150",
      innericon: "icon-play.png",
      outericon: "bluesquare.png"
    },
    {
      title: "Freight Train",
      sub: "",
      la: "50.079312",
      lo: "-122.951203",
      videourl: "2010/helmetcam/FreightTrain.mp4",
      vimeoid: "13930560",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Goat's Gully",
      sub: "",
      la: "50.084443",
      lo: "-122.958779",
      videourl: "2010/helmetcam/GoatsGully.mp4",
      vimeoid: "13930526",
      innericon: "icon-play.png",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Golden Triangle",
      sub: "",
      la: "50.099677",
      lo: "-122.964338",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "bluesquare.png"
    },
    {
      title: "Hornet",
      sub: "",
      la: "50.110381",
      lo: "-122.955628",
      outericon: "blackdiamond.png"
    },
    {
      title: "Karate Monkey",
      sub: "",
      la: "50.101185",
      lo: "-122.954800",
      videourl: "2010/helmetcam/KarateMonkey.mp4",
      vimeoid: "13930612",
      innericon: "icon-play.png",
      outericon: "bluesquare.png"
    },
    {
      title: "Little Alder",
      sub: "",
      la: "50.092743",
      lo: "-122.962143",
      videourl: "2010/helmetcam/LittleAlder.mp4",
      vimeoid: "13930691",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Lower A-Line",
      sub: "",
      la: "50.104102",
      lo: "-122.957491",
      videourl: "2010/helmetcam/LowerALine.mp4",
      vimeoid: "13949418",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Lower Blue Velvet",
      sub: "",
      la: "50.079520",
      lo: "-122.957042",
      videourl: "2010/helmetcam/LowerBlueVelvet.mp4",
      vimeoid: "13930713",
      innericon: "icon-play.png",
      outericon: "bluesquare.png"
    },
    {
      title: "Lower Angry Pirate",
      sub: "",
      la: "50.099763",
      lo: "-122.955685",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "bluesquare.png"
    },
    {
      title: "Lower Duffman",
      sub: "",
      la: "50.095311",
      lo: "-122.962800",
      videourl: "2010/helmetcam/LowerDuffman.mp4",
      vimeoid: "13930979",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Lower Freight Train",
      sub: "",
      la: "50.086821",
      lo: "-122.964494",
      videourl: "2010/helmetcam/LowerFreightTrain.mp4",
      vimeoid: "13960669",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Lower Joyride",
      sub: "",
      la: "50.103501",
      lo: "-122.950644",
      videourl: "2010/helmetcam/LowerJoyride.mp4",
      vimeoid: "13932364",
      innericon: "icon-play.png",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Lower No Joke",
      sub: "",
      la: "50.051008",
      lo: "-122.575021",
      videourl: "2010/helmetcam/LowerNoJoke.mp4",
      vimeoid: "13967426",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Managers Drop",
      sub: "",
      la: "50.092069",
      lo: "-122.964062",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Monkey Hands",
      sub: "",
      la: "50.110003",
      lo: "-122.954562",
      videourl: "2010/helmetcam/MonkeyHands.mp4",
      vimeoid: "13945881",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Ninja Cougar",
      sub: "",
      la: "50.099588",
      lo: "-122.950635",
      videourl: "2010/helmetcam/BLineNinjaCougar.mp4",
      vimeoid: "13933087",
      innericon: "icon-play.png",
      outericon: "bluesquare.png"
    },
    {
      title: "No Duff",
      sub: "",
      la: "50.095309",
      lo: "-122.962926",
      videourl: "2010/helmetcam/NoDuff.mp4",
      vimeoid: "13985130",
      innericon: "icon-play.png",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Old School",
      sub: "",
      la: "50.110381",
      lo: "-122.955628",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "blackdiamond.png"
    },
    {
      title: "Original Sin",
      sub: "",
      la: "50.078690",
      lo: "-122.951235",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "blackdiamond.png"
    },
    {
      title: "Crystal Viper",
      sub: "Pump track!",
      la: "50.109243",
      lo: "-122.953942",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "skillscentre.png"
    },
    {
      title: "Renegade",
      sub: "",
      la: "50.097139",
      lo: "-122.964133",
      videourl: "2010/helmetcam/Renegade.mp4",
      vimeoid: "13963484",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Samarai Pizza Cat",
      sub: "",
      la: "50.104152",
      lo: "-122.957451",
      videourl: "2010/helmetcam/SamuraiPizzaCat.mp4",
      vimeoid: "13960500",
      innericon: "icon-play.png",
      outericon: "bluesquare.png"
    },
    {
      title: "Schleyer",
      sub: "",
      la: "50.099653",
      lo: "-122.950703",
      videourl: "2010/helmetcam/Schleyer.mp4",
      vimeoid: "13963583",
      innericon: "icon-play.png",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Sidetrack",
      sub: "",
      la: "50.095237",
      lo: "-122.963028",
      videourl: "2010/helmetcam/Sidetrack.mp4",
      vimeoid: "13961804",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Too Tight",
      sub: "",
      la: "50.095101",
      lo: "-122.955156",
      videourl: "2010/helmetcam/TooTight.mp4",
      MISSING: "ON VIMEO",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Upper A Line",
      sub: "",
      la: "50.098643",
      lo: "-122.951603",
      videourl: "2010/helmetcam/UpperALine.mp4",
      vimeoid: "13945894",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Upper Angry Pirate",
      sub: "",
      la: "50.097135",
      lo: "-122.95388",
      videourl: "2010/helmetcam/UpperAngryPirate.mp4",
      vimeoid: "13963640",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Upper Blue Velvet",
      sub: "",
      la: "50.078448",
      lo: "-122.950993",
      videourl: "2010/helmetcam/UpperBlueVelvet.mp4",
      vimeoid: "13964508",
      innericon: "icon-play.png",
      outericon: "bluesquare.png"
    },
    {
      title: "Upper Duffman",
      sub: "",
      la: "50.091559",
      lo: "-122.963776",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "blackdiamond.png"
    },
    {
      title: "Upper Easy Does It",
      sub: "",
      la: "50.097274",
      lo: "-122.955793",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "greencircle.png"
    },
    {
      title: "Upper In Deep",
      sub: "",
      la: "50.087168",
      lo: "-122.959877",
      videourl: "2010/helmetcam/UpperInDeep.mp4",
      vimeoid: "13965104",
      innericon: "icon-play.png",
      outericon: "blackdiamond.png"
    },
    {
      title: "Upper Joyride",
      sub: "",
      la: "50.099653",
      lo: "-122.950603",
      vimeoid: "13972714",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Upper No Joke",
      sub: "",
      la: "50.076210",
      lo: "-122.956054",
      videourl: "2010/helmetcam/UpperNoJoke.mp4",
      vimeoid: "13965357",
      innericon: "icon-play.png",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "Upper Whistler Downhill",
      sub: "",
      la: "50.099653",
      lo: "-122.950653",
      videourl: "2010/helmetcam/UpperWhistlerDownhill.mp4",
      vimeoid: "13932110",
      innericon: "icon-play.png",
      outericon: "doubleblackdiamond.png"
    },
    {
      title: "World Cup Single Track",
      sub: "",
      la: "50.104131",
      lo: "-122.957449",
      videourl: "2010/helmetcam/Schleyer.mp4",
      outericon: "greencircle.png"
    },
    {
      title: "Freight Train",
      sub: "Shipping containers",
      la: "50.091692",
      lo: "-122.963795"
    }
  ]
};

const doubleBlackDiamondIcon = 'data:image/png;base64,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';

const blackDiamondIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABRNJREFUeNq0V2tMFFcU/mZnWJBdkK52F6uSbSvYpiUuMTWuQYrZEFOKXdAgAdJSaJBHEyLF9keTAoY+UkVsqFFEMJQsVAL+4NUaSgJWG9sKREIA5dEEQViwpZbKa1/Tubey7lYesxRPMnPnzty533fOfPecO1xrfTlknp748UYb7o0a8bSN54G92p3YvEmFvx9Og5ubN+GronJc/ekmNK9u14aF7kmw2WzqpwHOsZKpsfHff/j6guEbXYjWFBq8C8yWzb7MyD0jfzT1nfeS3o45s0n9sofc20fUhFKpOyQci7mZWeLbiuMtZhOMwwNov/nL5fwzF+OzP3x/nj54Qb1Fff3KpYmHf03yrlhP722+tq7epXeE6PL9ndf51HcPJ3768VFICAHFeq9XFBtUz8q8nxEdzoGBAURF6hGpfwsGg0H0ewzDYINqK7Y8p9rLspJ/CWzyVcolLOsSuF6vx507dwRR8UhKSnKNhISFxWJ1J9eUgNAR9Q0dwXt6euz3zGYzEhMTUVZWJnYt2E8SV1S8GLhdYBYLsrKyUFpa6tLKEE1gcHAQkZGRi4IT8/X1RW1tLf0UZ8+eXVsCBJx43t3dveSYkJAQBAcHo7q6mhIRS0KyFuDEYmNjabtx40bU1NSgpaVFFAnJWoD7+fkhNDQUMzMzqKqqgpeXF8rLy9HR0YGioqLVERALTiw8PBw+Pj5UH/Hx8cjOzsa6detw7tw59Pf3o7i42DUCy4Hv2LEDcXFxjyeQSBATE0Ovm5qaYLVakZeXh+PHj8PNzQ35+fkwGo0oKSkRR6CzsxM6nW5JzxMSElBRUYEjR47QfkBAAHbv3g0hxaKxsdE+Ljc3l5IgmY9EhHwekiesVhsYxwLl6AkxmUxGQyaVSlFXV4fTp0/bB5MwR0VF0evz58/TyRUKBTw8PNDb24tbt245kSUkiOXk5CAjIwNdXV20z3LckwTwiNe2bdvoQYwIixMGnzx5kvb3798PtVpNw8wKqZsIbHp6mj5rbm6mXv7XHEkEBgY6YTl9AqFO0ba9vR379u3DqVOnaP/EiRPIzMy0h58YWevR0dF48OABjRgxEq2ljJAICgpCYWEh7dts1icjQIoKMY1Gg4iICBw7dozeI21BQQH8/f2h1Wqp92R9X7t2DX19fVQPKpUKbW1ty64UpVJpFy/Ri5O9oQuOud1x1aluCyCEES9Ewul+a2srL+iFf1RMeAGcF1aBvb/YIeiGn52dtc/x58Qwn/tRuuGLTz5w1ICzpaWl0TY9PZ3qgIiIGPHe0YPx8XGafJaygwcP0igRoS66TVsubI4k5HI51UZDQ4PoQrMS+IoEHEmQlqh4MaWvFlwUgQVwkidSU1PXFNyl/UBKSgpNUAsJay3AXd4RJScn0+SzFIlDhw6hsrJSNLidgDAhI+TV/0WCgBPP3d3dxWyNH2OTk3Hi/ixvta06Ei6Bk8QgJDOOZecWRMgYJ/64fXfot4mt/oFKmbdCNAmTyYwbP9+gVY4Tua0nOeT+2BCGR42tar+tIG9JhJ/ESavVPLXdT6kTfhbcWJaBxTS3/GGex66dGugPhANWM8zzMyu+Mz01iZGBLrS3/Xrp84Liz17f85qVi48+YKuorue+vfxd2dDd0aE3w0IOc27cdqHUrugSQ6oa87iOiPgZGLs7MtZsqK6/uN7ba14T+BJwpaYEURFhjFzmuaAqAix9Coc957z4vB++zMnC9e8r8Y8AAwBTd9vN7RAsjQAAAABJRU5ErkJggg==';

const blueSquareIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABOdJREFUeNq8V2lMHGUYfuZY9uLcpRxyLcUWbMFguAShKTF4oAXFMzZq1D/WI63wzxjrDyOpxrQJoRpptKWlh6WJllAwrU1rSqVQjVlbRVHuY1lgOZc9YGd8Z1bWlOVoYXGSmcx8s/u9z/u8z/t83zCX6qqh1Wjww4/X0T9gwnofogjkZachKjIcU9NW8HaHEwc+r8blplakJidmF2zPeVkQBMN6BOc5dnJwaOR8RdWxIw9uy3Zuz80EoqMiGOnlntdfes3YVG+bNnWKon18fc4ps9h7o0k8cejT2vTUrcqzNQfB9/WbxI2GaMPTTxSWb0zJVnUhGJYJF8AyvqdAEKGLykBWpvhUeuq1euPNP7/ipXFdUMBWnT58gzYgBG82mHC5wwooWN8DmBVQkqLHqeQ4RN8VnsdxrBtAZESYP8tx8m9UHOMOrlgHBsBCKeXFsJibcyk5TgE5TXqQ9In/7xA9F96n87poTmGh9InJZcjkfRk8J1KFnQn+CFVxsNhd+NnixNH2adjnhCVF7RsAcyLyY9RofCgcfgsC7YjR4LmLZtjmxCVU4YNyKkiwn2To5OD7b04i/9wgii8M4WzvDAFQ47MH9G4LXERnvC+oz4/WIE3vhzNdMyhtGvUEqqPnyrxQ7EoMQMuIEwd/GvOSg08YeJHqLh2VbZPuMbmNWYgUrbTZghtjs/g4PRjRBNLmEn0IgJwt1J/Ho9FqdE3PocXscKveMzsDu0NAaasFWp7Fu6nB5EXiLYVYWwlI3DlhSujJXU6Se1ptNOC3gGTSx/meGVT8Nom3twSiMMaFGduMjwBQKsVxGvn2WxLcknwSE+9QKcacAt64J/AWHXgBkGsk3h79wRoOhUT/kM2F1mHH0gAYt0ftvWpBp41BVRKztAaKqG9VEo3iyvRnEf0Rag71fTaMW1dYQRm3Ky70Ay8AZcmB+DBTJ5vLSvQ/H6+Vb7/utC5rtwuqsTwAiSqpb++mloFLXJL+sAAexbEadJP6rw7ZAW51q6cXgIrfJ+UleQ8p1mth8VgvUGLQIITUf/RvK6ZmhNtmYEUADVTPlhEHXtnkj7gQhTcL9KhUsdhNAJ3ERPVf05T9WnYIC46pWRGNBEJDgnmLWsYLAO1qXkjQIilIIfd++6hz1fQvCkAysm/IOKSwrxIL8Tq//wRJYMIDFfjgvhC5Xct/nVizmXv9XUUIjCY7Lg7aoaMaH8jSgZOkS5aqIX//IlePWC2HfcYJtA2vLftFjUhCJFJtS5tH8d0jESgipV8pisR18vlc2nCkEiOSTsp/GV9zcA8AlqUUGWa+w6QBGMnZ8mmH/FFaCB6OUuP+DUqZ9qo/prD7mgVOSRssc2dbSdE9P+OOxXoAmMzDNtEl/LuSMvIrjuhuG3Oi5HszNpPgdKT8cSqDNCaB5fg7z94lrdLEmiC46CuJs88DYEzm0bae7g5z7OZ7wypzwzCeIXjYlRJ0ULZSwtKYki6rJV6aI4hzobvDiN4B0yVDbIwbQP+guf3w8dr3Q/X6/QmbtqgNulCs2lmW+y6xWzHQ1YnmlpaTNbX1p94r2wV+5zM7hJrTdfyJM+cOd/cMdD9WsO1ZXsEnUp04H8eXyBzs6Ru8cOx03ZdBgQGO1JQkoLH2EJ58vIDx12rmW1IK7LcOp6fjEuJjsW9vGa40HMc/AgwAZKsrFqDTT7YAAAAASUVORK5CYII=';

const greenCircleIcon = 'data:image/png;base64,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';

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console