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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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>
            
          
!
            
              /**
  * 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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console