Skip to content

Add the select boxes for various map tile and search providers, in ad… #147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
xuxinhang wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add the select boxes for various map tile and search providers, in ad… #147

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 105 additions & 51 deletions iFakeLocation/Resources/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,67 +15,77 @@
<link rel="stylesheet" href="leaflet-geosearch.css">
</head>
<body>
<div class="p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<div class="p-1 px-md-1 mb-3 bg-white border-bottom">
<div class="d-flex flex-column align-items-center flex-md-row container">
<h4 class="my-0 mr-md-auto font-weight-normal">iFakeLocation</h4>
<a id="about-btn" class="btn btn-outline-primary pl-4 pr-4" href="#" title="iFakeLocation">About</a>
<a id="exit-btn" class="btn btn-outline-primary pl-4 pr-4 ml-4" href="#" title="iFakeLocation" onclick="window.open('', '_self', ''); window.close();">Exit</a>
<h5 class="my-0 mr-md-auto font-weight-normal">iFakeLocation</h5>
<a id="about-btn" class="btn-sm btn-outline-primary" href="#" title="iFakeLocation">About</a>
<a id="exit-btn" class="btn-sm btn-outline-danger ml-4" href="#" title="iFakeLocation" onclick="window.open('', '_self', ''); window.close();">Exit</a>
</div>
</div>
<div class="container">
<form>
<div class="mb-3">
<label for="device">Device Name:</label><br>
<div class="row">
<div class="col">
<select class="custom-select d-block w-100" id="device" required>
</select>
<div class="input-group">
<div class="input-group-prepend">
<label for="device" class="input-group-text" id="inputGroupFileAddon01">Device Name</label>
</div>
<div class="col-md-auto">
<button type="button" class="btn btn-primary pl-4 pr-4" id="refresh">Refresh</button>
<select class="custom-select form-control" id="device" required>
</select>
<div class="input-group-append">
<button type="button" class="btn btn-outline-success" id="refresh">Refresh</button>
</div>
</div>
</div>
</form>

<div id="map" style="width: 100%; height: 500px; max-height: 70vh"></div>

<p><small>Click and drag to move the map. Use the mouse wheel or +/- buttons to zoom. Double-click anywhere (or drag the existing marker) to manually select a location.</small></p>

<p><div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="mapProviderAlt">
<label class="form-check-label" for="flexCheckDefault">
Use alternative map tile server
</label>
</div></p>

<form id="locationSearch">
<div class="mb-3">
<div class="row align-items-center">
<div class="col-md-auto">
<label class="mb-0" for="device">Location Search:</label>
<ul class="list-group mb-3">
<li class="list-group-item">
<form id="locationSearch">
<div class="input-group">
<input type="text" class="form-control" id="query" placeholder="Location Search">
<div class="input-group-append">
<button type="button" class="btn btn-primary" id="search">Search</button>
</div>
</div>
<div class="col">
<input type="text" class="form-control" id="query">
</form>
</li>
<li class="list-group-item" style="padding: 0;">
<div id="map" style="width: 100%; height: 500px; max-height: 70vh"></div>
</li>
<li class="list-group-item">
<p><small>Click and drag to move the map. Use the mouse wheel or +/- buttons to zoom. Double-click anywhere (or drag the existing marker) to manually select a location.</small></p>
<details style="font-size: small;">
<summary><span class="text-primary">Use other map provider ...</span></summary>
<div class="row align-items-center">
<div class="col-md-auto">
<label>
<span>Map tile provider:</span>
<select id="mapTileProviderSelect"></select>
</label>
</div>
<div class="col-md-auto">
<label>
<span>Search provider:</span>
<select id="mapSearchProviderSelect"></select>
</label>
</div>
</div>
<div class="col-md-auto">
<button type="button" class="btn btn-primary pl-4 pr-4" id="search">Search</button>
</div>
</div>
</div>
</form>
</details>
</li>
</ul>

