安全应急

zhsq_qk-ui/src/api/components/supermap.js

@@ -20,7 +20,7 @@ export function listForMark(query) {
 export const iconList={
   "lmjs":require('@/assets/images/cameraType/sprh_11.png'),
   "xqjs":require('@/assets/images/cameraType/sprh_12.png'),
-  "yjcs":require('@/assets/images/cameraType/yjcs.png'),
+  // "yjcs":require('@/assets/images/cameraType/yjcs.png'),
   // "yy":require('@/assets/images/cameraType/yy.png'),
 }
 
@@ -29,7 +29,7 @@ export function getIcon (state) {
   switch (state) {
     case "1" : return iconList.xqjs;break;
     case "2" : return iconList.lmjs;break;
-    case "4" : return iconList.yjcs;break;
+    // case "4" : return iconList.yjcs;break;
     // case "3" : return iconList.yy;break;
   }
 }
@@ -38,5 +38,5 @@ export const yjIconList={
   "yjcs":require('@/assets/images/cameraType/yjcs.png'),
   "jyd":require('@/assets/images/cameraType/jyd.png'),
   "fxwz":require('@/assets/images/cameraType/fxwz.png'),
-  // "yy":require('@/assets/images/cameraType/yy.png'),
+  "yjj":require('@/assets/images/cameraType/yjj.png'),
 }

zhsq_qk-ui/src/api/system/aqyj.js

@@ -11,7 +11,7 @@ export function selectQkEmergencyRescueTeamAllList() {
 // 可视化查询应急避难所列表
 export function selectQkEmergencyShelterAllList() {
   return request({
-    url: '/system/camera/getBuildTypeFourList',
+    url: '/system/shelter/selectQkEmergencyShelterAllList',
     method: 'get',
   })
 }
@@ -46,3 +46,11 @@ export function warnEventAllList() {
     method: 'get',
   })
 }
+
+// 可视化查询应急局摄像头列表
+export function getBuildTypeFourList() {
+  return request({
+    url: '/system/camera/getBuildTypeFourList',
+    method: 'get',
+  })
+}

zhsq_qk-ui/src/views/fusion/aqyj.vue

@@ -2,7 +2,7 @@
   <div style="background-color: #32435A">
     <div class="map">
       <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
-                :yxtSltProps="sltProps"></supermap>
+                :yxtSltProps="sltProps" :pageType="pageType"></supermap>
     </div>
     <!-- 阴影背景 -->
     <div class="bj_left"><img src="@/assets/images/sprhbj-left.png"/></div>
@@ -32,7 +32,7 @@
           <div class="scrollbar" style="height: 660px;">
             <ul id="accordion" class="accordion yjcs">
               <!-- li上加on类名是点击选中后效果 -->
-              <li v-for="(item, index) in shelter" :class="{ on: item.id == shelterCurrent }" :key="index"
+              <li v-for="(item, index) in emergency" :class="{ on: item.id == shelterCurrent }" :key="index"
                   @click="onShelterlick(item)">
                 <div class="link">{{ item.cameraName }}</div>
               </li>
@@ -101,7 +101,7 @@
     <!--右侧结束-->
     <!-- 多选按钮  开始 -->
     <form class="qkq_dx">
-      <label><input checked type="checkbox" name="ckbx" id="sxt" @click="handleClick"/>摄像头</label>
+      <label><input checked type="checkbox" name="ckbx" id="yjj" @click="handleClick"/>摄像头</label>
       <label><input type="checkbox" name="ckbx" id="yjcs" @click="handleClick"/>应急场所</label>
       <label><input type="checkbox" name="ckbx" id="nld" @click="handleClick"/>城市内涝点</label>
       <label><input type="checkbox" name="ckbx" id="jyd" @click="handleClick"/>抢险救援队</label>
@@ -164,12 +164,12 @@ import jQuery from 'jquery'
 import "@/assets/images/qkq_body.css";
 import "@/assets/images/qkq_index.css";
 import "@/assets/images/qkq_sprh.css";
