Structures

Modals

Configure

Mappr UI provides a custom modal to use for configuring the application view. Below is a static preview of the modal. Please refer to Bootstrap modals documentation to make it open with a button event.

<div class="modal" id="modal-customize" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Customize layout</h5>
				<button type="button" class="close text-muted" data-dismiss="modal" aria-label="Close">
					<i class="icon icon-close"></i>
				</button>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-sm-12 col-md-6">
						<p class="font-weight-bold mb-2">Theme</p>
						<div class="form-group">
							<div class="custom-control custom-radio d-inline-block mr-3">
								<p>
									<input type="radio" id="theme-radio-light" name="theme-radio" class="custom-control-input" checked="">
									<label class="custom-control-label" for="theme-radio-light">Light</label>
								</p>
							</div>
							<div class="custom-control custom-radio d-inline-block">
								<p>
									<input type="radio" id="theme-radio-dark" name="theme-radio" class="custom-control-input">
									<label class="custom-control-label" for="theme-radio-dark">Dark</label>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<p class="font-weight-bold mb-2">Layout Templates</p>
						<div class="horizontal-scroll pt-1">
							<div class="btn-layout layout-1 mr-3 active">
								<svg xmlns="http://www.w3.org/2000/svg" width="88" height="58" viewBox="0 0 88 58">
									<g fill="none" fill-rule="evenodd">
										<rect class="dark-fill" width="88" height="58" fill="#D4D4D5" rx="4" />
										<rect width="18" height="48" x="5" y="5" fill="#FFF" rx="2" />
										<rect width="56" height="48" x="27" y="5" fill="#FFF" opacity=".5" rx="2" />
										<rect width="12" height="12" x="8" y="8" fill="#E9E9E9" rx="2" />
									</g>
								</svg>
							</div>
							<div class="btn-layout layout-2 mr-3">
								<svg xmlns="http://www.w3.org/2000/svg" width="88" height="58" viewBox="0 0 88 58">
									<g fill="none" fill-rule="evenodd">
										<rect class="dark-fill" width="88" height="58" fill="#D4D4D5" rx="4" />
										<rect width="56" height="48" x="5" y="5" fill="#FFF" opacity=".5" rx="2" />
										<rect width="18" height="48" x="65" y="5" fill="#FFF" rx="2" />
										<rect width="12" height="12" x="68" y="8" fill="#E9E9E9" rx="2" />
									</g>
								</svg>
							</div>
							<div class="btn-layout layout-3 mr-3">
								<svg xmlns="http://www.w3.org/2000/svg" width="88" height="58" viewBox="0 0 88 58">
									<g fill="none" fill-rule="evenodd">
										<rect class="dark-fill" width="88" height="58" fill="#D4D4D5" rx="4" />
										<rect width="18" height="39" x="5" y="14" fill="#FFF" rx="2" />
										<rect width="56" height="39" x="27" y="14" fill="#FFF" opacity=".5" rx="2" />
										<rect class="light-fill" width="78" height="6" x="5" y="5" fill="#E9E9E9" opacity=".5" rx="2" />
									</g>
								</svg>
							</div>
							<div class="btn-layout layout-4 mr-3">
								<svg xmlns="http://www.w3.org/2000/svg" width="88" height="58" viewBox="0 0 88 58">
									<g fill="none" fill-rule="evenodd">
										<rect class="dark-fill" width="88" height="58" fill="#D4D4D5" rx="4" />
										<rect width="18" height="39" x="65" y="14" fill="#FFF" rx="2" />
										<rect width="56" height="39" x="5" y="14" fill="#FFF" opacity=".5" rx="2" />
										<rect class="light-fill" width="78" height="6" x="5" y="5" fill="#E9E9E9" opacity=".5" rx="2" />
									</g>
								</svg>
							</div>
							<div class="btn-layout layout-5">
								<svg xmlns="http://www.w3.org/2000/svg" width="88" height="58" viewBox="0 0 88 58">
									<g fill="none" fill-rule="evenodd">
										<rect class="dark-fill" width="88" height="58" fill="#D4D4D5" rx="4" />
										<rect width="78" height="9" x="5" y="44" fill="#FFF" rx="2" />
										<rect width="78" height="35" x="5" y="5" fill="#FFF" opacity=".5" rx="2" />
										<rect class="light-fill" width="72" height="6" x="8" y="8" fill="#D4D4D5" opacity=".5" rx="2" />
									</g>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<p class="font-weight-bold mb-2">Base maps</p>
						<div class="horizontal-scroll pt-1">
							<div class="rounded config-base-maps base-map-1 active"></div>
							<div class="rounded config-base-maps base-map-2"></div>
							<div class="rounded config-base-maps base-map-3"></div>
							<div class="rounded config-base-maps base-map-4"></div>
							<div class="rounded config-base-maps base-map-5"></div>
							<div class="rounded config-base-maps base-map-6"></div>
							<div class="rounded config-base-maps base-map-7"></div>
							<div class="rounded config-base-maps base-map-8"></div>
							<div class="rounded config-base-maps base-map-9"></div>
							<div class="rounded config-base-maps base-map-10"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary">Save</button>
			</div>
		</div>
	</div>
