---

layout: default

title: Map

leaflet: true

---

<!-- Make sure you put this AFTER Leaflet's CSS -->

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"

integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="

crossorigin=""></script>

<p>You can locate all the Java User Groups (JUGs) around the world in the following map</p>

<div id="jugsMap" style="height: 600px; width: 800px"></div>

{% assign jugs = site.jugs | sort: 'founded_date' %}

<ul>

<script>

function onMapClick(e) {

console.log("You clicked at: "+e.latlng);

}

var mymap = L.map('jugsMap').setView([0, 0], 1);

mymap.on('click', onMapClick);

</script>

<script>

var dukeIcon = L.icon({

iconUrl: 'images/duke-icon.png',

iconSize: [42, 47],

iconAnchor: [16, 37],

popupAnchor: [0, -28]

});

{% for jug in jugs %}

{% assign coordinates = jug.location | strip | split: "," %}

{% assign longitude = coordinates[0] %}

{% assign latitude = coordinates[1] %}

var popup = "<b>{{ jug.name }}</b><br/>" +

"<a href='{{ jug.website }}'>website</a><br/>";

L.marker([{{ longitude }}, {{ latitude }}],{icon: dukeIcon}).addTo(mymap).bindPopup(popup);

{% endfor %}

</script>

</ul>

<script>

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmNvdWdpbCIsImEiOiJja2wzbW5pcGYwamR3Mm9yMXoyZnplNGxxIn0.tasStzrur29zdtidBxvlPw', {

maxZoom: 18,

attribution: 'Map data &copy; <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);

</script>