Atoka API: aziende su mappa

by Simone Fonda

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>

<p>
Inserisci il tuo token della API di <a href='https://atoka.io'>atoka.io</a>, un comune e vedi le prime 30 aziende su una mappa.
</p>

<form>
    <label>Token <input id='token' value='' /></label>
    <label>
        Comune <input id='sede' value='' />
        <div id='suggerimenti'></div>
    </label>
</form>
<br /><br />

<div id='map'></div>

CSS

label { display: block; }
.suggerimento {
    border-bottom: 1px solid #666;
    padding: 2px 5px;
}
.suggerimento:hover {
    cursor: pointer;
    background-color: #666;
    color: white;
}
#map {
    height: 400px;
}

JavaScript

$('#sede').keyup(function() {
    let token = $('#token').val(),
        sede = $('#sede').val(),
        url = `https://api.atoka.io/v2/admindiv`;

	if (sede.length === 0) {
		$('#suggerimenti').html('');
    } else if (sede.length < 2) {
	    return;
    }

	$.get(url, {
    	token: token,
    	namePrefix: sede, 
        countries: 'it',
        types: 'municipality',
    }).done(mostraSuggerimenti);
});

function mostraSuggerimenti(data) {
	let suggerimenti = data.items.map(function(item) {
    	let node = $(`<div class='suggerimento'>${item.value}</div>`);
        node.click(() => cercaAziende(item.value));
		return node;
    });
	$('#suggerimenti').html(suggerimenti);
}

function cercaAziende(comune) {
    let token = $('#token').val(),
        sede = $('#sede').val(),
        url = `https://api.atoka.io/v2/locations?token=${token}`;

	$.post(url, {
    	packages: 'base,contacts',
        municipalities: comune,
        limit: 30,
    }).done(mostraAziende);
}

function mostraAziende(data) {
    $('#suggerimenti').html('');

	let coords = data.items
        .filter(function(item) {
			return 'lat' in item.base.address;
        })
        .map(function(item) {
            let address = item.base.address;
            return {lat: address.lat, lon: address.lon};
        });
    inizializzaMappa(coords);
}

function inizializzaMappa(coords) {
    let map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(coords[0].lat, coords[0].lon),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

	for (let i = coords.length; i--;) {
		let marker = new google.maps.Marker({
            position: new google.maps.LatLng(coords[i].lat, coords[i].lon),
            map: map,
        });
    }
}