</div>

Mappr UI provides a custom modal to use for sharing the page. Below is a static preview of the modal. Please refer to Bootstrap modals documentation to make it open with a button event.

<div class="modal" id="modal-share" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Share</h5>
				<button type="button" class="close text-muted" data-dismiss="modal" aria-label="Close">
					<i class="icon icon-close"></i>
				</button>
			</div>
			<div class="modal-body">
				<div>
					<button type="button" class="btn btn-round-sm btn-primary mr-3">
						<i class="icon icon-email"></i>
					</button>
					<button type="button" class="btn btn-round-sm btn-primary mr-3">
						<i class="icon icon-facebook"></i>
					</button>
					<button type="button" class="btn btn-round-sm btn-primary mr-3">
						<i class="icon icon-linkedin_2"></i>
					</button>
					<button type="button" class="btn btn-round-sm btn-primary mr-3">
						<i class="icon icon-twitter"></i>
					</button>
				</div>
				<p class="font-weight-bold mt-2 mb-0 line-height-2">Embed</p>
				<!--<pre class="embed-text">-->
				<textarea id="copy-area" class="code-area" cols="45" rows="5" readonly="">&lt;iframe width="100%" height="100%" src="https://demo.mappr.fr/#46.999625518738384,2.2399971252103796,5.5:0:0?vectuel=(%22active%22:true,%22id%22:%22vectuel_data%22,%22masks%22:[])&amp;clichy=(%22active%22:false,%22id%22:%22clichy_data%22,%22masks%22:[])" style="display:block;height:100vh;width:100vw" frameborder="0" allow="map; encrypted-geolocation" allowfullscreen/&gt;</textarea>
				<!--</pre>-->
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary">Copy</button>
			</div>
		</div>
	</div>
</div>

Navbars

Desktop

Mappr UI provides a custom navbar layout that can be used in large screen devices.

Filter by
Technos
- Les pôles d'emploi
  1788
- Les sites remarquables
  480
- Les grandes opérations d'aménagement
  0
Types
- Parks
  1788
- Stadiums
  480
- Airports
  0

