Mirrors
/
aredn
mirror of https://github.com/aredn/aredn.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

enable leafletjs, leafletcss, and maptiles to be based on uci config vars 

fixes AREDN->ticket:174

Change-Id: I0133ab46df95b14d55192e5e47fa4e8f6377b4c9
This commit is contained in:
Darryl Quinn 2016-06-22 00:11:13 -05:00
parent 6bc3999b59
commit df9c6601be
3 changed files with 48 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
files/etc/config.mesh/system
View File

@ -21,4 +21,9 @@ config button
option min '12' option min '12'
option max '20' option max '20'
config map
option leafletjs 'http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'
option leafletcss 'http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css'
option maptiles 'http://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiazVkbHEiLCJhIjoiY2lqMnlieTM4MDAyNXUwa3A2eHMxdXE3MiJ9.BRFvx4q2vi70z5Uu2zRYQw'
include /etc/aredn_include/system_netled include /etc/aredn_include/system_netled

5
files/etc/config/system
View File

@ -19,3 +19,8 @@ config button
option handler 'firstboot -y && reboot' option handler 'firstboot -y && reboot'
option min '12' option min '12'
option max '20' option max '20'
config map
option leafletjs 'http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'
option leafletcss 'http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css'
option maptiles 'http://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiazVkbHEiLCJhIjoiY2lqMnlieTM4MDAyNXUwa3A2eHMxdXE3MiJ9.BRFvx4q2vi70z5Uu2zRYQw'

44
files/www/cgi-bin/setup
View File

