Infrastructure/visualizer-demos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial

Browse source
This commit is contained in:
John Doe 2021-04-29 00:05:01 -04:00
commit 8f98aa225e
7 changed files with 669 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

138
geolocation/index.html Normal file
View file

@ -0,0 +1,138 @@
<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>