Actually made Leaflets work!

2017-07-01 02:58:59 -04:00 · 2017-07-01 02:58:59 -04:00 · 5c30fe61c8
parent 9c71759d1e
commit 5c30fe61c8
12 changed files with 35 additions and 8 deletions
--- a/map.html
+++ b/map.html
@ -6,8 +6,9 @@
    <meta charset="utf-8">
    <title>Civilization Map</title>
    <script src="./resources/frameworks/jquery-3.2.1.min.js" type="text/javascript"></script>
-    <link rel="stylesheet" href="resources/game/css/style.css">
+    <link rel="stylesheet" href="resources/map/css/style.css">
    <script src="./resources/nav.js"></script>
+    <script src="./resources/map/map.js"></script>

    <!-- Leaflet Interactive Map -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
@ -20,7 +21,10 @@
  </head>
  <body>
    <nav></nav>
+    <h1>Leaflet Map</h1>
+    <div id="leaflet_map"></div>

-    <img src="resources/game/images/biome_map_full_10.png" alt="" id="biome_map">
+    <h1>Civilization Map</h1>
+    <img src="resources/map/images/biome_map_full_10.png" alt="" id="biome_map">
  </body>
 </html>
--- a/resources/game/css/style.css
+++ b/resources/game/css/style.css
@ -1,4 +0,0 @@
-#biome_map{
-  width: 100%;
-  height: auto;
-}
--- a/resources/map/css/style.css
+++ b/resources/map/css/style.css
@ -0,0 +1,9 @@
+#biome_map{
+  width: 100%;
+  height: auto;
+}
+
+#leaflet_map{
+  height: 400px;
+  width: 640px;
+}
--- a/resources/game/images/biome_map_full_10.png
+++ b/resources/game/images/biome_map_full_10.png
--- a/resources/game/images/tiles/blue_tile.png
+++ b/resources/game/images/tiles/blue_tile.png
--- a/resources/game/images/tiles/green_tile.png
+++ b/resources/game/images/tiles/green_tile.png
--- a/resources/game/images/tiles/purple_tile.png
+++ b/resources/game/images/tiles/purple_tile.png
--- a/resources/game/images/tiles/red_tile.png
+++ b/resources/game/images/tiles/red_tile.png
--- a/resources/game/images/tiles/white_tile.png
+++ b/resources/game/images/tiles/white_tile.png
--- a/resources/game/images/tiles/yellow_tile.png
+++ b/resources/game/images/tiles/yellow_tile.png
--- a/resources/map/map.js
+++ b/resources/map/map.js
@ -0,0 +1,18 @@
+$("document").ready(function(){
+  var mymap = L.map('leaflet_map').setView([51.505, -0.09], 13);
+  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
+    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+    maxZoom: 18,
+    id: 'mapbox.streets',
+    accessToken: 'pk.eyJ1IjoiYWxpc3VuZGVyc3Rvcm0iLCJhIjoiY2o0a3hubndlMG5ocjMzbjNyeW9yN2psOCJ9.5nZ_P1lpiJO08pRvtq2cZg'
+  }).addTo(mymap);
+
+  var circle = L.circle([51.508, -0.11], {
+    color: 'red',
+    fillColor: '#f03',
+    fillOpacity: 0.5,
+    radius: 500
+  }).addTo(mymap);
+  console.log("done loading?");
+  console.info(mymap);
+});
--- a/resources/nav.js
+++ b/resources/nav.js
@ -1,4 +1,4 @@
-window.onload = function(){
+$("document").ready(function(){

  $("nav")
    .append($("<a></a>")
@ -21,4 +21,4 @@ window.onload = function(){
      .attr("href", "./spawn.html"));


-}
+});