Newer
Older
osm-data / citymesh.html
@haya4 haya4 on 26 Jul 2022 1 KB 地域メッシュコード
<!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="citymesh.js" type='text/javascript'></script>
		<style type="text/css">
			#map {
				width: 98%;
				height: 720px;
			}

		    #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><div id='title'></div></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>