Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
  • 12 commits
  • 3 files changed
  • 0 commit comments
  • 1 contributor
Commits on Aug 13, 2012
@TankofVines Added a GeoJSON layer and a test point at Weedon Island 6ca1551
@TankofVines Added a fn to handle the click event and add new GeoJSON points to th…
…e map...next submit the geojson layer
37ac6b0
Commits on Aug 16, 2012
@TankofVines Added the beginnings of of the ajax call wired to the submit button s…
…ubmit event...added an id to the submit button html
1d2a7a0
Commits on Aug 17, 2012
@TankofVines Added an empty array to hod the lat/long values and added the ajax ca…
…ll to GET the nndist from node service
793f66b
Commits on Aug 22, 2012
@TankofVines Changed the ajax request to point to the elastic ip of the node cloud…
… service
bf9e9c4
@TankofVines Changed the name of the app heading and gave it a bold style c6224f1
Commits on Aug 25, 2012
@TankofVines Changed the coordinate system for the values being pushed to the node…
… service so we get some better units (i.e. meters)
7964aea
Commits on Aug 27, 2012
@TankofVines Disabled the double touch zoom becasue of the interaction with the po…
…int placement...added the reload page to the onClick event of the Clear button
4399fcb
Commits on Aug 28, 2012
@TankofVines Added the results dialog and modified the html in the buttons to link…
… to it and close properly...need to append the result to the dialog content
4ddd91f
@TankofVines Added the results.html dialog 71b8da8
Commits on Aug 29, 2012
@TankofVines Removed the external html for the dialog and made it an internal jqm …
…div dialog
f9210db
@TankofVines Added a close button to results dialog, changed the clear button to c…
…lear features, cleared the coords array after calculting to fix issues on subsequent calls
f58c484
Showing with 135 additions and 26 deletions.
  1. +14 −0 css/ppa.css
  2. +81 −3 js/ppa.js
  3. +40 −23 ppamobile.html
