Update wmts-hidpi
This commit is contained in:
Andreas Hocevar
@@ -10,8 +10,21 @@
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Accessibility example</title>
|
||||
<style>
|
||||
a.accesskey {
|
||||
color: #FFFFFF;
|
||||
a.skiplink {
|
||||
position: absolute;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
a.skiplink:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
background-color: #fff;
|
||||
padding: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -20,7 +33,7 @@
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
<a class="brand" href="./"><img src="../resources/logo.png" alt=""> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -29,10 +42,8 @@
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<a class="accesskey" onclick="document.getElementById('map').focus(); return false;" accesskey="1" href="">Go to map</a>
|
||||
<a class="skiplink" href="#map">Go to map</a>
|
||||
<div id="map" class="map" tabindex="0"></div>
|
||||
<a class="zoom" accesskey="i" href="javascript: void map.getView().setZoom(map.getView().getZoom() + 1);">Zoom in</a>
|
||||
<a class="zoom" accesskey="o" href="javascript: void map.getView().setZoom(map.getView().getZoom() - 1);">Zoom out</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,9 +53,9 @@
|
||||
<h4 id="title">Accessibility example</h4>
|
||||
<p id="shortdesc">Example of an accessible map.</p>
|
||||
<div id="docs">
|
||||
<p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>. That makes is focusable. To focus the map element you can either navigate to it using the "tab" key, or use the <a href="http://en.wikipedia.org/wiki/Access_key">Access Key</a> "1" (alt+1 or ctrl+alt+1) which provides a direct access. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out, and the arrow keys can be used to pan.</p>
|
||||
<p>When clicked the "Zoom in" and "Zoom out" links below the map zoom the map in and out, respectively. You can navigate to the links using the "tab" key, and press the "enter" key to trigger the zooming action. The Access Keys "i" and "o" can also be used, as a direct access to the actions of "Zoom in" and "Zoom out" links.</p>
|
||||
<p>See the source of the page to see how this done.</p>
|
||||
<p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.</p>
|
||||
<p>When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.</p>
|
||||
<p>See the <a href="accessible.js" target="_blank">accessible.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">accessibility, tabindex</div>
|
||||
</div>
|
||||
|
||||
@@ -11,3 +11,10 @@ var map = new ol.Map({
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
jQuery('#map').after('<button type="button" ' +
|
||||
'onclick="map.getView().setZoom(map.getView().getZoom() - 1);">' +
|
||||
'Zoom out</button>');
|
||||
jQuery('#map').after('<button type="button" ' +
|
||||
'onclick="map.getView().setZoom(map.getView().getZoom() + 1);">' +
|
||||
'Zoom in</button>');
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.animation');
|
||||
goog.require('ol.easing');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
@@ -1,3 +1,30 @@
|
||||
// from https://github.com/DmitryBaranovskiy/raphael
|
||||
function bounce(t) {
|
||||
var s = 7.5625, p = 2.75, l;
|
||||
if (t < (1 / p)) {
|
||||
l = s * t * t;
|
||||
} else {
|
||||
if (t < (2 / p)) {
|
||||
t -= (1.5 / p);
|
||||
l = s * t * t + 0.75;
|
||||
} else {
|
||||
if (t < (2.5 / p)) {
|
||||
t -= (2.25 / p);
|
||||
l = s * t * t + 0.9375;
|
||||
} else {
|
||||
t -= (2.625 / p);
|
||||
l = s * t * t + 0.984375;
|
||||
}
|
||||
}
|
||||
}
|
||||
return l;
|
||||
}
|
||||
|
||||
// from https://github.com/DmitryBaranovskiy/raphael
|
||||
function elastic(t) {
|
||||
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
|
||||
}
|
||||
|
||||
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
|
||||
var moscow = ol.proj.transform([37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
|
||||
var istanbul = ol.proj.transform([28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
|
||||
@@ -66,7 +93,7 @@ var elasticToMoscow = document.getElementById('elastic-to-moscow');
|
||||
elasticToMoscow.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
duration: 2000,
|
||||
easing: ol.easing.elastic,
|
||||
easing: elastic,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
||||
});
|
||||
map.beforeRender(pan);
|
||||
@@ -77,7 +104,7 @@ var bounceToIstanbul = document.getElementById('bounce-to-istanbul');
|
||||
bounceToIstanbul.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
duration: 2000,
|
||||
easing: ol.easing.bounce,
|
||||
easing: bounce,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
||||
});
|
||||
map.beforeRender(pan);
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
{"type":"Feature","id":"COL","properties":{"name":"Colombia"},"geometry":{"type":"Polygon","coordinates":[[[-75.373223,-0.152032],[-75.801466,0.084801],[-76.292314,0.416047],[-76.57638,0.256936],[-77.424984,0.395687],[-77.668613,0.825893],[-77.855061,0.809925],[-78.855259,1.380924],[-78.990935,1.69137],[-78.617831,1.766404],[-78.662118,2.267355],[-78.42761,2.629556],[-77.931543,2.696606],[-77.510431,3.325017],[-77.12769,3.849636],[-77.496272,4.087606],[-77.307601,4.667984],[-77.533221,5.582812],[-77.318815,5.845354],[-77.476661,6.691116],[-77.881571,7.223771],[-77.753414,7.70984],[-77.431108,7.638061],[-77.242566,7.935278],[-77.474723,8.524286],[-77.353361,8.670505],[-76.836674,8.638749],[-76.086384,9.336821],[-75.6746,9.443248],[-75.664704,9.774003],[-75.480426,10.61899],[-74.906895,11.083045],[-74.276753,11.102036],[-74.197223,11.310473],[-73.414764,11.227015],[-72.627835,11.731972],[-72.238195,11.95555],[-71.75409,12.437303],[-71.399822,12.376041],[-71.137461,12.112982],[-71.331584,11.776284],[-71.973922,11.608672],[-72.227575,11.108702],[-72.614658,10.821975],[-72.905286,10.450344],[-73.027604,9.73677],[-73.304952,9.152],[-72.78873,9.085027],[-72.660495,8.625288],[-72.439862,8.405275],[-72.360901,8.002638],[-72.479679,7.632506],[-72.444487,7.423785],[-72.198352,7.340431],[-71.960176,6.991615],[-70.674234,7.087785],[-70.093313,6.960376],[-69.38948,6.099861],[-68.985319,6.206805],[-68.265052,6.153268],[-67.695087,6.267318],[-67.34144,6.095468],[-67.521532,5.55687],[-67.744697,5.221129],[-67.823012,4.503937],[-67.621836,3.839482],[-67.337564,3.542342],[-67.303173,3.318454],[-67.809938,2.820655],[-67.447092,2.600281],[-67.181294,2.250638],[-66.876326,1.253361],[-67.065048,1.130112],[-67.259998,1.719999],[-67.53781,2.037163],[-67.868565,1.692455],[-69.816973,1.714805],[-69.804597,1.089081],[-69.218638,0.985677],[-69.252434,0.602651],[-69.452396,0.706159],[-70.015566,0.541414],[-70.020656,-0.185156],[-69.577065,-0.549992],[-69.420486,-1.122619],[-69.444102,-1.556287],[-69.893635,-4.298187],[-70.394044,-3.766591],[-70.692682,-3.742872],[-70.047709,-2.725156],[-70.813476,-2.256865],[-71.413646,-2.342802],[-71.774761,-2.16979],[-72.325787,-2.434218],[-73.070392,-2.308954],[-73.659504,-1.260491],[-74.122395,-1.002833],[-74.441601,-0.53082],[-75.106625,-0.057205],[-75.373223,-0.152032]]]}},
|
||||
{"type":"Feature","id":"CRI","properties":{"name":"Costa Rica"},"geometry":{"type":"Polygon","coordinates":[[[-82.965783,8.225028],[-83.508437,8.446927],[-83.711474,8.656836],[-83.596313,8.830443],[-83.632642,9.051386],[-83.909886,9.290803],[-84.303402,9.487354],[-84.647644,9.615537],[-84.713351,9.908052],[-84.97566,10.086723],[-84.911375,9.795992],[-85.110923,9.55704],[-85.339488,9.834542],[-85.660787,9.933347],[-85.797445,10.134886],[-85.791709,10.439337],[-85.659314,10.754331],[-85.941725,10.895278],[-85.71254,11.088445],[-85.561852,11.217119],[-84.903003,10.952303],[-84.673069,11.082657],[-84.355931,10.999226],[-84.190179,10.79345],[-83.895054,10.726839],[-83.655612,10.938764],[-83.40232,10.395438],[-83.015677,9.992982],[-82.546196,9.566135],[-82.932891,9.476812],[-82.927155,9.07433],[-82.719183,8.925709],[-82.868657,8.807266],[-82.829771,8.626295],[-82.913176,8.423517],[-82.965783,8.225028]]]}},
|
||||
{"type":"Feature","id":"CUB","properties":{"name":"Cuba"},"geometry":{"type":"Polygon","coordinates":[[[-82.268151,23.188611],[-81.404457,23.117271],[-80.618769,23.10598],[-79.679524,22.765303],[-79.281486,22.399202],[-78.347434,22.512166],[-77.993296,22.277194],[-77.146422,21.657851],[-76.523825,21.20682],[-76.19462,21.220565],[-75.598222,21.016624],[-75.67106,20.735091],[-74.933896,20.693905],[-74.178025,20.284628],[-74.296648,20.050379],[-74.961595,19.923435],[-75.63468,19.873774],[-76.323656,19.952891],[-77.755481,19.855481],[-77.085108,20.413354],[-77.492655,20.673105],[-78.137292,20.739949],[-78.482827,21.028613],[-78.719867,21.598114],[-79.285,21.559175],[-80.217475,21.827324],[-80.517535,22.037079],[-81.820943,22.192057],[-82.169992,22.387109],[-81.795002,22.636965],[-82.775898,22.68815],[-83.494459,22.168518],[-83.9088,22.154565],[-84.052151,21.910575],[-84.54703,21.801228],[-84.974911,21.896028],[-84.447062,22.20495],[-84.230357,22.565755],[-83.77824,22.788118],[-83.267548,22.983042],[-82.510436,23.078747],[-82.268151,23.188611]]]}},
|
||||
{"type":"Feature","id":"-99","properties":{"name":"Northern Cyprus"},"geometry":{"type":"Polygon","coordinates":[[[32.73178,35.140026],[32.802474,35.145504],[32.946961,35.386703],[33.667227,35.373216],[34.576474,35.671596],[33.900804,35.245756],[33.973617,35.058506],[33.86644,35.093595],[33.675392,35.017863],[33.525685,35.038688],[33.475817,35.000345],[33.455922,35.101424],[33.383833,35.162712],[33.190977,35.173125],[32.919572,35.087833],[32.73178,35.140026]]]}},
|
||||
{"type":"Feature","id":"TRNC","properties":{"name":"Northern Cyprus"},"geometry":{"type":"Polygon","coordinates":[[[32.73178,35.140026],[32.802474,35.145504],[32.946961,35.386703],[33.667227,35.373216],[34.576474,35.671596],[33.900804,35.245756],[33.973617,35.058506],[33.86644,35.093595],[33.675392,35.017863],[33.525685,35.038688],[33.475817,35.000345],[33.455922,35.101424],[33.383833,35.162712],[33.190977,35.173125],[32.919572,35.087833],[32.73178,35.140026]]]}},
|
||||
{"type":"Feature","id":"CYP","properties":{"name":"Cyprus"},"geometry":{"type":"Polygon","coordinates":[[[33.973617,35.058506],[34.004881,34.978098],[32.979827,34.571869],[32.490296,34.701655],[32.256667,35.103232],[32.73178,35.140026],[32.919572,35.087833],[33.190977,35.173125],[33.383833,35.162712],[33.455922,35.101424],[33.475817,35.000345],[33.525685,35.038688],[33.675392,35.017863],[33.86644,35.093595],[33.973617,35.058506]]]}},
|
||||
{"type":"Feature","id":"CZE","properties":{"name":"Czech Republic"},"geometry":{"type":"Polygon","coordinates":[[[16.960288,48.596982],[16.499283,48.785808],[16.029647,48.733899],[15.253416,49.039074],[14.901447,48.964402],[14.338898,48.555305],[13.595946,48.877172],[13.031329,49.307068],[12.521024,49.547415],[12.415191,49.969121],[12.240111,50.266338],[12.966837,50.484076],[13.338132,50.733234],[14.056228,50.926918],[14.307013,51.117268],[14.570718,51.002339],[15.016996,51.106674],[15.490972,50.78473],[16.238627,50.697733],[16.176253,50.422607],[16.719476,50.215747],[16.868769,50.473974],[17.554567,50.362146],[17.649445,50.049038],[18.392914,49.988629],[18.853144,49.49623],[18.554971,49.495015],[18.399994,49.315001],[18.170498,49.271515],[18.104973,49.043983],[17.913512,48.996493],[17.886485,48.903475],[17.545007,48.800019],[17.101985,48.816969],[16.960288,48.596982]]]}},
|
||||
{"type":"Feature","id":"DEU","properties":{"name":"Germany"},"geometry":{"type":"Polygon","coordinates":[[[9.921906,54.983104],[9.93958,54.596642],[10.950112,54.363607],[10.939467,54.008693],[11.956252,54.196486],[12.51844,54.470371],[13.647467,54.075511],[14.119686,53.757029],[14.353315,53.248171],[14.074521,52.981263],[14.4376,52.62485],[14.685026,52.089947],[14.607098,51.745188],[15.016996,51.106674],[14.570718,51.002339],[14.307013,51.117268],[14.056228,50.926918],[13.338132,50.733234],[12.966837,50.484076],[12.240111,50.266338],[12.415191,49.969121],[12.521024,49.547415],[13.031329,49.307068],[13.595946,48.877172],[13.243357,48.416115],[12.884103,48.289146],[13.025851,47.637584],[12.932627,47.467646],[12.62076,47.672388],[12.141357,47.703083],[11.426414,47.523766],[10.544504,47.566399],[10.402084,47.302488],[9.896068,47.580197],[9.594226,47.525058],[8.522612,47.830828],[8.317301,47.61358],[7.466759,47.620582],[7.593676,48.333019],[8.099279,49.017784],[6.65823,49.201958],[6.18632,49.463803],[6.242751,49.902226],[6.043073,50.128052],[6.156658,50.803721],[5.988658,51.851616],[6.589397,51.852029],[6.84287,52.22844],[7.092053,53.144043],[6.90514,53.482162],[7.100425,53.693932],[7.936239,53.748296],[8.121706,53.527792],[8.800734,54.020786],[8.572118,54.395646],[8.526229,54.962744],[9.282049,54.830865],[9.921906,54.983104]]]}},
|
||||
@@ -145,7 +145,7 @@
|
||||
{"type":"Feature","id":"SLB","properties":{"name":"Solomon Islands"},"geometry":{"type":"MultiPolygon","coordinates":[[[[162.119025,-10.482719],[162.398646,-10.826367],[161.700032,-10.820011],[161.319797,-10.204751],[161.917383,-10.446701],[162.119025,-10.482719]]],[[[160.852229,-9.872937],[160.462588,-9.89521],[159.849447,-9.794027],[159.640003,-9.63998],[159.702945,-9.24295],[160.362956,-9.400304],[160.688518,-9.610162],[160.852229,-9.872937]]],[[[161.679982,-9.599982],[161.529397,-9.784312],[160.788253,-8.917543],[160.579997,-8.320009],[160.920028,-8.320009],[161.280006,-9.120011],[161.679982,-9.599982]]],[[[159.875027,-8.33732],[159.917402,-8.53829],[159.133677,-8.114181],[158.586114,-7.754824],[158.21115,-7.421872],[158.359978,-7.320018],[158.820001,-7.560003],[159.640003,-8.020027],[159.875027,-8.33732]]],[[[157.538426,-7.34782],[157.33942,-7.404767],[156.90203,-7.176874],[156.491358,-6.765943],[156.542828,-6.599338],[157.14,-7.021638],[157.538426,-7.34782]]]]}},
|
||||
{"type":"Feature","id":"SLE","properties":{"name":"Sierra Leone"},"geometry":{"type":"Polygon","coordinates":[[[-11.438779,6.785917],[-11.708195,6.860098],[-12.428099,7.262942],[-12.949049,7.798646],[-13.124025,8.163946],[-13.24655,8.903049],[-12.711958,9.342712],[-12.596719,9.620188],[-12.425929,9.835834],[-12.150338,9.858572],[-11.917277,10.046984],[-11.117481,10.045873],[-10.839152,9.688246],[-10.622395,9.26791],[-10.65477,8.977178],[-10.494315,8.715541],[-10.505477,8.348896],[-10.230094,8.406206],[-10.695595,7.939464],[-11.146704,7.396706],[-11.199802,7.105846],[-11.438779,6.785917]]]}},
|
||||
{"type":"Feature","id":"SLV","properties":{"name":"El Salvador"},"geometry":{"type":"Polygon","coordinates":[[[-87.793111,13.38448],[-87.904112,13.149017],[-88.483302,13.163951],[-88.843228,13.259734],[-89.256743,13.458533],[-89.812394,13.520622],[-90.095555,13.735338],[-90.064678,13.88197],[-89.721934,14.134228],[-89.534219,14.244816],[-89.587343,14.362586],[-89.353326,14.424133],[-89.058512,14.340029],[-88.843073,14.140507],[-88.541231,13.980155],[-88.503998,13.845486],[-88.065343,13.964626],[-87.859515,13.893312],[-87.723503,13.78505],[-87.793111,13.38448]]]}},
|
||||
{"type":"Feature","id":"-99","properties":{"name":"Somaliland"},"geometry":{"type":"Polygon","coordinates":[[[48.93813,9.451749],[48.486736,8.837626],[47.78942,8.003],[46.948328,7.996877],[43.67875,9.18358],[43.296975,9.540477],[42.92812,10.02194],[42.55876,10.57258],[42.776852,10.926879],[43.145305,11.46204],[43.47066,11.27771],[43.666668,10.864169],[44.117804,10.445538],[44.614259,10.442205],[45.556941,10.698029],[46.645401,10.816549],[47.525658,11.127228],[48.021596,11.193064],[48.378784,11.375482],[48.948206,11.410622],[48.942005,11.394266],[48.938491,10.982327],[48.938233,9.9735],[48.93813,9.451749]]]}},
|
||||
{"type":"Feature","id":"SOL","properties":{"name":"Somaliland"},"geometry":{"type":"Polygon","coordinates":[[[48.93813,9.451749],[48.486736,8.837626],[47.78942,8.003],[46.948328,7.996877],[43.67875,9.18358],[43.296975,9.540477],[42.92812,10.02194],[42.55876,10.57258],[42.776852,10.926879],[43.145305,11.46204],[43.47066,11.27771],[43.666668,10.864169],[44.117804,10.445538],[44.614259,10.442205],[45.556941,10.698029],[46.645401,10.816549],[47.525658,11.127228],[48.021596,11.193064],[48.378784,11.375482],[48.948206,11.410622],[48.942005,11.394266],[48.938491,10.982327],[48.938233,9.9735],[48.93813,9.451749]]]}},
|
||||
{"type":"Feature","id":"SOM","properties":{"name":"Somalia"},"geometry":{"type":"Polygon","coordinates":[[[49.72862,11.5789],[50.25878,11.67957],[50.73202,12.0219],[51.1112,12.02464],[51.13387,11.74815],[51.04153,11.16651],[51.04531,10.6409],[50.83418,10.27972],[50.55239,9.19874],[50.07092,8.08173],[49.4527,6.80466],[48.59455,5.33911],[47.74079,4.2194],[46.56476,2.85529],[45.56399,2.04576],[44.06815,1.05283],[43.13597,0.2922],[42.04157,-0.91916],[41.81095,-1.44647],[41.58513,-1.68325],[40.993,-0.85829],[40.98105,2.78452],[41.855083,3.918912],[42.12861,4.23413],[42.76967,4.25259],[43.66087,4.95755],[44.9636,5.00162],[47.78942,8.003],[48.486736,8.837626],[48.93813,9.451749],[48.938233,9.9735],[48.938491,10.982327],[48.942005,11.394266],[48.948205,11.410617],[49.26776,11.43033],[49.72862,11.5789]]]}},
|
||||
{"type":"Feature","id":"SRB","properties":{"name":"Republic of Serbia"},"geometry":{"type":"Polygon","coordinates":[[[20.874313,45.416375],[21.483526,45.18117],[21.562023,44.768947],[22.145088,44.478422],[22.459022,44.702517],[22.705726,44.578003],[22.474008,44.409228],[22.65715,44.234923],[22.410446,44.008063],[22.500157,43.642814],[22.986019,43.211161],[22.604801,42.898519],[22.436595,42.580321],[22.545012,42.461362],[22.380526,42.32026],[21.91708,42.30364],[21.576636,42.245224],[21.54332,42.32025],[21.66292,42.43922],[21.77505,42.6827],[21.63302,42.67717],[21.43866,42.86255],[21.27421,42.90959],[21.143395,43.068685],[20.95651,43.13094],[20.81448,43.27205],[20.63508,43.21671],[20.49679,42.88469],[20.25758,42.81275],[20.3398,42.89852],[19.95857,43.10604],[19.63,43.21378],[19.48389,43.35229],[19.21852,43.52384],[19.454,43.5681],[19.59976,44.03847],[19.11761,44.42307],[19.36803,44.863],[19.00548,44.86023],[19.390476,45.236516],[19.072769,45.521511],[18.82982,45.90888],[19.596045,46.17173],[20.220192,46.127469],[20.762175,45.734573],[20.874313,45.416375]]]}},
|
||||
{"type":"Feature","id":"SUR","properties":{"name":"Suriname"},"geometry":{"type":"Polygon","coordinates":[[[-57.147436,5.97315],[-55.949318,5.772878],[-55.84178,5.953125],[-55.03325,6.025291],[-53.958045,5.756548],[-54.478633,4.896756],[-54.399542,4.212611],[-54.006931,3.620038],[-54.181726,3.18978],[-54.269705,2.732392],[-54.524754,2.311849],[-55.097587,2.523748],[-55.569755,2.421506],[-55.973322,2.510364],[-56.073342,2.220795],[-55.9056,2.021996],[-55.995698,1.817667],[-56.539386,1.899523],[-57.150098,2.768927],[-57.281433,3.333492],[-57.601569,3.334655],[-58.044694,4.060864],[-57.86021,4.576801],[-57.914289,4.812626],[-57.307246,5.073567],[-57.147436,5.97315]]]}},
|
||||
|
||||
@@ -3,4 +3,5 @@ goog.require('ol.Map');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.dom.Input');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
var projection = ol.proj.get('EPSG:3857');
|
||||
var view = new ol.View2D({
|
||||
center: [0, 0],
|
||||
projection: projection,
|
||||
extent: projection.getExtent(),
|
||||
zoom: 2
|
||||
});
|
||||
var map = new ol.Map({
|
||||
@@ -34,5 +37,5 @@ deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
|
||||
center[0] -= resolution * gamma * 25;
|
||||
center[1] += resolution * beta * 25;
|
||||
|
||||
view.setCenter(center);
|
||||
view.setCenter(view.constrainCenter(center));
|
||||
});
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
goog.require('ol.FeatureOverlay');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.events.condition');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.Draw');
|
||||
goog.require('ol.interaction.Modify');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Draw and modify features example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Draw and modify features example</h4>
|
||||
<p id="shortdesc">Example of using the ol.interaction.Draw interaction together with
|
||||
the ol.interaction.Modify interaction.</p>
|
||||
<form class="form-inline">
|
||||
<label>Geometry type </label>
|
||||
<select id="type">
|
||||
<option value="Point">Point</option>
|
||||
<option value="LineString">LineString</option>
|
||||
<option value="Polygon">Polygon</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<div id="docs">
|
||||
<p>See the <a href="draw-and-modify-features.js" target="_blank">draw-and-modify-features.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">draw, edit, modify, vector, featureoverlay</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=draw-and-modify-features" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster],
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [-11000000, 4600000],
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
// The features are not added to a regular vector layer/source,
|
||||
// but to a feature overlay which holds a collection of features.
|
||||
// This collection is passed to the modify and also the draw
|
||||
// interaction, so that both can add or modify features.
|
||||
var featureOverlay = new ol.FeatureOverlay({
|
||||
style: new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ffcc33',
|
||||
width: 2
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 7,
|
||||
fill: new ol.style.Fill({
|
||||
color: '#ffcc33'
|
||||
})
|
||||
})
|
||||
})
|
||||
});
|
||||
featureOverlay.setMap(map);
|
||||
|
||||
var modify = new ol.interaction.Modify({
|
||||
features: featureOverlay.getFeatures(),
|
||||
// the SHIFT key must be pressed to delete vertices, so
|
||||
// that new vertices can be drawn at the same position
|
||||
// of existing vertices
|
||||
deleteCondition: function(event) {
|
||||
return ol.events.condition.shiftKeyOnly(event) &&
|
||||
ol.events.condition.singleClick(event);
|
||||
}
|
||||
});
|
||||
map.addInteraction(modify);
|
||||
|
||||
var draw; // global so we can remove it later
|
||||
function addInteraction() {
|
||||
draw = new ol.interaction.Draw({
|
||||
features: featureOverlay.getFeatures(),
|
||||
type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
|
||||
});
|
||||
map.addInteraction(draw);
|
||||
}
|
||||
|
||||
var typeSelect = document.getElementById('type');
|
||||
|
||||
|
||||
/**
|
||||
* Let user change the geometry type.
|
||||
* @param {Event} e Change event.
|
||||
*/
|
||||
typeSelect.onchange = function(e) {
|
||||
map.removeInteraction(draw);
|
||||
addInteraction();
|
||||
};
|
||||
|
||||
addInteraction();
|
||||
@@ -13,6 +13,7 @@ var map = new ol.Map({
|
||||
|
||||
var imageStyle = new ol.style.Circle({
|
||||
radius: 5,
|
||||
snapToPixel: false,
|
||||
fill: new ol.style.Fill({color: 'yellow'}),
|
||||
stroke: new ol.style.Stroke({color: 'red', width: 1})
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -27,7 +27,8 @@ map.addOverlay(marker);
|
||||
// LineString to store the different geolocation positions. This LineString
|
||||
// is time aware.
|
||||
// The Z dimension is actually used to store the rotation (heading).
|
||||
var positions = new ol.geom.LineString([], 'XYZM');
|
||||
var positions = new ol.geom.LineString([],
|
||||
/** @type {ol.geom.GeometryLayout} */ ('XYZM'));
|
||||
|
||||
// Geolocation Control
|
||||
var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
|
||||
|
||||
@@ -7,7 +7,10 @@ var gmap = new google.maps.Map(document.getElementById('gmap'), {
|
||||
streetViewControl: false
|
||||
});
|
||||
|
||||
var view = new ol.View2D();
|
||||
var view = new ol.View2D({
|
||||
// make sure the view doesn't go beyond the 22 zoom levels of Google Maps
|
||||
maxZoom: 21
|
||||
});
|
||||
view.on('change:center', function() {
|
||||
var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
|
||||
gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
|
||||
@@ -37,9 +40,9 @@ var map = new ol.Map({
|
||||
layers: [vector],
|
||||
interactions: ol.interaction.defaults({
|
||||
altShiftDragRotate: false,
|
||||
pan: false,
|
||||
dragPan: false,
|
||||
rotate: false
|
||||
}).extend([new ol.interaction.DragPan({kinetic: false})]),
|
||||
}).extend([new ol.interaction.DragPan({kinetic: null})]),
|
||||
target: olMapDiv,
|
||||
view: view
|
||||
});
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
goog.require('ol.Collection');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.interaction');
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
goog.require('ol.Collection');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.interaction');
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
goog.require('ol.BrowserFeature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.TileImage');
|
||||
goog.require('ol.source.WMTS');
|
||||
goog.require('ol.tilegrid.WMTS');
|
||||
|
||||
@@ -1,16 +1,27 @@
|
||||
var template = '{TileMatrix}/{TileRow}/{TileCol}.jpeg';
|
||||
var template =
|
||||
'{Layer}/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg';
|
||||
var urls = [
|
||||
'http://maps1.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
|
||||
'http://maps2.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
|
||||
'http://maps3.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
|
||||
'http://maps4.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
|
||||
'http://maps.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template
|
||||
'http://maps1.wien.gv.at/basemap/' + template,
|
||||
'http://maps2.wien.gv.at/basemap/' + template,
|
||||
'http://maps3.wien.gv.at/basemap/' + template,
|
||||
'http://maps4.wien.gv.at/basemap/' + template,
|
||||
'http://maps.wien.gv.at/basemap/' + template
|
||||
];
|
||||
|
||||
var source = new ol.source.TileImage({
|
||||
// HiDPI support:
|
||||
// * Use 'bmaphidpi' layer (pixel ratio 2) for device pixel ratio > 1
|
||||
// * Use 'geolandbasemap' layer (pixel ratio 1) for device pixel ratio == 1
|
||||
var hiDPI = ol.BrowserFeature.DEVICE_PIXEL_RATIO > 1;
|
||||
|
||||
var source = new ol.source.WMTS({
|
||||
extent: [977844.377599999, 5837774.6617, 1915609.8654, 6295560.8122],
|
||||
pixelRatios: [2],
|
||||
requestEncoding: 'REST',
|
||||
pixelRatio: hiDPI ? 2 : 1,
|
||||
projection: 'EPSG:3857',
|
||||
layer: hiDPI ? 'bmaphidpi' : 'geolandbasemap',
|
||||
style: 'normal',
|
||||
matrixSet: 'google3857',
|
||||
urls: urls,
|
||||
requestEncoding: /** @type {ol.source.WMTSRequestEncoding} */ ('REST'),
|
||||
tileGrid: new ol.tilegrid.WMTS({
|
||||
origin: [-20037508.3428, 20037508.3428],
|
||||
resolutions: [
|
||||
@@ -37,19 +48,8 @@ var source = new ol.source.TileImage({
|
||||
],
|
||||
matrixIds: [
|
||||
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
|
||||
],
|
||||
tileSize: 256
|
||||
}),
|
||||
tileUrlFunction: function(tileCoord, pixelRatio, projection) {
|
||||
if (tileCoord) {
|
||||
var zxy = tileCoord.getZXY();
|
||||
var index = ((zxy[1] << zxy[0]) + zxy[2]) % urls.length;
|
||||
return urls[index < 0 ? index + urls.length : index]
|
||||
.replace('{TileMatrix}', zxy[0])
|
||||
.replace('{TileRow}', -zxy[2] - 1)
|
||||
.replace('{TileCol}', zxy[1]);
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
@@ -58,7 +58,6 @@ var map = new ol.Map({
|
||||
source: source
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(['canvas', 'dom']),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [1823849, 6143760],
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
@@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Zoom Constrained Example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Zoom constrained example</h4>
|
||||
<p id="shortdesc">Example of a zoom constrained view.</p>
|
||||
<div id="docs">
|
||||
<p>This map has a view that is constrained between zoom levels 9 and 13. This is done using the <code>minZoom</code> and <code>maxZoom</code> view options.</p>
|
||||
<p>See the <a href="zoom-constrained.js" target="_blank">zoom-constrained.js source</a> for details.</p>
|
||||
</div>
|
||||
<div id="tags">bing, zoom, minZoom, maxZoom</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=zoom-constrained" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
|
||||
imagerySet: 'Aerial'
|
||||
})
|
||||
})
|
||||
],
|
||||
view: new ol.View2D({
|
||||
center: [-13553864, 5918250],
|
||||
zoom: 11,
|
||||
minZoom: 9,
|
||||
maxZoom: 13
|
||||
})
|
||||
});
|
||||
Reference in New Issue
Block a user