Actually made Leaflets work!

This commit is contained in:
alisolarflare 2017-07-01 02:58:59 -04:00
parent 9c71759d1e
commit 5c30fe61c8
12 changed files with 35 additions and 8 deletions

View file

@ -6,8 +6,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Civilization Map</title> <title>Civilization Map</title>
<script src="./resources/frameworks/jquery-3.2.1.min.js" type="text/javascript"></script> <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/nav.js"></script>
<script src="./resources/map/map.js"></script>
<!-- Leaflet Interactive Map --> <!-- Leaflet Interactive Map -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
@ -20,7 +21,10 @@
</head> </head>
<body> <body>
<nav></nav> <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> </body>
</html> </html>

View file

@ -1,4 +0,0 @@
#biome_map{
width: 100%;
height: auto;
}

View file

@ -0,0 +1,9 @@
#biome_map{
width: 100%;
height: auto;
}
#leaflet_map{
height: 400px;
width: 640px;
}

View file

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

View file

Before

Width:  |  Height:  |  Size: 139 B

After

Width:  |  Height:  |  Size: 139 B

View file

Before

Width:  |  Height:  |  Size: 139 B

After

Width:  |  Height:  |  Size: 139 B

View file

Before

Width:  |  Height:  |  Size: 139 B

After

Width:  |  Height:  |  Size: 139 B

View file

Before

Width:  |  Height:  |  Size: 139 B

After

Width:  |  Height:  |  Size: 139 B

View file

Before

Width:  |  Height:  |  Size: 132 B

After

Width:  |  Height:  |  Size: 132 B

View file

Before

Width:  |  Height:  |  Size: 138 B

After

Width:  |  Height:  |  Size: 138 B

18
resources/map/map.js Normal file
View file

@ -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);
});

View file

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