andybell.github.io/biketour.html at master · andybell/andybell.github.io · GitHub

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
<!DOCTYPE html>
<html>

<head>
	<title>Bike route: ME2CA</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- load geojson file -->
	<script src="biketour.geojson" type="text/javascript"></script>

	<!-- jQuery Version 1.11.0 -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>>

	<!-- leaflet -->
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

	<!-- leaflet sleep-->
	<script src="js/Leaflet.Sleep.js"></script>


	<!-- fullscreen -->
	<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
	<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />


	<style>
		body {
			margin: 0;
			padding: 0;
		}

		#map {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
		}
	</style>
</head>

<body>
	<div id="map"></div>

	<script>
		$(document).ready(function() {

			var map = new L.Map('map', {
				fullscreenControl: true,
				center: [39.8282, -97.0],
				zoom: 4,
				sleepNote: false
			});


			/*
			var layer = new L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
				maxZoom: 18,
				id: 'examples.ik7djhcc'
			});
			*/

			var background = new L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYW1iZWxsIiwiYSI6InNKZ2FCekkifQ.4RXFObD-Uh_NSNMC4TPFNg', {
				maxZoom: 18,
				attribution: '',
				id: 'mapbox.streets'
			});

			map.addLayer(background);


			$.getJSON('biketour.geojson', function(data) {
				L.geoJson(data, {
					onEachFeature: function(feature, layer) {

						//var popupContent = feature.properties.description;

						var popupContent = feature.properties.description;
						var popup = L.popup({
							minWidth: 200,
							keepInView: true
						}).setContent(popupContent);

						if (feature.geometry.type === "Point" && feature.properties.description) {


							layer.bindPopup(popup);


							//layer.bindPopup(popupContent, {});
							//layer.popup().setContent(popupContent).openOn(map);
						}
					},

					/*
					 * When each feature is loaded from the GeoJSON this
					 * function is called. Here we create a cicle marker
					 * for the feature and style the circle marker.
					 */
					pointToLayer: function(feature, latlng) {
						return L.circleMarker(latlng, {
							// Stroke properties
							color: '#064067',
							opacity: 0.75,
							weight: 3,

							// Fill properties
							fillColor: '#064067',
							fillOpacity: 0.75,
							radius: 3
						});
					},

					lineToLayer: function(feature, latlng) {
						return L.circleMarker(latlng, {
							// Stroke properties
							color: '#064067',
							opacity: 0.75,
							weight: 4,

							// Fill properties
							fillColor: '#064067',
							fillOpacity: 0.75,
							radius: 4
						});
					}
				}).addTo(map);
			});
		});
	</script>


</body>

</html>