- <!DOCTYPE html>
- <html>
- <head>
- <meta charset='utf-8'/>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>PLATEAU DATA</title>
- <link rel="stylesheet" href="lib/ol6.14.1-dist/ol.css" type="text/css">
- <link rel="stylesheet" href="lib/surveyor.css" type="text/css">
- <script src="lib/ol6.14.1-dist/ol.js"></script>
- <script src="lib/jquery-2.1.1.min.js"></script>
- <script src="preflist.js" type='text/javascript'></script>
- <style>
- #map {
- width: 100%;
- height: 600px;
- }
-
- #popup {
- position: relative;
- display: inline-block;
- margin: 1.5em 0;
- padding: 7px 10px;
- min-width: 120px;
- max-width: 100%;
- color: #555;
- font-size: 16px;
- background: #FFF;
- border: solid 3px #555;
- box-sizing: border-box;
- }
-
- #popup:before {
- content: "";
- position: absolute;
- bottom: -24px;
- left: 50%;
- margin-left: -15px;
- border: 12px solid transparent;
- border-top: 12px solid #FFF;
- z-index: 2;
- }
-
- #popup:after {
- content: "";
- position: absolute;
- bottom: -30px;
- left: 50%;
- margin-left: -17px;
- border: 14px solid transparent;
- border-top: 14px solid #555;
- z-index: 1;
- }
-
- .popup p {
- margin: 0;
- padding: 0;
- }
- </style>
- </head>
- <body onload='loadMap();'>
- <div id="wrap">
- <div class="header">
- <H1>都道府県</H1>
- <div id='map'></div>
- </div>
- </div>
-
- <!-- ポップアップ -->
- <div id='popup' class='ol-popup'>
- <a href='#' id='popup-closer' class='ol-popup-closer'></a>
- <div id='popup-content'></div>
- </div>
-
- </body>
- </html>