Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<title>Leaflet Indoor Map Example with Captions</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="" />
<script src=""></script>
<script src="../leaflet-indoor.js"></script>
<style type="text/css">
html, body, #map {
height: 95%;
p {
text-align: center;
.room-label {
margin-left: -15px !important;
margin-top: -15px !important;
font-size: 85%;
width: auto !important;
height: auto !important;
<div id="map"></div>
<!-- // example data generated with -->
<script type="text/javascript" src="stadium.json"></script>
<script type="text/JavaScript">
roomCallBacks = function (feature, layer) {
layer.on('mouseover', function () {
layer.setStyle({fillColor: '#02d35f'})
layer.on('mouseout', function () {
layer.setStyle({fillColor: '#c0c0c0'})
map ='map')
// Providers:
var osmUrl = 'https://{s}{z}/{x}/{y}.png'
var osmAttrib = 'Map data © <a href="">OpenStreetMap</a>'
var osm = new L.TileLayer(osmUrl, {
attribution: osmAttrib
map.setView(new L.LatLng(49.427, 11.126), 18)
var indoor = new L.Indoor(geoJSON, {
minCaptionZoom: 18,
onEachFeature: roomCallBacks
var levelControl = new L.Control.Level({
level: "0",
levels: indoor.getLevels(),
indoorLayer: indoor
Example for using <a href="">leaflet-indoor</a> with captions.
See the <a href="">code</a> for this example and
<a href="">documentation</a> how to use leaflet indoor with captions.