8
How to built your own Map | HTML , CSS , JavaScript & Leaflet.js in just 10...
source link: https://dev.to/adwait12345/how-to-built-your-own-map-html-css-javascript-leafletjs-57eg
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
adwait12345
Posted on Oct 30
How to built your own Map | HTML , CSS , JavaScript & Leaflet.js in just 10 min
Hi folks ,
In this todays video you will get to learn how to built your own
Dynamic map with HTML , CSS , JavaScript & Leaflet.js . It is going to be to to much interesting with only little amount of code . In this video you will also come across through usage of API and its implementation.
This is going to be completely responsive design and map is going to be completely dynamic & you can search anything by search indexing used in map and this is one of best project for junior developers !
Source code :
1)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Menu</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="screen and (max-width:1080px)" href="phone.css" >
<!--map -->
<link rel="stylesheet" media="screen and (max-width:875px)" href="small.css" >
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
</head>
<body id="buddy">
<section>
<nav class="nav-main">
<div class="logo"><img src="./Bocadmium-logos_black2.png" alt=""></div>
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">Portfolio</a></li>
<li> <a href="#">About Us</a></li>
<li> <a href="#">Gallery</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</nav>
<div class="toggle">
<button id="hit">
<svg viewBox="0 -2 100 80" width="40" height="30"style="
overflow: visible;
"> >
<rect id="change0"width="75" height="10" fill="#2666C1"></rect>
<rect id="change" y="30" width="75" height="10"fill="#2666C1"></rect>
<rect id="change1" y="60" width="75" height="10"fill="#2666C1"></rect>
</svg>
</button>
</div></section>
<section>
<div id="mapid"></div>
</section>
</body>
<script src="main.js"></script>
</html>
Enter fullscreen modeExit fullscreen mode
2)style.css
body{
background-color: #f1f1f1;
}
.nav-main{
position: fixed;
top: 0;
left: 0;
width: 100%;
height:14vh;
background-color: #fff;
display: flex;
flex-wrap: wrap;
z-index: 1;
justify-content: center;
align-items: center;
}
.logo img {
width: 349px;
height: 110px;
position: relative;
left: -1px;
top: -5px;
}
.nav-main ul{
position: relative;
display: flex;
flex-wrap: wrap;
padding: 15px;
top: -5px;
}
.nav-main ul li{
list-style: none;
line-height: 0px;
padding: 10px 55px 0 0;
}
.nav-main ul li a{
display: block;
height: 200%;
padding: 0 10px;
text-transform: uppercase;
text-decoration: none;
color: #111;
font-family: arial;
font-size: 16px;
}
/* map */
#mapid{
position: fixed;
height:650px;
width: 100%;
border-radius: 10px;
top: 105px;
left: 0;
}
Enter fullscreen modeExit fullscreen mode
3)phone.css
body{
background-color: #f1f1f1;
}
.logo img {
width: 289px;
height: 96px;
position: relative;
top: -16px;
left: -129px;
}.logo {
width: 100px;
height: 100px;
position: absolute;
}
.nav-main ul {
display: flex;
position: absolute;
flex-wrap: wrap;
padding: 15px;
justify-content: center;
align-items: baseline;
top: 62px;
}
.nav-main{
position: fixed;
top: 0;
left: 0;
width: 100%;
height:20vh;
background-color: #fff;
display: flex;
flex-wrap: wrap;
z-index: 1;
justify-content: center;
align-items: center;
}
/* map */
#mapid{
position: fixed;
height:600px;
width: 100%;
border-radius: 10px;
top: 150px;
left: 0;
}
Enter fullscreen modeExit fullscreen mode
4)small.css
.logo {
width: 100%;
height: 70px;
position: absolute;
display: flex;
justify-content: start;
align-self: center;
}
.logo img {
display: block;
width: 223px;
height: 65px;
position: absolute;
left: -9px;
top: 2px;
}
.nav-main ul {
height: 40vh;
width: 200px;
position: fixed;
top: -1px;
right: 10px;
background-color: whitesmoke;
border-radius: 10px;
visibility: hidden;
box-shadow: none;
}
.nav-main ul li {
position: relative;
left: 30px;
top: 10px;
}
.nav-main{
position: fixed;
top: 0;
left: 0;
width: 100%;
height:8vh;
background-color: #fff;
display: flex;
flex-wrap: wrap;
z-index: 1;
justify-content: center;
align-items: center;
}
.toggle button {
position: absolute;
right: 10px;
z-index: 1;
top: 17px;
background: transparent;
border: none;
}
#mapid{
position: fixed;
height:90vh;
width: 100%;
/* border-radius: 0px; */
top: 8vh;
left: 0px;
z-index: -1;
}
Enter fullscreen modeExit fullscreen mode
5)main.js
console.log("hi there");
let togglestatus = false;
let toggle = document.getElementById('hit');
let element = document.querySelector('.nav-main ul')
toggle.addEventListener('click',()=>{
if(togglestatus === false) { document.getElementById('change').setAttribute('transform','rotate(45),translate(0)')
document.getElementById('change').setAttribute('y','0')
document.getElementById('change1').setAttribute('transform','rotate(-45),translate(-45)')
document.getElementById('change1').setAttribute('y','30')
document.getElementById('change0').setAttribute('transform','rotate(-45),translate(-40)')
document.getElementById('change0').setAttribute('y','30')
}
else if (togglestatus === true){
document.getElementById('change').setAttribute('transform','rotate(0),translate(0)')
document.getElementById('change').setAttribute('y','30')
document.getElementById('change1').setAttribute('transform','rotate(0),translate(0)')
document.getElementById('change1').setAttribute('y','60')
document.getElementById('change0').setAttribute('transform','rotate(0),translate(0)')
document.getElementById('change0').setAttribute('y','0')
}
if(togglestatus === false)
{
element.style.visibility="visible";
element.style.boxShadow= "0 10px 25px rgba(92, 99, 105, .2)";
togglestatus = true;
}
else if(togglestatus === true){
element.style.visibility="hidden";
togglestatus = false;
}
});
// API
var mymap = L.map('mapid').fitWorld();
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=add your own key', {
attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
maxZoom: 20,
tileSize: 512,
zoomOffset: -1,
}).addTo(mymap);
// search
L.Control.geocoder().addTo(mymap);
Enter fullscreen modeExit fullscreen mode
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK