Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

October 30, 2021 12:22 pm GMT

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>

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;}

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;}

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;}

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;  }});// APIvar 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">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',    maxZoom: 20,    tileSize: 512,    zoomOffset: -1,}).addTo(mymap);  // searchL.Control.geocoder().addTo(mymap);

Original Link: https://dev.to/adwait12345/how-to-built-your-own-map-html-css-javascript-leafletjs-57eg

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To