map.html

---
layout: page
title: Screeps Alliance Map
sitemap:
  priority: 1.0
  changefreq: weekly
---
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
  <link rel="stylesheet" href="/css/loan-map.css" />
  <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

  <script src="/js/ScreepsConstants.js"></script>
  <script src="/js/ScreepsRegion.js"></script>
  <script src="/js/ScreepsMap.js"></script>

  <div id="ScreepsMapTooltip" style="display: none;">
      <dl>
          <dt>Room:</dt>
          <div class="roomName"></div>
          <dt>Type:</dt>
          <div class="roomType"></div>
          <dt>RCL:</dt>
          <div class="roomLevel"></div>
          <dt>Owner:</dt>
          <div class="roomOwner"></div>
          <dt>Alliance:</dt>
          <div class="roomAlliance"></div>
      </dl>
  </div>

  <div id="ScreepsMapFlex">
    <div id="ScreepsMapContainer"></div>
    
    <div>
      <span id="ScreepsColorKeyContainer"></span>
    </div>
  </div>
  
  <script type="text/javascript" language="javascript">
    window.onload = function() {
      let region = new ScreepsRegion("W70N70", "E70S70");
      let mapView = new ScreepsMap(
        {
          spinnerHostId: "ScreepsMapFlex",
          mapHostId: "ScreepsMapContainer",
          legendHostId: "ScreepsColorKeyContainer",
          roomTooltipHostId: "ScreepsMapTooltip",

          terrainUri: "img/screeps_terrain.png",
          region: region,
          style: { 'room-padding': 10 }
        });

      mapView.setData(
        {{ site.data.rooms | jsonify }},
        {{ site.data.alliances | jsonify }}
      );

      mapView.render();
    }
  </script>
</div>