add configuration for current_location

README.md

@@ -23,6 +23,7 @@ The data source for the components is the [Open Data Hub](https://opendatahub.co
     - [Options](#options)
       - [Translations](#translations)
       - [Logo](#logo)
+      - [Marker](#marker)
     - [Styling](#styling)
   - [Getting started](#getting-started)
     - [Prerequisites](#prerequisites)
@@ -41,6 +42,7 @@ The data source for the components is the [Open Data Hub](https://opendatahub.co
     - [Documentation](#documentation)
     - [Boilerplate](#boilerplate)
     - [License](#license)
+    - [REUSE](#reuse)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -72,6 +74,14 @@ URL of an icon, that will be shown in the lower left corner.
 <e-mobility-map-widget logo="https://www.example.com/your-logo.png"></e-mobility-map-widget>
 ```
 
+#### Marker
+
+To configure desired starting location with marker, add `current_location` attribute. `lat` and `lng` will be the Latitude and Longitude coordinates of your desired location, respectively.
+
+```html
+<e-mobility-map-widget current_location='{ "lat": 46.5, "lng": 11.33 }'></e-mobility-map-widget>
+```
+
 ### Styling
 
 This web component has only one style variable, namely
@@ -85,7 +95,12 @@ For example:
   }
 </style>
 
-<e-mobility-map-widget class="YOUR_CLASS_NAME" logo="logo.png" language="it"></e-mobility-map-widget>
+<e-mobility-map-widget 
+  class="YOUR_CLASS_NAME" 
+  logo="logo.png" 
+  language="it"
+  current_location='{ "lat": 46.5, "lng": 11.33 }'
+></e-mobility-map-widget>
 ```
 
 The width of this component reacts on regular css rules. Configure the `display`

src/components/baseClass.js

@@ -27,7 +27,6 @@ export class BaseClass extends LitElement {
     this.current_station = {};
     this.userMarker = null;
     this.is_loading = false;
-    this.current_location = { lat: 46.479, lng: 11.331 };
     this.showFilters = false;
     this.filters = {
       radius: 0,
@@ -53,6 +52,7 @@ export class BaseClass extends LitElement {
     /* Parameters */
     const [language] = (window.navigator.userLanguage || window.navigator.language).split('-');
     this.language = language;
+    this.current_location = { lat: 46.479, lng: 11.331 };
     /* Bindings */
     this.render__search_box = render__search_box.bind(this);
     this.render__details_box = render__details_box.bind(this);

src/observed_properties.js

@@ -8,7 +8,6 @@ export const observed_properties = {
   is_loading: { type: Boolean },
   message: { type: String },
   current_station: { type: Object },
-  current_location: { type: Object },
   showFilters: { type: Boolean },
   filters: { type: Object },
   visibleStations: { type: Number },
@@ -28,5 +27,6 @@ export const observed_properties = {
   // Parameters
   logo: { type: String },
   language: { type: String },
+  current_location: { type: Object },
   mobileFullScreen: { type: Boolean }
 };

wcs-manifest.json

@@ -65,7 +65,16 @@
         "options": {
           "default": true
         }
-      }     
+      },     
+      {
+        "key": "current_location",
+        "type": "text",
+        "label": "Coordinates of the current location in the following format: { \"lat\": 46.479, \"lng\": 11.331 }",
+        "required": true, 
+        "options": {
+          "default": "{ \"lat\": 46.479, \"lng\": 11.331 }"
+        }
+      }
     ]
   }
 }

work/index.html

@@ -28,8 +28,9 @@ <h2>Snippet</h2>
 <e-mobility-map-widget
   class="YOUR_CLASS_NAME"
   logo="https://www.greenmobility.bz.it/typo3conf/ext/interho/Resources/Public/Img/logo.png"
-  language="it">
-</e-mobility-map-widget>
+  language="it"
+  current_location='{ "lat": 46.5, "lng": 11.33 }'
+></e-mobility-map-widget>
 
 <script src="./scripts/map_widget.js"></script>
 </xmp>
@@ -67,6 +68,7 @@ <h2>Snippet</h2>
         class="two"
         logo="https://www.greenmobility.bz.it/typo3conf/ext/interho/Resources/Public/Img/logo.png"
         language="it"
+        current_location='{ "lat": 46.5, "lng": 11.36 }'
       ></e-mobility-map-widget>
     </div>