wicket
Version:
A modest library for moving between Well-Known Text (WKT) and various framework geometries
217 lines (190 loc) • 9.37 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Conditional commenting for non-IE browsers -->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/static/wicket/doc/index.css" />
<!--<![endif]-->
<!-- Conditional commenting for IE 6.x -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/static/wicket/doc/index.ie.css" />
<![endif]-->
</head>
<title>Wicket - Lightweight Javascript for WKT [ESRI ArcGIS Sandbox]</title>
<link href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/" type="text/javascript"></script>
<script src="../wicket.js" type="text/javascript"></script>
<script src="../wicket-arcgis.js" type="text/javascript"></script>
<script type="text/javascript">
var app = (function () {
return {
features: [],
/**
* Clears the map contents.
*/
clearMap: function () {
var i;
// Reset the remembered last string (so that we can clear the map,
// paste the same string, and see it again)
document.getElementById('wkt').last = '';
for (i = 0; i < this.features.length; i += 1) {
this.map.graphics.remove(this.features[i]);
}
//this.features.length = 0;
},
/**
* Clears the current contents of the textarea.
*/
clearText: function () {
document.getElementById('wkt').value = '';
},
/**
* Maps the current contents of the textarea.
* @param editable {Boolean} Indicates that the feature drawn should be editable
* @param focus {Boolean} Indicates that the map should pan and/or zoom to new features
* @return {Object} Some sort of geometry object
*/
mapIt: function (editable, focus) {
var config, el, graphic, obj, symbol, wkt;
// Indicates that the map should pan and/or zoom to new features
focus = focus || false;
if (editable === undefined) {
editable = true;
}
el = document.getElementById('wkt');
wkt = new Wkt.Wkt();
if (el.last === el.value) { // Remember the last string
return; // Do nothing if the WKT string hasn't changed
} else {
el.last = el.value;
}
try { // Catch any malformed WKT strings
wkt.read(el.value);
} catch (e1) {
try {
wkt.read(el.value.replace('\n', '').replace('\r', '').replace('\t', ''));
} catch (e2) {
if (e2.name === 'WKTError') {
alert('Wicket could not understand the WKT string you entered. Check that you have parentheses balanced, and try removing tabs and newline characters.');
return;
}
}
}
config = {
spatialReference: {
wkid: 4326 // WGS84 unprojected
},
editable: editable
};
obj = wkt.toObject(config); // Make an object
switch (obj.type) {
case "point":
symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
break;
case "polyline":
symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1);
break;
case "polygon":
symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
break;
case "extent":
symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
break;
case "multipoint":
symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5]));
break;
}
graphic = new esri.Graphic(obj, symbol);
this.map.graphics.add(graphic); // Add to map
this.features.push(graphic); // Remember it for later
return obj;
},
/**
* Updates the textarea based on the first available feature.
*/
updateText: function () {
var wkt = new Wkt.Wkt();
wkt.fromObject(this.features[0]);
document.getElementById('wkt').value = wkt.write();
},
/**
* Formats the textarea contents for a URL.
* @param checked {Boolean} The check state of the associated checkbox
*/
urlify: function (checked) {
var wkt = new Wkt.Wkt();
wkt.read(document.getElementById('wkt').value);
wkt.delimiter = (checked) ? '+' : ' ';
document.getElementById('wkt').value = wkt.write();
return wkt;
},
/**
* Application entry point.
* @return {<L.map>} The Leaflet instance
*/
init: function () {
var map = new esri.Map('canvas', {
center: [10, 20],
zoom: 2,
basemap: 'oceans'
});
// Set event handlers //////////////////////////////////////////////
dojo.connect(map, 'onLoad', function() {
document.getElementById('wkt').value = 'MULTIPOLYGON (((40 40, 20 45, 45 30, 40 40)), ((20 35, 45 20, 30 5, 10 10, 10 30, 20 35), (30 20, 20 25, 20 15, 30 20)))';
});
return map;
}
};
}());
dojo.require('esri.map');
//dojo.addOnLoad(app.init); // Not necessary; see <body> tag
</script>
<body onload="app.map=app.init();"><!--app.mapIt(false, false);">-->
<div id="head">
<div class="wrapper">
</div>
</div>
<div id="ribbon">
<div class="wrapper">
<a href="http://github.com/arthur-e/Wicket">
<div id="forkme">
</div>
</a>
<div id="canvas">
</div>
<div id="controls">
<div class="title">
<div class="brand">Wicket</div>
It whispers WKT in your application's ear.
</div>
<div class="text">
Wicket is a lightweight Javascript library that reads and writes <a href="http://en.wikipedia.org/wiki/Well-known_text#Geometric_objects" target="_blaknk">Well-Known Text (WKT)</a> strings. It can also be extended to parse and to create geometric objects from various mapping frameworks, such as <a href="http://http://leafletjs.com/" target="_blank">Leaflet</a>, the ESRI ArcGIS JavaScript API, and the Google Maps API.
</div>
<div id="form">
<textarea type="text" name="wkt" id="wkt"></textarea>
<label><input type="checkbox" name="urlify" id="urlify" onchange="app.urlify(this.checked);" />Format for URLs</label>
<input type="submit" id="submit" value="Map It!" onclick="app.clearMap();app.mapIt(true, true);" />
<input type="reset" id="reset" value="Clear Map" onclick="app.clearText();app.clearMap();" />
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="menu" id="nav">
<a href="/">Home</a>
<a href="mailto:kaendsle@mtu.edu">Contact Me</a>
<a href="http://github.com/arthur-e/Wicket">"Fork me on GitHub!"</a>
</div>
<div class="attribute">
Design © 2012-2013 <a href="mailto:kaendsle@mtu.edu">K. Arthur Endsley</a>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_GB">
<img alt="Wicket is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License" style="float:right;border-width:0;vertical-align:middle;" src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png" />
</a><br />
Wicket is released under the <a href="https://github.com/arthur-e/Wicket/blob/master/LICENSE" target="_blank">GPL v3</a>
</div>
</div>
</div>
</body>
</html>