지도에 도시명 켬끔 추가

hwe/css/common.css

@@ -195,3 +195,10 @@ div.bar_out div.bar_in{
 .tooltiptext {
     display: none;
 }
+
+.btn-group-xs > .btn, .btn-xs {
+    padding  : .25rem .4rem;
+    font-size  : .875rem;
+    line-height  : .5;
+    border-radius : .2rem;
+  }

hwe/css/map.css

@@ -51,6 +51,20 @@
     top:0;
 }
 
+.map_body .map_button_stack{
+    position:absolute;
+    right:0;
+    bottom:0;
+}
+
+.map_body .map_toggle_cityname::after{
+    content: "끄기"
+}
+
+.map_body .map_toggle_cityname.active::after{
+    content: "켜기"
+}
+
 .world_map .city_tooltip{
     position: absolute;
     z-index:6;
@@ -104,6 +118,10 @@
     color:white;
 }
 
+.world_map.hide_cityname .city_detail_name{
+    display:none;
+}
+
 .city_base{
     position:absolute;
     width:40px;

hwe/js/map.js

@@ -420,6 +420,25 @@ function reloadWorldMap(option){
         return obj;
     }
 
+    var $hideCityNameBtn = $world_map.find('.map_toggle_cityname');
+    if(localStorage.getItem('sam.hideMapCityName') == 'yes'){
+        $world_map.addClass('hide_cityname');
+        $hideCityNameBtn.addClass('active').attr('aria-pressed', 'true');
+    }
+
+    $hideCityNameBtn.click(function(){
+        //이전 상태 확인
+        var state = !$hideCityNameBtn.hasClass('active');
+        if(state){
+            $world_map.addClass('hide_cityname');
+            localStorage.setItem('sam.hideMapCityName', 'yes');
+        }
+        else{
+            $world_map.removeClass('hide_cityname');
+            localStorage.setItem('sam.hideMapCityName', 'no');
+        }
+    });
+
     if(isDetailMap){
         $world_map.addClass('map_detail');
     }

hwe/templates/map.php

@@ -7,6 +7,11 @@
         <div class="map_bglayer1"></div>
         <div class="map_bglayer2"></div>
         <div class="map_bgroad"></div>
+        <div class="map_button_stack">
+        <button type="button" class="btn btn-primary map_toggle_cityname btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off">
+            도시명 표기
+        </button>
+        </div>
         <div class="city_tooltip">
             <div class="city_name">
 
@@ -15,6 +20,5 @@
 
             </div>
         </div>
-        
     </div>
 </div>