Skip to content

✨ Feature: Added Dynamic Routing via URL-Based Route Sharing #50

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
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

✨ Feature: Added Dynamic Routing via URL-Based Route Sharing #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fb13f2c
issue#42-Making Find Distance card more engaging
Shayan12456 Apr 6, 2025
86eefc0
issue#42-Making Find Distance card more engaging
Shayan12456 Apr 6, 2025
2bf3306
issue#45-Add LocalStorage-based Search History for Place Search Input
Shayan12456 Apr 7, 2025
7ec1f6d
issue-47-bookmark-favorite-locations
Shayan12456 Apr 7, 2025
8cde924
issue#49-dynamic-routing
Shayan12456 Apr 7, 2025
7bceb0e
issue#49-dynamic-routing
Shayan12456 Apr 7, 2025
b1edbb0
issue-49: Implement URL-Based Route Sharing (dynamic routing)
Shayan12456 Apr 7, 2025
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
62 changes: 37 additions & 25 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,43 +85,55 @@ <h3>coordinates:</h3>
<span id="lng"></span>
</span>
</div>

<br>
<!-- Box that appears on icon click -->
<div class="box" id="box" tabindex="0" aria-label="distance finder opened">
<button class="fas fa-times-circle" id="closeBtn" aria-label="close distance finder" tabindex="0"
<button class="fas fa-times-circle close-btn" id="closeBtn" aria-label="close distance finder"
onclick="notifySreenReader(`distance finder closed`)"></button>
<h1>Find Distance</h1>


<h1 class="distance-title">
<i class="fas fa-route"></i> Find Distance
</h1>

<p class="distance-subtext">Measure the road distance and time between two locations.</p>

<div class="box-input">
<span><i class="fas fa-circle"></i></span>
<div class="dist-input" id="c-beginning"><input type="text" tabindex="0" id="beginning"
placeholder="Enter Starting point" aria-label="type place and press enter" />
<button tabindex="0" aria-label="click to see suggessions" id="b-searchbutton"><i
class="fa fa-search"></i></button>
<label for="beginning"><i class="fas fa-circle icon-start"></i></label>
<div class="dist-input" id="c-beginning">
<input type="text" id="beginning" placeholder="Enter Starting point"
aria-label="Type starting place and press enter" />
<button aria-label="Search starting location" id="b-searchbutton"><i class="fa fa-search"></i></button>
</div>
</div>



<div class="box-input">
<span><i class="fas fa-map-marker-alt"></i></span>
<div class="dist-input" id="c-destination"><input tabindex="0" type="text" id="destination"
placeholder="Enter Destination" aria-label="type place and press enter" />
<button id="d-searchbutton" tabindex="0" aria-label="click to see suggessions"><i
class="fa fa-search"></i></button>
<label for="destination"><i class="fas fa-map-marker-alt icon-end"></i></label>
<div class="dist-input" id="c-destination">
<input type="text" id="destination" placeholder="Enter Destination"
aria-label="Type destination and press enter" />
<button aria-label="Search destination location" id="d-searchbutton"><i class="fa fa-search"></i></button>
</div>
</div>

<button class="fas fa-map-marked-alt" aria-hidden="true" title="Choose from map" id="fromMap"
tabindex="-1"></button>
<button class="fas fa-arrow-circle-right" tabindex="0" id="find" title="Find Distance"
aria-label=" click to Find distance"></button>

<div class="button-row">
<button class="fas fa-map-marked-alt" title="Choose from map" id="fromMap" aria-label="Choose from map"></button>
<button class="find-btn" id="find" title="Find Distance" aria-label="Click to find distance">
<i class="fas fa-route"></i>
</button>
</div>

