Developer Docs

Appearance

On this page

Siteplan Widget ​

Siteplan API ​

The siteplan API requires a few dependencies in order to function properly. Please import the following scripts and stylesheets before proceeding.

html
<script src=”https://res.bildhive.com/lib/popperv2.9.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js”></script>

For the siteplan v1 script and the siteplan css stylesheet below, create copies of these files instead of directly importing them so that you can make modifications to the script based on your specific needs. Make sure to adjust the paths so that it loads from your servers in case you have copied it.

html
<script src="https://res.bildhive.com/scripts/siteplan.v1.js"></script>
<link rel="stylesheet" href="https://res.bildhive.com/styles/siteplan.css">

(Optional) The sample code makes use of the Tailwind CSS framework. Feel free to also import this into your project should you want to use it as well.

html
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">

Siteplan Settings ​

Look at the table below to understand the parameters which can be used on a siteplan widget.

ParameterTypeOptionsDescription
hideDotsinteger0, 1Used to show or hide the status dots on the siteplan.
hideStatusinteger0, 1Only shows up if hideDots is active. If hideDots is active, this setting enables/disables the status color overlay that shows up instead of the dots.
fontSizeinteger1 - 10Only relevant if hideDots is active. Adjusts the font size of the lot numbers that are placed on top of the status color overlays.
showPremiumsinteger0, 1Used to show or hide the lot premiums.
pulsateDotsinteger0, 1Used to pulsate the status dots.
instancestring-Used to indicate which instance to pull the siteplan data from.
hideColorstring-Sets the color of hidden lots.
leftBarbooleantrue, falseIf true, the Available Models would show up on the left side of the screen after a lot has been clicked. Otherwise, it would show up on the right side.
showTagsstring[]-Indicate which tags you would like to show on the siteplan.
stylestring"one", "two"Indicate which style you would like to use for your siteplan. Style one puts the filter container on the top. Style two puts the filter container on the left.
masterTabbooleantrue, falseUsed to show or hide the master plan tab.
popupbooleantrue, falseChanges the Available home model container into a popup when selecting a lot.
staticinteger0, 1Changes the siteplan into a static siteplan which renders the lots unclickable.

Importing the Siteplan ​

It is important to note that the siteplan widget has some predefined classes and properties that must be included when trying to import the siteplan widget. Please refer to the sample code for the predefined classes and properties.

Parent Div ​

The Parent Div is the container for all of the components that make up the siteplan. It is also used to initialize the siteplan’s settings. Please refer to the following sample code on how to set up the parent div as well as some styling suggestions.

liquid
<div
	style="display:flex; min-height:90vh;"
	class="loading-sp relative siteplan-widget-wrapper overflow-hidden"
	data-section-type="siteplan"
	data-siteplan-settings='{
		"hideDots":0,
		"hideStatus":0,
		"fontSize":3,
		"showPremiums":1,
		"pulsateDots":1,
		"instance":"621830f5bf760a21e3db8ea9",
		"hideColor":"#bcaea5", 
		"leftBar":true,
		"showTags":[],
		"style":"two",
		"masterTab":false,
		"popup":true,
		"static":0
	}'>
	<!-- Insert Siteplan Components Here -->
</div>

Loading Component ​

The loading component indicates to the end user whether the siteplan is loading or not.

liquid
<div class="loader">
	<div class="loader-inner line-scale">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

Tooltip Component ​

liquid
<div
	id="siteplan-lot-tooltip"
	class="siteplan-tooltip-style2"
	role="tooltip"
	style="z-index:3; opacity: 0;"
>
	<div>
		<span>My tooltip</span>
	</div>
</div>

Available Model Container ​

The available model container is the component that shows the available models that fit a lot when a lot is selected.

liquid
<div class="siteplan-overlay-wrapper">
	<div class="siteplan-lot-mask siteplan-overlay-close"></div>
	<div class="siteplan-lot-wrapper">
		<div class="siteplan-lot-content-outer">
			<div class="siteplan-lot-content p-6">
				<div class="flex justify-between items-start">
					<div>
						<h2>Available Home Models<br />for <strong data-selected-lot-name></strong></h2>
						<div data-selected-lot-premiums></div>
					</div>
					<button class="text-gray-500 siteplan-overlay-close">
						<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
								d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
						</svg>
					</button>
				</div>
				<div class="available-model-container">

				</div>
			</div>
		</div>
	</div>
</div>

Filter Container ​

The filter container component is where the filters for the siteplan will reside. You can adjust the color styles for this component using the --filterBack, --filterHead, --filterText, --filterActive style properties. The filter by builders will be inserted into data-filter-2 and the filter by home type will be inserted into data-filter-1. For your reference, please refer to the sample code below.

liquid
<div class="filter-container siteplan-widget mr-3"
	style="padding: 2em; overscroll-behavior-y: contain;--filterBack:#F7F7F7;--filterHead:#346984; --filterText:#4E4E4E;--filterActive:#346984;">
	<div class="filter-close-btn">
		<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
				d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
		</svg>
	</div>
	<div class="tab flex flex-col gap-2 text-center text-white cursor-pointer hidden" data-tab-wrapper>
		<div data-tab-menu="masterplan" class="flex-1 py-2 px-4 hover:bg-gray-400">MASTERPLAN</div>
		<div data-tab-menu="siteplan" class="mb-8 flex-1 py-2 px-4 bg-white text-black">SITEPLAN</div>
	</div>

	<div class="xs-text-size bh-font-body" style="color: #346984;">
		Refine your search
	</div>
	<div class="flex pb-10 mb-10 filter-wrapper" data-filter-2 style="border-bottom: 1px solid #D0CEC8;">

	</div>

	<div class="flex pb-4 filter-wrapper" data-filter-1>

	</div>
</div>

The Canvas ​

The Canvas component is where the siteplan will be shown. Below is a sample code on how it can be implemented.

liquid
<div style="background:#E8E8E8; flex:1; position:relative;" class="siteplan-wrapper">
	<div data-siteplan-loading class="center-loading loading-overlay">
		<div class="loading"></div>
	</div>
	<div data-model-error class="absolute top-2"
		style="left: 50%; transform: translateX(-50%); z-index: 100; background-color: #FFFFFF; display: none;">
		<div class="py-1 px-3 text-sm flex items-center text-center justify-center">
			<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="#FF0000"
				stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
				class="feather feather-x-circle mr-2">
				<circle cx="12" cy="12" r="10"></circle>
				<line x1="15" y1="9" x2="9" y2="15"></line>
				<line x1="9" y1="9" x2="15" y2="15"></line>
			</svg>
			<div>This model is not available on any lot.</div>
		</div>
	</div>

	<canvas data-siteplan-canvas></canvas>

	<div data-s-tool-container class="cursor-pointer select-none">
		<div data-s-tool="in">
			<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 pointer-events-none">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
			</svg>
		</div>
		<div data-s-tool="reset" class="text-xs">
			<span class="pointer-events-none">1:1</span>
		</div>
		<div data-s-tool="filter" class="text-xs">
			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
				stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
					d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
			</svg>
		</div>
		<div data-s-tool="out">
			<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
			</svg>
		</div>
		<div data-s-tool="units" class="text-xs">
			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none"
				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
				class="feather feather-home">
				<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
				<polyline points="9 22 9 12 15 12 15 22"></polyline>
			</svg>
		</div>
	</div>

	<div class="units-container open-left absolute bottom-0"
		style="background-color:#F7F7F7; z-index: 2; overflow-y: scroll;">
		<div class="units-list p-5">

		</div>
	</div>
</div>