<div class="mb-3">
<div class="row align-items-center">
<div class="col">
<div class="col-8">
<button type="button" class="btn btn-primary w-100" data-toggle="popover" id="set-location" disabled>Set Fake Location</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary w-100" data-toggle="popover" id="stop-location" disabled>Stop Fake Location</button>
<div class="col-4">
<button type="button" class="btn btn-secondary w-100" data-toggle="popover" id="stop-location" disabled>Stop Fake Location</button>
</div>
</div>
</div>
</div>

<div id="messageModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
Expand Down Expand Up @@ -312,10 +322,39 @@ <h5 class="modal-title">About iFakeLocation</h5>
</script>
<script>
// Initialise the OSM provider for searching
var provider = new GeoSearch.OpenStreetMapProvider();
var provider = new GeoSearch.EsriProvider();
var map = L.map('map');
var marker = null;
var activeTileLayer = null;

var MAP_SEARCH_PROVIDERS = ['Esri', 'OpenStreetMap']
var MAP_TILE_PROVIDERS = []
for (var i of Object.keys(L.TileLayer.Provider.providers)) {
// not all OSM is suitable
var ALLOWED_PROVIDERS = [ 'Carto', 'Stamen', 'Esri', 'Wikimedia',
'OpenStreetMap', 'OpenTopoMap', 'GeoportailFrance', 'OneMapSG' ];
var variants = L.TileLayer.Provider.providers[i].variants
if (!ALLOWED_PROVIDERS.includes(i)) {
continue;
}
if (!variants) {
MAP_TILE_PROVIDERS.push(i);
continue;
}
for (var j of Object.keys(variants)) {
MAP_TILE_PROVIDERS.push(i + '.' + j)
}
}

$.each(MAP_SEARCH_PROVIDERS, function(i, name) {
$('#mapSearchProviderSelect').append(new Option(name, name));
});
$('#mapSearchProviderSelect').val(MAP_SEARCH_PROVIDERS[1])
$.each(MAP_TILE_PROVIDERS, function(i, name) {
$('#mapTileProviderSelect').append(new Option(name, name));
});
$('#mapTileProviderSelect').val(MAP_TILE_PROVIDERS[0])

// Setup double-click marker placement
map.on('dblclick', function(e) {
if (!marker)
Expand All @@ -325,11 +364,22 @@ <h5 class="modal-title">About iFakeLocation</h5>
if (devices && devices.length)
$('#set-location').removeAttr('disabled');
});

function getMapSearchProvider() {
var k = $('#mapSearchProviderSelect').val() + 'Provider';
var f = [];
if (k in GeoSearch) {
return new GeoSearch[k]()
} else {
alert('Unknown search provider: ' + k)
}
}

function searchLocation() {
if (!$('#query').val())
return;
$('#search').attr('disabled', true);
var provider = getMapSearchProvider();
provider.search({query: $('#query').val()}).then(function(r) {
$('#search').removeAttr('disabled');
if (r.length) {
Expand All @@ -355,22 +405,26 @@ <h5 class="modal-title">About iFakeLocation</h5>
map.doubleClickZoom.disable();

// Set the OSM basemap layer
var defaultProvider = function() {
L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
};
defaultProvider();
function updateMapTileProvider() {
setMapTileProvider($('#mapTileProviderSelect').val());
}

function setMapTileProvider(name) {
if (map.hasLayer(activeTileLayer)) {
map.removeLayer(activeTileLayer)
activeTileLayer = null
}
activeTileLayer = L.tileLayer.provider(name)
map.addLayer(activeTileLayer);
}

// Provider toggle for OSM basemap layer (ie. due to rate limiting or IP block)
$('#mapProviderAlt').change(function() {
if (this.checked) {
L.tileLayer('https://tile.osm.ch/switzerland/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
} else {
defaultProvider();
}
$('#mapTileProviderSelect').change(function() {
updateMapTileProvider();
});

updateMapTileProvider();

// Initialise the map to the user's home country
fetch('/home_country').then(function(e) {
return e.text()
Expand Down