Merge pull request #140 from chargetrip/fix/stations-around

Fix/stations around

Author: Wouter125

examples/2.stations/1.station-list/client.js

@@ -26,11 +26,11 @@ const client = createClient({
 /**
  * In this example we fetch the closest stations within a radius of 3000 meters
  */
-export const getStations = ({ distance = 3000, power = [], amenities = [] }) => {
+export const getStations = ({ distance = 7000, power = [], amenities = [] }) => {
   return client
     .query(getStationsAroundQuery, {
       query: {
-        location: { type: 'Point', coordinates: [10.197422, 56.171395] },
+        location: { type: 'Point', coordinates: [9.941440543222434, 54.974349949816336] },
         distance,
         power,
         amenities,

examples/2.stations/1.station-list/interface.js

@@ -8,7 +8,7 @@ import { showCenter, showStations } from './map';
  */
 const powers = {
   slow: [3, 3.5, 3.6, 3.7, 4, 6, 7, 7.4, 8, 10, 11, 13, 14, 16, 18, 20, 22, 36, 40],
-  fast: [43, 45, 50, 60, 80],
+  fast: [43, 45, 50, 60, 75, 80],
   turbo: [100, 120, 125, 129, 135, 150, 175, 200, 250, 350, 400],
 };
 

examples/2.stations/1.station-list/map.js

@@ -8,8 +8,7 @@ const map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://styles/chargetrip/ckgcbf3kz0h8819qki8uwhe0k',
   zoom: 11.4,
-  center: [10.197422, 56.171395],
-  cooperativeGestures: true,
+  center: [9.941440543222434, 54.974349949816336], // 10.197422, 56.171395
 });
 
 map.on('load', function() {
@@ -56,6 +55,8 @@ const selectPinlet = station => `${station.status}-${station.speed}`;
  */
 
 export const showStations = stations => {
+  console.log(stations);
+
   if (!stations) return;
 
   document.getElementById('stationAmount').innerHTML =

public/stations/index.html

@@ -26,30 +26,30 @@ <h1 id="stationAmount">- stations</h1>
           <div class="range-slider">
             <div class="labels">
               <label>Distance from location</label>
-              <label id="distance" for="range"></label>
+              <label id="distance" for="range">7 km</label>
             </div>
-            <input type="range" min="1000" max="10000" value="3000" step="1000" id="range" />
+            <input type="range" min="1000" max="10000" value="7000" step="1000" id="range" />
           </div>
         </section>
         <section>
           <h3>Charging power</h3>
           <ul class="checklist power">
             <li>
-              <input type="checkbox" class="filter-input" id="turbo" value="turbo" />
+              <input type="checkbox" class="filter-input" id="turbo" value="turbo" checked />
               <label for="turbo">
                 <span class="title">Turbo - 100 to 350 kW</span>
                 <span class="subtitle">Aprox. 30 min charge</span>
               </label>
             </li>
             <li>
-              <input type="checkbox" class="filter-input" id="fast" value="fast" />
+              <input type="checkbox" class="filter-input" id="fast" value="fast" checked />
               <label for="fast">
                 <span class="title">Fast - 43 to 100 kW</span>
                 <span class="subtitle">Aprox. 60 min charge</span>
               </label>
             </li>
             <li>
-              <input type="checkbox" class="filter-input" id="slow" value="slow" />
+              <input type="checkbox" class="filter-input" id="slow" value="slow" checked />
               <label for="slow">
                 <span class="title">Slow - 1 to 43 kW</span>
                 <span class="subtitle">Aprox. 7 hour charge</span>
@@ -60,14 +60,6 @@ <h3>Charging power</h3>
         <section>
           <h3>Amenities</h3>
           <ul class="checklist amenities">
-            <li>
-              <input type="checkbox" class="filter-input" id="supermarket" value="supermarket" />
-              <label for="supermarket">Supermarket</label>
-            </li>
-            <li>
-              <input type="checkbox" class="filter-input" id="bathroom" value="bathroom" />
-              <label for="bathroom">Bathroom</label>
-            </li>
             <li>
               <input type="checkbox" class="filter-input" id="restaurant" value="restaurant" />
               <label for="restaurant">Restaurant</label>