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); map.addControl(draw);
draw.activate(); draw.activate();
var $ = OpenLayers.Util.getElement;
// handle clicks on method links // handle clicks on method links
$("insertXY").onclick = function() { document.getElementById("insertXY").onclick = function() {
var values = parseInput( var values = parseInput(
window.prompt( window.prompt(
"Enter map coordinates for new point (e.g. '-111, 46')", "x, y" "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]); draw.insertXY(values[0], values[1]);
} }
}; };
$("insertDeltaXY").onclick = function() { document.getElementById("insertDeltaXY").onclick = function() {
var values = parseInput( var values = parseInput(
window.prompt( window.prompt(
"Enter offset values for new point (e.g. '15, -10')", "dx, dy" "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]); draw.insertDeltaXY(values[0], values[1]);
} }
}; };
$("insertDirectionLength").onclick = function() { document.getElementById("insertDirectionLength").onclick = function() {
var values = parseInput( var values = parseInput(
window.prompt( window.prompt(
"Enter direction and length offset values for new point (e.g. '-45, 10')", "direction, length" "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]); draw.insertDirectionLength(values[0], values[1]);
} }
}; };
$("insertDeflectionLength").onclick = function() { document.getElementById("insertDeflectionLength").onclick = function() {
var values = parseInput( var values = parseInput(
window.prompt( window.prompt(
"Enter deflection and length offset values for new point (e.g. '15, 20')", "deflection, length" "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]); draw.insertDeflectionLength(values[0], values[1]);
} }
}; };
$("cancel").onclick = function() { document.getElementById("cancel").onclick = function() {
draw.cancel(); draw.cancel();
}; };
$("finishSketch").onclick = function() { document.getElementById("finishSketch").onclick = function() {
draw.finishSketch(); draw.finishSketch();
}; };

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

@@ -33,10 +33,9 @@
vlayer.drawFeature(feature); vlayer.drawFeature(feature);
} }
function init() { function init() {
var $ = OpenLayers.Util.getElement;
map = new OpenLayers.Map( 'map', 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: [], controls: [],
maxResolution: 'auto'} 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() { geolocate.events.register("locationfailed",this,function() {
OpenLayers.Console.log('Location detection failed'); OpenLayers.Console.log('Location detection failed');
}); });
var $ = OpenLayers.Util.getElement; document.getElementById('locate').onclick = function() {
$('locate').onclick = function() {
vector.removeAllFeatures(); vector.removeAllFeatures();
geolocate.deactivate(); geolocate.deactivate();
$('track').checked = false; document.getElementById('track').checked = false;
geolocate.watch = false; geolocate.watch = false;
firstGeolocation = true; firstGeolocation = true;
geolocate.activate(); geolocate.activate();
}; };
$('track').onclick = function() { document.getElementById('track').onclick = function() {
vector.removeAllFeatures(); vector.removeAllFeatures();
geolocate.deactivate(); geolocate.deactivate();
if (this.checked) { if (this.checked) {
@@ -110,4 +109,4 @@ $('track').onclick = function() {
geolocate.activate(); geolocate.activate();
} }
}; };
$('track').checked = false; document.getElementById('track').checked = false;

3
examples/getfeatureinfo-control.html
View File

@@ -48,7 +48,6 @@
</style> </style>
<script defer="defer" type="text/javascript"> <script defer="defer" type="text/javascript">
OpenLayers.ProxyHost = "proxy.cgi?url="; OpenLayers.ProxyHost = "proxy.cgi?url=";
var $ = OpenLayers.Util.getElement;
var map, infocontrols, water, highlightlayer; var map, infocontrols, water, highlightlayer;
function load() { function load() {
@@ -125,7 +124,7 @@
highlightLayer.addFeatures(evt.features); highlightLayer.addFeatures(evt.features);
highlightLayer.redraw(); highlightLayer.redraw();
} else { } 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"> <script type="text/javascript">
var map, drawControls; var map, drawControls;
var $ = OpenLayers.Util.getElement;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2'; OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init(){ function init(){
map = new OpenLayers.Map('map'); map = new OpenLayers.Map('map');
@@ -36,10 +34,10 @@
}); });
vectors.events.on({ vectors.events.on({
'featureselected': function(feature) { 'featureselected': function(feature) {
$('counter').innerHTML = this.selectedFeatures.length; document.getElementById('counter').innerHTML = this.selectedFeatures.length;
}, },
'featureunselected': function(feature) { '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'; OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
var $ = OpenLayers.Util.getElement;
function init() { function init() {
initMap(); initMap();
initUI(); initUI();
} }
var map, draw, modify, snap, split, vectors; var map, draw, modify, snap, split, vectors;
function initMap() { function initMap() {
@@ -187,15 +184,15 @@
*/ */
function initUI() { function initUI() {
// add behavior to snap elements // add behavior to snap elements
var snapCheck = $("snap_toggle"); var snapCheck = document.getElementById("snap_toggle");
snapCheck.checked = true; snapCheck.checked = true;
snapCheck.onclick = function() { snapCheck.onclick = function() {
if(snapCheck.checked) { if(snapCheck.checked) {
snap.activate(); snap.activate();
$("snap_options").style.display = "block"; document.getElementById("snap_options").style.display = "block";
} else { } else {
snap.deactivate(); snap.deactivate();
$("snap_options").style.display = "none"; document.getElementById("snap_options").style.display = "none";
} }
}; };
var target, type, tog, tol; var target, type, tog, tol;
@@ -203,12 +200,12 @@
var target = snap.targets[0]; var target = snap.targets[0];
for(var j=0; j<types.length; ++j) { for(var j=0; j<types.length; ++j) {
type = types[j]; type = types[j];
tog = $("target_" + type); tog = document.getElementById("target_" + type);
tog.checked = target[type]; tog.checked = target[type];
tog.onclick = (function(tog, type, target) { tog.onclick = (function(tog, type, target) {
return function() {target[type] = tog.checked;} return function() {target[type] = tog.checked;}
})(tog, type, target); })(tog, type, target);
tol = $("target_" + type + "Tolerance"); tol = document.getElementById("target_" + type + "Tolerance");
tol.value = target[type + "Tolerance"]; tol.value = target[type + "Tolerance"];
tol.onchange = (function(tol, type, target) { tol.onchange = (function(tol, type, target) {
return function() { return function() {
@@ -218,24 +215,24 @@
} }
// add behavior to split elements // add behavior to split elements
var splitCheck = $("split_toggle"); var splitCheck = document.getElementById("split_toggle");
splitCheck.checked = true; splitCheck.checked = true;
splitCheck.onclick = function() { splitCheck.onclick = function() {
if(splitCheck.checked) { if(splitCheck.checked) {
split.activate(); split.activate();
$("split_options").style.display = "block"; document.getElementById("split_options").style.display = "block";
} else { } else {
split.deactivate(); 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.checked = split.edge;
edgeCheck.onclick = function() { edgeCheck.onclick = function() {
split.edge = edgeCheck.checked; split.edge = edgeCheck.checked;
}; };
$("clear").onclick = function() { document.getElementById("clear").onclick = function() {
modify.deactivate(); modify.deactivate();
vectors.destroyFeatures(); vectors.destroyFeatures();
}; };

10
examples/snapping.html
View File

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

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

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

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

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

17
examples/strategy-cluster.html
View File

@@ -69,7 +69,6 @@
<script src="Jugl.js"></script> <script src="Jugl.js"></script>
<script src="animator.js"></script> <script src="animator.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var $ = OpenLayers.Util.getElement;
var map, template; var map, template;
@@ -173,21 +172,21 @@
function display(event) { function display(event) {
// clear previous photo list and create new one // clear previous photo list and create new one
$("photos").innerHTML = ""; document.getElementById("photos").innerHTML = "";
var node = template.process({ var node = template.process({
context: {features: event.feature.cluster}, context: {features: event.feature.cluster},
clone: true, clone: true,
parent: $("photos") parent: document.getElementById("photos")
}); });
// set up forward/rewind // set up forward/rewind
var forward = Animator.apply($("list"), ["start", "end"], {duration: 1500}); var forward = Animator.apply(document.getElementById("list"), ["start", "end"], {duration: 1500});
$("scroll-end").onmouseover = function() {forward.seekTo(1)}; document.getElementById("scroll-end").onmouseover = function() {forward.seekTo(1)};
$("scroll-end").onmouseout = function() {forward.seekTo(forward.state)}; document.getElementById("scroll-end").onmouseout = function() {forward.seekTo(forward.state)};
$("scroll-start").onmouseover = function() {forward.seekTo(0)}; document.getElementById("scroll-start").onmouseover = function() {forward.seekTo(0)};
$("scroll-start").onmouseout = function() {forward.seekTo(forward.state)}; document.getElementById("scroll-start").onmouseout = function() {forward.seekTo(forward.state)};
// set up photo zoom // set up photo zoom
for(var i=0; i<event.feature.cluster.length; ++i) { 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 map, vector;
var $ = OpenLayers.Util.getElement;
function init(){ function init(){
map = new OpenLayers.Map('map', { map = new OpenLayers.Map('map', {
@@ -9,16 +8,16 @@ function init(){
numZoomLevels: 1, numZoomLevels: 1,
controls: [ controls: [
new OpenLayers.Control.Attribution({ new OpenLayers.Control.Attribution({
div: $('attribution') div: document.getElementById('attribution')
}), }),
new OpenLayers.Control.MousePosition({ new OpenLayers.Control.MousePosition({
div: $('mouse-position-31467'), div: document.getElementById('mouse-position-31467'),
prefix: 'Coordinates: ', prefix: 'Coordinates: ',
suffix: ' (in <a href="http://spatialreference.org/ref/epsg/' suffix: ' (in <a href="http://spatialreference.org/ref/epsg/'
+ '31467/">EPSG:31467</a>)' + '31467/">EPSG:31467</a>)'
}), }),
new OpenLayers.Control.MousePosition({ new OpenLayers.Control.MousePosition({
div: $('mouse-position-4326'), div: document.getElementById('mouse-position-4326'),
displayProjection: new OpenLayers.Projection('EPSG:4326'), displayProjection: new OpenLayers.Projection('EPSG:4326'),
prefix: 'Coordinates: ', prefix: 'Coordinates: ',
suffix: ' (in <a href="http://spatialreference.org/ref/epsg/' suffix: ' (in <a href="http://spatialreference.org/ref/epsg/'
@@ -61,7 +60,7 @@ function addVector(x, y, btn){
status += '<br /><code class="emph"> ' status += '<br /><code class="emph"> '
+ geometry.toString() + '</code>.'; + geometry.toString() + '</code>.';
$('status').innerHTML = status; document.getElementById('status').innerHTML = status;
var feature = new OpenLayers.Feature.Vector(geometry, {}, { var feature = new OpenLayers.Feature.Vector(geometry, {}, {
strokeColor: '#333333', strokeColor: '#333333',
@@ -112,7 +111,7 @@ function addOutline(btn) {
transformedFeature = new OpenLayers.Feature.Vector(geometry, {}, style); transformedFeature = new OpenLayers.Feature.Vector(geometry, {}, style);
vector.addFeatures([transformedFeature]); vector.addFeatures([transformedFeature]);
$('status').innerHTML = 'Transformed polygon'; document.getElementById('status').innerHTML = 'Transformed polygon';
btn.disabled = true; btn.disabled = true;
} }
@@ -126,8 +125,8 @@ function clearVectors(){
'btnGermany' 'btnGermany'
]; ];
for (var i = 0, len = ids.length; i < len; i++) { for (var i = 0, len = ids.length; i < len; i++) {
var elem = $(ids[i]); var elem = document.getElementById(ids[i]);
elem.disabled = false; elem.disabled = false;
} }
$('status').innerHTML = ''; document.getElementById('status').innerHTML = '';
} }