map.html

---
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 }}' target=\"_blank\">Website</a><br/>";
        if ("{{ jug.twitter }}".length > 0) {
          popup += "<a href='https://twitter.com/{{ jug.twitter }}' target=\"_blank\">Twitter</a><br/>";
        }
        if ("{{ jug.mastodon }}".length > 0) {
          popup += "<a href='{{ jug.mastodon }}' target=\"_blank\">Mastodon</a><br/>";
        }
	if ("{{ jug.bluesky }}".length > 0) {
          popup += "<a href='https://bsky.app/profile/{{ jug.bluesky }}' target=\"_blank\">Bluesky</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>