-
Notifications
You must be signed in to change notification settings - Fork 2
/
leaf-comprehensive.html
149 lines (113 loc) · 5.29 KB
/
leaf-comprehensive.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<title>Scott Leaflet 7</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="/leaflet-google.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<!--scripts and style sheets for search/geosearch. Also requires jquery.-->
<script src="/geosearch/js/l.control.geosearch.js"></script>
<script src="/geosearch/js/l.geosearch.provider.google.js"></script>
<link rel="stylesheet" href="/geosearch/css/l.geosearch.css" />
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.css' rel='stylesheet' />
<!--[if lt IE 9]>
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.21.0/L.Control.Locate.ie.css' rel='stylesheet' />
<![endif]-->
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// get url paramaters for the address serach function
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,])[1]
);
}
var regionParameter = getURLParameter('region');
var region = (regionParameter === 'undefined') ? '' : regionParameter;
var cmAttr = '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
cmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var attribution = '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
// Base Maps
var googleLayer = new L.Google('ROADMAP');
var mapnik = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
, {attribution: attribution}
)
// Layers
var clouds = L.tileLayer('http://{s}.tile.openweathermap.org/map/clouds/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openweathermap.org">OpenWeatherMap</a>'
, opacity: 0.5
})
var wind = L.tileLayer('http://{s}.tile.openweathermap.org/map/wind/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openweathermap.org">OpenWeatherMap</a>'
, opacity: 0.5
})
var temperature = L.tileLayer('http://{s}.tile.openweathermap.org/map/temp/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openweathermap.org">OpenWeatherMap</a>'
, opacity: 0.5
})
var cycle = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
attribution: '© OpenCycleMap contributors - © OpenStreetMap contributors'
, opacity: 1
})
var cities = new L.LayerGroup();
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
var restaurants = new L.LayerGroup();
L.marker([39.69, -104.85]).bindPopup('<p>What I am reading: , Behavioural economics and public policy – FT.com, http://www.ft.com/cms/s/2/9d7d31a4-aea8-11e3-aaa6-00144feab7de.html, http://www.instapaper.com/rss/238947/i35BSjISqVKnAGF4lqMOZltq2L0, Instapaper: Unread, ,</p>A <a href="http://scottbrenner.com">fake</a> restaurant').addTo(restaurants);
L.marker([39.69, -105.12]).bindPopup('A fake restaurant').addTo(restaurants);
// Create the map
var map = L.map('map', {
center: new L.LatLng(39.73, -104.99), zoom: 10, layers: [mapnik, clouds]
});
// center the map on user's location
map.locate({setView: true, maxZoom: 16});
// Create the basemaps
var baseMaps = {
"Mapnik": mapnik,
"Google": googleLayer
};
// Create the overlayed layers
var overlayMaps = {
"Clouds": clouds,
"Wind": wind,
"Cities": cities,
"Cycle": cycle,
"Temperature": temperature,
"Restaurants": restaurants
};
// Create the layers control
var control = L.control.layers(baseMaps, overlayMaps)
control.addTo(map);
// Create the search field/control
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.Google({
region: region
})
}).addTo(map);
// Add the locate control
L.control.locate({strings: {
title: "Show me where I am", // title of the locate control
popup: "You are within {distance} {unit} from this point", // text to appear if user clicks on circle
outsideMapBoundsMsg: "You seem located outside the boundaries of the map" // default message for onLocationOutsideMapBounds
}}).addTo(map);
</script>
</body>
</html>