WP style user-friendly selection of geo-coordinates (decimal degrees).
Rather refer to Codio : https://codio.com/hugolpz/wikiatlas-d3/tree/1.1_bb_geo-area_select%2FREADME.md
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style><!-- svg -->
svg { border: 1px solid #CCC; }
.background { fill: #C6ECFF; }
.foreground {
fill: none;
stroke: #333;
stroke-width: 1.5px;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
}
.graticule :nth-child(2n) {
stroke-dasharray: 2,2;
}
.brush .extent {
stroke: #B10000;
fill-opacity: .125;
shape-rendering: crispEdges;
}
</style>
<style>
body { background-image: url('//subtlepatterns.com/patterns/hixs_pattern_evolution.png'); }
h3 { font-weight: bold;}
.panel-default>.panel-heading {
color: #333;
background-color: #e5e5e5;
border-color: #ddd;
}
.panel-danger>.panel-heading {
background-color: #df3e3e;
border: 1px solid #a00;
color: #fff;
text-shadow: 0 -1px 0 #900;
}
.shell{ box-shadow: 0 0 2em rgba(0,0,0,0.4);
margin: 0em 3em 0em 3em;
max-width: 60em;}
.shell-top {
text-align: center;
color: #525252;
padding: 5px 0;
margin: 0;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
font-size: 0.85em;
border: 1px solid #CCCCCC;
border-bottom: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: #f7f7f7;
background: linear-gradient(to bottom, #f7f7f7 0%,#B8B8B8 100%); /* W3C */
}
.shell-body {
background-color: #000;
color: #FFF;
font: 1em 'Andale Mono', Consolas, 'Courier New';
line-height: 1.6em;
word-wrap: break-word;
border: 1px solid #CCCCCC;
border-top: none;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
padding: .2em .2em .2em 1em;
margin:0;
min-height: 2em;
}
.shell-body:before { content: "$ "; color: #45D40C; }
.text-warning { color: #f0ad4e; }
.input-group-addon.head { width: 6em; }
</style>
</head>
<body class="container-fluid"><br>
<!-- #hook ********************************************* -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" id="select"><i class="fa fa-edit"> </i> Step 1: Select an area</h3>
</div>
<div class="panel-body">
<p>Using your mouse, select an area on the map as precisely as you can. Geo-coordinates will be send to Step 2.</p>
<div id="hook"><!-- receiving svg world map --></div>
</div>
</div>
<!-- #values ******************************************* -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" id="values"><i class="fa fa-check-square-o"> </i> Step 2: Adjust the values</h3>
</div>
<div class="panel-body">
<p>You can now round the geocoordinate values as needed. The <code>ITEM</code> field <em>must be enter</em>. Press <span class="label label-success">confirm</span> when all is clean & sharp.</p>
<div class="row">
<div class="form-group col-xs-6 col-md-3">
<label class="sr-only" for="WEST">WEST coordinates in décimal degrees.</label>
<div class="input-group">
<div class="input-group-addon head">WEST:</div>
<input type="text" class="form-control" id="WEST" placeholder="12.3">
<!-- div class="input-group-addon">⁰</div -->
</div>
</div>
<div class="form-group col-xs-6 col-md-3">
<label class="sr-only" for="NORTH">NORTH coordinates in décimal degrees.</label>
<div class="input-group">
<div class="input-group-addon head">NORTH:</div>
<input type="text" class="form-control" id="NORTH" placeholder="45.6">
</div>
</div>
<div class="form-group col-xs-6 col-md-3">
<label class="sr-only" for="EAST">EAST coordinates in décimal degrees.</label>
<div class="input-group">
<div class="input-group-addon head">EAST:</div>
<input type="text" class="form-control" id="EAST" placeholder="23.4">
</div>
</div>
<div class="form-group col-xs-6 col-md-3">
<label class="sr-only" for="SOUTH">SOUTH coordinates in décimal degrees.</label>
<div class="input-group">
<div class="input-group-addon head">SOUTH:</div>
<input type="text" class="form-control" id="SOUTH" placeholder="56.7">
</div>
</div>
<!-- END OF FIRST LINE -->
<div class="form-group col-xs-6 col-md-3">
<label class="sr-only" for="title">ITEM (as a string without space or special character)</label>
<div class="input-group">
<div class="input-group-addon head">ITEM:</div>
<input type="text" class="form-control" id="ITEM" placeholder="Area_or_topic_name_(without_space_or_special_character)">
</div>
</div>
<div class="form-group col-xs-6 col-md-3">
<label class="sr-only" for="SLICES">Topographic SLICES, default to 8, must be >2.</label>
<div class="input-group">
<div class="input-group-addon head">SLICES:</div>
<select class="form-control" id="SLICES">
<option>3</option>
<option>4</option>
<option>5</option>
<option selected>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
</div>
</div><!-- end row-->
<button class="btn btn-success pull-right confirm">Confirm</button>
</div>
</div>
<!-- #fire_zone **************************************** -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" id="fire_zone"><i class="fa fa-rocket"> </i> Step 3: Launch the beast</h3>
</div>
<div class="panel-body row">
<div class="col-md-6 col-xs-12">
<button id="resetKnol" type="button" class="btn btn-primary pull-right"
data-toggle="tooltip" data-placement="top" title="Be patient it can take a few minutes">
<i class="fa fa-warning text-warning"> </i>
<span>Run the beast</span>
</button>
<p>The beast is huge & slow to move. With clean items let's awake <em>It</em>.</p>
</div>
<div class="col-md-6 col-xs-12">
<div class="shell">
<p class="shell-top">Shell command to send to server:</p>
<p class="shell-body"></p>
</div>
</div>
</div>
</div>
<!-- #download ***************************************** -->
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title" id="download">
<i class="fa fa-download text-success"> </i> Step 4:
Download your files
</h3>
</div>
<div class="panel-body">
<p>The beast end up offering secret gems.
<ul id="downloads_url"></ul>
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
// Bootstrap Components
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
var width = 960,
height = width/960*500;
var projection = d3.geo.equirectangular();
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var x = d3.scale.linear().range([0, width]),
y = d3.scale.linear().range([0, height]);
brush = d3.svg.brush()
.x(x)
.y(y)
.on("brush", brushed)
.on("brushend", bounding)
.extent([[100, 100], [200, 200]]);
var svg = d3.select("#hook").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "background")
.attr("xlink:href", "#sphere");
svg.append("g")
.attr("class", "graticule")
.selectAll("path")
.data(graticule.lines)
.enter().append("path")
.attr("d", path);
svg.append("use")
.attr("class", "foreground")
.attr("xlink:href", "#sphere");
var mybrush = svg.append("g")
.attr("class", "brush")
.call(brush);
/* ****************************************************** */
/* INJECT GIS ******************************************* */
d3.json("./world-110m-ids.json", function(error, world) {
var country = svg.selectAll(".country")
.data(topojson.feature(world, world.objects.countries).features)
.enter().insert("path", ".graticule")
.attr("id", function(d){ return d.id } )
.attr("class", "country")
.style("fill", "#FDFBEA")
.attr("d", path);
var boundaries = svg.insert("path", ".graticule")
//.datum( topojson.mesh(world, world.objects.countries, function(a,b) { if (a!==b){var ret = b;}return ret;}))
.datum( topojson.mesh(world, world.objects.countries, function(a,b) { return a!==b; }))
.attr("class", "boundary")
.attr("d", path)
.style({'fill':'none','stroke': '#656565', 'stroke-width': 0.5});
var coast = svg.insert("path", ".graticule")
//.datum( topojson.mesh(world, world.objects.countries, function(a,b) { if (a==b){var ret = b;}return ret;}))
.datum( topojson.mesh(world, world.objects.countries, function(a,b) { return a==b; }))
.attr("class", "Coast_border")
.style({'fill': 'none', 'stroke': '#0978AB', 'stroke-linejoin': 'round'})
.style({'stroke-width': 1 })
.attr("d", path);
});
brushed();
function brushed() { } // empty function not used.
function bounding() {
var extent = brush.extent();
console.log(extent);
var WNES = [ projection.invert([ x(extent[0][0]),y(extent[0][1]) ]), projection.invert([x(extent[1][0]),y(extent[1][1])]) ];
var W=Math.round(WNES[0][0]*100)/100,
N=Math.round(WNES[0][1]*100)/100,
E=Math.round(WNES[1][0]*100)/100,
S=Math.round(WNES[1][1]*100)/100;
$("#WEST").val(W);
$("#NORTH").val(N);
$("#EAST").val(E);
$("#SOUTH").val(S);
confirm();
}
var confirm = function() {
var W2 = $("#WEST").val(),
N2 = $("#NORTH").val(),
E2 = $("#EAST").val(),
S2 = $("#SOUTH").val(),
ITEM2=$("#ITEM").val(),
SLICES2 = $("#SLICES option:selected" ).text();
var command = "make -f master.makefile ITEM="+ITEM2+" WEST="+W2+" NORTH="+N2+" EAST="+E2+" SOUTH="+S2+" SLICES="+SLICES2;
$(".shell-body").text(command);
var extent = brush.extent();
console.log("ext: "+ x(extent[0][0]))
d3.select(".extent") //select all the just-created rectangles
.attr("x", projection([W2,N2])[0])//x(extent[0][0])) // redraw rectangle on same value ! need reprojection of W
.attr("y", projection([W2,N2])[1])
.attr("width", projection([E2,S2])[0]-projection([W2,N2])[0])
.attr("height", projection([E2,S2])[1]-projection([W2,N2])[1]); //set their height
}
$(".confirm").on("click", confirm);
</script>
</body>
topojson=function(){function t(t,e){function n(e){var n=t.arcs[e],r=n[0],o=[0,0];return n.forEach(function(t){o[0]+=t[0],o[1]+=t[1]}),[r,o]}var r={},o={},a={};e.forEach(function(t){var e=n(t);(r[e[0]]||(r[e[0]]=[])).push(t),(r[e[1]]||(r[e[1]]=[])).push(~t)}),e.forEach(function(t){var e,r,i=n(t),u=i[0],c=i[1];if(e=a[u])if(delete a[e.end],e.push(t),e.end=c,r=o[c]){delete o[r.start];var s=r===e?e:e.concat(r);o[s.start=e.start]=a[s.end=r.end]=s}else if(r=a[c]){delete o[r.start],delete a[r.end];var s=e.concat(r.map(function(t){return~t}).reverse());o[s.start=e.start]=a[s.end=r.start]=s}else o[e.start]=a[e.end]=e;else if(e=o[c])if(delete o[e.start],e.unshift(t),e.start=u,r=a[u]){delete a[r.end];var f=r===e?e:r.concat(e);o[f.start=r.start]=a[f.end=e.end]=f}else if(r=o[u]){delete o[r.start],delete a[r.end];var f=r.map(function(t){return~t}).reverse().concat(e);o[f.start=r.end]=a[f.end=e.end]=f}else o[e.start]=a[e.end]=e;else if(e=o[u])if(delete o[e.start],e.unshift(~t),e.start=c,r=a[c]){delete a[r.end];var f=r===e?e:r.concat(e);o[f.start=r.start]=a[f.end=e.end]=f}else if(r=o[c]){delete o[r.start],delete a[r.end];var f=r.map(function(t){return~t}).reverse().concat(e);o[f.start=r.end]=a[f.end=e.end]=f}else o[e.start]=a[e.end]=e;else if(e=a[c])if(delete a[e.end],e.push(~t),e.end=u,r=a[u]){delete o[r.start];var s=r===e?e:e.concat(r);o[s.start=e.start]=a[s.end=r.end]=s}else if(r=o[u]){delete o[r.start],delete a[r.end];var s=e.concat(r.map(function(t){return~t}).reverse());o[s.start=e.start]=a[s.end=r.start]=s}else o[e.start]=a[e.end]=e;else e=[t],o[e.start=u]=a[e.end=c]=e});var i=[];for(var u in a)i.push(a[u]);return i}function e(e,n,r){function a(t){0>t&&(t=~t),(l[t]||(l[t]=[])).push(f)}function i(t){t.forEach(a)}function u(t){t.forEach(i)}function c(t){"GeometryCollection"===t.type?t.geometries.forEach(c):t.type in d&&(f=t,d[t.type](t.arcs))}var s=[];if(arguments.length>1){var f,l=[],d={LineString:i,MultiLineString:u,Polygon:u,MultiPolygon:function(t){t.forEach(u)}};c(n),l.forEach(arguments.length<3?function(t,e){s.push(e)}:function(t,e){r(t[0],t[t.length-1])&&s.push(e)})}else for(var p=0,h=e.arcs.length;h>p;++p)s.push(p);return o(e,{type:"MultiLineString",arcs:t(e,s)})}function n(t,e){return"GeometryCollection"===e.type?{type:"FeatureCollection",features:e.geometries.map(function(e){return r(t,e)})}:r(t,e)}function r(t,e){var n={type:"Feature",id:e.id,properties:e.properties||{},geometry:o(t,e)};return null==e.id&&delete n.id,n}function o(t,e){function n(t,e){e.length&&e.pop();for(var n,r=h[0>t?~t:t],o=0,i=r.length,u=0,c=0;i>o;++o)e.push([(u+=(n=r[o])[0])*f+d,(c+=n[1])*l+p]);0>t&&a(e,i)}function r(t){return[t[0]*f+d,t[1]*l+p]}function o(t){for(var e=[],r=0,o=t.length;o>r;++r)n(t[r],e);return e.length<2&&e.push(e[0]),e}function i(t){for(var e=o(t);e.length<4;)e.push(e[0]);return e}function u(t){return t.map(i)}function c(t){var e=t.type;return"GeometryCollection"===e?{type:e,geometries:t.geometries.map(c)}:e in v?{type:e,coordinates:v[e](t)}:null}var s=t.transform,f=s.scale[0],l=s.scale[1],d=s.translate[0],p=s.translate[1],h=t.arcs,v={Point:function(t){return r(t.coordinates)},MultiPoint:function(t){return t.coordinates.map(r)},LineString:function(t){return o(t.arcs)},MultiLineString:function(t){return t.arcs.map(o)},Polygon:function(t){return u(t.arcs)},MultiPolygon:function(t){return t.arcs.map(u)}};return c(e)}function a(t,e){for(var n,r=t.length,o=r-e;o<--r;)n=t[o],t[o++]=t[r],t[r]=n}function i(t,e){for(var n=0,r=t.length;r>n;){var o=n+r>>>1;t[o]<e?n=o+1:r=o}return n}function u(t){function e(t,e){t.forEach(function(t){0>t&&(t=~t);var n=o[t];n?n.push(e):o[t]=[e]})}function n(t,n){t.forEach(function(t){e(t,n)})}function r(t,e){"GeometryCollection"===t.type?t.geometries.forEach(function(t){r(t,e)}):t.type in u&&u[t.type](t.arcs,e)}var o={},a=t.map(function(){return[]}),u={LineString:e,MultiLineString:n,Polygon:n,MultiPolygon:function(t,e){t.forEach(function(t){n(t,e)})}};t.forEach(r);for(var c in o)for(var s=o[c],f=s.length,l=0;f>l;++l)for(var d=l+1;f>d;++d){var p,h=s[l],v=s[d];(p=a[h])[c=i(p,v)]!==v&&p.splice(c,0,v),(p=a[v])[c=i(p,h)]!==h&&p.splice(c,0,h)}return a}return{version:"1.1.4",mesh:e,feature:n,neighbors:u}}();