forked from chanbot5000/mapstarter
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
93 lines (75 loc) · 2.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="//code.jquery.com/jquery-latest.min.js " ></script>
<title>mapstarter</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
<script src="cities.js"></script>
<script type="text/javascript">
var map;
$(document).ready(function(){
map = L.map('map').setView([0,0],2);
//find many basemap options @ http://leaflet-extras.github.io/leaflet-providers/preview/
//thunderforest landscape
L.tileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.opencyclemap.org">OpenCycleMap</a>, © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map);
//openmapSurfer greyscale
/*
L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}', {
attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map);
*/
//ADD MARKER
//var marker = L.marker([0,0]);
//marker.bindPopup('Hello World!');
//marker.addTo(map);
//ADD LINE
/*
var polyline = L.polyline([
[0,90],
[90,0],
[0,-90],
[-90,0],
[0,90]
]);
polyline.addTo(map);
*/
//ADD POLYGON
/*
var polygon = L.polygon([
[45,45],
[45,-45],
[-45,-45],
[-45,45]
]);
polygon.addTo(map);
*/
//ADD GEOJSON
/*
var geoJson = L.geoJson(cities,{
onEachFeature: function(feature,layer){
layer.bindPopup(feature.properties.NAMELSAD);
}
});
geoJson.addTo(map);
*/
});
</script>
<style type="text/css">
.map-title {
z-index: 1;
position: absolute;
top: 15px;
right: 20px;
margin: 0;
font-family: Arial;
}
</style>
</head>
<body>
<h1 class="map-title">My Map</h1>
<div id="map"></div>
</body>
</html>