MapsWidget API v1

Mapbox Integration

        
<link
  href="https://www.beans.ai/mapswidget/css/mapswidget-1.0.4.css"
  rel="stylesheet"
/>
<link
  href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css"
  rel="stylesheet"
/>
        

        
<script type="text/javascript"
  src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"
></script>
<script type="text/javascript"
  src="https://www.beans.ai/mapswidget/js/mapswidget-1.0.4.js"
></script>
        

        
<div id="beans-maps-1" style="width: 50vw; height: 60vh;"></div>
        

        
<script type="text/javascript">
  var be = new BeansMap();
  be.render(
    "beans-maps-1",
    "...beans api key:secret...",
    [
      {
        address: "3815 N 16th St, Phoenix, AZ",
        unit: "251"
      }
    ],
    // Nav Options,
    {},
    // Display Options
    {},
    // Callback Options
    {}
  );
</script>
        

        
<script type="text/javascript">
  var be = new BeansMap();
  be.render(
    "beans-maps-1",
    "...beans api key:secret...",
    [
      {
        address: "1200 Dale Ave, Mountain View, CA",
        unit: "43",
        options: {
          tiles: {
            keybox: {
              // [Optional] Set the text to show on the tiles.
              text: "#9112",

              // [Optional] Set the icon for the tile. See
              // https://storage.googleapis.com/beans-mobile-resources/marker-note-icons/parking_0.png
              // for size and format.
              iconUrl: "https://storage.googleapis.com/beans-mobile-resources/marker-note-icons/..."
            },
            entrance: {
              text: "#9111"
            },
            elevation: {
              text: "Floor 3"
            },
            parking: {
              text: "Street"
            }
          },
          markers: {
            // [Optional] Set display to false to hide all the markers. Default true.
            display: true,
            keybox: {
              // [Optional] Set display to true to show the marker if all the markers are hidden
              // [Optional] Set display to false to hide the marker if all the markers are visible
              display: true,

              // [Optional] Set the text to show on the markers.
              text: "#9112"
            },
            entrance: {
              text: "#9111",

              // [Optional] Set the icon for the marker. See
              // https://storage.googleapis.com/beans-mobile-resources/marker-note-icons/parking_0.png
              // for size and format.
              iconUrl: "https://storage.googleapis.com/beans-mobile-resources/marker-note-icons/..."
            },
            elevation: {
              text: "Floor 3"
            },
            parking: {
              text: "Street"
            }
          },
          poi: [
            {
              // [Required] Set the POI location.
              location: {
                lat: 33.63427078772915,
                lng: -111.86407107998963
              },

              // [Required] Set the POI type.
              name: "CARWASH",

              // [Optional] Set the icon for the POI. See
              // https://storage.googleapis.com/beans-mobile-resources/marker-note-icons/parking_0.png
              // for size and format.
              iconUrl: "https://storage.googleapis.com/beans-mobile-resources/marker-note-icons/..."
            },
            {
              // [Optional] Set display to false to hide specific POIs that are a part of the Beans data set.
              display: false,

              // [Required] Set the POI type.
              name: "TRASH"
            },
            {
              display: false,
              name: "ALL"
            }
          ]
        }
      }
    ],
    {
      // [Optional] Set the location of the user to a fixed position for the navigation to work.
      userLocation: {
        lat: 37.450469700667234,
        lng: -122.16778683875827
      },
      // [Optional] Alteratenely, set the user location to pick the current live location the user.
      // userLocation: "LIVE",

      // [Optional] Set the default maps app to open on clicking the navigate button.
      platform: "APPLE",

      // [Optional] Hide the navigate button
      hideNavigateButton: true,

      // [Optional] Hide the "my location" button.
      hideMyLocationButton: true
    },
    {
      // [Optional] Set the default view to satellite.
      initialMap: "SATELLITE",

      // [Optional] Set a customized mapbox style.
      mapStyle: "mapbox://styles/mapbox/streets-v11",

      // [Optional] Hide the beans card.
      hideBeansCard: true,

      // [Optional] Hide the floor selector.
      hideFloorSelector: true,

      // [Optional] Hide the toggle satellite view button.
      hideSatelliteButton: true,

      // [Optional] Show the unit, entrance, elevator tiles.
      showTiles: true,

      // [Optional] Show the distance links.
      showLinks: true,

      // [Optional] Show unit outline.
      showUnitShape: true,

      // [Optional] Show the multi-unit selector in the card.
      showUnitList: true,

      // [Optional] Show building outline.
      showBuildingShape: false,

      // [Optional] Show directions in the card.
      showDirections: true,

      // [Optional] Show navigation path.
      showPath: true,

      // [Optional] Set the order of the path.
      path: [
        "PARKING",
        "ENTRANCE",
        "ELEVATOR",
        "UNIT"
      ]
    },
    // Callback Options
    {
      onSatelliteClick: (type) => {}, // STREET or SATELLITE
      onMylocationClick: (isFound, {lat: ..., lng: ...}) => {},
      onPOINavigateClick: (searchQuery) => {},
      onShareButtonClick: () => {},
      onHelpButtonClick: () => {},
      onPOIClick: (markerName) => {},
      onMinimizeCard: () => {},
      onMaximizeCard: () => {},
      onSelect: (onClickData) => {}
    }
  );
</script>
        

1. ID of the div that the widget should render within
2. Beans api “key:secret”
3. Array of Display objects, where each Display object consists of:
   1. Street address.
   2. Unit address. Leave empty if no unit number is required.
   3. Options. Every field in Options is optional, and provides mechanisms to override different parts of the display. You may pass
      1. Tiles
      2. Markers
      3. Additional points of interest, which must have the name from the following strings: SWIMMINGPOOL, CARWASH, TENNIS, LAUNDRY, OFFICE, CLUBHOUSE, BBQ, MAILROOM, PACKAGELOCKER, CYCLESTORAGE, GYM
4. Navigation options. Every field in Navigation Options is optional. You may pass
   1. UserLocation
   2. Platform
   3. HideNavigateButton
5. Display options. Every field in Display Options is optional. You may pass
   1. InitialMap
   2. MapSyle
   3. HideNavigateButton
   4. HideBeansCard
   5. HideFloorSelector
   6. ShowTiles
   7. ShowLinks
   8. ShowDirections
   9. ShowUnitShape
   10. ShowUnitList
   11. ShowBuildingShape
   12. ShowPath
   13. Path