visualizer-demos/geolocation/index.html

138 lines
6.4 KiB
HTML
Raw Normal View History

2021-04-29 04:05:01 +00:00
<html>
<head>
<title>Map Demo</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
*{
font-family: Arial, Helvetica, sans-serif;
}
body{
margin: 0px;
}
.header{
font-weight: bold;
font-size: 2.0em;
}
#mapid {
width: 600px;
float: left;
height: 600px;
}
#controls {
padding-left: 10px;
display: flex;
align-items: center;
height: 600px;
width: 600px;
}
</style>
</head>
<body>
<div id="visualize_geolocation">
<div id="mapid"></div>
<div id="controls">
<div>
<span class="header">Visualizing Geolocation</span><br>
<p>
Most people are at least somewhat familiar with the notion of geolocation of users by communications networks.
However, this can be hard to visualize, and the differences between the geolocation capabilities of various types of network
(which are often quite substantial) are often ignored.
</p>
<p>
This tool allows you to visualize the accuracy with which a user's location can be determined (shown as a red circle), using
a map of real-world cities for scale. We hope this makes clear why we believe FemtoStar's geolocation-resistance to be so important.
</p>
<b>Pick a city</b><br>
<input type="radio" id="button_nyc" name="city" onclick="setCity('nyc');" checked>
<label for="button_nyc">New York City, USA</label><br>
<input type="radio" id="button_rio" name="city" onclick="setCity('rio');">
<label for="button_rio">Rio de Janeiro, Brazil</label><br>
<input type="radio" id="button_berlin" name="city" onclick="setCity('berlin');">
<label for="button_berlin">Berlin, Germany</label><br>
<input type="radio" id="button_capetown" name="city" onclick="setCity('capetown');">
<label for="button_capetown">Cape Town, South Africa</label><br>
<input type="radio" id="button_tokyo" name="city" onclick="setCity('tokyo');">
<label for="button_tokyo">Tokyo, Japan</label><br>
<input type="radio" id="button_sydney" name="city" onclick="setCity('sydney');">
<label for="button_sydney">Sydney, Australia</label>
<br><br>
<b>Pick a network type</b><br>
<input type="radio" id="button_gps" name="network" onclick="setNetwork('gps');">
<label for="button_gps">Network with GPS reporting (incl. most geostationary satellite networks)</label><br>
<input type="radio" id="button_cellular_urban" name="network" onclick="setNetwork('cellular_urban');" checked>
<label for="button_cellular_urban">Cellular network (urban area, no GPS reporting)</label><br>
<input type="radio" id="button_cellular_rural" name="network" onclick="setNetwork('cellular_rural');">
<label for="button_cellular_rural">Cellular network (rural area, no GPS reporting)</label><br>
<input type="radio" id="button_satellite" name="network" onclick="setNetwork('satellite');">
<label for="button_satellite">Traditional satellite network (non-geostationary orbit, no GPS reporting)</label><br>
<input type="radio" id="button_femtostar" name="network" onclick="setNetwork('femtostar');">
<label for="button_femtostar">FemtoStar</label>
</div>
</div>
</div>
<script>
/* Tileservers that work well:
https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}
*/
var tileserver = "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
var set_city = "nyc";
var set_network = "cellular_urban";
let cities = {
"nyc": [40.758896, -73.985130],
"rio": [-22.91141, -43.16921],
"berlin": [52.51938, 13.40884],
"capetown": [-33.91496, 18.42453],
"tokyo": [35.67671, 139.75294],
"sydney": [-33.85907, 151.20810]
}
let networks = {
"gps": {"accuracy": 5, "zoom": 18},
"cellular_urban": {"accuracy": 60, "zoom": 17},
"cellular_rural": {"accuracy": 400, "zoom": 14},
"satellite": {"accuracy": 750, "zoom": 13},
"femtostar": {"accuracy": 300000, "zoom": 4}
}
function setNetwork(new_network){
set_network = new_network;
circle.setRadius(networks[set_network].accuracy);
mymap.flyTo(cities[set_city], networks[set_network].zoom);
}
function setCity(new_city){
set_city = new_city;
circle.setRadius(networks[set_network].accuracy);
circle.setLatLng(cities[set_city]);
mymap.flyTo(cities[set_city], networks[set_network].zoom, {
animate: false,
duration: 6
});
}
document.getElementById("button_cellular_urban").checked = true;
document.getElementById("button_nyc").checked = true;
var mymap = L.map('mapid').setView([40.758896, -73.985130], 17);
L.tileLayer(tileserver, {
maxZoom: 18,
attribution: 'Map data &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
id: 'mapbox/streets-v11'
}).addTo(mymap);
var circle = L.circle([40.758896, -73.985130], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 60
}).addTo(mymap);
</script>
</body>
</html>