wicket
Version:
A modest library for moving between Well-Known Text (WKT) and various framework geometries
263 lines (231 loc) • 10.3 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]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
</head>
<title>Wicket - Lightweight Javascript for WKT [Leaflet Sandbox]</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<!--See https://github.com/seelmann/leaflet-providers for below-->
<script src="../node_modules/leaflet-providers/leaflet-providers.js"></script>
<script src="../wicket.js" type="text/javascript"></script>
<script src="../wicket-leaflet.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 in this.features) {
if (this.features.hasOwnProperty(i)) {
this.map.removeLayer(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, obj, 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 = this.map.defaults;
config.editable = editable;
obj = wkt.toObject(this.map.defaults); // Make an object
// Add listeners for overlay editing events
if (wkt.type === 'polygon' || wkt.type === 'linestring') {
}
if (Wkt.isArray(obj)) { // Distinguish multigeometries (Arrays) from objects
for (i in obj) {
if (obj.hasOwnProperty(i) && !Wkt.isArray(obj[i])) {
obj[i].addTo(this.map);
this.features.push(obj[i]);
}
}
} else {
obj.addTo(this.map); // Add it to the map
this.features.push(obj);
}
// Pan the map to the feature
if (focus && obj.getBounds !== undefined && typeof obj.getBounds === 'function') {
// For objects that have defined bounds or a way to get them
this.map.fitBounds(obj.getBounds());
} else {
if (focus && obj.getLatLng !== undefined && typeof obj.getLatLng === 'function') {
this.map.panTo(obj.getLatLng());
}
}
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 leaflet, that;
that = this;
leaflet = {
baseLayers: undefined,
overlays: undefined
};
// Stamen //////////////////////////////////////////////////////////////////////
leaflet.baseLayers = {
'Stamen Toner Map': L.tileLayer.provider('Stamen.Toner')
};
// Configure map ///////////////////////////////////////////////////
leaflet.map = L.map('canvas', {
zoomControl: true,
attributionControl: true,
layers: [
leaflet.baseLayers['Stamen Toner Map'],
]
});
leaflet.map.defaults = {
icon: new L.Icon({
iconUrl: 'red_dot.png',
iconSize: [16, 16],
iconAnchor: [8, 8],
shadowUrl: 'dot_shadow.png',
shadowSize: [16, 16],
shadowAnchor: [8, 8]
}),
editable: true,
color: '#AA0000',
weight: 3,
opacity: 1.0,
editable: true,
fillColor: '#AA0000',
fillOpacity: 0.2
};
// Set event handlers //////////////////////////////////////////////
leaflet.map.loaded = false;
leaflet.map.on('load', function () {
if (!this.loaded) {
this.loaded = true;
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)))';
}
});
// There are no 'edit' events, so let's catch editing at its most
// fundamental: the mouseup event on the map
leaflet.map.on('mouseup', function () {
that.updateText()
});
// Initialize the map //////////////////////////////////////////////
leaflet.map.setView([10, 20], 2);
return leaflet.map;
}
};
}());
</script>
<body onload="app.map=app.init();app.mapIt(true, 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>