-<% content_for :left_menu do %>
-<%= link_to_function t('site.key.map_key'), "showKey();", { :title => t('site.key.map_key_tooltip') } %>
-<% end %>
-
<script type="text/javascript">
-<!--
-
- function showKeyEntry(image, text) {
- var ret = '';
- ret += '<tr>';
- ret += ' <td class="mapkey-table-key" align="center">';
- ret += ' <img src="/images/mapkey/' + image + '" />';
- ret += ' </td>';
- ret += ' <td class="mapkey-table-value">';
- ret += text;
- ret += ' </td>';
- ret += '</tr>';
- return ret;
- }
- function showKey() {
- var zoomlevel = map.getZoom();
- var mapkey_values = new Array();
- mapkey_values['heading'] = "<%= t'site.key.table.heading' %>";
- mapkey_values['motorway'] = "<%= t'site.key.table.entry.motorway' %>";
- mapkey_values['trunk'] = "<%= t'site.key.table.entry.trunk' %>";
- mapkey_values['primary'] = "<%= t'site.key.table.entry.primary' %>";
- mapkey_values['secondary'] = "<%= t'site.key.table.entry.secondary' %>";
- mapkey_values['unclassified'] = "<%= t'site.key.table.entry.unclassified' %>";
- mapkey_values['unsurfaced'] = "<%= t'site.key.table.entry.unsurfaced' %>";
- mapkey_values['track'] = "<%= t'site.key.table.entry.track' %>";
- mapkey_values['byway'] = "<%= t'site.key.table.entry.byway' %>";
- mapkey_values['bridleway'] = "<%= t'site.key.table.entry.bridleway' %>";
- mapkey_values['cycleway'] = "<%= t'site.key.table.entry.cycleway' %>";
- mapkey_values['footway'] = "<%= t'site.key.table.entry.footway' %>";
- mapkey_values['rail'] = "<%= t'site.key.table.entry.rail' %>";
- mapkey_values['subway'] = "<%= t'site.key.table.entry.subway' %>";
- mapkey_values['tram'] = "<%= t'site.key.table.entry.tram' %>";
- mapkey_values['cable'] = "<%= t'site.key.table.entry.cable' %>";
- mapkey_values['runway'] = "<%= t'site.key.table.entry.runway' %>";
- mapkey_values['apron'] = "<%= t'site.key.table.entry.apron' %>";
- mapkey_values['admin'] = "<%= t'site.key.table.entry.admin' %>";
- mapkey_values['forest'] = "<%= t'site.key.table.entry.forest' %>";
- mapkey_values['wood'] = "<%= t'site.key.table.entry.wood' %>";
- mapkey_values['golf'] = "<%= t'site.key.table.entry.golf' %>";
- mapkey_values['park'] = "<%= t'site.key.table.entry.park' %>";
- mapkey_values['resident'] = "<%= t'site.key.table.entry.resident' %>";
- mapkey_values['tourist'] = "<%= t'site.key.table.entry.tourist' %>";
- mapkey_values['common'] = "<%= t'site.key.table.entry.common' %>";
- mapkey_values['retail'] = "<%= t'site.key.table.entry.retail' %>";
- mapkey_values['industrial'] = "<%= t'site.key.table.entry.industrial' %>";
- mapkey_values['commercial'] = "<%= t'site.key.table.entry.commercial' %>";
- mapkey_values['heathland'] = "<%= t'site.key.table.entry.heathland' %>";
- mapkey_values['lake'] = "<%= t'site.key.table.entry.lake' %>";
- mapkey_values['farm'] = "<%= t'site.key.table.entry.farm' %>";
- mapkey_values['brownfield'] = "<%= t'site.key.table.entry.brownfield' %>";
- mapkey_values['cemetery'] = "<%= t'site.key.table.entry.cemetery' %>";
- mapkey_values['allotments'] = "<%= t'site.key.table.entry.allotments' %>";
- mapkey_values['pitch'] = "<%= t'site.key.table.entry.pitch' %>";
- mapkey_values['centre'] = "<%= t'site.key.table.entry.centre' %>";
- mapkey_values['reserve'] = "<%= t'site.key.table.entry.reserve' %>";
- mapkey_values['military'] = "<%= t'site.key.table.entry.military' %>";
- mapkey_values['school'] = "<%= t'site.key.table.entry.school' %>";
- mapkey_values['building'] = "<%= t'site.key.table.entry.building' %>";
- mapkey_values['station'] = "<%= t'site.key.table.entry.station' %>";
- mapkey_values['summit'] = "<%= t'site.key.table.entry.summit' %>";
- mapkey_values['tunnel'] = "<%= t'site.key.table.entry.tunnel' %>";
- mapkey_values['bridge'] = "<%= t'site.key.table.entry.bridge' %>";
- mapkey_values['private'] = "<%= t'site.key.table.entry.private' %>";
- mapkey_values['permissive'] = "<%= t'site.key.table.entry.permissive' %>";
- mapkey_values['destination'] = "<%= t'site.key.table.entry.destination' %>";
- mapkey_values['construction'] = "<%= t'site.key.table.entry.construction' %>";
+ function openMapKey() {
+ updateMapKey();
- var out = '';
- var suffix = '';
+ openSidebar({
+ title: "<%= t('site.key.map_key') %>",
+ onclose: closeMapKey
+ });
- out += '<div id="mapkey">';
- out += '<h3>' + i18n(mapkey_values['heading'], { zoom_level: zoomlevel }) + "</h3>";
- out += '<table class="mapkey-table">';
- out += showKeyEntry('motorway.png', mapkey_values['motorway']);
-
- if (zoomlevel >= 12) {
- suffix = 12;
- }
- out += showKeyEntry('trunk' + suffix + '.png', mapkey_values['trunk']);
- if (zoomlevel >= 7) {
- out += showKeyEntry('primary' + suffix + '.png', mapkey_values['primary']);
- }
- if (zoomlevel >= 9) {
- out += showKeyEntry('secondary' + suffix + '.png', mapkey_values['secondary']);
- }
- if (zoomlevel >= 10) {
- suffix = '';
- if (zoomlevel >= 13) { suffix="13"; }
- out += showKeyEntry('unclassified' + suffix + '.png', mapkey_values['unclassified']);
- }
- if (zoomlevel >= 13) {
- out += showKeyEntry('unsurfaced.png', mapkey_values['unsurfaced']);
- out += showKeyEntry('track.png', mapkey_values['track']);
- out += showKeyEntry('byway.png', mapkey_values['byway']);
- out += showKeyEntry('bridleway.png', mapkey_values['bridleway']);
- out += showKeyEntry('cycleway.png', mapkey_values['cycleway']);
- out += showKeyEntry('footway.png', mapkey_values['footway']);
- }
- if (zoomlevel >= 8) {
- suffix = '';
- if (zoomlevel >= 13) { suffix = "13"; }
- out += showKeyEntry('rail' + suffix + '.png', mapkey_values['rail']);
- }
- if (zoomlevel >= 13) {
- out += showKeyEntry('subway.png', mapkey_values['subway']);
- out += showKeyEntry('tram.png', mapkey_values['tram']);
- }
- if (zoomlevel >= 12) {
- out += showKeyEntry('cable.png', mapkey_values['cable']);
- }
- if (zoomlevel >= 11) {
- out += showKeyEntry('runway.png', mapkey_values['runway']);
- }
- if (zoomlevel >= 12) {
- out += showKeyEntry('apron.png', mapkey_values['apron']);
- }
- out += showKeyEntry('admin.png', mapkey_values['admin']);
- if (zoomlevel >= 9) {
- out += showKeyEntry('forest.png', mapkey_values['forest']);
- }
- if (zoomlevel >= 10) {
- out += showKeyEntry('wood.png', mapkey_values['wood']);
- out += showKeyEntry('golf.png', mapkey_values['golf']);
- out += showKeyEntry('park.png', mapkey_values['park']);
- }
- if (zoomlevel >= 8) {
- out += showKeyEntry('resident.png', mapkey_values['resident']);
- }
- if (zoomlevel >= 10) {
- out += showKeyEntry('tourist.png', mapkey_values['tourist']);
- out += showKeyEntry('common.png', mapkey_values['common']);
- out += showKeyEntry('retail.png', mapkey_values['retail']);
- out += showKeyEntry('industrial.png', mapkey_values['industrial']);
- out += showKeyEntry('commercial.png', mapkey_values['commercial']);
- out += showKeyEntry('heathland.png', mapkey_values['heathland']);
- }
- if (zoomlevel >= 8) {
- out += showKeyEntry('lake.png', mapkey_values['lake']);
- }
- if (zoomlevel >= 10) {
- out += showKeyEntry('farm.png', mapkey_values['farm']);
- out += showKeyEntry('brownfield.png', mapkey_values['brownfield']);
- }
- if (zoomlevel >= 11) {
- out += showKeyEntry('cemetery.png', mapkey_values['cemetery']);
- out += showKeyEntry('allotments.png', mapkey_values['allotments']);
- out += showKeyEntry('pitch.png', mapkey_values['pitch']);
- out += showKeyEntry('centre.png', mapkey_values['centre']);
- out += showKeyEntry('reserve.png', mapkey_values['reserve']);
- out += showKeyEntry('military.png', mapkey_values['military']);
- }
- if (zoomlevel >= 12) {
- out += showKeyEntry('school.png', mapkey_values['school']);
- out += showKeyEntry('building.png', mapkey_values['building']);
- out += showKeyEntry('station.png', mapkey_values['station']);
- out += showKeyEntry('summit.png', mapkey_values['summit']);
- out += showKeyEntry('tunnel.png', mapkey_values['tunnel']);
- }
- if (zoomlevel >= 13) {
- out += showKeyEntry('bridge.png', mapkey_values['bridge']);
- }
- if (zoomlevel >= 15) {
- out += showKeyEntry('private.png', mapkey_values['private']);
- out += showKeyEntry('permissive.png', mapkey_values['permissive']);
- out += showKeyEntry('destination.png', mapkey_values['destination']);
- }
- if (zoomlevel >= 12) {
- out += showKeyEntry('construction.png', mapkey_values['construction']);
- }
-
- out += "</table>";
- out += "</div>";
+ map.events.register("zoomend", map, updateMapKey);
+ map.events.register("changelayer", map, updateMapKey);
+ }
- updateSidebar("<%= t('site.key.map_key') %>", out);
- openSidebar({ width: "210px" });
+ function closeMapKey() {
+ map.events.unregister("zoomend", map, updateMapKey);
+ map.events.unregister("changelayer", map, updateMapKey);
}
- function updateKey() {
- if (sidebarOpen("<%= t('site.key.map_key') %>"))
- {
- showKey();
- }
+ function updateMapKey() {
+ var layer = map.baseLayer.name.toLowerCase().replace(/\s+/g, "_");
+ var zoom = map.getZoom();
+
+ <%= remote_function :update => "sidebar_content",
+ :url => { :action => "key" },
+ :with => "'layer=' + layer + '&zoom=' + zoom",
+ :method => :get
+ %>
}
-// -->
</script>
+
+<% content_for :left_menu do %>
+ <%= link_to_function t('site.key.map_key'), "openMapKey()", :title => t('site.key.map_key_tooltip') %>
+<% end %>
--- /dev/null
+mapnik:
+ - { min_zoom: 0, max_zoom: 18, name: motorway, image: motorway.png }
+ - { min_zoom: 0, max_zoom: 11, name: trunk, image: trunk.png }
+ - { min_zoom: 12, max_zoom: 18, name: trunk, image: trunk12.png }
+ - { min_zoom: 7, max_zoom: 11, name: primary, image: primary.png }
+ - { min_zoom: 12, max_zoom: 18, name: primary, image: primary12.png }
+ - { min_zoom: 9, max_zoom: 11, name: secondary, image: secondary.png }
+ - { min_zoom: 12, max_zoom: 18, name: secondary, image: secondary12.png }
+ - { min_zoom: 13, max_zoom: 18, name: unsurfaced, image: unsurfaced.png }
+ - { min_zoom: 13, max_zoom: 18, name: track, image: track.png }
+ - { min_zoom: 13, max_zoom: 18, name: byway, image: byway.png }
+ - { min_zoom: 13, max_zoom: 18, name: bridleway, image: bridleway.png }
+ - { min_zoom: 13, max_zoom: 18, name: cycleway, image: cycleway.png }
+ - { min_zoom: 13, max_zoom: 18, name: footway, image: footway.png }
+ - { min_zoom: 8, max_zoom: 12, name: rail, image: rail.png }
+ - { min_zoom: 13, max_zoom: 18, name: rail, image: rail13.png }
+ - { min_zoom: 13, max_zoom: 18, name: subway, image: subway.png }
+ - { min_zoom: 13, max_zoom: 18, name: tram, image: tram.png }
+ - { min_zoom: 12, max_zoom: 18, name: cable, image: cable.png }
+ - { min_zoom: 11, max_zoom: 18, name: runway, image: runway.png }
+ - { min_zoom: 12, max_zoom: 18, name: apron, image: apron.png }
+ - { min_zoom: 0, max_zoom: 18, name: admin, image: admin.png }
+ - { min_zoom: 9, max_zoom: 18, name: forest, image: forest.png }
+ - { min_zoom: 10, max_zoom: 18, name: wood, image: wood.png }
+ - { min_zoom: 10, max_zoom: 18, name: golf, image: golf.png }
+ - { min_zoom: 10, max_zoom: 18, name: park, image: park.png }
+ - { min_zoom: 8, max_zoom: 18, name: resident, image: resident.png }
+ - { min_zoom: 10, max_zoom: 18, name: tourist, image: tourist.png }
+ - { min_zoom: 10, max_zoom: 18, name: common, image: common.png }
+ - { min_zoom: 10, max_zoom: 18, name: retail, image: retail.png }
+ - { min_zoom: 10, max_zoom: 18, name: industrial, image: industrial.png }
+ - { min_zoom: 10, max_zoom: 18, name: commercial, image: commercial.png }
+ - { min_zoom: 10, max_zoom: 18, name: heathland, image: heathland.png }
+ - { min_zoom: 8, max_zoom: 18, name: lake, image: lake.png }
+ - { min_zoom: 10, max_zoom: 18, name: farm, image: farm.png }
+ - { min_zoom: 10, max_zoom: 18, name: brownfield, image: brownfield.png }
+ - { min_zoom: 11, max_zoom: 18, name: cemetery, image: cemetery.png }
+ - { min_zoom: 11, max_zoom: 18, name: allotments, image: allotments.png }
+ - { min_zoom: 11, max_zoom: 18, name: pitch, image: pitch.png }
+ - { min_zoom: 11, max_zoom: 18, name: centre, image: centre.png }
+ - { min_zoom: 11, max_zoom: 18, name: reserve, image: reserve.png }
+ - { min_zoom: 11, max_zoom: 18, name: military, image: military.png }
+ - { min_zoom: 12, max_zoom: 18, name: school, image: school.png }
+ - { min_zoom: 12, max_zoom: 18, name: building, image: building.png }
+ - { min_zoom: 12, max_zoom: 18, name: station, image: station.png }
+ - { min_zoom: 12, max_zoom: 18, name: summit, image: summit.png }
+ - { min_zoom: 12, max_zoom: 18, name: tunnel, image: tunnel.png }
+ - { min_zoom: 13, max_zoom: 18, name: bridge, image: bridge.png }
+ - { min_zoom: 15, max_zoom: 18, name: private, image: private.png }
+ - { min_zoom: 15, max_zoom: 18, name: permissive, image: permissive.png }
+ - { min_zoom: 15, max_zoom: 18, name: destination, image: destination.png }
+ - { min_zoom: 12, max_zoom: 18, name: construction, image: construction.png }