138 lines
6.4 KiB
HTML
138 lines
6.4 KiB
HTML
|
<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 © Esri — 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>
|