Update theme example and docs

Author: Martin Clarke

SETUP.md

@@ -75,50 +75,17 @@ are described below:
 | mapConfig  | Defines the font-awesome-icon and colour    | Used by leaflet as the feature marker     |
 
 
-
-
-Example theme:
+Example theme
 
 ```javascript
 
-const school = {
-    Name: "schools",
-    Title: "Example theme - Schools",
-    Description: "An example OpenStreetMap theme, showing the location of schools.",
-    Author: "Martin Clarke",
-    AttributeTags: [],
-    overpassQuery: `[out:json];\
-        (way["amenity"~"(school)$"](around:5000,56.0019,-3.7893);\
-        relation["amenity"~"(school)$"](around:5000,56.0019,-3.7893);\
-        node["amenity"~"(school)$"](around:5000,56.0019,-3.7893););\
-        out body;>;out skel qt;`,
-    mapConfig: {
-         mapIcon: "school",
-         color: "blue"
-    }
-};
-
-export {
-    school
-};
-
-```
-
-Example theme 2 - A more complicated theme example, with a defined list of AttributeTags
-
-```javascript
-
-let digiAccess = {
+const digiAccess = {
     Name: "digitalAccess",
     Title: "Digital Access",
-    Headline: "Shows locations of places that provides access to digital Services",
-    Description: "This theme shows locations that provide access to digital services.  These include access to " +
+    Headline: "Shows community locations that provides access to digital Services",
+    Description: "This theme shows community locations that provide access to digital services.  These include access to " +
     "printing facilities, access to computers for public use and Wifi / internet access",
     Author: "MartinClarke",
-    OSMFeatures: ["ways", "nodes"],
-    GeoTags: {
-        "amenity": ["library", "community_centre"]
-    },
     AttributeTags: [
          {  attributeName: "Internet Access",
             attributeTag: "internet_access",
@@ -180,8 +147,21 @@ AttributeTags: [
 
 For more information on OSM tags and usage see [taginfo](https://taginfo.openstreetmap.org/)
 
+The options for the AttributeTags definition is summarised below:
+
+| Option      | Description           | Usage |
+| ------------- |:-------------| :-----|
+| attributeName     | The name of the attribute | Attribute name is displayed in the feature popup |
+| attributeTag      | The OpenStreetMap tag that describes the attribute      |   Used by the popup code to determine if attribute is displayed |
+| attributeValues     | The OpenStreetMap values expected for the attributeTag    | Used by the popup code to determine if attribute is displayed  |
+| icon  |  The font-awesome icon to use for the attribute | Used by a popup of feature information    |
+|  iconColor   | Defines color of the attribute icon    |    |
+
+
 ## More on Overpass Queries
 
 The query defined in the theme config is in OverPass QL format.   This query language allows for a wide variety of 
 query definitions. A comprehensive overview is given on this [OSM wiki](https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL)
 
+# Other Customisation
+Individual css files for the various application components are stored along the component in the src/components folder.  

src/config.js

@@ -1,4 +1,4 @@
-import { school, digiAccess } from "./themes/example";
+import { helpAdvice, digiAccess } from "./themes/example";
 
 /* App config.
 mapConfig stores options for Leaflet maps.   tileLayer defines the provider
@@ -37,7 +37,7 @@ const mapConfig = {
     }
 };
 
-const appThemes = [school, digiAccess];
+const appThemes = [helpAdvice, digiAccess];
 
 export {
     mapConfig, appThemes, appConfig

src/themes/example.js

@@ -1,39 +1,51 @@
-const school = {
-    Name: "schools",
-    Title: "Example theme - Schools",
-    Headline: "Shows locations of schools",
-    Description: "An example OpenStreetMap theme, showing the location of schools.",
-    Author: "Martin Clarke",
+const helpAdvice = {
+    Name: "helpAdvice",
+    Title: "Example Theme - Community Information and Advice ",
+    Headline: "Shows locations of places where advice is provided",
+    Description: "Shows community based help and advice offices",
+    Author: "MartinClarke",
     AttributeTags: [
-         {  attributeName: "Internet Access",
-            attributeTag: "internet_access",
-            attributeValues: ["wlan", "yes", "terminal", "wifi", "service"],
-            icon: "wifi"
-        }
-        ],
+        {   attributeName: "Citizens Advice",
+            attributeTag: "social_facility",
+            attributeValues: ["citizens_advice"],
+            icon: "hands-helping"
+        },
+        {
+            attributeName: "Financial Support",
+            attributeTag: "social_facility",
+            attributeValues: ["financial_services"],
+            icon: "hands-helping"
+        },
+        {
+            attributeName: "Family Support & Social Advice",
+            attributeTag: "social_facility",
+            attributeValues: ["advice_service"],
+            icon: "users"
+        },
+        {
+            attributeName: "Mental Health Support",
+            attributeTag: "healthcare",
+            attributeValues: ["mental_health"],
+            icon:"hands-helping"
+        },
+    ],
     overpassQuery: `[out:json];\
-        (way["amenity"~"(school)$"](around:5000,56.0019,-3.7893);\
-        relation["amenity"~"(school)$"](around:5000,56.0019,-3.7893);\
-        node["amenity"~"(school)$"](around:5000,56.0019,-3.7893););\
+        (way["amenity"="social_facility"][~"^(healthcare|social_facility)$"~"(financial_services|advice_service|mental_health|citizens_advice)$"](around:20000,56.0019,-3.7893);\
+        node["amenity"="social_facility"][~"^(healthcare|social_facility)$"~"(financial_services|advice_service|mental_health|citizens_advice)$"](around:20000,56.0019,-3.7893););\
         out body;>;out skel qt;`,
     mapConfig: {
-         mapIcon: "school",
-         color: "blue"
+         mapIcon: "hands-helping",
+         color: "darkblue"
     }
 };
 
-
 const digiAccess = {
     Name: "digitalAccess",
-    Title: "Digital Access",
-    Headline: "Shows locations of places that provides access to digital Services",
-    Description: "This theme shows locations that provide access to digital services.  These include access to " +
+    Title: "Example theme - Community Digital Access",
+    Headline: "Shows community locations that provides access to digital Services",
+    Description: "This theme shows community locations that provide access to digital services.  These include access to " +
     "printing facilities, access to computers for public use and Wifi / internet access",
     Author: "MartinClarke",
-    OSMFeatures: ["ways", "relations", "nodes"],
-    GeoTags: {
-        "amenity": ["library", "community_centre"]
-    },
     AttributeTags: [
          {  attributeName: "Internet Access",
             attributeTag: "internet_access",
@@ -69,5 +81,5 @@ const digiAccess = {
     };
 
 export {
-    school, digiAccess
+    helpAdvice, digiAccess
 };