rdmpage · June 22, 2014 19:34
diff --git a/index.html b/index.html
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>WKT</title>
    <style type="text/css">
        #info {
            position: absolute;
            top: 70px;
            left: 550px;
            width: 350px;
        }
        #map {
            width: 512px;
            height: 512px;
            border: 1px solid gray;
        }
        #controls {
            width: 512px;
        }
        #wktInput {
            float: right;
        }
        #controlToggle {
            padding-left: 1em;
        }
        #controlToggle li {
            list-style: none;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://openlayers.org/dev/OpenLayers.js"></script>
    <script type="text/javascript">
    
    function get_my_url (bounds) {
        var res = this.map.getResolution();
        var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
        var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
        var z = this.map.getZoom();

        //var path = z + "/" + x + "/" + y + "." + this.type; 
        var path = '?x=' + x + '&y=' + y + '&z=' + z;
        var url = this.url;
        if (url instanceof Array) {
            url = this.selectUrl(path, url);
        }
        return url + path;
        
    }
    
    
        var map, vectors, drawControls, wkt;
        function init(){
            map = new OpenLayers.Map('map');
            
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'});
            //var gbif = new OpenLayers.Layer.TMS("GBIF", "http://api.gbif.org/v0.9/map/density/tile", { 'getURL':get_my_url });
 
            vectors = new OpenLayers.Layer.Vector("Vector Layer");

            map.addLayers([wms, vectors]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());

            var options = {
                hover: true,
                onSelect: displayWKT
            };

            drawControls = {
                point: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.Point),
                line: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.Path),
                polygon: new OpenLayers.Control.DrawFeature(vectors,
                            OpenLayers.Handler.Polygon),
                hover: new OpenLayers.Control.SelectFeature(vectors, options)
            };

            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }

            wkt = new OpenLayers.Format.WKT();

            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
            document.getElementById('noneToggle').checked = true;
        }

        function toggleControl(element) {
            for(key in drawControls) {
                var control = drawControls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
        
        
        // gbif API
 			function gbif(wkt)
 			{
 				$.getJSON("http://api.gbif.org/v0.9/occurrence/search?geometry=" + encodeURIComponent(wkt) + "&taxonKey=7303270&callback=?",
 					function(data){
 						
 						var html = "";
 						
 						html += 'Count: <b>' + data.count + '</b>' + '<br/>';
 						html += '<ul>';
 						for (var i in data.results) {
 							html += '<li>' + data.results[i].key 
 								+ ' ' + data.results[i].scientificName 
 								
 								+ ' ' + data.results[i].decimalLongitude
 								+ ' ' + data.results[i].decimalLatitude
 								
 								+ '</li>';
 						}
 						html += '</ul>';
 						
 						
 						$("#info").html($("#info").html() + html);
 					}
 					
 				);	
 			}
        
        

        function displayWKT(feature) {
            var str = wkt.write(feature);
            // not a good idea in general, just for this demo
            str = str.replace(/,/g, ', ');
            //document.getElementById('info').innerHTML = str;
            
            var WKT = str;
            $('#info').html(WKT);
            
            gbif(WKT);
            
            
            
        }

        function parseWKT() {
            var element = document.getElementById('wkt');
            var features = wkt.read(element.value);
            var bounds;
            if(features) {
                if(features.constructor != Array) {
                    features = [features];
                }
                for(var i=0; i<features.length; ++i) {
                    if (!bounds) {
                        bounds = features[i].geometry.getBounds();
                    } else {
                        bounds.extend(features[i].geometry.getBounds());
                    }

                }
                vectors.addFeatures(features);
                map.zoomToExtent(bounds);
                var plural = (features.length > 1) ? 's' : '';
                element.value = 'Feature' + plural + ' added'
            } else {
                element.value = 'Bad WKT';
            }
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">WKT Example</h1>
    <div id="info"></div>
    	<p id="shortdesc">
 			Shows the use of WKT (Well known text) to draw features in openlayers
 	</p>
    <div id="map"></div>
    <div id="tags"></div>



 	<div id="docs">
      <div id="controls">
        <p>See <a href="http://en.wikipedia.org/wiki/Well-known_text#Geometric_Objects">Wikipedia</a>
        for a description and examples of WKT.</p>
        <div id="wktInput">
            <textarea id="wkt" rows="6" cols="30">paste WKT here...</textarea>
            <br />
            <input type="button" value="add feature" onclick="parseWKT();" />
        </div>
        <ul id="controlToggle">
            <li>
                <input type="radio" name="type" value="none" id="noneToggle"
                       onclick="toggleControl(this);" checked="checked" />
                <label for="noneToggle">navigate</label>
            </li>
            <li>
                <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
                <label for="pointToggle">draw point</label>
            </li>
            <li>
                <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
                <label for="lineToggle">draw line</label>
            </li>
            <li>
                <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
                <label for="polygonToggle">draw polygon</label>
            </li>
            <li>
                <input type="radio" name="type" value="hover" id="hoverToggle"
                       onclick="toggleControl(this);" />
                <label for="hoverToggle">view WKT for feature</label>
            </li>
        </ul>
      </div>
    </div>
  </body>
 </html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>WKT</title>
	<style type="text/css">
	#info {
	position: absolute;
	top: 70px;
	left: 550px;
	width: 350px;
	}
	#map {
	width: 512px;
	height: 512px;
	border: 1px solid gray;
	}
	#controls {
	width: 512px;
	}
	#wktInput {
	float: right;
	}
	#controlToggle {
	padding-left: 1em;
	}
	#controlToggle li {
	list-style: none;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="http://openlayers.org/dev/OpenLayers.js"></script>
	<script type="text/javascript">

	function get_my_url (bounds) {
	var res = this.map.getResolution();
	var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
	var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
	var z = this.map.getZoom();

	//var path = z + "/" + x + "/" + y + "." + this.type;
	var path = '?x=' + x + '&y=' + y + '&z=' + z;
	var url = this.url;
	if (url instanceof Array) {
	url = this.selectUrl(path, url);
	}
	return url + path;

	}


	var map, vectors, drawControls, wkt;
	function init(){
	map = new OpenLayers.Map('map');

	var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
	"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'});
	//var gbif = new OpenLayers.Layer.TMS("GBIF", "http://api.gbif.org/v0.9/map/density/tile", { 'getURL':get_my_url });

	vectors = new OpenLayers.Layer.Vector("Vector Layer");

	map.addLayers([wms, vectors]);
	map.addControl(new OpenLayers.Control.LayerSwitcher());
	map.addControl(new OpenLayers.Control.MousePosition());

	var options = {
	hover: true,
	onSelect: displayWKT
	};

	drawControls = {
	point: new OpenLayers.Control.DrawFeature(vectors,
	OpenLayers.Handler.Point),
	line: new OpenLayers.Control.DrawFeature(vectors,
	OpenLayers.Handler.Path),
	polygon: new OpenLayers.Control.DrawFeature(vectors,
	OpenLayers.Handler.Polygon),
	hover: new OpenLayers.Control.SelectFeature(vectors, options)
	};

	for(var key in drawControls) {
	map.addControl(drawControls[key]);
	}

	wkt = new OpenLayers.Format.WKT();

	map.setCenter(new OpenLayers.LonLat(0, 0), 3);
	document.getElementById('noneToggle').checked = true;
	}

	function toggleControl(element) {
	for(key in drawControls) {
	var control = drawControls[key];
	if(element.value == key && element.checked) {
	control.activate();
	} else {
	control.deactivate();
	}
	}
	}


	// gbif API
	function gbif(wkt)
	{
	$.getJSON("http://api.gbif.org/v0.9/occurrence/search?geometry=" + encodeURIComponent(wkt) + "&taxonKey=7303270&callback=?",
	function(data){

	var html = "";

	html += 'Count: <b>' + data.count + '</b>' + '<br/>';
	html += '<ul>';
	for (var i in data.results) {
	html += '<li>' + data.results[i].key
	+ ' ' + data.results[i].scientificName

	+ ' ' + data.results[i].decimalLongitude
	+ ' ' + data.results[i].decimalLatitude

	+ '</li>';
	}
	html += '</ul>';


	$("#info").html($("#info").html() + html);
	}

	);
	}



	function displayWKT(feature) {
	var str = wkt.write(feature);
	// not a good idea in general, just for this demo
	str = str.replace(/,/g, ', ');
	//document.getElementById('info').innerHTML = str;

	var WKT = str;
	$('#info').html(WKT);

	gbif(WKT);



	}

	function parseWKT() {
	var element = document.getElementById('wkt');
	var features = wkt.read(element.value);
	var bounds;
	if(features) {
	if(features.constructor != Array) {
	features = [features];
	}
	for(var i=0; i<features.length; ++i) {
	if (!bounds) {
	bounds = features[i].geometry.getBounds();
	} else {
	bounds.extend(features[i].geometry.getBounds());
	}

	}
	vectors.addFeatures(features);
	map.zoomToExtent(bounds);
	var plural = (features.length > 1) ? 's' : '';
	element.value = 'Feature' + plural + ' added'
	} else {
	element.value = 'Bad WKT';
	}
	}
	</script>
	</head>
	<body onload="init()">
	<h1 id="title">WKT Example</h1>
	<div id="info"></div>
	<p id="shortdesc">
	Shows the use of WKT (Well known text) to draw features in openlayers
	</p>
	<div id="map"></div>
	<div id="tags"></div>



	<div id="docs">
	<div id="controls">
	<p>See <a href="http://en.wikipedia.org/wiki/Well-known_text#Geometric_Objects">Wikipedia</a>
	for a description and examples of WKT.</p>
	<div id="wktInput">
	<textarea id="wkt" rows="6" cols="30">paste WKT here...</textarea>
	<br />
	<input type="button" value="add feature" onclick="parseWKT();" />
	</div>
	<ul id="controlToggle">
	<li>
	<input type="radio" name="type" value="none" id="noneToggle"
	onclick="toggleControl(this);" checked="checked" />
	<label for="noneToggle">navigate</label>
	</li>
	<li>
	<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
	<label for="pointToggle">draw point</label>
	</li>
	<li>
	<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
	<label for="lineToggle">draw line</label>
	</li>
	<li>
	<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
	<label for="polygonToggle">draw polygon</label>
	</li>
	<li>
	<input type="radio" name="type" value="hover" id="hoverToggle"
	onclick="toggleControl(this);" />
	<label for="hoverToggle">view WKT for feature</label>
	</li>
	</ul>
	</div>
	</div>
	</body>
	</html>