Newer
Older
osm-data / pref.html
@haya4 haya4 on 26 Jul 2022 1 KB 地域メッシュコード
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8'/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>PLATEAU DATA</title>
  7. <link rel="stylesheet" href="lib/ol6.14.1-dist/ol.css" type="text/css">
  8. <link rel="stylesheet" href="lib/surveyor.css" type="text/css">
  9. <script src="lib/ol6.14.1-dist/ol.js"></script>
  10. <script src="preflist.js" type='text/javascript'></script>
  11. <script src="lib/jquery-2.1.1.min.js"></script>
  12. <script src="pref.js" type='text/javascript'></script>
  13. <style type="text/css">
  14. #map {
  15. width: 98%;
  16. height: 720px;
  17. }
  18.  
  19. #popup {
  20. position: relative;
  21. display: inline-block;
  22. margin: 1.5em 0;
  23. padding: 7px 10px;
  24. min-width: 120px;
  25. max-width: 100%;
  26. color: #555;
  27. font-size: 16px;
  28. background: #FFF;
  29. border: solid 3px #555;
  30. box-sizing: border-box;
  31. }
  32. #popup:before {
  33. content: "";
  34. position: absolute;
  35. bottom: -24px;
  36. left: 50%;
  37. margin-left: -15px;
  38. border: 12px solid transparent;
  39. border-top: 12px solid #FFF;
  40. z-index: 2;
  41. }
  42. #popup:after {
  43. content: "";
  44. position: absolute;
  45. bottom: -30px;
  46. left: 50%;
  47. margin-left: -17px;
  48. border: 14px solid transparent;
  49. border-top: 14px solid #555;
  50. z-index: 1;
  51. }
  52. .popup p {
  53. margin: 0;
  54. padding: 0;
  55. }
  56. </style>
  57. </head>
  58. <body onload='loadMap();'>
  59. <div id="wrap">
  60. <div class="header">
  61. <H1><div id='title'></div></H1>
  62. <div id='map'></div>
  63. </div>
  64. </div>
  65. <!-- ポップアップ -->
  66. <div id='popup' class='ol-popup'>
  67. <a href='#' id='popup-closer' class='ol-popup-closer'></a>
  68. <div id='popup-content'></div>
  69. </div>
  70. </body>
  71. </html>