map.html

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <title>ROS Users of the World</title>
    <link href="http://fonts.googleapis.com/css?family=Overpass" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="rosmap.css" />
    <script src="https://kit.fontawesome.com/bf045d01fa.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"
      integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="src/ocanvas-2.7.3.min.js"></script>
    <script src="src/pie.js"></script>
    <script src="rosmap.js" type="module"></script>
  </head>
  <body>
    <div id="text">
      <h1>ROS Users of the World</h1>
      <ul>
        <li><span style="color: #62af44">GREEN </span> - School</li>
        <li><span style="color: #4186f0">BLUE </span> - Company</li>
        <li><span style="color: #db4436">RED </span> - Research Institute</li>
        <li><span style="color: #ffdd5e">YELLOW </span> - Other</li>
        <li><span style="font-size: small">(white - unknown)</span></li>
      </ul>
      <!-- Code for the Pie Chart -->
      <canvas
        id="pie_chart"
        style="padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block"
      ></canvas>
      <p>
        Add to or edit the map by changing the yaml files in
        <a href="https://github.com/DLu/ros_map/tree/main/data">this repository</a>, or by emailing
        <a href="mailto:david AT metrorobots DOT COM">the map maintainer</a>.
      </p>
    </div>
    <div id="map-canvas"></div>
    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyAq02Y_R42xhDQa4n4Fr_9H3M_az7XO4gM", v: "weekly"});</script>
  </body>
</html>