Neste artigo vou abordar 3 tecnologias:
Json - que é um padrão de trocas de dados rápidos e simples que funciona para ler dados uma API ou um documento.
JQuery - que é uma biblioteca de funções em Java-script que interage com o html.
OpenStreetMap - que é uma biblioteca em Java-script de criar mapas interativos.
Pelo json temos as informações para serem carregadas no mapa. Veja o exemplo de um arquivo json:
[{"city":"Rio de Janeiro","lat":"-22.9083","lng":"-43.1964","country":"Brazil","population":"12272000"},
{"city":"São Paulo","lat":"-23.5504","lng":"-46.6339","country":"Brazil","population":"22046000"}]É importante pensar o json como sendo uma planilha onde você tem as linhas que representam a informação de um registro e as colunas que representa as suas variáveis. Então temos as variáveis city(cidade), lat(latitude), lng(longintude), Country(País), population(População). Cada linha representa um registro.
Vamos utilizar um código jquery para ler os dados. Veja o código:
<script>
$(document).ready(function(){
//carrega o arquivo no formato .json
$.getJSON("/sites/default/files/cidade.txt", function(data){
var employee_data = '';
$.each(data, function(key, value){ // lê um registro
// as váriáveis abaixo carregam os valores da linha.
let cidade=value.city
let pais=value.country
let populacao=value.population
let latitude=value.lat
let longitude=value.lng
});
});
});
</script>
Agora vamos incluir o OpenStreetMap para poder exibir estas informações no mapa.
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset="utf-8">
<style>
.map {
height: 400px
}
</style>
<!-- Carrega as informações da biblioteca do openStreetMap -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Carrega a biblioteca do Jquery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<!-- Exibe o mapa através do id="map" -->
<div id="map" class="map"></div>
<script>
//declaração das varíaveis
var map, marker
//define id="map" irá carragar o mapa e passar os parâmetros de latitude, logintude e zoom
map = L.map('map').setView([-22.9083,-43.1964],2);
//Carraga o mapa
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
key: '',
styleId: 103288,
maxZoom: 19
}).addTo(map);
//Lê um arquivo no formato .json onde estão as informações de latitude, longitude, nome da cidade, país e População
$(document).ready(function(){
$.getJSON("/sites/default/files/cidade.txt", function(data){
var employee_data = '';
$.each(data, function(key, value){// fica em loop até carregar todos as linhas do arquivo json
//cria um icone de localização da cidade na latitude e longitude no map.
marker = L.marker([value.lat, value.lng]).addTo(map);
//cria um balão com as informações sobre a cidade.
marker.bindPopup('<p><strong>'+value.city+'</strong>('+value.country+')</p><p>População: '+value.population+'</p>').openPopup();
});
});
});
</script>
</body>
</html>
Por fim temos este mapa com algumas cidades do mundo com suas coordanadas e população:
Esperou que você tenha aprendido como é fácil criar um mapa com informações de geolocalização.