@ -41,6 +41,7 @@ $debug = 0;
BEGIN {push @INC, '/www/cgi-bin'}; BEGIN {push @INC, '/www/cgi-bin'};
use perlfunc; use perlfunc;
use channelmaps; use channelmaps;
use ucifunc;
# #
# load the config parms # load the config parms
# #
@ -464,6 +465,12 @@ if($parms{button_save})
system "rm -rf /tmp/web/save"; system "rm -rf /tmp/web/save";
reboot_page("/cgi-bin/status") if $parms{button_reboot}; reboot_page("/cgi-bin/status") if $parms{button_reboot};
#
# Retreive map url, css, and js locations
#
my ($rc, $maptiles)=&uci_get_indexed_option("system","map",0,"maptiles");
my ($rc, $leafletcss)=&uci_get_indexed_option("system","map",0,"leafletcss");
my ($rc, $leafletjs)=&uci_get_indexed_option("system","map",0,"leafletjs");
# #
# generate the page # generate the page
@ -471,8 +478,8 @@ reboot_page("/cgi-bin/status") if $parms{button_reboot};
http_header() unless $debug == 2; http_header() unless $debug == 2;
html_header(nvram_get("node") . " setup", 0); html_header(nvram_get("node") . " setup", 0);
print "<link rel='stylesheet' href='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css' />\n" if($pingOk); print "<link rel='stylesheet' href='${leafletcss}' />\n";
print "<script src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'></script>\n" if($pingOk); print "<script src='${leafletjs}'></script>\n";
print "</head>"; print "</head>";
print "<body><center>\n"; print "<body><center>\n";
@ -551,7 +558,7 @@ function toggleMap(toggleButton) {
// force the map to redraw // force the map to redraw
map.invalidateSize(); map.invalidateSize();
return false; return false;
}" if(pingOk); }";
print "</script>"; print "</script>";
@ -1027,19 +1034,18 @@ print "<td align='right' colspan='2'>";
print "<button type='button' id='findlocation' value='findloc' onClick='findLocation();'>Find Me!</button>&nbsp;"; print "<button type='button' id='findlocation' value='findloc' onClick='findLocation();'>Find Me!</button>&nbsp;";
print "<input type=submit name='button_updatelocation' value='Apply Location Settings' title='Immediately use these location settings'>"; print "<input type=submit name='button_updatelocation' value='Apply Location Settings' title='Immediately use these location settings'>";
print "&nbsp;<button type='button' id='hideshowmap' value='show' onClick='toggleMap(this);'>Show Map</button>&nbsp;";
if($pingOk) if($pingOk)
{ {
print "&nbsp;<button type='button' id='hideshowmap' value='show' onClick='toggleMap(this);'>Show Map</button>&nbsp;";
print "<input type='submit' name='button_uploaddata' value='Upload data to AREDN Servers' />&nbsp;"; print "<input type='submit' name='button_uploaddata' value='Upload data to AREDN Servers' />&nbsp;";
} else { } else {
print "&nbsp;<button disabled type='button' title='The map is only available if this node has internet access'>Show Map</button>&nbsp;";
print "<button disabled type='button' title='Only available if this node has internet access'>Upload data to AREDN Servers</button>&nbsp;"; print "<button disabled type='button' title='Only available if this node has internet access'>Upload data to AREDN Servers</button>&nbsp;";
} }
print "</td>\n"; print "</td>\n";
print "<tr><td align=left>Longitude</td><td><input type=text name=longitude size=10 value='$lon' title='Longitude value (in decimal) (ie. -95.334454)' /></td>"; print "<tr><td align=left>Longitude</td><td><input type=text name=longitude size=10 value='$lon' title='Longitude value (in decimal) (ie. -95.334454)' /></td>";
print "<td align=left>Grid Square</td><td align='left'><input type=text name=gridsquare maxlength=6 size=6 value='$gridsquare' title='Gridsquare value (ie. AB12cd)' /></td></tr>\n"; print "<td align=left>Grid Square</td><td align='left'><input type=text name=gridsquare maxlength=6 size=6 value='$gridsquare' title='Gridsquare value (ie. AB12cd)' /></td></tr>\n";
print "<tr><td colspan=4><div id='map' style='height: 200px; display: none;'></div></td></tr>" if($pingOk); print "<tr><td colspan=4><div id='map' style='height: 200px; display: none;'></div></td></tr>";
print "<tr><td colspan=4><hr /></td></tr>"; print "<tr><td colspan=4><hr /></td></tr>";
print "<tr> print "<tr>
<td>Timezone</td> <td>Timezone</td>
@ -1084,12 +1090,14 @@ show_parse_errors();
page_footer(); page_footer();
if($pingOk) print <<EOF;
{ <script>
print <<EOF; var map = L.map('map').setView([0.0, 0.0], 1);
<script> var dotIcon = L.icon({iconUrl: '/dot.png'});
var map = L.map('map').setView([0.0, 0.0], 1); EOF
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiazVkbHEiLCJhIjoiY2lqMnlieTM4MDAyNXUwa3A2eHMxdXE3MiJ9.BRFvx4q2vi70z5Uu2zRYQw', { print "L.tileLayer('$maptiles',";
print <<EOF;
{
maxZoom: 18, maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
@ -1097,21 +1105,21 @@ if($pingOk)
id: 'mapbox.streets' id: 'mapbox.streets'
}).addTo(map); }).addTo(map);
var marker; var marker;
function onMapClick(e) { function onMapClick(e) {
marker= new L.marker(e.latlng,{draggable: true}); marker= new L.marker(e.latlng,{draggable: true, icon: dotIcon});
map.addLayer(marker); map.addLayer(marker);
document.getElementsByName('latitude')[0].value=e.latlng.lat.toFixed(6).toString(); document.getElementsByName('latitude')[0].value=e.latlng.lat.toFixed(6).toString();
document.getElementsByName('longitude')[0].value=e.latlng.lng.toFixed(6).toString(); document.getElementsByName('longitude')[0].value=e.latlng.lng.toFixed(6).toString();
map.off('click', onMapClick); map.off('click', onMapClick);
marker.on('drag', onMarkerDrag); marker.on('drag', onMarkerDrag);
} }
EOF EOF
if($lat and $lon) if($lat and $lon)
{ {
print "marker= new L.marker([$lat,$lon],{draggable: true});"; print "marker= new L.marker([$lat,$lon],{draggable: true, icon: dotIcon});";
print "map.addLayer(marker);"; print "map.addLayer(marker);";
print "map.setView([$lat,$lon],13);"; print "map.setView([$lat,$lon],13);";
print "marker.on('drag', onMarkerDrag);"; print "marker.on('drag', onMarkerDrag);";
@ -1128,6 +1136,6 @@ EOF
} }
</script> </script>
EOF EOF
} #}
print "</body>\n"; print "</body>\n";
print "</html>\n"; print "</html>\n";