-import {getCameraList} from "@/api/system/camera";
 import {
   selectQkEmergencyRescueTeamAllList,
   selectQkEmergencyShelterAllList,
   selectQkRescueSuppliesAllList,
-  warnEventAllList
+  warnEventAllList,
+  getBuildTypeFourList
 } from "@/api/system/aqyj";
 import supermap from "@/views/supermap/supermap";
 
@@ -181,13 +181,13 @@ export default {
   },
   data() {
     return {
-      dropdownVisible: false,
-      cameras: [],
-      team: [],
+      dropdownVisible: false, team: [],
       shelter: [],
       supplies: [],
       eventData: [],
+      emergency: [],
       sltProps: null,
+      pageType: "aqyj",
       teamCurrent: null,
       shelterCurrent: null,
       suppliesCurrent: null,
@@ -205,11 +205,7 @@ export default {
     this.selectQkEmergencyShelterAllList();
     this.selectQkRescueSuppliesAllList();
     this.warnEventAllList();
-    // this.resourceDistribution();
-    // this.deviceOnline();
-    // this.deviceOffline();
-    this.cameraList();
-    // this.regionTop();
+    this.getBuildTypeFourList();
     this.qkq_aqcn_chart();
     // 每秒刷新时间
     setInterval(() => {
@@ -223,7 +219,7 @@ export default {
       let that = this;
       $('input[name="ckbx"]:checked').each(function () {
         switch ($(this).attr("id")) {
-          case "sxt":
+          case "yjj":
             that.loada();
             break;
           case "yjcs":
@@ -238,7 +234,7 @@ export default {
       });
     },
     loada() {
-      this.$refs.supermap.selectCameraList();
+      this.$refs.supermap.getBuildTypeFourList();
     },
     loadb() {
       this.$refs.supermap.selectQkEmergencyShelterAllList();
@@ -249,36 +245,6 @@ export default {
     loadd() {
       this.$refs.supermap.selectQkRescueSuppliesAllList();
     },
-    // onTeamlick(val) {
-    //   let dataSource = [];
-    //   this.suppliesCurrent = null;
-    //   this.shelterCurrent = null;
-    //   if (val.id == this.teamCurrent) {
-    //     this.teamCurrent = null;
-    //   } else {
-    //     this.teamCurrent = val.id;
-    //   }
-    //   dataSource.push(val)
-    //   // var checkbox = document.getElementById("jyd");
-    //   // checkbox.setAttribute("checked", "");
-    //   this.$refs.supermap.addMarkers(dataSource, "jyd")
-    //   this.$refs.supermap.dropLocation(val.latitude, val.longitude);
-    // },
-    // onSuppliesclick(val) {
-    //   let dataSource = [];
-    //   this.teamCurrent = null;
-    //   this.shelterCurrent = null;
-    //   if (val.id == this.suppliesCurrent) {
-    //     this.suppliesCurrent = null;
-    //   } else {
-    //     this.suppliesCurrent = val.id;
-    //   }
-    //   dataSource.push(val)
-    //   // var checkbox = document.getElementById("fxwz");
-    //   // checkbox.setAttribute("checked", "");
-    //   this.$refs.supermap.addMarkers(dataSource, "fxwz")
-    //   this.$refs.supermap.dropLocation(val.latitude, val.longitude);
-    // },
     onShelterlick(val) {
       let dataSource = [];
       this.teamCurrent = null;
@@ -291,9 +257,15 @@ export default {
       dataSource.push(val)
       // var checkbox = document.getElementById("yjcs");
       // checkbox.setAttribute("checked", "");
-      this.$refs.supermap.addMarkers(dataSource, "yjcs")
+      this.$refs.supermap.addMarkers(dataSource, "yjj")
       this.$refs.supermap.dropLocation(val.latitude, val.longitude);
     },
+    //可视化查询应急局摄像头列表
+    getBuildTypeFourList() {
+      getBuildTypeFourList().then(response => {
+        this.emergency = response.data;
+      })
+    },
     //查询监测预警全部列表
     warnEventAllList() {
       warnEventAllList().then(response => {
@@ -334,11 +306,6 @@ export default {
     homePage(route) {
       this.$router.push({path: route});
     },
-    cameraList() {
-      getCameraList().then(response => {
-        this.cameras = response.data;
-      })
-    },
     toggleDropdown(event) {
       this.dropdownVisible = !this.dropdownVisible;
     },

zhsq_qk-ui/src/views/fusion/jtzl.vue

@@ -2,7 +2,7 @@
   <div style="background-color: #32435A">
     <div class="map">
       <supermap ref="supermap" style="height: 100%;width: 100%;position: absolute;z-index: 0;"
-                :yxtSltProps="sltProps"></supermap>
+                :yxtSltProps="sltProps" :pageType="pageType"></supermap>
     </div>
     <!-- 阴影背景 -->
     <div class="bj_left"><img src="@/assets/images/sprhbj-left.png"/></div>
@@ -200,6 +200,7 @@ export default {
       dropdownVisible: false,
       cameras: [],
       sltProps: null,
+      pageType: "jtzl",
       currentTime: '',
       btnOne: true,
       btnTwo: false,

zhsq_qk-ui/src/views/supermap/supermap.vue

@@ -34,7 +34,7 @@ import {
   selectQkEmergencyShelterAllList,
   selectQkRescueSuppliesAllList,
   selectQkRescueSuppliesByDeptId,
-  selectQkEmergencyRescueTeamByDeptId
+  selectQkEmergencyRescueTeamByDeptId, getBuildTypeFourList
 } from "@/api/system/aqyj";
 
 export default {
@@ -89,6 +89,8 @@ export default {
       rfhSj: null,
       // 年份
       year: null,
+
+      pageType: null,
       //事件落点类型
       markType: ['sxt'],
       //事件详情页是否显示
@@ -105,7 +107,7 @@ export default {
     }
   },
   mounted() {
-    this.getSupermap(this.sqOptionsProps, this.jieDaoProps, this.sheQuProps, this.yxtSltProps, this.rfhSjProps, this.yearProps);
+    this.getSupermap(this.sqOptionsProps, this.jieDaoProps, this.sheQuProps, this.yxtSltProps, this.rfhSjProps, this.yearProps, this.pageType);
   },
   props: {
     // 社区集合
@@ -120,15 +122,18 @@ export default {
     rfhSjProps: null,
     // 年份
     yearProps: null,
+    //页面
+    pageType: null,
   },
   methods: {
-    getSupermap: async function (sqOptions, jieDao, sheQu, yxtSlt, rfhSj, year) {
+    getSupermap: async function (sqOptions, jieDao, sheQu, yxtSlt, rfhSj, year, pageType) {
       this.sqOptions = sqOptions;
       this.jieDao = jieDao;
       this.sheQu = sheQu;
       this.yxtSlt = yxtSlt;
       this.rfhSj = rfhSj;
       this.year = year;
+      this.pageType = pageType;
       this.mapId = "";
       this.layers = [];
       this.map_shequList = [];
@@ -160,41 +165,41 @@ export default {
         this.map_qikaiYingXiangLunKuo = window.L.supermap.tiledMapLayer(this.workspace_qkyxtlk, {
           noWrap: true
         });
-        this.initSlt();
+        this.initSlt(this.pageType);
       });
     },
 
     /**
      * 矢量图
      */
-    initSlt: async function () {
+    initSlt: async function (pageType) {
       this.layers.push(this.map_jilinShiLiang);//吉林矢量
-      this.initYxt();
+      this.initYxt(pageType);
     },
 
     /**
      * 影像图
      */
-    initYxt: async function () {
+    initYxt: async function (pageType) {
       if (this.yxtSlt == 'yxt') {//影像图
         this.layers.push(this.map_qikaiYingXiang);//汽开影像
         this.layers.push(this.map_qikaiYingXiangLunKuo);//汽开影像轮廓
       }
-      this.initZxd();
+      this.initZxd(pageType);
     },
 
     /**
      * 事件落点
      */
-    initSjd: async function () {
-      this.init(this.markType, this.map);
+    initSjd: async function (pageType) {
+      this.init(this.markType, this.map,pageType);
     },
 
     /**
      * 中心点、zoom
      */
-    initZxd: async function () {
-      this.initMap();
+    initZxd: async function (pageType) {
+      this.initMap(pageType);
     },
     /**
      * 落点定位
@@ -205,7 +210,7 @@ export default {
     /**
      * 加载地图
      */
-    initMap: async function () {
+    initMap: async function (pageType) {
       let _that = this;
       this.map && this.map.remove();
       this.map = window.L.map('qksupermap', {
@@ -219,16 +224,18 @@ export default {
         attributionControl: false,
         logoControl: false,
       });
-      this.initSjd();
+      this.initSjd(pageType);
     },
     //事件落点相关方法
-    init: function () {
-      this.selectCameraList()
+    init: function (markType, map,pageType) {
+      if(pageType == "jtzl") {
+        this.selectCameraList()
+      } else if (pageType == "aqyj") {
+        this.getBuildTypeFourList()
+      }
     },
     addMarkers(options, type) {
       let marker;
-      let markers = [];
-      let layerGroups = [];
       let clusterGroup = L.markerClusterGroup({
         //设置为true时显示聚类所占据的范围
         showCoverageOnHover: false,
@@ -248,6 +255,8 @@ export default {
           marker = this.addTeamMarker(options[i], type);
         } else if (type == "fxwz") {
           marker = this.addSuppliesMark(options[i], type);
+        } else if (type == "yjj") {
+          marker = this.addEmergencyMark(options[i], type);
         }
         clusterGroup.addLayer(marker);
         this.myLayerGroup.push({type: type, myGroup: clusterGroup});
@@ -255,7 +264,6 @@ export default {
       this.map.addLayer(clusterGroup);
     },
     addMarker(option, type) {
-      let markers = [];
       //定义图标
       let icon = new window.L.Icon({
         iconUrl: getIcon(option.buildType),
@@ -285,7 +293,6 @@ export default {
     },
 
     addShelterMarker(option, type) {
-      let markers = [];
       //定义图标
       let icon = new window.L.Icon({
         iconUrl: yjIconList[type],
@@ -301,13 +308,14 @@ export default {
       //定义泡泡层
       marker.on('mouseover', function () {
         let html = "";
-        html += "<p class='v-p-color'>摄像头名称：" + option.cameraName + "</p>";
-        html += "<p class='v-p-color'>点位具体位置：" + option.address + "</p>";
-        html += "<p class='v-p-color'>视频点：" + option.videoSpot + "</p>";
-        html += "<p class='v-p-color'>型号：" + option.cameraModel + "</p>";
-        html += "<p class='v-p-color'>数量：" + option.number + "</p>";
-        html += "<p class='v-p-color'>单位：" + option.unit + "</p>";
-        html += "<p class='v-p-color'>备注：" + option.remark + "</p>";
+        html += "<p class='v-p-color'>避难场所名称：" + option.name + "</p>";
+        html += "<p class='v-p-color'>类型：" + option.type + "</p>";
+        html += "<p class='v-p-color'>地址：" + option.address + "</p>";
+        html += "<p class='v-p-color'>避难场所范围：" + option.range + "</p>";
+        html += "<p class='v-p-color'>避难场所现状描述：" + option.state + "</p>";
+        html += "<p class='v-p-color'>占地面积（m²）：" + option.area + "</p>";
+        html += "<p class='v-p-color'>可转移安置人数（万人)：" + option.transferPerson + "</p>";
+        html += "<p class='v-p-color'>建设内容：" + option.constructionContent + "</p>";
         this.bindPopup(html).openPopup(this.getLatLng());
       });
       // /**鼠标移开关闭popup**/
@@ -319,7 +327,6 @@ export default {
 
     addTeamMarker(option, type) {
       let that = this;
-      let markers = [];
       //定义图标
       let icon = new window.L.Icon({
         iconUrl: yjIconList[type],
@@ -341,7 +348,6 @@ export default {
     },
     addSuppliesMark(option, type) {
       let that = this;
-      let markers = [];
       //定义图标
       let icon = new window.L.Icon({
         iconUrl: yjIconList[type],
@@ -361,6 +367,39 @@ export default {
       });
       return marker;
     },
+
+    addEmergencyMark(option, type) {
+      //定义图标
+      let icon = new window.L.Icon({
+        iconUrl: yjIconList[type],
+        iconAnchor: [50, 50],
+        iconSize: [37, 64],
+        popupAnchor: [-33, -47],
+        shadowSize: [41, 41]
+      });
+      //定义落点
+      let marker = L.marker([option.latitude, option.longitude], {
+        icon: icon
+      });
+      //定义泡泡层
+      marker.on('mouseover', function () {
+        let html = "";
+        html += "<p class='v-p-color'>摄像头名称：" + option.cameraName + "</p>";
+        html += "<p class='v-p-color'>点位具体位置：" + option.address + "</p>";
+        html += "<p class='v-p-color'>视频点：" + option.videoSpot + "</p>";
+        html += "<p class='v-p-color'>型号：" + option.cameraModel + "</p>";
+        html += "<p class='v-p-color'>数量：" + option.number + "</p>";
+        html += "<p class='v-p-color'>单位：" + option.unit + "</p>";
+        html += "<p class='v-p-color'>备注：" + option.remark + "</p>";
+        this.bindPopup(html).openPopup(this.getLatLng());
+      });
+      // /**鼠标移开关闭popup**/
+      marker.on('mouseout', function () {
+        this.closePopup();
+      });
+      return marker;
+    },
+
     /**
      * 清理地图标点
      */
@@ -394,6 +433,13 @@ export default {
         that.addMarkers(response.data, "jyd");
       })
     },
+    //可视化查询应急局摄像头列表
+    getBuildTypeFourList() {
+      let that = this;
+      getBuildTypeFourList().then(response => {
+        that.addMarkers(response.data, "yjj");
+      })
+    },
     selectQkEmergencyRescueTeamByDeptId(deptId) {
       selectQkEmergencyRescueTeamByDeptId(deptId).then(res => {
         this.teamData = res.data;
@@ -438,142 +484,168 @@ td {
   /* height: 1080px !important; */
   background: none;
 }
+
 .el-dialog {
-    background: #014f9f;
+  background: #014f9f;
 
 }
+
 .el-dialog__title {
-		    color: #ffffff;
-		}
-		.el-dialog__headerbtn .el-dialog__close {
-		    color: #ffffff;
-		}
-		.el-table {
-		    background-color: #014f9f;
-		    color: #fff;
-			 border-bottom: 1px solid #335d81;
-		}
-		.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
-		    background-color: #032d58c9;
-		    color: #fff;
-		}
-		.el-table .cell{
-			 color: #fff;
-		}
-		.el-table tr {
-		    background-color: #04346f61;
-		}
-		.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
-		    background-color: #1c7fdb;
-		}
-		.el-table td.el-table__cell div{
-			color: #fff;
-		}
-		.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
-		    border-bottom: 1px solid #335d81;
-		}
-		.el-table::before, .el-table--group::after, .el-table--border::after {
-		    background-color: #335d81;
-		}
-		.el-table__body-wrapper::-webkit-scrollbar{
-			background: #294f76;
-		}
-		.el-table__body-wrapper::-webkit-scrollbar-thumb {
-		  background-color: #34669c;
-		}
-		.el-table__body-wrapper::-webkit-scrollbar-track {
-		  background-color: #294f76;
-		}
-		/* popup */
-
-		.leaflet-popup {
-		    position: absolute;
-		    text-align: center;
-		    margin-bottom: 20px;
-		}
-		.leaflet-popup-content-wrapper {
-		    padding: 1px;
-		    text-align: left;
-		    border-radius: 12px;
-		}
-		.leaflet-popup-content {
-		    margin: 13px 19px;
-		    line-height: 1.4;
-        width: 298px!important;
-		}
-		.leaflet-popup-content p {
-		    margin: 18px 0;
-			color: #fff;
-		}
-		.leaflet-popup-tip-container {
-		    width: 40px;
-		    height: 20px;
-		    position: absolute;
-		    left: 50%;
-		    margin-left: -20px;
-		    overflow: hidden;
-		    pointer-events: none;
-		}
-		.leaflet-popup-tip {
-		    width: 17px;
-		    height: 17px;
-		    padding: 1px;
-
-		    margin: -10px auto 0;
-
-		    -webkit-transform: rotate(45deg);
-		    -moz-transform: rotate(45deg);
-		    -ms-transform: rotate(45deg);
-		    transform: rotate(45deg);
-		}
-		.leaflet-popup-content-wrapper,
-		.leaflet-popup-tip {
-		    background: rgba(4, 45, 106, 0.7);
-		    color: #333;
-		    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
-		}
-		.leaflet-container a.leaflet-popup-close-button {
-		    position: absolute;
-		    top: 0;
-		    right: 0;
-		    padding: 4px 4px 0 0;
-		    border: none;
-		    text-align: center;
-		    width: 18px;
-		    height: 14px;
-		    font: 16px/14px Tahoma, Verdana, sans-serif;
-		    color: #c3c3c3;
-		    text-decoration: none;
-		    font-weight: bold;
-		    background: transparent;
-		}
-		.leaflet-container a.leaflet-popup-close-button:hover {
-		    color: #999;
-		}
-		.leaflet-popup-scrolled {
-		    overflow: auto;
-		    border-bottom: 1px solid #ddd;
-		    border-top: 1px solid #ddd;
-		}
-
-		.leaflet-oldie .leaflet-popup-content-wrapper {
-		    -ms-zoom: 1;
-		}
-		.leaflet-oldie .leaflet-popup-tip {
-		    width: 24px;
-		    margin: 0 auto;
-
-		    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
-		    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
-		}
-		.leaflet-oldie .leaflet-popup-tip-container {
-		    margin-top: -1px;
-		}
-
-		.leaflet-oldie .leaflet-control-zoom,
-		.leaflet-oldie .leaflet-control-layers,
-		.leaflet-oldie .leaflet-popup-content-wrapper,
-		.leaflet-oldie .leaflet-popup-tip {
-		    border: 1px solid #999;
-		}
+  color: #ffffff;
+}
+
+.el-dialog__headerbtn .el-dialog__close {
+  color: #ffffff;
+}
+
+.el-table {
+  background-color: #014f9f;
+  color: #fff;
+  border-bottom: 1px solid #335d81;
+}
+
+.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+  background-color: #032d58c9;
+  color: #fff;
+}
+
+.el-table .cell {
+  color: #fff;
+}
+
+.el-table tr {
+  background-color: #04346f61;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: #1c7fdb;
+}
+
+.el-table td.el-table__cell div {
+  color: #fff;
+}
+
+.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
+  border-bottom: 1px solid #335d81;
+}
+
+.el-table::before, .el-table--group::after, .el-table--border::after {
+  background-color: #335d81;
+}
+
+.el-table__body-wrapper::-webkit-scrollbar {
+  background: #294f76;
+}
+
+.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: #34669c;
+}
+
+.el-table__body-wrapper::-webkit-scrollbar-track {
+  background-color: #294f76;
+}
+
+/* popup */
+
+.leaflet-popup {
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.leaflet-popup-content-wrapper {
+  padding: 1px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.leaflet-popup-content {
+  margin: 13px 19px;
+  line-height: 1.4;
+  width: 298px !important;
+}
+
+.leaflet-popup-content p {
+  margin: 18px 0;
+  color: #fff;
+}
+
+.leaflet-popup-tip-container {
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.leaflet-popup-tip {
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+
+  margin: -10px auto 0;
+
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+  background: rgba(4, 45, 106, 0.7);
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+
+.leaflet-container a.leaflet-popup-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 4px 4px 0 0;
+  border: none;
+  text-align: center;
+  width: 18px;
+  height: 14px;
+  font: 16px/14px Tahoma, Verdana, sans-serif;
+  color: #c3c3c3;
+  text-decoration: none;
+  font-weight: bold;
+  background: transparent;
+}
+
+.leaflet-container a.leaflet-popup-close-button:hover {
+  color: #999;
+}
+
+.leaflet-popup-scrolled {
+  overflow: auto;
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+  -ms-zoom: 1;
+}
+
+.leaflet-oldie .leaflet-popup-tip {
+  width: 24px;
+  margin: 0 auto;
+
+  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+}
+
+.leaflet-oldie .leaflet-popup-tip-container {
+  margin-top: -1px;
+}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+  border: 1px solid #999;
+}
 </style>