-
Notifications
You must be signed in to change notification settings - Fork 7
/
leaflet.reachability_example.html
143 lines (124 loc) · 6.94 KB
/
leaflet.reachability_example.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
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<meta name="keywords" content="reachability, isochrone, isochones, isoline, isolines, openrouteservice, leaflet, plugin, trafford, data, lab, trafford data lab, trafforddatalab"/>
<meta name="description" content="Demo of the Trafford Data Lab reachability plugin for Leaflet maps using the Isochrones Service API from openrouteservice."/>
<title>Trafford Data Lab: Reachability plugin demo</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/trafforddatalab/leaflet.reachability@v2.0.1/leaflet.reachability.min.css"/>
<style>
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
.mapFullScreen
{
position: absolute;
width: 100%;
height: 100%;
}
/* Make the icons larger in the user interface */
.reachability-control-settings-button
{
font-size: 22px;
}
</style>
</head>
<body>
<div id="map" class="mapFullScreen"></div>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/gh/trafforddatalab/leaflet.reachability@v2.0.1/leaflet.reachability.min.js"></script>
<script>
// Example function to style the isoline polygons when they are returned from the API call
function styleIsolines(feature) {
// NOTE: You can do some conditional styling by reading the properties of the feature parameter passed to the function
return {
color: '#0073d4',
opacity: 0.5,
fillOpacity: 0.2
};
}
// Example function to style the isoline polygons when the user hovers over them
function highlightIsolines(e) {
// NOTE: as shown in the examples on the Leaflet website, e.target = the layer the user is interacting with
var layer = e.target;
layer.setStyle({
fillColor: '#ffea00',
dashArray: '1,13',
weight: 4,
fillOpacity: '0.5',
opacity: '1'
});
}
// Example function to reset the style of the isoline polygons when the user stops hovering over them
function resetIsolines(e) {
// NOTE: as shown in the examples on the Leaflet website, e.target = the layer the user is interacting with
var layer = e.target;
reachabilityControl.isolinesGroup.resetStyle(layer);
}
// Example function to display information about an isoline in a popup when the user clicks on it
function clickIsolines(e) {
// NOTE: as shown in the examples on the Leaflet website, e.target = the layer the user is interacting with
var layer = e.target;
var props = layer.feature.properties;
var popupContent = 'Mode of travel: ' + props['Travel mode'] + '<br />Range: 0 - ' + props['Range'] + ' ' + props['Range units'] + '<br />Area: ' + props['Area'] + ' ' + props['Area units'] + '<br />Population: ' + props['Population'];
if (props.hasOwnProperty('Reach factor')) popupContent += '<br />Reach factor: ' + props['Reach factor'];
layer.bindPopup(popupContent).openPopup();
}
// Example function to create a custom marker at the origin of the isoline groups
function isolinesOrigin(latLng, travelMode, rangeType) {
return L.circleMarker(latLng, { radius: 4, weight: 2, color: '#0073d4', fillColor: '#fff', fillOpacity: 1 });
}
// Create the Leaflet map object
var map = L.map('map', { center: [53.4189, -2.33], zoom: 12, minZoom: 10, zoomDelta: 0.25, zoomSnap: 0 });
// Create a Leaflet tile layer object
var baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
minZoom: 3,
maxZoom: 19
}).addTo(map);
// Add the reachability plugin
var reachabilityControl = L.control.reachability({
// add settings here
apiKey: '5b3ce3597851110001cf6248c9f85cae50384963b985be5b9d179444', // PLEASE REGISTER WITH OPENROUTESERVICE FOR YOUR OWN KEY!
styleFn: styleIsolines,
mouseOverFn: highlightIsolines,
mouseOutFn: resetIsolines,
clickFn: clickIsolines,
markerFn: isolinesOrigin,
expandButtonContent: '',
expandButtonStyleClass: 'reachability-control-expand-button fa fa-bullseye',
collapseButtonContent: '',
collapseButtonStyleClass: 'reachability-control-collapse-button fa fa-caret-up',
drawButtonContent: '',
drawButtonStyleClass: 'fa fa-pencil',
deleteButtonContent: '',
deleteButtonStyleClass: 'fa fa-trash',
distanceButtonContent: '',
distanceButtonStyleClass: 'fa fa-road',
timeButtonContent: '',
timeButtonStyleClass: 'fa fa-clock-o',
travelModeButton1Content: '',
travelModeButton1StyleClass: 'fa fa-car',
travelModeButton2Content: '',
travelModeButton2StyleClass: 'fa fa-bicycle',
travelModeButton3Content: '',
travelModeButton3StyleClass: 'fa fa-male',
travelModeButton4Content: '',
travelModeButton4StyleClass: 'fa fa-wheelchair-alt'
}).addTo(map);
// Setup error handlers in case there is a problem when calling the API
map.on('reachability:error', function () {
alert('Unfortunately there has been an error calling the API.\nMore details are available in the console.');
});
map.on('reachability:no_data', function () {
alert('Unfortunately no data was received from the API.\n');
});
</script>
</body>
</html>