Skip to content

Commit

Permalink
feat: added Directions sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaelsimon
gaelsimon committed Mar 20, 2024
1 parent 0286c58 commit e034309
Show file tree
Hide file tree
Showing 5 changed files with 1,175 additions and 0 deletions.
14 changes: 14 additions & 0 deletions samples/directions-advanced/directions-advanced.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"title": "Directions Service - Advanced",
"description": "Using the Directions Service to get the distance and duration between two places. Add Waypoints to the route.",
"category": "Services",
"callback": "initMap",
"tag": "directions_advanced",
"name": "directions-advanced",
"pagination": {
"data": "mode",
"size": 1,
"alias": "mode"
},
"permalink": "samples/{{ page.fileSlug }}/{{mode}}/{% if mode == 'jsfiddle' %}demo{% else %}index{% endif %}.{{ page.outputFileExtension }}"
}
212 changes: 212 additions & 0 deletions samples/directions-advanced/index.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
{% extends '../../src/_includes/layout.njk' %}
@include meta.load-css("../../shared/scss/_sidebar.scss");

{% block html %}
<!-- [START woosmap_{{ tag }}_div] -->
<div id="container">
<div id="sidebar">
<div id="innerWrapper">
<div class="sectionHeader"><span>Travel mode</span></div>
<div id="travelModeContainer">
<div class="travelModeSelector">
<div data-travelmode="DRIVING" class="travelMode travelMode__selected">
<button role="radio">
<img alt="DRIVING" class="iconTravelMode iconTravelMode__DRIVING"
src="https://images.woosmap.com/directions/drive_black.png">
<img alt="DRIVING" class="iconTravelMode iconTravelMode__DRIVING__selected"
src="https://images.woosmap.com/directions/drive_selected.png">
</button>
</div>
<div data-travelmode="WALKING" class="travelMode">
<button role="radio">
<img alt="WALKING" class="iconTravelMode iconTravelMode__WALKING"
src="https://images.woosmap.com/directions/walk_black.png">
<img alt="WALKING" class="iconTravelMode iconTravelMode__WALKING__selected"
src="https://images.woosmap.com/directions/walk_selected.png">
</button>
</div>
<div data-travelmode="CYCLING" class="travelMode">
<button role="radio">
<img alt="CYCLING" class="iconTravelMode iconTravelMode__CYCLING"
src="https://images.woosmap.com/directions/bicycle_black.png">
<img alt="CYCLING" class="iconTravelMode iconTravelMode__CYCLING__selected"
src="https://images.woosmap.com/directions/bicycle_selected.png">
</button>
</div>
</div>
</div>
<div class="sectionHeader"><span>Origin</span>
<div aria-label="Set Origin"
class="addLocation addLocation__origins">{% svgIcon 'location.svg' %}
<div>Set origin</div>
</div>
</div>
<div class="directionsOptions">
<ol id="origin" class="customCounter customCounter__origin"></ol>
</div>
<div class="sectionHeader"><span>Destination</span>
<div aria-label="Set Destination"
class="addLocation addLocation__destinations">{% svgIcon 'location.svg' %}
<div>Set destination</div>
</div>
</div>
<div class="directionsOptions">
<ol id="destination" class="customCounter customCounter__destination"></ol>
</div>
<div class="sectionHeader"><span>Waypoints</span>
<div aria-label="Add Waypoint"
class="addLocation addLocation__waypoints">{% svgIcon 'add-location.svg' %}
<div>Add waypoint</div>
</div>
</div>
<div class="directionsOptions">
<ol id="waypoints" class="customCounter customCounter__waypoints">
</ol>
</div>
<div class="sectionHeader"><span>Options</span></div>
<div class="directionsOptions">
<div class="directionsOptions__list">
<div class="directionsOptions__content"><span class="directionsOptions__header">Avoid</span>
<div class="directionsOptions__input">
<input class="avoid" id="avoidHighways" aria-label="Avoid highways" name="avoidParams"
type="checkbox"
value="highways" disabled>
<label for="avoidHighways">Highways</label></div>
<div class="directionsOptions__input">
<input class="avoid" id="avoidTolls" aria-label="Avoid tolls" name="avoidParams"
type="checkbox"
value="tolls" disabled>
<label for="avoidTolls">Tolls</label></div>
<div class="directionsOptions__input">
<input class="avoid" id="avoidFerries" aria-label="Avoid ferries" name="avoidParams"
type="checkbox"
value="ferries" disabled>
<label for="avoidFerries">Ferries</label></div>
</div>
</div>
<div class="directionsOptions__list">
<div class="directionsOptions__content"><span
class="directionsOptions__header">Distance units</span>
<div class="directionsOptions__input">
<input id="unitkm" aria-label="Unit METRIC" name="distanceUnits" type="radio"
value="METRIC"
checked="">
<label for="unitkm">km</label></div>
<div class="directionsOptions__input">
<input id="unitmiles" aria-label="Unit IMPERIAL" name="distanceUnits" type="radio"
value="IMPERIAL">
<label for="unitmiles">miles</label></div>
</div>
</div>
</div>
<div class="directionsOptions">
<div class="directionsOptions__list">
<div class="directionsOptions__content"><span
class="directionsOptions__header">Details</span>
<div class="directionsOptions__input">
<input id="none" aria-label="None" name="details" type="radio"
value="None">
<label for="none">None</label>
</div>
<div class="directionsOptions__input">
<input id="full" aria-label="Full" name="details" type="radio"
value="full" checked="">
<label for="full">Full</label>
</div>
</div>
</div>
<div class="directionsOptions__list">
<div class="directionsOptions__content"><span
class="directionsOptions__header">Method</span>
<div class="directionsOptions__input">
<input id="fastest" aria-label="Fastest" name="method" type="radio" value="time"
checked="" disabled>
<label for="fastest">fastest</label></div>
<div class="directionsOptions__input">
<input id="shortest" aria-label="shortest" name="method" type="radio"
value="distance" disabled>
<label for="shortest">shortest</label></div>
</div>
</div>
</div>
<div class="directionsOptions">
<div class="directionsOptions__list">
<div class="directionsOptions__content"><span
class="directionsOptions__header">Departure time</span>
<div class="directionsOptions__input">
<input id="empty" aria-label="Empty" name="departureTime" type="radio"
value="empty" checked="">
<label for="empty">Not Define</label></div>
<div class="directionsOptions__input">
<input id="now" aria-label="Now" name="departureTime" type="radio" value="now">
<label for="now">Now</label></div>
<div class="directionsOptions__input">
<input id="datetime" aria-label="Datetime" name="departureTime" type="radio"
value="datetime">
<input id="departure-time" name="departure-time" type="datetime-local"/>
</div>
</div>
</div>
<div class="directionsOptions__list">
<div class="directionsOptions__content"><span
class="directionsOptions__header">Language</span>
<div class="directionsOptions__input">
<select id="language" disabled>
<option value="en">English</option>
<option value="fr">French</option>
<option value="it">Italian</option>
<option value="es">Spanish</option>
<option value="de">Deutsch</option>
<option value="nl">Dutch</option>
<option value="ja">Japanese</option>
<option value="zh">Chinese</option>
<option value="ru">Russian</option>
</select>
</div>
</div>
</div>
</div>
<div class="directionsOptions">
<div class="directionsOptions__list">
<div class="directionsOptions__content"><span
class="directionsOptions__header">Alternatives</span>
<div class="directionsOptions__input">
<input id="alternativesTrue" aria-label="Yes" name="alternatives" type="radio"
value="true" checked="">
<label for="true">Yes</label>
</div>
<div class="directionsOptions__input">
<input id="alternativesFalse" aria-label="No" name="alternatives" type="radio"
value="false">
<label for="false">No</label>
</div>
</div>
</div>
<div class="directionsOptions__list">
<div class="directionsOptions__content">
<span
class="directionsOptions__header">Waypoints</span>
<div class="directionsOptions__input">
<input id="optimizeWaypoints" aria-label="Optimize Waypoints" name="optimizeWaypoints"
type="checkbox" disabled>
<label for="optimizeWaypoints">Optimize</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mapContainer">
<div class="linear-progress hide">
<div class="progress"></div>
</div>
<div id="map"></div>
<div id="infoMessage">Drag markers to update route</div>
<div class="tableContainer">
</div>
</div>

</div>

<!-- [END woosmap_{{ tag }}_div] -->
{% endblock %}
Loading

0 comments on commit e034309

Please sign in to comment.