<div class="d-flex flex-column">
	<nav class="navbar navbar-expand-lg navbar-light bg-white">
		<a class="navbar-brand" href="#">
			<img src="/assets/toolkit/images/mappr_logo.png" height="32" alt="">
			<div class="pipe"></div>
			<img src="/assets/toolkit/images/client-logo.png" height="32" alt="">
		</a>
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active">
				<div id="menu-main-layers" class="btn-group dropdown" role="group" aria-label="Layers">
					<button type="button" class="btn btn-link dropdown-toggle font-weight-bold text-smaller py-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All locations
					</button>
					<div class="dropdown-menu dropdown-menu-right dropdown-menu-covered" aria-labelledby="btnGroupDrop4">
						<a class="dropdown-item" href="#">Main locations</a>
						<a class="dropdown-item" href="#">Additional locations</a>
					</div>
				</div>
			</li>
		</ul>
		<button type="button" class="btn btn-link">Contact us</button>
		<button type="button" class="btn btn-square-sm btn-link mx-3" data-toggle="modal" data-target="#modal-share"><i class="icon icon-arrow"></i></button>
		<button type="button" class="btn btn-square-sm btn-link mx-3" data-toggle="modal" data-target="#modal-customize"><i class="icon icon-settings_2"></i></button>
		<div id="menu-languages" class="btn-group dropdown" role="group" aria-label="Language">
			<button type="button" class="btn btn-outline-primary dropdown-toggle font-weight-normal text-smaller py-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">English
			</button>
			<div class="dropdown-menu dropdown-menu-right dropdown-menu-covered" aria-labelledby="btnGroupDrop4">
				<a class="dropdown-item" href="#">English</a>
				<a class="dropdown-item" href="#">Francaise</a>
			</div>
		</div>
	</nav>
	<div class="collapse w-100 py-2 px-3 navbar" id="collapse-filters">
		<ul class="nav nav-pills mr-auto flex-row">
			<li class="nav-item text-white text-smaller mr-2 line-height-2">
				Filter by
			</li>
			<li class="nav-item mx-2 position-relative">
				<a class="nav-link dropdown-toggle btn btn-primary text-smaller" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Technos</a>
				<div class="dropdown-menu py-0">
					<ul class="list-group list-group-flush py-0">
						<li class="list-group-item d-flex justify-content-between align-items-center">
							<div class="custom-control custom-checkbox mr-2">
								<input type="checkbox" class="custom-control-input" id="list-item-check-1" checked>
								<label class="custom-control-label" for="list-item-check-1">
									Les pôles d'emploi
								</label>
							</div>
							<span class="badge badge-primary badge-pill">1788</span>
						</li>
						<li class="list-group-item d-flex justify-content-between align-items-center">
							<div class="custom-control custom-checkbox mr-2">
								<input type="checkbox" class="custom-control-input" id="list-item-check-2">
								<label class="custom-control-label" for="list-item-check-2">
									Les sites remarquables
								</label>
							</div>
							<span class="badge badge-primary badge-pill">480</span>
						</li>
						<li class="list-group-item d-flex justify-content-between align-items-center disabled">
							<div class="custom-control custom-checkbox mr-2">
								<input type="checkbox" class="custom-control-input" id="list-item-check-3">
								<label class="custom-control-label" for="list-item-check-3">
									Les grandes opérations d'aménagement
								</label>
							</div>
							<span class="badge badge-primary badge-pill">0</span>
						</li>
					</ul>
				</div>
			</li>
			<li class="nav-item mx-2 position-relative">
				<a class="nav-link dropdown-toggle btn btn-primary text-smaller" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Types</a>
				<div class="dropdown-menu py-0">
					<ul class="list-group list-group-flush py-0">
						<li class="list-group-item d-flex justify-content-between align-items-center">
							<div class="custom-control custom-checkbox mr-2">
								<input type="checkbox" class="custom-control-input" id="list-item-check-1" checked>
								<label class="custom-control-label" for="list-item-check-1">
									Parks
								</label>
							</div>
							<span class="badge badge-primary badge-pill">1788</span>
						</li>
						<li class="list-group-item d-flex justify-content-between align-items-center">
							<div class="custom-control custom-checkbox mr-2">
								<input type="checkbox" class="custom-control-input" id="list-item-check-2">
								<label class="custom-control-label" for="list-item-check-2">
									Stadiums
								</label>
							</div>
							<span class="badge badge-primary badge-pill">480</span>
						</li>
						<li class="list-group-item d-flex justify-content-between align-items-center disabled">
							<div class="custom-control custom-checkbox mr-2">
								<input type="checkbox" class="custom-control-input" id="list-item-check-3">
								<label class="custom-control-label" for="list-item-check-3">
									Airports
								</label>
							</div>
							<span class="badge badge-primary badge-pill">0</span>
						</li>
					</ul>
				</div>
			</li>
		</ul>
		<div class="col-md-5 px-0">
			<div class="input-group">
				<input type="text" placeholder="Search" class="form-control text-white bg-primary-darkest border-primary-darkest search" value="Par">
				<div class="input-group-append">
					<span class="input-group-text"><i class="icon icon-search"></i></span>
				</div>
			</div>
		</div>
	</div>
	<div id="collapse-filters-toggle" class="w-100" data-toggle="collapse" data-target="#collapse-filters" role="button" aria-expanded="false" aria-controls="collapse-filters">
	</div>
</div>

Mobile

Mappr UI provides a custom navbar layout that can be used in small screen devices.

<div class="col-md-6">
	<nav class="px-3 border-0 shadow-sm navbar navbar-expand navbar-light">
		<div id="menu-main-layers" class="navbar-brand py-0 text-normal dropdown">
			<button aria-haspopup="true" aria-expanded="false" type="button" data-toggle="dropdown" class="text-black font-weight-bold text-smaller p-0 dropdown-toggle btn btn-link"><img src="/assets/toolkit/images/client-logo.png" height="30" alt=""></button>
			<div class="dropdown-menu-left mt-3 dropdown-menu" aria-labelledby=""><a href="#" class="font-weight-bold dropdown-item active" role="button">Vectuel Data</a><a href="#" class="font-weight-bold dropdown-item" role="button">Clichy Data</a></div>
		</div>
		<div class="mr-auto navbar-nav"></div>
		<a aria-current="page" class="text-decoration-none btn-light mx-3 bg-white text-primary" href="/"><i class="icon icon-location_pin"></i></a><a class="text-decoration-none btn-light mx-3 bg-white" href="/list"><i class="icon icon-list"></i></a><a class="text-decoration-none btn-light mx-3 bg-white" href="/search"><i class="icon icon-mobile_filter"></i></a>
		<div class="py-0 text-normal dropdown">
			<button aria-haspopup="true" aria-expanded="false" type="button" data-toggle="dropdown" class="pl-3 py-0 no-chevron text-body dropdown-toggle btn btn-link"><i class="icon icon-more"></i>
			</button>
			<div class="mt-3 py-0 pb-2 dropdown-menu dropdown-menu-right" aria-labelledby="">
				<div class="px-3 py-2">
					<button type="button" class="p-0 font-weight-bold text-smaller mr-4 text-primary btn btn-link">EN
					</button>
					<button type="button" class="p-0 font-weight-bold text-smaller mr-4 text-body btn btn-link">FR
					</button>
				</div>
				<a href="#" class="font-weight-bold px-3 py-2 dropdown-item" role="button">Contact us</a><a href="#" class="font-weight-bold px-3 py-2 dropdown-item" role="button">Share</a>
			</div>
		</div>
	</nav>
</div>