Adding a Leaflet vector layer indoors

Enter the Intercontinental Hotel and go up one floor to view the vector layer.

    <script src=""></script>
    <link href="" rel="stylesheet" />
      #floorButtons {
        position: absolute;
        z-index: 20;

      #floorButtons button {
        display: block;
        width: 100%;
  <div style="position: relative">
    <div id="floorButtons">
      <button type="button" onclick="topFloor()">Top Floor</button>
      <button type="button" onclick="moveUp()">Move Up</button>
      <button type="button" onclick="moveDown()">Move Down</button>
      <button type="button" onclick="bottomFloor()">Bottom Floor</button>
      <button type="button" onclick="exitIndoors()">Exit</button>

    <div id="map" style="height: 400px"></div>

      var map ="map", "your_api_key_here", {
        center: [37.782084, -122.404578],
        zoom: 17,
        indoorsEnabled: true,

      // We're just adding a circle, but all of the Leaflet vector overlays in 
      // the examples can be placed in an indoor map by modifying the options to 
      // include the indoorMapId and the indoorMapFloorId, as below
      var circle =[37.782084, -122.404578], {
          radius: 10.0,
          indoorMapId: "intercontinental_hotel_8628",
          indoorMapFloorId: 1
      function topFloor() {
        var indoorMap = map.indoors.getActiveIndoorMap();
        if (indoorMap) {
          map.indoors.setFloor(indoorMap.getFloorCount() - 1);

      function moveUp() {

      function moveDown() {

      function bottomFloor() {

      function exitIndoors() {