Skip to content

O
officejs
Commit b45b7f45 authored by Sebastien Robin's avatar Sebastien Robin
Browse files
Options

initial try for displaying large image with OpenLayers

parent 73a1788f
Hide whitespace changes
Inline Side-by-side
Showing with 2404 additions and 0 deletions
poc/lib/OpenLayers.js 0 → 100644
View file @ b45b7f45
This source diff could not be displayed because it is too large. You can view the blob instead.
poc/safeimage/css/default_style.css 0 → 100644
View file @ b45b7f45
div.olMap
{
z-index:0;
cursor:default;
margin:0!important;
padding:0!important;
}
div.olMapViewport
{
text-align:left;
}
.olLayerGoogleCopyright
{
left:2px;
bottom:2px;
}
.olLayerGoogleV3.olLayerGoogleCopyright
{
right:auto!important;
}
.olLayerGooglePoweredBy
{
left:2px;
bottom:15px;
}
.olLayerGoogleV3.olLayerGooglePoweredBy
{
bottom:15px!important;
}
.olControlAttribution
{
font-size:smaller;
right:3px;
bottom:4.5em;
position:absolute;
display:block;
}
.olControlScale
{
right:3px;
bottom:3em;
display:block;
position:absolute;
font-size:smaller;
}
.olControlScaleLine
{
display:block;
position:absolute;
left:10px;
bottom:15px;
font-size:xx-small;
}
.olControlScaleLineBottom
{
border:solid 2px #000;
border-bottom:none;
margin-top:-2px;
text-align:center;
}
.olControlScaleLineTop
{
border:solid 2px #000;
border-top:none;
text-align:center;
}
.olControlPermalink
{
right:3px;
bottom:1.5em;
display:block;
position:absolute;
font-size:smaller;
}
div.olControlMousePosition
{
bottom:0;
right:3px;
display:block;
position:absolute;
font-family:Arial;
font-size:smaller;
}
.olControlOverviewMapContainer
{
position:absolute;
bottom:0;
right:0;
}
.olControlOverviewMapElement
{
background-color:#00008B;
-moz-border-radius:1em 0 0;
padding:10px 18px 10px 10px;
}
.olControlOverviewMapMinimizeButton,.olControlOverviewMapMaximizeButton
{
height:18px;
width:18px;
right:0;
bottom:80px;
cursor:pointer;
}
.olControlOverviewMapExtentRectangle
{
overflow:hidden;
background-image:url(img/blank.gif);
cursor:move;
border:2px dotted red;
}
.olControlOverviewMapRectReplacement
{
overflow:hidden;
cursor:move;
background-image:url(img/overview_replacement.gif);
background-repeat:no-repeat;
background-position:center;
}
.olLayerGeoRSSDescription
{
float:left;
width:100%;
overflow:auto;
font-size:1em;
}
.olLayerGeoRSSClose
{
float:right;
color:gray;
font-size:1.2em;
margin-right:6px;
font-family:sans-serif;
}
.olLayerGeoRSSTitle
{
float:left;
font-size:1.2em;
}
.olControlNavigationHistory
{
background-image:url(img/navigation_history.png);
background-repeat:no-repeat;
width:24px;
height:24px;
}
.olControlNavigationHistoryPreviousItemActive
{
background-position:0 0;
}
.olControlNavigationHistoryPreviousItemInactive
{
background-position:0 -24px;
}
.olControlNavigationHistoryNextItemActive
{
background-position:-24px 0;
}
.olControlNavigationHistoryNextItemInactive
{
background-position:-24px -24px;
}
div.olControlSaveFeaturesItemActive
{
background-image:url(img/save_features_on.png);
background-repeat:no-repeat;
background-position:0 1px;
}
div.olControlSaveFeaturesItemInactive
{
background-image:url(img/save_features_off.png);
background-repeat:no-repeat;
background-position:0 1px;
}
.olHandlerBoxZoomBox
{
border:2px solid red;
position:absolute;
background-color:#FFF;
opacity:.5;
font-size:1px;
filter:alpha(opacity=50);
}
.olHandlerBoxSelectFeature
{
border:2px solid blue;
position:absolute;
background-color:#FFF;
opacity:.5;
font-size:1px;
filter:alpha(opacity=50);
}
.olControlPanPanel
{
top:10px;
left:5px;
}
.olControlPanPanel div
{
background-image:url(img/pan-panel.png);
height:18px;
width:18px;
cursor:pointer;
position:absolute;
}
.olControlPanPanel .olControlPanNorthItemInactive
{
top:0;
left:9px;
background-position:0 0;
}
.olControlPanPanel .olControlPanSouthItemInactive
{
top:36px;
left:9px;
background-position:18px 0;
}
.olControlPanPanel .olControlPanWestItemInactive
{
position:absolute;
top:18px;
left:0;
background-position:0 18px;
}
.olControlPanPanel .olControlPanEastItemInactive
{
top:18px;
left:18px;
background-position:18px 18px;
}
.olControlZoomPanel
{
top:71px;
left:14px;
}
.olControlZoomPanel div
{
background-image:url(img/zoom-panel.png);
position:absolute;
height:18px;
width:18px;
cursor:pointer;
}
.olControlZoomPanel .olControlZoomInItemInactive
{
top:0;
left:0;
background-position:0 0;
}
.olControlZoomPanel .olControlZoomToMaxExtentItemInactive
{
top:18px;
left:0;
background-position:0 -18px;
}
.olControlZoomPanel .olControlZoomOutItemInactive
{
top:36px;
left:0;
background-position:0 18px;
}
.olControlPanZoomBar div
{
font-size:1px;
}
.olPopupCloseBox
{
background:url(img/close.gif) no-repeat;
cursor:pointer;
}
.olImageLoadError
{
background-color:#FFC0CB;
opacity:.5;
filter:alpha(opacity=50);
}
.olCursorWait
{
cursor:wait;
}
.olDrawBox
{
cursor:crosshair;
}
.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown
{
cursor:0;
}
.olControlLayerSwitcher
{
position:absolute;
top:25px;
right:0;
width:20em;
font-family:sans-serif;
font-weight:700;
margin-top:3px;
margin-left:3px;
margin-bottom:3px;
font-size:smaller;
color:#FFF;
background-color:transparent;
}
.olControlLayerSwitcher .layersDiv
{
background-color:#00008B;
padding:5px 10px;
}
.olControlLayerSwitcher .layersDiv .baseLbl,.olControlLayerSwitcher .layersDiv .dataLbl
{
margin-top:3px;
margin-left:3px;
margin-bottom:3px;
}
.olControlLayerSwitcher .layersDiv .baseLayersDiv,.olControlLayerSwitcher .layersDiv .dataLayersDiv
{
padding-left:10px;
}
.olControlLayerSwitcher .maximizeDiv,.olControlLayerSwitcher .minimizeDiv
{
width:18px;
height:18px;
top:5px;
right:0;
cursor:pointer;
}
.olBingAttribution
{
color:#DDD;
}
span.olGoogleAttribution a
{
color:#77C;
}
.olControlNavToolbar,.olControlEditingToolbar
{
margin:5px 5px 0 0;
}
.olControlNavToolbar div,.olControlEditingToolbar div
{
background-image:url(img/editing_tool_bar.png);
background-repeat:no-repeat;
width:24px;
height:22px;
cursor:pointer;
margin:0 0 5px 5px;
}
.olControlEditingToolbar
{
right:0;
top:0;
}
.olControlNavToolbar
{
top:295px;
left:9px;
}
.olControlEditingToolbar div
{
float:right;
}
.olControlNavToolbar .olControlNavigationItemInactive,.olControlEditingToolbar .olControlNavigationItemInactive
{
background-position:-103px -1px;
}
.olControlNavToolbar .olControlNavigationItemActive,.olControlEditingToolbar .olControlNavigationItemActive
{
background-position:-103px -24px;
}
.olControlNavToolbar .olControlZoomBoxItemInactive
{
background-position:-128px -1px;
}
.olControlNavToolbar .olControlZoomBoxItemActive
{
background-position:-128px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePointItemInactive
{
background-position:-77px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePointItemActive
{
background-position:-77px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePathItemInactive
{
background-position:-51px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePathItemActive
{
background-position:-51px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive
{
background-position:-26px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive
{
background-position:-26px -24px;
}
div.olControlZoom
{
position:absolute;
top:8px;
left:8px;
background:rgba(255,255,255,0.4);
border-radius:4px;
padding:2px;
}
div.olControlZoom a
{
display:block;
color:#FFF;
font-size:18px;
font-family:'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-weight:700;
text-decoration:none;
text-align:center;
height:22px;
width:22px;
line-height:19px;
background:rgba(0,60,136,0.5);
filter:alpha(opacity=80);
margin:1px;
padding:0;
}
div.olControlZoom a:hover
{
background:rgba(0,60,136,0.7);
filter:alpha(opacity=100);
}
a.olControlZoomIn
{
border-radius:4px 4px 0 0;
}
a.olControlZoomOut
{
border-radius:0 0 4px 4px;
}
.olLayerGrid .olTileImage
{
-webkit-transition:opacity .2s linear;
-moz-transition:opacity .2s linear;
-o-transition:opacity .2s linear;
transition:opacity .2s linear;
}
div.olLayerDiv,.olControlNoSelect
{
-khtml-user-select:none;
-moz-user-select:none;
}
.olPopupContent,.olFramedCloudPopupContent
{
overflow:auto;
padding:5px;
}
.olDragDown,.olControlDragFeatureOver
{
cursor:move;
}
.olBingAttribution.road,.olGoogleAttribution
{
color:#333;
}
.olGoogleAttribution.hybrid,.olGoogleAttribution.satellite,span.olGoogleAttribution.hybrid a,span.olGoogleAttribution.satellite a
{
color:#EEE;
}
@media only screen and max-width 600px {
div.olControlZoom a:hover
{
background:rgba(0,60,136,0.5);
}
}
\ No newline at end of file
poc/safeimage/css/style.css 0 → 100644
View file @ b45b7f45
/**
* CSS Reset
* From Blueprint reset.css
* http://blueprintcss.googlecode.com
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
/**
* Basic Typography
*/
body {
font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #222;
background: #fff;
margin: 1em 1.5em;
}
pre, code {
margin: 1.5em 0;
white-space: pre;
}
pre, code {
font: 1em 'andale mono', 'lucida console', monospace;
line-height:1.5;
}
a[href] {
color: #436976;
background-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
color: #003a6b;
background-color: transparent;
font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
margin: 0;
padding-top: 0.5em;
}
h1 {
font-size: 130%;
margin-bottom: 0.5em;
border-bottom: 1px solid #fcb100;
}
h2 {
font-size: 120%;
margin-bottom: 0.5em;
border-bottom: 1px solid #aaa;
}
h3 {
font-size: 110%;
margin-bottom: 0.5em;
text-decoration: underline;
}
h4 {
font-size: 100%;
font-weight: bold;
}
h5 {
font-size: 100%;
font-weight: bold;
}
h6 {
font-size: 80%;
font-weight: bold;
}
.olControlAttribution {
bottom: 5px;
}
/**
* Map Examples Specific
*/
.smallmap {
width: 1024px;
height: 512px;
border: 1px solid #ccc;
}
#tags {
display: none;
}
#docs p {
margin-bottom: 0.5em;
}
/* mobile specific */
@media only screen and (max-width: 600px) {
body {
height : 100%;
margin : 0;
padding : 0;
width : 100%;
}
#map {
background : #7391ad;
width : 100%;
}
#map {
border : 0;
height : 250px;
}
#title {
font-size : 1.3em;
line-height : 2em;
text-indent : 1em;
margin : 0;
padding : 0;
}
#docs {
bottom : 0;
padding : 1em;
}
#shortdesc {
color : #aaa;
font-size : 0.8em;
padding : 1em;
text-align : right;
}
#tags {
display : none;
}
}
@media only screen and (orientation: landscape) and (max-width: 600px) {
#shortdesc {
float: right;
width: 25%;
}
#map {
width: 70%;
}
#docs {
font-size: 12px;
}
}
body {
-webkit-text-size-adjust: none;
}
poc/safeimage/index.html 0 → 100644
View file @ b45b7f45
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>SafeImage Example</title>
<link rel="stylesheet" href="css/default_style.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var zoomify_width = 29566;
var zoomify_height = 14321;
var zoomify_url = "image/hs-2007-16-a-full_jpg/";
var map, zoomify;
function init(){
/* First we initialize the zoomify pyramid (to get number of tiers) */
var zoomify = new OpenLayers.Layer.Zoomify( "Zoomify", zoomify_url,
new OpenLayers.Size( zoomify_width, zoomify_height ) );
/* Map with raster coordinates (pixels) from Zoomify image */
var options = {
maxExtent: new OpenLayers.Bounds(0, 0, zoomify_width, zoomify_height),
maxResolution: Math.pow(2, zoomify.numberOfTiers-1 ),
numZoomLevels: zoomify.numberOfTiers,
units: 'pixels'
};
map = new OpenLayers.Map("map", options);
map.addLayer(zoomify);
map.setBaseLayer(zoomify);
map.zoomToMaxExtent();
};
</script>
</head>
<body onload="init()">
<h1 id="title">Zoomify Layer Example</h1>
<div id="tags">
zoomify, layer
</div>
<p id="shortdesc">
Demo of a layer with Zoomify tiles.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
Demonstration of the Zoomify layer in OpenLayers.<br>
You can have a look at <a href="http://almor.mzk.cz/moll/AA22/103.html">Zoomify viewer for this picture</a>, which is using the same <a href="http://almor.mzk.cz/moll/AA22/0103/">tiles</a>.
</p>
<p>
For change to our own image you have to specify 'url' (zoomifyImagePath in Zoomify terminology) and 'size' ('width' and 'height' from ImageProperty.xml file).<br>
Custom tiles can be easily generated with original <a href="http://www.zoomify.com/">Zoomify software</a> like with freely available <a href="http://www.zoomify.com/express.htm">ZoomifyerEZ</a> or with Adobe PhotoShop CS3 (it has built in support for export into Zoomify tiles).<br>
There is also a <a href="http://sourceforge.net/projects/zoomifyimage/">ZoomifyImage SourceForge Project</a>, a tile cutter available under GPL license.<br>
Zoomify tiles can be also served dynamically on the server side from JPEG2000 masters using <a href="http://dltj.org/article/introducing-j2ktilerenderer/">J2KTileRender</a> with available integration for DSpace and soon for Fedora Digital Repository.<br>
<a href="http://iipimage.sourceforge.net/">IIPImage server</a> can serve Zoomify tiles dynamically from TIFF files.
</p>
<p>
Development of the Zoomify support for OpenLayers was supported from the grant <a href="http://www.oldmapsonline.org/">Old Maps Online</a>.
</p>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7