View
14 css/ppa.css
@@ -7,4 +7,18 @@ body {
min-height: 800px;
height: 100%;
width: 100%;
+}
+
+#heading {
+ font-weight: bold;
+}
+
+#results-link {
+ display: none;
+}
+
+#dialog-close-button {
+ width: 150px;
+ margin: 2px;
+ float: right;
}
View
84 js/ppa.js
@@ -1,16 +1,94 @@
var map;
+var coords = [];
+var proj = L.Projection.Mercator;
function initMap() {
- // Leaflet Map
- map = new L.Map('map');
+ // New leaflet Map
+ map = new L.Map('map', {
+ doubleClickZoom: false
+ });
// Initial location
var intialPoint = new L.LatLng(27.841845, -82.598578);
+ // var geojsonFeature = {
+ // "type": "Feature",
+ // "properties": {
+ // "name": "Weedon Island Preserve",
+ // "amenity": "Cultural Resource",
+ // "popupContent": "Welcome to Weedon Island Preserve!"
+ // },
+ // "geometry": {
+ // "type": "Point",
+ // "coordinates": [-82.598578, 27.841845]
+ // }
+ // };
+
// OSM
var streetMapUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var streetMapLayer = new L.TileLayer(streetMapUrl, { maxZoom: 19, attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' });
-
+
+ // Set the intitial zoom level and center location
map.setView(intialPoint, 14);
map.addLayer(streetMapLayer);
+
+ // Create feature editor for use in the function below
+ var editFeatures = L.geoJson().addTo(map);
+ // editFeatures.addData(geojsonFeature);
+
+ // Function to add points to the map on click
+ function addPoint(e) {
+
+ var thisPoint = {
+ "type": "Feature",
+ "properties": {
+ "name": "Weedon Island Preserve",
+ "amenity": "Cultural Resource",
+ "popupContent": "This shard is located at " + e.latlng.toString()
+ },
+ "geometry": {
+ "type": "Point",
+ "coordinates": [e.latlng.lng, e.latlng.lat]
+ }
+ }
+
+ editFeatures.addData(thisPoint);
+ }
+
+ map.on('click', addPoint);
+
+ $('#clear-button').click(function() {
+ editFeatures.clearLayers();
+
+ });
+
+ // On click event for the calculate button
+ // Project coordinates and call the node.js service
+ $('#calculateButton').click(function() {
+ editFeatures.eachLayer(function(layer) {
+ console.log(proj.project(layer.getLatLng()));
+ coord = proj.project(layer.getLatLng());
+ northing = coord.x;
+ easting = coord.y;
+ coords.push([northing,easting]);
+ });
+
+ $.ajax({
+ url: 'http://23.21.65.194:3000/nndist',
+ cache: false,
+ data: {
+ coordinates: JSON.stringify(coords)
+ },
+ dataType: "jsonp",
+ success: function(responseData) {
+ console.log(responseData);
+ coords = [];
+ // alert(responseData);
+ $("#results-content").html('<p>Mean nearest neighbor distance: ' + responseData + ' meters</p>');
+ $("#results-link").click();
+ }
+ });
+
+ });
+
}
View
63 ppamobile.html
@@ -1,28 +1,45 @@
<!DOCTYPE html>
<html>
- <head>
- <title>ppa</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
- <link rel="stylesheet" href="js/leaflet/dist/leaflet.css" />
- <link rel="stylesheet" href="css/ppa.css" />
- <script src="js/jquery-1.7.2.min.js"></script>
- <script src="js/jquery.mobile-1.1.1.js"></script>
- <script src="js/leaflet/dist/leaflet.js"></script>
- <script src="js/ppa.js"></script>
-</head>
-<body onload="initMap();">
+ <head>
+ <meta charset="utf-8" />
+ <title>ppa</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
+ <link rel="stylesheet" href="js/leaflet/dist/leaflet.css" />
+ <link rel="stylesheet" href="css/ppa.css" />
+ <script src="js/jquery-1.7.2.min.js"></script>
+ <script src="js/jquery.mobile-1.1.1.js"></script>
+ <script src="js/leaflet/dist/leaflet.js"></script>
+ <script src="js/ppa.js"></script>
+ </head>
+ <body onload="initMap();">
-<div data-role="page">
- <div data-role="header">
- <a href="ppamobile.html" data-icon="">Clear</a>
- <h1>ppa</h1>
- <input type="submit" value="Calculate" class="ui-btn-right" data-mini="true" data-inline="true"/>
- </div><!-- /header -->
- <div data-role="content" id="map"></div>
- <div data-role="footer">
- </div>
-</div><!-- /page -->
+ <div data-role="page">
+ <div data-role="header">
+ <!-- <a id="clear-button" href="ppamobile.html" data-icon="">Clear</a> -->
+ <input id="clear-button" data-role="button" type="reset" value="Clear" class="ui-btn-left" data-inline="true" data-mini="true"/>
+ <h1 id="heading">Weedon Island Potsherd Monitoring Tool</h1>
+ <!-- <input id="calculateButton" type="submit" value="Calculate" class="ui-btn-right" data-mini="true" data-inline="true"/> -->
+ <a data-role="button" id="calculateButton" class="ui-btn-right">
+ Calculate
+ </a>
+ <a id="results-link" href="#results-dialog" data-rel="dialog" data-transition="pop">Open dialog</a>
+ </div><!-- /header -->
+ <div data-role="content" id="map">
+ </div
+ <div data-role="footer">
+ </div>
+ </div><!-- /page -->
-</body>
+ <div id="results-dialog" data-role="page">
+ <div data-role="header">
+ <h2>Results</h2>
+ </div>
+ <div id="results-content" data-role="content">
+ </div>
+ <div data-role="footer" id="results-dialog-footer">
+ <a id="dialog-close-button" data-role="button" data-inline="false" href="ppamobile.html">OK</a>
+ </div>
+ </div>
+ </body>
</html>

No commit comments for this range

Something went wrong with that request. Please try again.