-
Notifications
You must be signed in to change notification settings - Fork 2
/
simple_map.html
97 lines (85 loc) · 3.71 KB
/
simple_map.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
94
95
96
97
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Leaflet.js Example</title>
<meta name="description" content="First example">
<meta name="author" content="Furqan Farooqui">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<style type="text/css">
#map {
height: 180px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
window.tilejson = {
"attribution": "<a href=\"https:\/\/www.mapbox.com\/about\/maps\/\" target=\"_blank\">© Mapbox © OpenStreetMap<\/a> <a class=\"mapbox-improve-map\" href=\"https:\/\/www.mapbox.com\/map-feedback\/\" target=\"_blank\">Improve this map<\/a>",
"autoscale": true,
"bounds": [
-180,
-85.0511,
180,
85.0511
],
"center": [
-41.30859375,
7.100892668623654,
3
],
"created": 1444883879395,
"data": [
"https:\/\/a.tiles.mapbox.com\/v4\/fafaro.nn73cpe2\/features.json?access_token=pk.eyJ1IjoiZmFmYXJvIiwiYSI6ImNpZnJxaXZ5dDBveXVzbG0wbm5kNjByNXQifQ.1ziviq2_srmlbk7VkiVegA"
],
"dataset": "cifrqk12r0p0kslm0tpqj9b5o",
"description": "",
"id": "fafaro.nn73cpe2",
"mapbox_logo": true,
"maxzoom": 22,
"minzoom": 0,
"modified": 1444883880514,
"name": "Untitled project",
"private": false,
"scheme": "xyz",
"tilejson": "2.0.0",
"tiles": [
"https:\/\/a.tiles.mapbox.com\/v4\/fafaro.nn73cpe2\/{z}\/{x}\/{y}.png?access_token=pk.eyJ1IjoiZmFmYXJvIiwiYSI6ImNpZnJxaXZ5dDBveXVzbG0wbm5kNjByNXQifQ.1ziviq2_srmlbk7VkiVegA",
"https:\/\/b.tiles.mapbox.com\/v4\/fafaro.nn73cpe2\/{z}\/{x}\/{y}.png?access_token=pk.eyJ1IjoiZmFmYXJvIiwiYSI6ImNpZnJxaXZ5dDBveXVzbG0wbm5kNjByNXQifQ.1ziviq2_srmlbk7VkiVegA"
],
"webpage": "https:\/\/a.tiles.mapbox.com\/v4\/fafaro.nn73cpe2\/page.html?access_token=pk.eyJ1IjoiZmFmYXJvIiwiYSI6ImNpZnJxaXZ5dDBveXVzbG0wbm5kNjByNXQifQ.1ziviq2_srmlbk7VkiVegA",
"options": [
"attribution",
"zoompan",
"zoomwheel",
"geocoder",
"share"
]
};
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
id: 'fafaro.nn73cpe2',
subdomains: ['a', 'b']
}).addTo(map);
/*L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
}).addTo(map);*/
L.tileLayer(window.tilejson).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
var circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map);
</script>
<!--<iframe width='100%' height='500px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/fafaro.nn73cpe2/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1IjoiZmFmYXJvIiwiYSI6ImNpZnJxaXZ5dDBveXVzbG0wbm5kNjByNXQifQ.1ziviq2_srmlbk7VkiVegA'></iframe>-->
</body>
</html>