atci90d/static/js/map.js

var longitude = -95.125;
var latitude = 40.596;
var zoom = 5;
// var mymap = L.map('mapid').setView([latitude, longitude], zoom);
var accessToken = "pk.eyJ1Ijoiam9yZGFuZGFzaGVsIiwiYSI6ImNqdWQ3OHlneTBsMms0NG82YTVkMmg3dHgifQ.NmgYJNL8FVwq-gctstiAVA"
// L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
//     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
//     maxZoom: 18,
//     id: 'mapbox.streets',
//     accessToken: accessToken
// }).addTo(mymap);
mapboxgl.accessToken = accessToken;
var mymap = new mapboxgl.Map({
	container: 'mapid',
	style: 'mapbox://styles/mapbox/streets-v11',
	center: [longitude, latitude],
	zoom: 3
});

function addPin(town) {
    town = town.replace(/u'/g, "'");
    town = town.replace(/'/g, '"');
    town = JSON.parse(town);
    latitude = town.coordinates.lat;
    longitude = town.coordinates.lon;
    city = town.city;

    anchor = city.split(',')[0].replace(' ', '');

    htmlContent = "<a href='/stops#" + anchor + "'>";
    htmlContent += "<h1>" + city + "</h1><br/>";
    if (town.photos) {
        htmlContent += "<img class='townphoto' src='/static/photos/" + town.photos[0].filename + "'>";
    }
    htmlContent += "</a>";

    var pin = new mapboxgl.Marker()
	.setLngLat([longitude, latitude])
	.setPopup(new mapboxgl.Popup().setMaxWidth("none").setHTML(htmlContent))
	.addTo(mymap);
    // var pin = L.marker([latitude, longitude]).addTo(mymap);
    // pin.bindPopup(htmlContent, {maxWidth: "auto"});

    // This is a hack to center the pointers above the pins.
        // When you first open a pin, the triangle pointing to
        // the pin is centered to the image, nowhere near the
        // pin. If you close and reopen -- manually OR 
        // automatically -- it will reset the marker to where
        // it should be. These two functions are a workaround.
    // pin.openPopup();
    // mymap.closePopup();
}

function resizePins() {
    // Popups were not resizing to fit images. I could not figure it out.
    // This drove me nuts; I think it's exposing my webdev ignorance.
    // Solution credit: https://stackoverflow.com/questions/38170366/leaflet-adjust-popup-to-picture-size
    document.querySelector(".leaflet-popup-pane").addEventListener("load", function (event) {
        var tagName = event.target.tagName,
            popup = mymap._popup; // Currently open popup, if any.

        if (tagName === "IMG" && popup) {
            popup.update();
        }
    }, true); // Capture the load event, because it does not bubble.
}
function recenterMap() {
    var longitude = -95.125;
    var latitude = 40.596;
    zoom = 5;
    mymap.setView([latitude, longitude], zoom);
}