CINXE.COM
Cycling Traffic Stress
<!DOCTYPE html> <html> <head> <title>Cycling Traffic Stress</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <!-- Font Awsome (legend and locate icons)--> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- For checkboxes icons --> <link rel="stylesheet" href="css/all.css"> <!-- Locate leaflet plugin --> <link rel="stylesheet" href="css/L.Control.Locate.min.css" /> <!-- Leaflet --> <!-- popup click for markers is broken in Safari on Mac in Leaflet 1.7.1 --> <!-- // ref https://github.com/Leaflet/Leaflet/issues/7255 --> <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" /> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" /> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="anonymous" /> --> <!-- My custom legend stuff --> <link rel="stylesheet" href="css/style.css"> <style> body { padding: 0; margin: 0; } html, body, #map { height: 100%; width: 100%; } </style> </head> <body> <div id="map"></div> <!-- Leaflet --> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.0/leaflet.js" integrity="sha512-hpMvVJdw+9kBp8UQSq1njqeg83Sq26LIyUuoyayajxRqCjZm4gsRGuanShvtDr8YHugnrxopaqXxS5rHDCrJ/Q==" crossorigin="anonymous"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="anonymous"></script> --> <!-- Locate Leaflet plugin --> <!-- https://github.com/domoritz/leaflet-locatecontrol--> <script src="lib/L.Control.Locate.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.73.0/dist/L.Control.Locate.min.js" charset="utf-8"></script> --> <!-- Ajax Leaflet plugin --> <!-- https://github.com/calvinmetcalf/leaflet-ajax --> <script src="lib/leaflet.ajax.min.js"></script> <script src="src/stressmap.js"></script> </body> </html>