LeafLet
Leaflet.js consumindo Api
Rotina leaflet consumindo dados JSON para apresentação de mapas com marcadores. Pode ser acessado pelo link: https://parabolicamara.com.br/ifsp/carto/cart.html.
Abaixo o código em referência.
cart.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>IFSP - Cartografia</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="robots" content="index, follow"/>
<meta name="author" content="Carlos Benjamim Pazzianotto"/>
<meta name="keywords" content="Cartografia Digital"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
</head>
<body>
<div class="container-fluid mt-3">
<div class="row">
<div class="col-md-5">
<!--div id="map" style="width: 790px; height: 560px"></div-->
<div id="map" style="width: 65em; height: 50em"></div>
</div>
<div class="col-md-4">
<div class="add">
<div class="escolha">
<h5>Escolha o curso:</h5>
</div>
<form id="formulario" name="form" onreset="Reset">
<div id="listaCursos" class="listaDeCursos"></div>
<div class="botoes">
<button id="btnCursos" class="btn btn-sm btn-primary px-3 m-1" onclick="listaCurso(event)">Escolher</button>
<button id="btnReset" class="btn btn-sm btn-secondary px-3 m-1" onclik="limpaMapa(event)">Limpar Escolha</button>
<button id="btnIfsp" class="btn btn-sm btn-success px-3 m-1" onclick="mostraTodos(event)">Todos o Campus</button>
</div>
</form>
</div>
<div class="curso"></div>
</div>
</div>
</div>
<script>
var mymap = L.map("map").setView([-22.49, -48.7], 7);
L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiY2JwYXp6aSIsImEiOiJjbG04Z29tejAwOW1rM3RzNWFkNnZwNnV4In0.a2ppWcKS2quW1lXxkqaqDg",
{
maxZoom: 18,
attribution:
'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
}
).addTo(mymap);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Latitude e longitude do local: " + e.latlng.toString())
.openOn(mymap);
}
mymap.on("click", onMapClick);
function mostraTodos() {
event.preventDefault();
const campus_url = "https://www.parabolicamara.com.br/api/public/markers";
fetch(campus_url, { method: "GET" })
.then(function (resposta) {
return resposta.json();
})
.then(function (dados) {
listaMarcadores(dados, "m");
});
}
var mark = new Array();
function listaMarcadores(marcas, flag) {
for (let marca of marcas) {
var LamMarker = new L.marker([marca.latitude, marca.longitude]).bindPopup(
"<b>Campus " + marca.cidade + "</b><br>" + marca.endereco
)
mark.push(LamMarker)
mymap.addLayer(LamMarker);
}
if (flag == "c")
{
cursoCidade(marcas)
}
else if(flag == "m")
{
listaCampis(marcas)
}
else{
throw new Error("Flag invalida deve ser c ou m")
}
}
function markerDelAgain() {
for (i = 0; i < mark.length; i++) {
mymap.removeLayer(mark[i]);
}
}
function buscaCursos(cursos_id_url) {
fetch(cursos_id_url, { method: "GET" })
.then(function (resposta) {
return resposta.json();
})
.then(function (dados) {
markerDelAgain();
listaMarcadores(dados);
});
}
function buscaTipos() {
let lista_tipo_url = "https://parabolicamara.com.br/api/public/markers/list_tipo";
fetch(lista_tipo_url, { method: "GET" }
).then(function (resposta) {
return resposta.json();
})
.then(function (dados) {
listarTipos(dados);
});
}
var arr_tipo = new Array();
function listarTipos(tipos) {
for (let tipo of tipos) {
if (tipo.id != 1)
{
listaTipo(tipo.id, tipo.descricao);
arr_tipo.push(tipo.id);
}
}
}
function listaTipo(id, descricao) {
let lista_cursos_por_tipo_url =
"https://www.parabolicamara.com.br/api/public/markers/list_curso_por_tipo/" +
id;
fetch(lista_cursos_por_tipo_url, { method: "GET" })
.then(function (resposta) {
return resposta.json();
})
.then(function (dados) {
listarCursosPorTipo(dados, id, descricao);
});
}
function listarCursosPorTipo(cursos, id, descricao) {
if (id != 1)
{
var x = document.createElement("SELECT");
var attr = "cursoSelect" + id;
x.setAttribute("id", attr);
document.body.appendChild(x);
var z = document.createElement("option");
z.setAttribute("value", 0);
var t = document.createTextNode(descricao);
z.appendChild(t);
var descricao = document.getElementById(attr).appendChild(z);
for (let curso of cursos) {
var z = document.createElement("option");
z.setAttribute("value", curso.id);
var t = document.createTextNode(curso.nome);
z.appendChild(t);
var descricao = document.getElementById(attr).appendChild(z);
document.getElementsByClassName("listaDeCursos")[0].append(x);
}
}
}
function Reset() {}
var curso_arr = new Array();
function listaCurso(e) {
e.preventDefault();
limpaMapa(e)
let dados_sel = [];
for (i = 0; i < arr_tipo.length; i++) {
let x = document.getElementById("cursoSelect" + arr_tipo[i]).value;
if (x != 0) {
dados_sel.push(x);
}
}
for (z = 0; z < dados_sel.length; z++) {
let lista_cursos_por_id_url =
"https://www.parabolicamara.com.br/api/public/markers/get_curso/" +
dados_sel[z];
fetch(lista_cursos_por_id_url, { method: "GET" } )
.then(function (resposta) {
return resposta.json();
})
.then(function (dados) {
listaMarcadores(dados,"c");
});
}
document.getElementById("formulario").reset();
}
function limpaMapa(e) {
e.preventDefault();
markerDelAgain();
}
function cursoCidade(marcas) {
let flag = 0
let lista =[]
for (let marca of marcas) {
if(flag==0)
{
lista.push("<p>Campus que oferecem o curso de <b>" + (marca.nome).trim() + "</b>: </p>")
lista.push(marca.cidade)
flag=2
}else
{
lista.push(marca.cidade)
}
flag++
}
let linha = ""
for(x=0; x<(lista.length); x++)
{
if(x==(lista.length-1))
{
lin=lista[x]+"."
}else{
lin = x==0?lista[x]:lista[x]+", "
}
linha = linha + lin
}
document.getElementsByClassName("curso")[0].innerHTML = linha
}
function listaCampis(marcas){
let flag = 0
let lista =[]
for (let marca of marcas) {
if(flag==0)
{
lista.push("<p>Campus do IFSP:</p>")
lista.push(marca.nome)
flag=2
}else
{
lista.push(marca.nome)
}
flag++
}
let linha = ""
for(x=0; x<(lista.length); x++)
{
if(x==(lista.length-1))
{
lin=lista[x]+"."
}else{
lin = x==0?lista[x]:lista[x]+", "
}
linha = linha + lin
}
document.getElementsByClassName("curso")[0].innerHTML = linha
}
buscaTipos();
</script>
</body>
</html>