Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
80 lines (65 sloc) 2.3 KB
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Indoor Map Example with Captions</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></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;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- // example data generated with http://geojson.io -->
<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 = L.map('map')
// Providers: https://leaflet-extras.github.io/leaflet-providers/preview/
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a>'
var osm = new L.TileLayer(osmUrl, {
attribution: osmAttrib
})
map.setView(new L.LatLng(49.427, 11.126), 18)
map.addLayer(osm)
var indoor = new L.Indoor(geoJSON, {
minCaptionZoom: 18,
onEachFeature: roomCallBacks
})
indoor.addTo(map)
var levelControl = new L.Control.Level({
level: "0",
levels: indoor.getLevels(),
indoorLayer: indoor
})
levelControl.addTo(map)
</script>
<p>
Example for using <a href="https://github.com/digitaltom/leaflet-indoor">leaflet-indoor</a> with captions.
See the <a href="https://github.com/digitaltom/leaflet-indoor/blob/master/examples/captions.html">code</a> for this example and
<a href="https://github.com/digitaltom/leaflet-indoor/blob/master/README.md">documentation</a> how to use leaflet indoor with captions.
</p>
</body>
</html>
You can’t perform that action at this time.