ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use document.getElementById in examples.

Browse Source 
Previously examples would either use the now deprecated `window.$` or the
non-API-method `OpenLayers.Util.getElement`. This was well caught by @probins
and @elemoine.
This commit is contained in:
Marc Jansen
2012-05-29 21:47:22 +02:00
parent 042ad8d711
commit acb9f950df
11 changed files with 51 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
examples/editing-methods.js
View File

@@ -19,10 +19,8 @@ var draw = new OpenLayers.Control.DrawFeature(
map.addControl(draw);
draw.activate();
var $ = OpenLayers.Util.getElement;
// handle clicks on method links
$("insertXY").onclick = function() {
document.getElementById("insertXY").onclick = function() {
var values = parseInput(
window.prompt(
"Enter map coordinates for new point (e.g. '-111, 46')", "x, y"
@@ -32,7 +30,7 @@ $("insertXY").onclick = function() {
draw.insertXY(values[0], values[1]);
}
};
$("insertDeltaXY").onclick = function() {
document.getElementById("insertDeltaXY").onclick = function() {
var values = parseInput(
window.prompt(
"Enter offset values for new point (e.g. '15, -10')", "dx, dy"
@@ -42,7 +40,7 @@ $("insertDeltaXY").onclick = function() {
draw.insertDeltaXY(values[0], values[1]);
}
};
$("insertDirectionLength").onclick = function() {
document.getElementById("insertDirectionLength").onclick = function() {
var values = parseInput(
window.prompt(
"Enter direction and length offset values for new point (e.g. '-45, 10')", "direction, length"
@@ -52,7 +50,7 @@ $("insertDirectionLength").onclick = function() {
draw.insertDirectionLength(values[0], values[1]);
}
};
$("insertDeflectionLength").onclick = function() {
document.getElementById("insertDeflectionLength").onclick = function() {
var values = parseInput(
window.prompt(
"Enter deflection and length offset values for new point (e.g. '15, 20')", "deflection, length"
@@ -62,10 +60,10 @@ $("insertDeflectionLength").onclick = function() {
draw.insertDeflectionLength(values[0], values[1]);
}
};
$("cancel").onclick = function() {
document.getElementById("cancel").onclick = function() {
draw.cancel();
};
$("finishSketch").onclick = function() {
document.getElementById("finishSketch").onclick = function() {
draw.finishSketch();
};

3
examples/game-accel-ball.html
View File

@@ -33,10 +33,9 @@
vlayer.drawFeature(feature);
}
function init() {
var $ = OpenLayers.Util.getElement;
map = new OpenLayers.Map( 'map',
{
'maxExtent': new OpenLayers.Bounds(0, 0, $("map").clientWidth, $("map").clientHeight),
'maxExtent': new OpenLayers.Bounds(0, 0, document.getElementById("map").clientWidth, document.getElementById("map").clientHeight),
controls: [],
maxResolution: 'auto'}
);

9
examples/geolocation.js
View File

@@ -92,16 +92,15 @@ geolocate.events.register("locationupdated",geolocate,function(e) {
geolocate.events.register("locationfailed",this,function() {
OpenLayers.Console.log('Location detection failed');
});
var $ = OpenLayers.Util.getElement;
$('locate').onclick = function() {
document.getElementById('locate').onclick = function() {
vector.removeAllFeatures();
geolocate.deactivate();
$('track').checked = false;
document.getElementById('track').checked = false;
geolocate.watch = false;
firstGeolocation = true;
geolocate.activate();
};
$('track').onclick = function() {
document.getElementById('track').onclick = function() {
vector.removeAllFeatures();
geolocate.deactivate();
if (this.checked) {
@@ -110,4 +109,4 @@ $('track').onclick = function() {
geolocate.activate();
}
};
$('track').checked = false;
document.getElementById('track').checked = false;

3
examples/getfeatureinfo-control.html
View File

@@ -48,7 +48,6 @@
</style>
<script defer="defer" type="text/javascript">
OpenLayers.ProxyHost = "proxy.cgi?url=";
var $ = OpenLayers.Util.getElement;
var map, infocontrols, water, highlightlayer;
function load() {
@@ -125,7 +124,7 @@
highlightLayer.addFeatures(evt.features);
highlightLayer.redraw();
} else {
$('responseText').innerHTML = evt.text;
document.getElementById('responseText').innerHTML = evt.text;
}
}

6
examples/select-feature.html
View File

@@ -16,8 +16,6 @@
<script type="text/javascript">
var map, drawControls;
var $ = OpenLayers.Util.getElement;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init(){
map = new OpenLayers.Map('map');
@@ -36,10 +34,10 @@
});
vectors.events.on({
'featureselected': function(feature) {
$('counter').innerHTML = this.selectedFeatures.length;
document.getElementById('counter').innerHTML = this.selectedFeatures.length;
},
'featureunselected': function(feature) {
$('counter').innerHTML = this.selectedFeatures.length;
document.getElementById('counter').innerHTML = this.selectedFeatures.length;
}
});

23
examples/snap-split.html
View File

@@ -36,14 +36,11 @@
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
var $ = OpenLayers.Util.getElement;
function init() {
initMap();
initUI();
}
var map, draw, modify, snap, split, vectors;
function initMap() {
@@ -187,15 +184,15 @@
*/
function initUI() {
// add behavior to snap elements
var snapCheck = $("snap_toggle");
var snapCheck = document.getElementById("snap_toggle");
snapCheck.checked = true;
snapCheck.onclick = function() {
if(snapCheck.checked) {
snap.activate();
$("snap_options").style.display = "block";
document.getElementById("snap_options").style.display = "block";
} else {
snap.deactivate();
$("snap_options").style.display = "none";
document.getElementById("snap_options").style.display = "none";
}
};
var target, type, tog, tol;
@@ -203,12 +200,12 @@
var target = snap.targets[0];
for(var j=0; j<types.length; ++j) {
type = types[j];
tog = $("target_" + type);
tog = document.getElementById("target_" + type);
tog.checked = target[type];
tog.onclick = (function(tog, type, target) {
return function() {target[type] = tog.checked;}
})(tog, type, target);
tol = $("target_" + type + "Tolerance");
tol = document.getElementById("target_" + type + "Tolerance");
tol.value = target[type + "Tolerance"];
tol.onchange = (function(tol, type, target) {
return function() {
@@ -218,24 +215,24 @@
}
// add behavior to split elements
var splitCheck = $("split_toggle");
var splitCheck = document.getElementById("split_toggle");
splitCheck.checked = true;
splitCheck.onclick = function() {
if(splitCheck.checked) {
split.activate();
$("split_options").style.display = "block";
document.getElementById("split_options").style.display = "block";
} else {
split.deactivate();
$("split_options").style.display = "none";
document.getElementById("split_options").style.display = "none";
}
};
var edgeCheck = $("edge_toggle");
var edgeCheck = document.getElementById("edge_toggle");
edgeCheck.checked = split.edge;
edgeCheck.onclick = function() {
split.edge = edgeCheck.checked;
};
$("clear").onclick = function() {
document.getElementById("clear").onclick = function() {
modify.deactivate();
vectors.destroyFeatures();
};

10
examples/snapping.html
View File

@@ -34,8 +34,6 @@
<script type="text/javascript">
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
var $ = OpenLayers.Util.getElement;
function init() {
initMap();
initUI();
@@ -196,7 +194,7 @@
* property values.
*/
function initUI() {
var check = $("snapping");
var check = document.getElementById("snapping");
check.checked = true;
check.onclick = function() {
if(check.checked) {
@@ -206,7 +204,7 @@
}
};
var sel = $("editable");
var sel = document.getElementById("editable");
sel.value = "poly";
sel.onchange = function() {
updateEditable(sel.value);
@@ -218,12 +216,12 @@
target = snap.targets[i];
for(var j=0; j<types.length; ++j) {
type = types[j];
tog = $(i + "_" + type);
tog = document.getElementById(i + "_" + type);
tog.checked = target[type];
tog.onclick = (function(tog, type, target) {
return function() {target[type] = tog.checked;}
})(tog, type, target);
tol = $(i + "_" + type + "Tolerance");
tol = document.getElementById(i + "_" + type + "Tolerance");
tol.value = target[type + "Tolerance"];
tol.onchange = (function(tol, type, target) {
return function() {

6
examples/strategy-cluster-extended.js
View File

@@ -67,8 +67,6 @@ OpenLayers.Strategy.RuleCluster = OpenLayers.Class(OpenLayers.Strategy.Cluster,
// global variables
var map, vectorlayer, features, stylemap, select;
var $ = OpenLayers.Util.getElement;
// wrap the instanciation code in an anonymous function that gets executed
// immeadeately
(function(){
@@ -97,14 +95,14 @@ var $ = OpenLayers.Util.getElement;
} else {
info += '&nbsp;&nbsp;Single feature of clazz = ' + feature.attributes.clazz;
}
$('info').innerHTML = info;
document.getElementById('info').innerHTML = info;
};
// The function that gets called on feature selection. Shows information
// about the number of "points" on the map.
var updateGeneralInformation = function() {
var info = 'Currently ' + vectorlayer.features.length + ' points are shown on the map.';
$('generalinfo').innerHTML = info;
document.getElementById('generalinfo').innerHTML = info;
};
// instanciate the map

14
examples/strategy-cluster-threshold.html
View File

@@ -18,8 +18,6 @@
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var $ = OpenLayers.Util.getElement;
// create a semi-random grid of features to be clustered
var dx = 3;
var dy = 3;
@@ -91,24 +89,24 @@
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
reset();
$("reset").onclick = reset;
document.getElementById("reset").onclick = reset;
}
function reset() {
var distance = parseInt($("distance").value);
var threshold = parseInt($("threshold").value);
var distance = parseInt(document.getElementById("distance").value);
var threshold = parseInt(document.getElementById("threshold").value);
strategy.distance = distance || strategy.distance;
strategy.threshold = threshold || strategy.threshold;
$("distance").value = strategy.distance;
$("threshold").value = strategy.threshold || "null";
document.getElementById("distance").value = strategy.distance;
document.getElementById("threshold").value = strategy.threshold || "null";
clusters.removeFeatures(clusters.features);
clusters.addFeatures(features);
}
function display(event) {
var f = event.feature;
var el = $("output");
var el = document.getElementById("output");
if(f.cluster) {
el.innerHTML = "cluster of " + f.attributes.count;
} else {

17
examples/strategy-cluster.html
View File

@@ -69,7 +69,6 @@
<script src="Jugl.js"></script>
<script src="animator.js"></script>
<script type="text/javascript">
var $ = OpenLayers.Util.getElement;
var map, template;
@@ -173,21 +172,21 @@
function display(event) {
// clear previous photo list and create new one
$("photos").innerHTML = "";
document.getElementById("photos").innerHTML = "";
var node = template.process({
context: {features: event.feature.cluster},
clone: true,
parent: $("photos")
parent: document.getElementById("photos")
});
// set up forward/rewind
var forward = Animator.apply($("list"), ["start", "end"], {duration: 1500});
$("scroll-end").onmouseover = function() {forward.seekTo(1)};
$("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
$("scroll-start").onmouseover = function() {forward.seekTo(0)};
$("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
var forward = Animator.apply(document.getElementById("list"), ["start", "end"], {duration: 1500});
document.getElementById("scroll-end").onmouseover = function() {forward.seekTo(1)};
document.getElementById("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
document.getElementById("scroll-start").onmouseover = function() {forward.seekTo(0)};
document.getElementById("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
// set up photo zoom
for(var i=0; i<event.feature.cluster.length; ++i) {
listen($("link-" + i), Animator.apply($("photo-" + i), ["thumb", "big"]));
listen(document.getElementById("link-" + i), Animator.apply(document.getElementById("photo-" + i), ["thumb", "big"]));
}
}

15
examples/using-proj4js.js
View File

@@ -1,5 +1,4 @@
var map, vector;
var $ = OpenLayers.Util.getElement;
function init(){
map = new OpenLayers.Map('map', {
@@ -9,16 +8,16 @@ function init(){
numZoomLevels: 1,
controls: [
new OpenLayers.Control.Attribution({
div: $('attribution')
div: document.getElementById('attribution')
}),
new OpenLayers.Control.MousePosition({
div: $('mouse-position-31467'),
div: document.getElementById('mouse-position-31467'),
prefix: 'Coordinates: ',
suffix: ' (in <a href="http://spatialreference.org/ref/epsg/'
+ '31467/">EPSG:31467</a>)'
}),
new OpenLayers.Control.MousePosition({
div: $('mouse-position-4326'),
div: document.getElementById('mouse-position-4326'),
displayProjection: new OpenLayers.Projection('EPSG:4326'),
prefix: 'Coordinates: ',
suffix: ' (in <a href="http://spatialreference.org/ref/epsg/'
@@ -61,7 +60,7 @@ function addVector(x, y, btn){
status += '<br /><code class="emph"> '
+ geometry.toString() + '</code>.';
$('status').innerHTML = status;
document.getElementById('status').innerHTML = status;
var feature = new OpenLayers.Feature.Vector(geometry, {}, {
strokeColor: '#333333',
@@ -112,7 +111,7 @@ function addOutline(btn) {
transformedFeature = new OpenLayers.Feature.Vector(geometry, {}, style);
vector.addFeatures([transformedFeature]);
$('status').innerHTML = 'Transformed polygon';
document.getElementById('status').innerHTML = 'Transformed polygon';
btn.disabled = true;
}
@@ -126,8 +125,8 @@ function clearVectors(){
'btnGermany'
];
for (var i = 0, len = ids.length; i < len; i++) {
var elem = $(ids[i]);
var elem = document.getElementById(ids[i]);
elem.disabled = false;
}
$('status').innerHTML = '';
document.getElementById('status').innerHTML = '';
}