Map added

dantas-arthur · Jun 20, 2024 · bdc40db · bdc40db
1 parent 661e855
commit bdc40db
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -7,26 +7,37 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""></script>
     <link rel="stylesheet" href="style.css">
     <title>Buscador de CEP</title>
 </head>
 <body>
     <main>
         <section>
-            <div class="form-container">
-                <h1 class="title">Buscador de CEP</h1>
-                <p id="help">Preencha o campo abaixo com o CEP<br><mark class="blue">ex:</mark> 12345678</p>
-                <div id="cep-data">
-                    <p id="cep"><mark class="blue">CEP:</mark> </p>
-                    <p id="logradouro"><mark class="blue">Logradouro:</mark> </p>
-                    <p id="bairro"><mark class="blue">Bairro:</mark> </p>
-                    <p id="local"><mark class="blue">Localidade:</mark> </p>
-                    <p id="uf"><mark class="blue">UF: </mark></p>
-                    <p id="ibge"><mark class="blue">IBGE:</mark> </p>
-                    <p id="ddd"><mark class="blue">DDD:</mark> </p>
+            <div class="container">
+                <!-- CEP data container -->
+                <div class="form-container">
+                    <h1 class="title">Buscador de CEP</h1>
+                    <p id="help">Preencha o campo abaixo com o CEP</p>
+                    <div id="cep-data">
+                        <p id="cep"><mark class="blue">CEP:</mark> </p>
+                        <p id="logradouro"><mark class="blue">Logradouro:</mark> </p>
+                        <p id="bairro"><mark class="blue">Bairro:</mark> </p>
+                        <p id="local"><mark class="blue">Localidade:</mark> </p>
+                        <p id="uf"><mark class="blue">UF: </mark></p>
+                        <p id="ibge"><mark class="blue">IBGE:</mark> </p>
+                        <p id="ddd"><mark class="blue">DDD:</mark> </p>
+                    </div>
+                    <input id="cepValue" class="cep-input" type="text" required minlength="8" maxlength="8"><br>
+                    <button  onclick="getCEP()">Buscar CEP</button> 
                 </div>
-                <input id="cepValue" class="cep-input" type="text" required minlength="8" maxlength="8"><br>
-                <button  onclick="getCEP()">Buscar CEP</button> 
+                <!-- Map container -->
+                <div id="map"></div>
             </div>
         </section>
     </main>

diff --git a/script.js b/script.js
@@ -1,5 +1,4 @@
 // API request
-
 function getCEP() {
     // Get hint and cep data HTML elements
     var helpText = document.getElementById("help");
@@ -27,7 +26,7 @@ function getCEP() {
         const bandeira = document.createElement("img");
         bandeira.src = `assets/bandeiras/${data.uf}.png`;
         bandeira.alt = `Bandeira do estado de ${data.uf}`;
-        bandeira.style.width = "20px"
+        bandeira.style.width = "25px"
         bandeira.style.marginLeft = "5px"
 
         // Display formated data
@@ -38,11 +37,33 @@ function getCEP() {
         uf.innerHTML = `<mark class="blue">UF:</mark> ${data.uf}`;
         uf.appendChild(bandeira);
         ibge.innerHTML = `<mark class="blue">IBGE:</mark> ${data.ibge}`;
-        ddd.innerHTML = `<mark class="blue">DDD:</mark> ${data.ddd}`;
-
+        ddd.innerHTML = `<mark class="blue">DDD:</mark> 0${data.ddd}`;
+    
         // Remove hint text from screen and add cep data
         helpText.style.display = "none";
         cepData.style.display = "block";
+
+        // Map latitude and longitude function
+        const logradouroEncode = encodeURIComponent(data.logradouro);
+        const bairroEncode = encodeURIComponent(data.bairro);
+        const localEncode = encodeURIComponent(data.localidade);
+        const ufEncode = encodeURIComponent(data.uf);
+        const url = `https://nominatim.openstreetmap.org/search?q=${logradouroEncode}+${bairroEncode}+${localEncode}+${ufEncode}&format=json&polygon=1&addressdetails=1`;
+        console.log(url)
+        fetch(url)
+        .then(response => response.json())
+        .then(data => {
+
+            // Map with current CEP location
+            var map = L.map('map').setView([data[0].lat, data[0].lon], 13);
+            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 19,
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            }).addTo(map);
+
+            // Map marker
+            var marker = L.marker([data[0].lat, data[0].lon]).addTo(map);
+        })
     })
     .catch(error => {
         window.alert("Erro ao localizar CEP. Tente novamente.")

diff --git a/style.css b/style.css
@@ -6,7 +6,7 @@
     padding: 0;
 }
 
-/* Body, fonts and other elements */
+/* Body, map, fonts and other elements */
 
 body {
     --color1: #FFF8F0;
@@ -22,7 +22,7 @@ footer {
     background-color: var(--color3);
     width: 100%;
     height: 50px;
-    margin-top:  227px;
+    margin-top: 45px;
     p {
         font-size: 1.2rem;
         text-align: center;
@@ -31,20 +31,41 @@ footer {
 
 /* Form container and it's elements */
 
-.form-container {
-    width: 400px;
-    height: 450px;
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-right: 5%;
+}
+
+#map {
+    width: 500px;
+    height: 550px;
     background: rgba( 255, 255, 255, 0.05 );
-    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    box-shadow: 0 0px 5px 0 rgba( 31, 38, 135, 0.37 );
     backdrop-filter: blur( 3px );
     -webkit-backdrop-filter: blur( 3px );
-    border-radius: 10px;
     border: 1px solid rgba( 255, 255, 255, 0.18 );
     border-radius: 20px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    margin: 15% 8%;
+}
+
+.form-container {
+    width: 500px;
+    height: 550px;
+    background: rgba( 255, 255, 255, 0.05 );
+    box-shadow: 0 0px 5px 0 rgba( 31, 38, 135, 0.37 );
+    backdrop-filter: blur( 3px );
+    -webkit-backdrop-filter: blur( 3px );
+    border-radius: 20px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border: 1px solid rgba( 255, 255, 255, 0.18 );
     text-align: center;
     align-items: center;
     justify-content: center;
-    margin: 10% 0% 8% 40%;
+    margin: 15% 0% 0% 53%;
 }
 
 .title {
@@ -58,10 +79,11 @@ footer {
 
 #cep-data {
     display: none;
-    margin: 10% 0% 0% 25%;
+    margin: 10% 0% 0% 20%;
     p {
         text-align: left;
-        max-width: 220px;
+        font-size: 1.2rem;
+        max-width: 300px;
     }
 }
 
@@ -71,6 +93,8 @@ footer {
     border: 2px solid var(--color3);
     border-radius: 10px;
     margin-top: 20%;
+    text-indent: 10px;
+    font-size: 15px;
 }
 
 button {