Shift to maptiler and have the api key in the .env #384

This commit is contained in:
Kendrick Chan 2020-04-22 16:10:35 +08:00
parent 031e2aa380
commit f073baf518
4 changed files with 25 additions and 2 deletions

View file

@ -4,6 +4,7 @@ twig:
strict_variables: '%kernel.debug%'
globals:
gmaps_api_key: "%env(GMAPS_API_KEY)%"
maptiler_api_key: "%env(MAPTILER_API_KEY)%"
mqtt_host: "%env(MQTT_WS_HOST)%"
mqtt_port: "%env(MQTT_WS_PORT)%"
dashboard_enable: "%env(DASHBOARD_ENABLE)%"

View file

@ -21,12 +21,24 @@ class DashboardMap {
);
// add tile layer
var streets = L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key={accessToken}',{
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
crossOrigin: true,
accessToken: this.options.access_token
}).addTo(this.map);
/*
// NOTE: this is for mapbox
var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: this.options.access_token
}).addTo(this.map);
*/
// layer groups
this.layer_groups.rider_available.addTo(this.map);

View file

@ -27,7 +27,7 @@ function initMap(r_markers, c_markers, icons) {
var options = {
'display_overlay': true,
'enable_popup': true,
'access_token': 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw',
'access_token': '{{ maptiler_api_key }}',
'div_id': 'dashboard_map',
'center_lat': default_lat,
'center_lng': default_lng,

View file

@ -11,14 +11,24 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
zoom
);
//TODO: put access token in .env
// add tile layer
var streets = L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key={accessToken}',{
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
crossOrigin: true,
accessToken: '{{ maptiler_api_key }}'
}).addTo(map);
/*
var streets = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
}).addTo(map);
*/
return map;
}