rgutierrez/resq
1
0
Fork 0
Code Issues 126 Pull requests 49 Projects Releases 4 Packages Wiki Activity Actions

Merge branch '384-make-map-tile-server-configurable' into 'master'

Browse source 
Resolve "Make map tile server configurable"

Closes #384

See merge request jankstudio/resq!432
This commit is contained in:
Kendrick Chan 2020-04-23 10:17:53 +00:00
commit 53fc34739d
5 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env.dist
View file

@ -69,3 +69,5 @@ API_LOGGING=set_to_true_or_false
# customer distance limit in km # customer distance limit in km
CUST_DISTANCE_LIMIT=set_to_number CUST_DISTANCE_LIMIT=set_to_number
MAPTILER_API_KEY=map_tiler_api_key

1
config/packages/twig.yaml
View file

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

12
public/assets/js/dashboard_map.js
View file

@ -21,12 +21,24 @@ class DashboardMap {
); );
// add tile layer // 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}', { 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>', 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, maxZoom: 18,
id: 'mapbox/streets-v11', id: 'mapbox/streets-v11',
accessToken: this.options.access_token accessToken: this.options.access_token
}).addTo(this.map); }).addTo(this.map);
*/
// layer groups // layer groups
this.layer_groups.rider_available.addTo(this.map); this.layer_groups.rider_available.addTo(this.map);

2
templates/home.html.twig
View file

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

12
templates/map/joOpenStreetMap.js
View file

@ -11,14 +11,24 @@ function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
zoom zoom
); );
//TODO: put access token in .env
// add tile layer // 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}', { 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>', 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, maxZoom: 18,
id: 'mapbox/streets-v11', id: 'mapbox/streets-v11',
accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw' accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
}).addTo(map); }).addTo(map);
*/
return map; return map;
} }