From bdc40dbf7e3074bb61c3ae2370f593d4868924ee Mon Sep 17 00:00:00 2001 From: LonelyALpHaz Date: Thu, 20 Jun 2024 17:42:17 -0300 Subject: [PATCH] Map added --- index.html | 37 ++++++++++++++++++++++++------------- script.js | 29 +++++++++++++++++++++++++---- style.css | 44 ++++++++++++++++++++++++++++++++++---------- 3 files changed, 83 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 864ce44..5db6a51 100644 --- a/index.html +++ b/index.html @@ -7,26 +7,37 @@ + + Buscador de CEP
-
-

Buscador de CEP

-

Preencha o campo abaixo com o CEP
ex: 12345678

-
-

CEP:

-

Logradouro:

-

Bairro:

-

Localidade:

-

UF:

-

IBGE:

-

DDD:

+
+ +
+

Buscador de CEP

+

Preencha o campo abaixo com o CEP

+
+

CEP:

+

Logradouro:

+

Bairro:

+

Localidade:

+

UF:

+

IBGE:

+

DDD:

+
+
+
-
- + +
diff --git a/script.js b/script.js index a640568..a879573 100644 --- 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 = `UF: ${data.uf}`; uf.appendChild(bandeira); ibge.innerHTML = `IBGE: ${data.ibge}`; - ddd.innerHTML = `DDD: ${data.ddd}`; - + ddd.innerHTML = `DDD: 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: '© OpenStreetMap' + }).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 index 2ec965f..26d240c 100644 --- 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 {