- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta http-equiv="content-style-type" content="text/css">
- <meta http-equiv="content-script-type" content="text/javascript">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css">
- <script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>
- <style type="text/css">
- div.fill {width: 100%; height: 100%;}
-
- body {padding: 0; margin: 0;}
- html, body, #map {height: 100%; width: 100%;}
- .ol-attribution {
- padding: 3px; position: absolute; background-color:#ffffff;
- background-color:rgba(230,255,255,0.7);
- right: 3px; bottom:5px; font-size:12px;
- }
- .ol-attribution ul { padding: 0px; line-height: 14px; margin: 0px; }
- .ol-attribution li { line-height: inherit; display: inline; list-style: none outside none; }
-
- .ol-zoom .ol-zoom-out { margin-top: 202px; }
- .ol-zoomslider { background-color: transparent; top: 2.3em; }
- .ol-touch .ol-zoom .ol-zoom-out { margin-top: 212px; }
- .ol-touch .ol-zoomslider { top: 2.75em; }
-
- .ol-popup { display: none; position: absolute; background-color: white;
- -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
- -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
- filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
- padding: 5px; border-radius: 10px; border: 1px solid #cccccc; bottom: 24px; left: -51px; }
- .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " ";
- height: 0; width: 0; position: absolute; pointer-events: none; }
- .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; }
- .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; }
- .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; }
- .ol-popup-closer:after { content: " ✖ "; }
- </style>
- <title>OpenLayers 3 Example: KML Layer Popup</title>
- <script src="ol3ex10.js" type="text/javascript"></script>
- <script src="../jquery.min.js" type="text/javascript"></script>
- </head>
-
- <body onload="init_map()">
- <div id="map_canvas" style="width: 100%; height: 97%; position:absolute; top:25px; left:0px; font-size:100%;">
- <div id="popup" class="ol-popup">
- <a href="#" id="popup-closer" class="ol-popup-closer"></a>
- <div id="popup-content"></div>
- </div>
- </div>
-
- <div style="font-size:85%"> 不透明度:<a title="decrease opacity" href="javascript: directSetOpacity(0.1);">0.1</a>
- <a title="decrease opacity" href="javascript: directSetOpacity(0.5);">0.5</a>
- <a title="decrease opacity" href="javascript: directSetOpacity(1.0); ">1.0</a>
- <b> 不透明度・0.2ずつ変更:
- <a title="decrease opacity" href="javascript: changeOpacity(-0.2);"><<</a>
- <span id="opacity_control">0.5</span>
- <a title="increase opacity" href="javascript: changeOpacity(0.2);">>></a></b>
- </div>
-
- </body>
- </html>