Adding integration for various background map providers

sigfox · Jul 2, 2019 · b7df77f · b7df77f
1 parent a7caddf
commit b7df77f
Show file tree

Hide file tree

Showing 10 changed files with 1,056 additions and 153 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright © 2018 Sigfox
+Copyright © 2019 Sigfox
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

diff --git a/README.md b/README.md
@@ -25,17 +25,16 @@ const config = {
     sigfoxApiSite: "api.sigfox.com",
     publicMapPath: "/v2/tiles/public-coverage",
     https: true,
-    backgroundMap: "https://api.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=[yourToken]"
+
+    //---- For MapBox background map
+    backgroundMapType: "Basic",
+    backgroundMap: "https://api.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token={yourToken}"
 }
 ```
 
 In production situation, you should only set your own credentials to access the Sigfox API and set your background map URL according to your map provider.
 The example above showcases a [Mapbox](https://www.mapbox.com/) map with a light style (you'll have to set your own token). To sum up, the `backgroundMap` property expects a TMS URL.
-You can use other background map providers:
-- **Jawg:** `http://tile.jawg.io/jawg-light/{z}/{x}/{y}.png?access-token=[YOUR_ACCESS_TOKEN]`
-- **HERE:** `https://1.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?app_id=[app_id]&app_code=[app_code]`
-- **Google:** Google maps use custom format and should be integrated using a [leaflet plugin](https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant)
-- **Bing:** Bing maps use custom format and should be integrated using a [leaflet plugin](https://github.com/digidem/leaflet-bing-layer)
+You can use other background map providers by switching properties (Jawg, Here, Google or Bing).
 
 In test situation, you might want to mock the Sigfox Backend. In order to do this, you can edit the other properties :
 
@@ -52,4 +51,4 @@ npm install
 npm start
 ```
 
-Open the url <http://localhost:3000/> on your browser.
+Open the url <http://localhost:3000/> on your browser.
diff --git a/assets/google-light-style.json b/assets/google-light-style.json
@@ -0,0 +1,176 @@
+[
+    {
+        "featureType": "water",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#e9e9e9"
+            },
+            {
+                "lightness": 17
+            }
+        ]
+    },
+    {
+        "featureType": "landscape",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#f5f5f5"
+            },
+            {
+                "lightness": 20
+            }
+        ]
+    },
+    {
+        "featureType": "road.highway",
+        "elementType": "geometry.fill",
+        "stylers": [
+            {
+                "color": "#ffffff"
+            },
+            {
+                "lightness": 17
+            }
+        ]
+    },
+    {
+        "featureType": "road.highway",
+        "elementType": "geometry.stroke",
+        "stylers": [
+            {
+                "color": "#ffffff"
+            },
+            {
+                "lightness": 29
+            },
+            {
+                "weight": 0.2
+            }
+        ]
+    },
+    {
+        "featureType": "road.arterial",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#ffffff"
+            },
+            {
+                "lightness": 18
+            }
+        ]
+    },
+    {
+        "featureType": "road.local",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#ffffff"
+            },
+            {
+                "lightness": 16
+            }
+        ]
+    },
+    {
+        "featureType": "poi",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#f5f5f5"
+            },
+            {
+                "lightness": 21
+            }
+        ]
+    },
+    {
+        "featureType": "poi.park",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#dedede"
+            },
+            {
+                "lightness": 21
+            }
+        ]
+    },
+    {
+        "elementType": "labels.text.stroke",
+        "stylers": [
+            {
+                "visibility": "on"
+            },
+            {
+                "color": "#ffffff"
+            },
+            {
+                "lightness": 16
+            }
+        ]
+    },
+    {
+        "elementType": "labels.text.fill",
+        "stylers": [
+            {
+                "saturation": 36
+            },
+            {
+                "color": "#333333"
+            },
+            {
+                "lightness": 40
+            }
+        ]
+    },
+    {
+        "elementType": "labels.icon",
+        "stylers": [
+            {
+                "visibility": "off"
+            }
+        ]
+    },
+    {
+        "featureType": "transit",
+        "elementType": "geometry",
+        "stylers": [
+            {
+                "color": "#f2f2f2"
+            },
+            {
+                "lightness": 19
+            }
+        ]
+    },
+    {
+        "featureType": "administrative",
+        "elementType": "geometry.fill",
+        "stylers": [
+            {
+                "color": "#fefefe"
+            },
+            {
+                "lightness": 20
+            }
+        ]
+    },
+    {
+        "featureType": "administrative",
+        "elementType": "geometry.stroke",
+        "stylers": [
+            {
+                "color": "#fefefe"
+            },
+            {
+                "lightness": 17
+            },
+            {
+                "weight": 1.2
+            }
+        ]
+    }
+]
diff --git a/config.js.sample b/config.js.sample
@@ -5,7 +5,27 @@ const config = {
     sigfoxApiSite: "api.sigfox.com",
     publicMapPath: "/v2/tiles/public-coverage",
     https: true,
+
+    //---- For MapBox background map
+    backgroundMapType: "Basic",
     backgroundMap: "https://api.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token={yourToken}"
+
+    //---- For Jawg background map
+    //backgroundMapType: "Basic",
+    //backgroundMap: "http://tile.jawg.io/jawg-light/{z}/{x}/{y}.png?access-token={yourToken}"
+
+    //---- For HERE background map
+    //backgroundMapType: "Here",
+    //hereAppId: "{yourAppId}",
+    //hereAppCode: "{yourAppCode}"
+
+    //---- For Bing background map
+    //backgroundMapType: "Bing",
+    //bingKey: "{yourBingKey}"
+
+    //---- For Google background map
+    //backgroundMapType: "Google",
+    //googleToken: "{yourToken}"
 };
 
 module.exports = config;