<div tabindex="0" id="distanceResult" aria-live="polite">
Distance : <span id="dist"></span><br />
Time : <span id="time"></span>
<strong>Distance:</strong> <span id="dist"></span><br />
<strong>Estimated Time:</strong> <span id="time"></span>
<button id="copy-route-link-btn" style="display: none; color: white; margin-left: 150px; padding: 5px 8px; font-size: 12px; cursor: pointer;">
<i class="fas fa-link"></i> Copy Route Link
</button>
</div>
<p style="font-size: 10px;" class="text-center"><br>Directions courtesy of <a
href="https://gis-ops.com/global-open-valhalla-server-online/" target="_blank">Valhalla (FOSSGIS)</a></p>

<p class="source-credit">Directions courtesy of <a href="https://gis-ops.com/global-open-valhalla-server-online/"
target="_blank">Valhalla (FOSSGIS)</a></p>
</div>


<div tabindex="0" aria-label="focused on map. use arrow keys to navigate" id="map"></div>

Expand Down
178 changes: 174 additions & 4 deletions public/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,12 +274,23 @@ header button{
margin: 3.5px;
background-color: #efeaea;
border-radius: 3px;
padding: 2px;
padding: 8px;
font-size: 13px;
display: flex;

align-items: center;
}
#search-results li:first-child {
background-color: transparent;
border-bottom: 1px solid #ddd;
margin-bottom: 8px;
padding: 8px;
}
#search-results li:hover{
#search-results li .fa-history {
color: #666;
margin-right: 8px;
font-size: 14px;
}
#search-results li:hover:not(:first-child) {
background-color: rgb(223, 242, 236);
}

Expand Down Expand Up @@ -461,4 +472,163 @@ footer {
align-items: right;
float: right;
margin-left: 10px;
}
}

.box .box-input {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-left: 5px;
padding-right: 10px;
}

.box-input span i {
font-size: 18px;
margin-right: 10px;
color: #6F0E0E;
}

.dist-input {
display: flex;
align-items: center;
flex: 1;
background-color: white;
border: 2px solid black;
border-radius: 10px;
padding: 5px 10px;
}

.dist-input input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
background-color: transparent;
}

.dist-input button {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: #777;
margin-left: 5px;
}

#bookmarks-btn {
display: flex;
align-items: center;
gap: 5px;
margin: 5px 0;
padding: 8px 12px;
background-color: #fff;
border: 2px solid #000;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
color: #333;
transition: all 0.2s ease;
}

#bookmarks-btn:hover {
background-color: #f0f0f0;
}

#bookmarks-btn:focus {
outline: 2px solid #6F0E0E;
outline-offset: 2px;
}

.bookmark-btn {
background: none;
border: none;
padding: 5px;
cursor: pointer;
color: #666;
margin-right: 8px;
}

.bookmark-btn:hover {
color: #f1c40f;
}

.bookmark-btn.active {
color: #f1c40f;
}

.bookmark-item {
display: flex !important;
justify-content: space-between;
align-items: center;
padding: 8px !important;
}

.bookmark-name {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.bookmark-name i {
color: #6F0E0E;
}

.bookmark-actions {
display: flex;
gap: 8px;
}

.bookmark-actions button {
background: none;
border: none;
padding: 5px;
cursor: pointer;
color: #666;
transition: color 0.2s ease;
}

.bookmark-actions .navigate-btn:hover {
color: #27ae60;
}

.bookmark-actions .delete-btn:hover {
color: #e74c3c;
}

.bookmark-actions .share-btn:hover {
color: #3498db;
}

.result-content {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#search-results li {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
margin: 3.5px;
background-color: #efeaea;
border-radius: 3px;
font-size: 13px;
cursor: pointer;
}

#search-results li:first-child {
background-color: transparent;
border-bottom: 1px solid #ddd;
margin-bottom: 8px;
padding: 8px;
}

#search-results li:hover:not(:first-child) {
background-color: rgb(223, 242, 236);
}
2 changes: 1 addition & 1 deletion server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const mimeTypes = {
};

const server = http.createServer((req, res) => {
let filePath = '.' + req.url;
let filePath = '.' + req.url.split('?')[0]; // ✅ Strip query string
if (filePath == './') filePath = './public/index.html'; // Default to index.html

const extname = String(path.extname(filePath)).toLowerCase();
Expand Down
Loading