-
Notifications
You must be signed in to change notification settings - Fork 112
/
index.html
112 lines (86 loc) · 4.35 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<html>
<head>
<title>Map Layer</title>
<meta name="description" content="A map layer. Add more details about your specific map."/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/gh/jitbit/HtmlSanitizer@master/HtmlSanitizer.js"></script>
<link rel="stylesheet" href="map.css" />
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// define a function to apply proper case to text
String.prototype.toProperCase = function () {
return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};
// define a red icon
var greenIcon = new L.Icon({
iconUrl: 'https://cdn.jsdelivr.net/gh/pointhi/leaflet-color-markers@master/img/marker-icon-green.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25,41],
iconAnchor: [12, 32],
popupAnchor: [1, -34],
shadowSize: [25, 41]
});
// define a green icon
var redIcon = new L.Icon({
iconUrl: 'https://cdn.jsdelivr.net/gh/pointhi/leaflet-color-markers@master/img/marker-icon-red.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25,41],
iconAnchor: [12, 32],
popupAnchor: [1, -34],
shadowSize: [25, 41]
});
// using leafletjs.com and its GeoJSON
function onEachMapFeature(feature, layer) {
if (feature.properties) {
popuphtml = '<ul>';
// loop through each feature.properites of the map point
for (const [key, value] of Object.entries(feature.properties)) {
// if the value exists and isn't the default OBJECTID used in some systems
if (value && key != 'OBJECTID')
{
// regular expression for matching on a URL
urlRegEx = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
// render the pop-up content. Replace _ with space in the key and convert any URLs in the value to a link
// cast to strings to avoid strings with only numbers from breaking the replaceAll()
var popuphtml = popuphtml + "<li><strong>" + key.toString().replaceAll('_', ' ').toProperCase() + "</strong>: " + value.toString().replaceAll(urlRegEx, '<a href="$1">$1</a>') + "</li>"
}
} // end foreach feature.property
// sanitize the content
popuphtml = HtmlSanitizer.SanitizeHtml(popuphtml) + '</ul>';
// bind the pop-up HTML to the specific point data
layer.bindPopup(popuphtml);
// use a green icon marker, by default
layer.setIcon(greenIcon);
// if the point's title contains the string "CLOSED", use a red icon marker
if (feature.properties.title && feature.properties.title.includes("CLOSED")) {
layer.setIcon(redIcon);
} // end if, closed, used red marker
} // end if, feature.properties exist
} // end function, onEachMapFeature
// Read JSON to variable via http://stackoverflow.com/questions/8191238/how-can-i-set-json-into-a-variable-from-a-local-url
function readJSON(file) {
var request = new XMLHttpRequest();
request.open('GET', file, false);
request.send(null);
if (request.status == 200)
return request.responseText;
}
var map = L.map('map').setView({lon: -82.3985128, lat: 34.8507212}, 12);
// add the OpenStreetMap tiles
// this free server has limits, so don't use abuse this map tile server
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
// map.locate({setView: true, maxZoom: 16});
var jsonData = JSON.parse(readJSON('geojson.php'));
customLayer = L.geoJson(jsonData, {
onEachFeature: onEachMapFeature
}).addTo(map);
</script>
</body>
</html>