map.js

function loadMap() {
  Plotly.setPlotConfig({mapboxAccessToken: 'pk.eyJ1IjoiYXJlaWNoZXIiLCJhIjoiY2p1ZnIycnVpMGg4MjN5cnI3b3NscHQ3OSJ9.5f5k3erqpH8Nj16icQl6OQ'});
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
 if (this.readyState === 4 && this.status === 200){
 let mapParams = getMapParams(JSON.parse(this.response));
 Plotly.plot('map', mapParams.data, mapParams.layout); }
 };
xhttp.open("GET", "/art");
xhttp.send();
}

function setupMapData(master){
  m = JSON.parse(master)
  var La = []
  var Lo = []
  var Ty = []
  for (var i in m) {
    l = m[i]
    La.push(Number(l[0]))
    Lo.push(Number(l[1]))
    Ty.push(l[2])
  }

  var data = [{
  type:'scattermapbox',
  lat:La,
  lon:Lo,
  mode:'markers',
  marker: {
    size:5
    color:"rgb (255, 0, 0)"
  },
  text:Ty
  }]
  return data;
}

function findMapCenter(master) {
  m = JSON.parse(master)
  var La = []
  var Lo = []
  var Ty = []
  for (var i in m) {
    l = m[i]
    La.push(Number(l[0]))
    Lo.push(Number(l[1]))
    Ty.push(l[2])
  var LatMin = Math.min(La)
  var LatMax = Math.max(La)
  var LonMin = Math.min(Lo)
  var LonMax = Math.max(Lo)
  LatAvg = (LatMin + LatMax) / 2
  LonAvg = (LonMin + LonMax) / 2
  return [LatAvg, LonAvg]
    }
  }
setupMapLayout(master) {
  centP = findMapCenter(master)
  var layout = {
    mapbox: {
      style: "satellite-streets",
      zoom:11
      center: {
        lat:centP[0],
        lon:centP[1],
      }
    }
  }
  return layout
}

function getMapParams(master) {
  return {"data": setupMapData(master), "layout": setupMapLayout(master)}
}