Actually made Leaflets work!
alisolarflare
8
map.html
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
#biome_map{
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
9
resources/map/css/style.css
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
#biome_map{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leaflet_map{
|
||||||
|
height: 400px;
|
||||||
|
width: 640px;
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 139 B After Width: | Height: | Size: 139 B |
|
Before Width: | Height: | Size: 139 B After Width: | Height: | Size: 139 B |
|
Before Width: | Height: | Size: 139 B After Width: | Height: | Size: 139 B |
|
Before Width: | Height: | Size: 139 B After Width: | Height: | Size: 139 B |
|
Before Width: | Height: | Size: 132 B After Width: | Height: | Size: 132 B |
|
Before Width: | Height: | Size: 138 B After Width: | Height: | Size: 138 B |
18
resources/map/map.js
Normal 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 © <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);
|
||||||
|
});
|
||||||
|
|
@ -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"));
|
||||||
|
|
||||||
|
|
||||||
}
|
});
|
||||||
|
|
|
||||||