Skip to content

Add my location button and enhance map geolocation functionality #26

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

Merged
mmathieum merged 9 commits into from
Aug 28, 2026
Merged

Add my location button and enhance map geolocation functionality #26

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9677943
Add my location button and enhance map geolocation functionality
mmathieum Aug 27, 2026
1d4a52a
wip
mmathieum Aug 27, 2026
275e7f4
wip
mmathieum Aug 27, 2026
1fd90c9
Merge branch 'master' into mm/index_plus
mmathieum Aug 28, 2026
43f7150
Potential fix for pull request finding
mmathieum Aug 28, 2026
d40e4d3
Potential fix for pull request finding
mmathieum Aug 28, 2026
ed75e71
Potential fix for pull request finding
mmathieum Aug 28, 2026
3e49261
Add fallback to center map on device location if geolocation request …
mmathieum Aug 28, 2026
0451549
formatting
mmathieum Aug 28, 2026
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
140 changes: 116 additions & 24 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
width: 32px;
height: 32px;
display: block;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
}

.top-left {
Expand All @@ -43,7 +44,7 @@
font-size: 22px;
font-weight: 700;
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.85), 0 6px 10px rgba(0, 0, 0, 0.55);
line-height: 1;
}

Expand Down Expand Up @@ -77,6 +78,34 @@
height: 44px;
}

.my-location-btn {
position: absolute;
right: 8px;
bottom: 24px;
z-index: 2;
width: 28px;
height: 28px;
border: 1px solid #FFFFFF;
border-radius: 14px;
background: #000000;
color: #FFFFFF;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0.3;
}

.my-location-btn .material-icons {
font-size: 17px;
}

.my-location-btn:hover,
.my-location-btn:focus-visible {
opacity: 0.7;
}
Comment thread
mmathieum marked this conversation as resolved.

#map {
width: 100%;
height: 100%;
Expand All @@ -97,6 +126,7 @@
<script type="text/javascript">
var DEFAULT_LAT = 45.5230433; // Montreal office
var DEFAULT_LNG = -73.5814131; // Montreal office
var currentMap = null;

window.addEventListener('load', init);

Expand All @@ -116,10 +146,55 @@
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
currentMap = map;
setupMyLocationButton();
loadMarkers(map);
centerMapOnDeviceLocation(map);
}

function setupMyLocationButton() {
var btn = document.getElementById('my-location-btn');
if (!btn) {
return;
}
btn.addEventListener('click', function () {
if (!currentMap) {
return;
}
requestDeviceLocation(currentMap);
});
}

function requestDeviceLocation(map) {
if (!navigator.geolocation) {
centerMapOnDeviceLocationIpwhois(map).catch(function () {
setDefaultMapCenter(map);
});
return;
}
navigator.geolocation.getCurrentPosition(
function (position) {
var lat = Number(position.coords && position.coords.latitude);
var lng = Number(position.coords && position.coords.longitude);
if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
console.warn('Navigator geolocation returned invalid coordinates');
centerMapOnDeviceLocationIpwhois(map).catch(function () {
setDefaultMapCenter(map);
});
return;
}
Comment thread
Copilot marked this conversation as resolved.
map.setCenter(new google.maps.LatLng(lat, lng));
},
function (error) {
console.warn('Navigator geolocation request failed:', error);
centerMapOnDeviceLocationIpwhois(map).catch(function () {
setDefaultMapCenter(map);
});
},
Comment thread
coderabbitai[bot] marked this conversation as resolved.
{ enableHighAccuracy: false, timeout: 5000, maximumAge: 0 }
);
}

function centerMapOnDeviceLocation(map) {
if (navigator.geolocation) {
centerMapOnDeviceLocationNavigator(map)
Expand Down Expand Up @@ -164,28 +239,38 @@
}

function centerMapOnDeviceLocationNavigator(map) {
return new Promise(function (resolve, reject) {
if (!navigator.geolocation) {
reject(new Error('navigator.geolocation is unavailable'));
return;
if (!navigator.geolocation) {
return Promise.reject(new Error('navigator.geolocation is unavailable'));
}

var permissionCheck = navigator.permissions && navigator.permissions.query
? navigator.permissions.query({ name: 'geolocation' })
: Promise.resolve({ state: 'prompt' });

return permissionCheck.then(function (permissionStatus) {
if (permissionStatus && permissionStatus.state === 'denied') {
throw new Error('Geolocation permission is denied');
}
navigator.geolocation.getCurrentPosition(
function (position) {
var lat = Number(position.coords && position.coords.latitude);
var lng = Number(position.coords && position.coords.longitude);
if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
reject(new Error('navigator geolocation returned invalid coordinates'));
return;
}
map.setCenter(new google.maps.LatLng(lat, lng));
resolve(true);
},
function (error) {
console.warn('Navigator geolocation failed:', error);
reject(error);
},
{ enableHighAccuracy: false, timeout: 5000, maximumAge: 3600000 }
);

return new Promise(function (resolve, reject) {
navigator.geolocation.getCurrentPosition(
function (position) {
var lat = Number(position.coords && position.coords.latitude);
var lng = Number(position.coords && position.coords.longitude);
if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
reject(new Error('navigator geolocation returned invalid coordinates'));
return;
}
map.setCenter(new google.maps.LatLng(lat, lng));
resolve(true);
},
function (error) {
console.warn('Navigator geolocation failed:', error);
reject(error);
},
{ enableHighAccuracy: false, timeout: 5000, maximumAge: 3600000 }
);
});
});
}

Expand Down Expand Up @@ -273,7 +358,9 @@
}

function buildInfoWindowContent(module) {
var title = escapeHtml(module.name || module.pkg || 'MonTransit');
var isBetaPrivate = (module.store || '').toString().trim() === 'beta-private';
var baseTitle = (module.name || module.pkg || 'MonTransit');
var title = escapeHtml(baseTitle + (isBetaPrivate ? ' [BETA]' : ''));
var location = escapeHtml(module.location || '');
var pkg = (module.pkg || '').toString().trim();
var repo = (module.repo || '').toString().trim();
Expand All @@ -294,7 +381,9 @@
+ (location ? '<span style="display:block;margin-top:4px;margin-bottom:8px;font-size:12px;color:#5f6368;">' + location + '</span>' : '')
+ '</div>';
}
var playStoreUrl = 'https://play.google.com/store/apps/details?id=' + encodeURIComponent(pkg);
var playStoreUrl = isBetaPrivate
? 'https://play.google.com/apps/testing/' + encodeURIComponent(pkg)
: 'https://play.google.com/store/apps/details?id=' + encodeURIComponent(pkg);
return ''
+ '<div style="font-family:Roboto,Arial,sans-serif;max-width:256px;text-align:center;">'
+ iconHtml
Expand Down Expand Up @@ -347,6 +436,9 @@
<img class="github-logo" src="img/gitHub_invertocat_white_clearspace.png" alt="GitHub" />
</a>
</div>
<button id="my-location-btn" class="my-location-btn" type="button" aria-label="Use my location" title="Use my location">
<span class="material-icons" aria-hidden="true">my_location</span>
</button>
</body>

</html>