Berlin Building Map

Developer
Moklick
Size
2,477 Kb
Views
12,144
  1. Berlin Building Map Previews
  2. Berlin Building Map HTML Codes
  3. Berlin Building Map CSS Codes
  4. Berlin Building Map JS Codes

How do I make an berlin building map?

Map shows 500k+ colored buildings of Berlin depending on their floor number. You can hover them to see the floor number.. What is a berlin building map? How do you make a berlin building map? This script and codes were developed by Moklick on 20 November 2022, Sunday.

Berlin Building Map Previews
IQ Test

Berlin Building Map - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Berlin Building Map</title> <link rel='stylesheet prefetch' href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="map"></div>
<div class="building-info"></div>
<div class="legend"> <span class="legend-title">Number Of Floors</span> <ul> <li> <span class="col-item"></span> < 4 </li> <li> <span class="col-item"></span> 4 - 6 </li> <li> <span class="col-item"></span> > 6 </li> </ul>
</div>
<!--
blog post about how we created the map tiles:
https://blog.webkid.io/how-we-created-a-map-with-100k-interactive-areas/
--> <script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script> <script src="js/index.js"></script>
</body>
</html>

Berlin Building Map - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
html,
body { height: 100%; font-family: Arial, sans-serif;
}
#map { height: 100%; width: 100%; background: #111;
}
.building-info { position: absolute; right: 1rem; top: 1rem; color: white; font-size: 2.5rem;
}
.legend{ position: absolute; left: 1rem; top: 1rem; color:white
}
.legend-title{ font-weight:bold;
}
.legend ul{ list-style: none; margin-top: 1rem;
}
.legend ul li{ margin-bottom:.25rem;
}
.legend ul li .col-item{ display: inline-block; width: 2rem; height:1.25rem; margin-right:.5rem;
}
.legend ul li:nth-child(1) .col-item{ background: #5fd36c;
}
.legend ul li:nth-child(2) .col-item{ background: #e0d500;
}
.legend ul li:nth-child(3) .col-item{ background: #65aef4;
}

Berlin Building Map - Script Codes JS Codes

L.mapbox.accessToken = 'pk.eyJ1Ijoid2Via2lkIiwiYSI6ImNCUXNCYU0ifQ.JETFQZV_Fs0SPZqTgNtQ5A';
var infoElm = document.querySelector('.building-info');
var map = L.mapbox.map('map', 'webkid.bhz7iudi', {gridLayer : false, zoomControl : false }).setView([52.5141,13.3944,10], 11);
map.attributionControl.addAttribution('Source: Senatsverwaltung für Stadtentwicklung und Umwelt Berlin');
var dataLayer = L.mapbox.gridLayer('webkid.bhz7iudi').addTo(map);
dataLayer.on('mouseover', function(evt){ if(typeof evt.data === 'undefined'){ return infoElm.innerHTML = ''; } infoElm.innerHTML = 'floors: ' + evt.data.floors;
});
Berlin Building Map - Script Codes
Berlin Building Map - Script Codes
Home Page Home
Developer Moklick
Username moklick
Uploaded November 20, 2022
Rating 3
Size 2,477 Kb
Views 12,144
Do you need developer help for Berlin Building Map?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moklick (moklick) Script Codes
Name
CCTV Everywhere
CSS Text-FX
A Pen by moklick
Fullscreen fun
... is watching you
Zeichensatz
CSS Map FX
Responsive Codepen Glitch
Money Over Everything
Hitman Loading Sequence pure css3
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!