Skip to content

Instantly share code, notes, and snippets.

@milkbread
Created September 4, 2013 19:42
Show Gist options
  • Save milkbread/6441855 to your computer and use it in GitHub Desktop.
Save milkbread/6441855 to your computer and use it in GitHub Desktop.
JavaScript: GeoJSONSimplifier_0.1
var LineString = {
"type": "LineString",
"coordinates": [
[-101.744384765625, 39.32155002466662],
[-101.5521240234375, 39.330048552942415],
[-101.40380859375, 39.330048552942415],
[-101.33239746093749, 39.364032338047984],
[-101.041259765625, 39.36827914916011],
[-100.975341796875, 39.30454987014581],
[-100.9149169921875, 39.24501680713314],
[-100.843505859375, 39.16414104768742],
[-100.8050537109375, 39.104488809440475],
[-100.491943359375, 39.10022600175347],
[-100.43701171875, 39.095962936305476],
[-100.338134765625, 39.095962936305476],
[-100.1953125, 39.027718840211605],
[-100.008544921875, 39.01064750994083],
[-99.86572265625, 39.00211029922512],
[-99.6844482421875, 38.97222194853654],
[-99.51416015625, 38.929502416386605],
[-99.38232421875, 38.92095542046727],
[-99.3218994140625, 38.89530825492018],
[-99.1131591796875, 38.86965182408357],
[-99.0802001953125, 38.85682013474361],
[-98.82202148437499, 38.85682013474361],
[-98.44848632812499, 38.84826438869913],
[-98.20678710937499, 38.84826438869913],
[-98.02001953125, 38.8782049970615],
[-97.635498046875, 38.87392853923629]
]
};
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
</body>
<script>
//!!!Cross-origin not allowed!!!
/*You have to build a test-environment ... needs a local version of WebGen-WPS (http://kartographie.geo.tu-dresden.de/webgen_docs/index.php?option=com_content&view=article&id=52&Itemid=82&lang=de)
1. Start Tomcat
- start Eclipse: Workspace = /home/klammer/Software/WebGen-WPS/wps-eclipse-workspace
- start Tomcat
(- login on server with browser: username="tomcat" password="s3cret")
2. Throw this file on local 'server'
- goto: /usr/local/tomcat/webapps
- goto OR make: /html_stuff
- make sure there is a simple 'index.html' inside, containing a link on this file
- copy this file into '/usr/local/tomcat/webapps/html_stuff'
3. Start it
- along the tomcat manager:
- http://localhost:8080/
- /html_stuff
- click the link
- directly:
- http://localhost:8080/html_stuff/GET_test.html
*/
//Help: http://bl.ocks.org/mbostock/3750941
var url = 'http://localhost:8080/wps-origin/wps?service=WPS&Request=GetCapabilities&AcceptVersions=1.0.0&language=en-GB';
//url = 'http://localhost:8080/wps-origin/wps?service=WPS&Request=DescribeProcess&version=1.0.0&language=en-GB&Identifier=ch.unizh.geo.webgen.service.LineSmoothing';
//url = "https://api.github.com/repos/mbostock/d3/git/blobs/2e0e3b6305fa10c1a89d1dfd6478b1fe7bc19c1e?" + Math.random();
d3.json(url)
.on("progress", function() {
console.log('hey')
})
.get(function(error, data) {
console.log(data)
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link type="text/css" rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css"/>
<title>Result</title>
<script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://mourner.github.io/simplify-js/simplify.js"></script>
<script src="http://bl.ocks.org/milkbread/raw/5909613/simplify_RK_1.1.js"></script>
<script src="route.js"></script>
</head>
<body>
<div class='block'>
<textarea id="geojson-input" placeholder="Paste GeoJSON here"></textarea>
</div>
<div class='block'>
<div id="map"></div>
</div>
<div class='block'>
<textarea id="geojson-output" placeholder="Resulting GeoJSON will be displayed here"></textarea>
</div>
<div class='footer'>
<div>
<p class='block' id='head'>Simplify your GeoJSON-Linestring, with:</p>
<div class='block2'>
<input id='d_p' type="radio" name="algo" value="d_p" checked><a href='http://mourner.github.io/simplify-js/' target='blank_'>Douglas-Peucker</a><br>
</div>
<div class='block2'>
<input id='vis' type="radio" name="algo" value="vis"><a href='http://bost.ocks.org/mike/simplify/' target='blank_'>Visvalingam</a><br>
</div>
</div>
<p class='block'>Tolerance:</p>
<input class='block' id='tol' name='text' onChange='enter(value)' size='10px'></input>
<p class='block' id='go'>Go</p>
<p class='block' id='convert'>LatLng/LngLat</p>
</div>
</body>
<script>
//Help: http://bl.ocks.org/mbostock/3750941
/*var url = 'http://kartographie.geo.tu-dresden.de/webgen_wps/wps?service=WPS&Request=DescribeProcess&Service=WPS&Version=1.0.0&Identifier=ch.unizh.geo.webgen.service.LineSmoothing'
d3.json("https://api.github.com/repos/mbostock/d3/git/blobs/2e0e3b6305fa10c1a89d1dfd6478b1fe7bc19c1e?" + Math.random())
.on("progress", function() {
console.log('hey')
})
.get(function(error, data) {
console.log(data)
});
*/
//initialise map
var map = L.map('map').setView([52.67, 21.97], 4);
var stamen = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: 'Add some attributes here!'}).addTo(map);
var baseLayers = {"stamen": stamen};
//initialise input of textarea
//var cache = LineString;
//cache.coordinates = LineString.coordinates.map(function(d){return [d[1],d[0]]});
d3.select('#geojson-input').text(JSON.stringify(LineString, null, 4));
//initialize textarea-input AND polyline
var input = $('#geojson-input').val();
var polyline = new L.polyline(JSON.parse(input).coordinates, {color: '#41b611'}).addTo(map);
//addpolyline to and add layer control
var overlays = {"line": polyline};
var control = L.control.layers(baseLayers, overlays).addTo(map);
//Simplify for 1st time
var tol = d3.select('#tol').attr('value',0.05)
var tolerance = tol.attr('value');
process(tol.attr('value'));
//initialize visvalingam_simplification
var d3Simplify = d3.simplify();
d3Simplify.projection(function (point){return point});
map.fitBounds(polyline.getBounds());
d3.select('#go').on('mouseover',function(){d3.select('#go').style('background-color','#999');})
.on('mouseout',function(){d3.select('#go').style('background-color','#ddd');})
.on('mousedown',function(){d3.select('#go').style('background-color','#000');})
.on('mouseup',function(){d3.select('#go').style('background-color','#999'); process();})
d3.select('#convert').on('mousedown',function(){d3.select('#convert').style('background-color','#000');})
.on('mouseup',function(){d3.select('#convert').style('background-color','#999'); convert();})
function enter(d){
tolerance=d;
process();
}
function convert(){
var input_ = $('#geojson-input').val();
var line_ = JSON.parse(input_);
line_.coordinates = line_.coordinates.map(function (d){return [d[1],d[0]]})
d3.select('#geojson-input').text(JSON.stringify(line_, null, 4));
polyline.setLatLngs(line_.coordinates);
map.fitBounds(polyline.getBounds());
//!!!PROBLEM: Loads too slowly!!!
}
function process(){
var algorithm;
if (d3.select('#d_p')[0][0].checked == true)algorithm='d_p';
else if (d3.select('#vis')[0][0].checked == true)algorithm='vis';
else return;
//console.log(d);
input = $('#geojson-input').val();
var line = JSON.parse(input);
//console.log(algorithm);
switch(algorithm){
case 'd_p':
line.coordinates = simplify_geom(line, tolerance);
break;
case 'vis':
line.coordinates=line.coordinates.map(function(p){return [p[1],p[0]]})
d3Simplify( {'type':'LineString', 'coordinates':line.coordinates})
line.coordinates=line.coordinates.filter(function(point,i){return point[2]>tolerance || i==0 || i==line.coordinates.length-1;});
break;
default:
//line.coordinates = simplify_geom(line, d);
}
//line.coordinates = simplify_geom(line, d);
polyline.setLatLngs(line.coordinates);
d3.select('#geojson-output').text(JSON.stringify(polyline.toGeoJSON().geometry, null, 4));
}
function simplify_geom(line_, tolerance){
var allPointObjects = pointsConversion(line_.coordinates, 'toObject')
allPointObjects = simplify(allPointObjects,tolerance,true);
return pointsConversion(allPointObjects, 'toArray');
}
function pointsConversion(points, direction){
var cache;
if(direction=='toObject'){
cache = points.map(function(point){return {'y':point[1],'x':point[0]}});
}
else if(direction=='toArray'){
cache = points.map(function(point){return [point.y,point.x]});
}
return cache;
}
</script>
</html>
var LineString = {
"type": "LineString",
"coordinates": [
[
2.32986,
48.86005
],
[
2.35093,
48.863411
],
[
2.43115,
48.940418
],
[
2.54246,
48.960732
],
[
2.63999,
49.001961
],
[
2.72844,
49.08049
],
[
2.73925,
49.098728
],
[
2.77004,
49.111778
],
[
2.80339,
49.144669
],
[
2.85119,
49.15979
],
[
2.99549,
49.23616
],
[
3.03301,
49.241539
],
[
3.08543,
49.26516
],
[
3.13198,
49.266472
],
[
3.18086,
49.294731
],
[
3.21429,
49.302959
],
[
3.28301,
49.356419
],
[
3.3289,
49.35873
],
[
3.35653,
49.368698
],
[
3.37508,
49.387329
],
[
3.3684,
49.40694
],
[
3.40955,
49.42358
],
[
3.43405,
49.446411
],
[
3.51661,
49.463291
],
[
3.58582,
49.519058
],
[
3.59405,
49.535789
],
[
3.62701,
49.551029
],
[
3.63567,
49.573921
],
[
3.65985,
49.59404
],
[
3.71867,
49.705761
],
[
3.80852,
49.78054
],
[
3.9306,
49.8503
],
[
4.00552,
49.867611
],
[
4.02625,
49.889511
],
[
4.06293,
49.90406
],
[
4.09659,
49.905418
],
[
4.10586,
49.934929
],
[
4.14826,
49.948738
],
[
4.16724,
49.974251
],
[
4.20531,
49.97723
],
[
4.31856,
50.0275
],
[
4.37885,
50.030609
],
[
4.46792,
50.070969
],
[
4.46888,
50.083069
],
[
4.49986,
50.102741
],
[
4.49368,
50.127609
],
[
4.50478,
50.152081
],
[
4.52658,
50.17326
],
[
4.53016,
50.19585
],
[
4.55226,
50.203079
],
[
4.57809,
50.246059
],
[
4.60485,
50.252739
],
[
4.65955,
50.304298
],
[
4.71331,
50.31625
],
[
4.73277,
50.346191
],
[
4.74492,
50.346069
],
[
4.77921,
50.37978
],
[
4.82965,
50.398071
],
[
4.84423,
50.415329
],
[
4.86628,
50.42218
],
[
4.85599,
50.445961
],
[
4.86486,
50.45866
],
[
4.89671,
50.468529
],
[
4.94456,
50.503571
],
[
5.00459,
50.525509
],
[
5.0625,
50.5825
],
[
5.12338,
50.591831
],
[
5.14038,
50.606461
],
[
5.14052,
50.615791
],
[
5.17591,
50.62899
],
[
5.19067,
50.649441
],
[
5.23795,
50.676979
],
[
5.3241,
50.72472
],
[
5.36659,
50.737
],
[
5.46203,
50.78297
],
[
5.59527,
50.811749
],
[
5.66683,
50.840649
],
[
5.69181,
50.859291
],
[
5.70955,
50.859509
],
[
5.78653,
50.907829
],
[
5.83605,
50.9123
],
[
5.96387,
50.980091
],
[
6.14661,
51.039459
],
[
6.15822,
51.053169
],
[
6.17824,
51.055672
],
[
6.21046,
51.077419
],
[
6.25705,
51.084091
],
[
6.2703,
51.098911
],
[
6.33651,
51.12685
],
[
6.36855,
51.158169
],
[
6.42585,
51.195591
],
[
6.43804,
51.19519
],
[
6.47667,
51.218029
],
[
6.48883,
51.22998
],
[
6.47779,
51.252701
],
[
6.5801,
51.331532
],
[
6.69558,
51.36377
],
[
6.75227,
51.371132
],
[
6.81237,
51.399792
],
[
6.84989,
51.429039
],
[
6.87801,
51.431438
],
[
6.93167,
51.462551
],
[
6.97855,
51.47644
],
[
6.98048,
51.488819
],
[
7.00807,
51.496368
],
[
7.01853,
51.508781
],
[
7.0581,
51.51609
],
[
7.08124,
51.53183
],
[
7.19856,
51.544189
],
[
7.24011,
51.55888
],
[
7.31798,
51.557789
],
[
7.36123,
51.57444
],
[
7.38654,
51.575272
],
[
7.42589,
51.595341
],
[
7.54105,
51.608761
],
[
7.59659,
51.636028
],
[
7.70191,
51.658932
],
[
7.70489,
51.672791
],
[
7.74593,
51.686958
],
[
7.92157,
51.708809
],
[
8.03324,
51.75507
],
[
8.07623,
51.76083
],
[
8.19468,
51.80426
],
[
8.21855,
51.80405
],
[
8.35782,
51.849621
],
[
8.44433,
51.859482
],
[
8.49079,
51.879719
],
[
8.5841,
51.884579
],
[
8.60752,
51.900669
],
[
8.66277,
51.90995
],
[
8.69632,
51.90266
],
[
8.72335,
51.909081
],
[
8.7726,
51.906609
],
[
8.90044,
51.947609
],
[
8.91911,
51.945801
],
[
8.9343,
51.95689
],
[
9.00241,
51.956379
],
[
9.09687,
51.99094
],
[
9.15502,
51.99136
],
[
9.33535,
52.079762
],
[
9.35207,
52.090561
],
[
9.34909,
52.101231
],
[
9.36184,
52.104111
],
[
9.41245,
52.10014
],
[
9.48007,
52.10656
],
[
9.53231,
52.12204
],
[
9.56786,
52.110561
],
[
9.60129,
52.084061
],
[
9.61335,
52.084469
],
[
9.73862,
52.124001
],
[
9.76815,
52.149029
],
[
9.85091,
52.159939
],
[
9.93417,
52.153461
],
[
10.01568,
52.160728
],
[
10.12938,
52.199108
],
[
10.15967,
52.20097
],
[
10.26939,
52.233261
],
[
10.33079,
52.25803
],
[
10.38941,
52.26247
],
[
10.40875,
52.256908
],
[
10.5142,
52.26252
],
[
10.6691,
52.245571
],
[
10.79077,
52.25753
],
[
10.84149,
52.234901
],
[
10.88113,
52.22681
],
[
10.99778,
52.229191
],
[
11.03062,
52.217602
],
[
11.05477,
52.22015
],
[
11.11851,
52.208031
],
[
11.35227,
52.18716
],
[
11.43668,
52.188049
],
[
11.52164,
52.164879
],
[
11.62238,
52.187531
],
[
11.68052,
52.218311
],
[
11.76374,
52.229019
],
[
12.05675,
52.23267
],
[
12.2143,
52.252441
],
[
12.29568,
52.247169
],
[
12.34305,
52.26495
],
[
12.44244,
52.2799
],
[
12.50953,
52.33836
],
[
12.55295,
52.351181
],
[
12.60367,
52.349911
],
[
12.66093,
52.335209
],
[
12.80768,
52.337711
],
[
12.91879,
52.290451
],
[
12.97733,
52.3036
],
[
13.24849,
52.300331
],
[
13.27942,
52.30859
],
[
13.44054,
52.30608
],
[
13.51074,
52.319302
],
[
13.64603,
52.310699
],
[
13.7164,
52.324501
],
[
13.8241,
52.310299
],
[
13.89843,
52.316368
],
[
13.95759,
52.31155
],
[
14.0635,
52.33419
],
[
14.18073,
52.343922
],
[
14.29105,
52.324291
],
[
14.54354,
52.314289
],
[
14.75599,
52.33532
],
[
14.84256,
52.328499
],
[
14.95564,
52.338371
],
[
15.06221,
52.32468
],
[
15.16572,
52.325298
],
[
15.28446,
52.294231
],
[
15.39406,
52.318531
],
[
15.54209,
52.32399
],
[
15.65358,
52.29948
],
[
15.71254,
52.296532
],
[
15.83711,
52.327572
],
[
15.93636,
52.330448
],
[
16.130489,
52.36385
],
[
16.448879,
52.390018
],
[
16.5352,
52.385269
],
[
16.62204,
52.356419
],
[
16.67141,
52.348579
],
[
16.88826,
52.35461
],
[
17.004881,
52.345322
],
[
17.170919,
52.307411
],
[
17.362419,
52.310108
],
[
17.440769,
52.31905
],
[
17.521919,
52.316971
],
[
17.549561,
52.30616
],
[
17.554529,
52.313641
],
[
17.62093,
52.32695
],
[
17.78367,
52.318829
],
[
17.890829,
52.282341
],
[
17.98637,
52.313019
],
[
18.00901,
52.336861
],
[
18.069059,
52.358261
],
[
18.130541,
52.36541
],
[
18.158409,
52.394329
],
[
18.18281,
52.39386
],
[
18.225611,
52.376949
],
[
18.30847,
52.370152
],
[
18.41881,
52.3894
],
[
18.527161,
52.38678
],
[
18.615891,
52.398628
],
[
18.68129,
52.39312
],
[
18.7043,
52.405609
],
[
18.732691,
52.405029
],
[
18.762569,
52.420631
],
[
18.80508,
52.4128
],
[
18.86809,
52.426079
],
[
18.89086,
52.418201
],
[
18.94124,
52.419811
],
[
19.0529,
52.404129
],
[
19.164961,
52.40538
],
[
19.24848,
52.423641
],
[
19.305229,
52.41375
],
[
19.35132,
52.43359
],
[
19.396641,
52.44128
],
[
19.429609,
52.44141
],
[
19.46174,
52.42918
],
[
19.482149,
52.444271
],
[
19.611401,
52.465778
],
[
19.654921,
52.491261
],
[
19.648609,
52.504318
],
[
19.70643,
52.546162
],
[
19.816271,
52.573441
],
[
19.88517,
52.606121
],
[
19.91324,
52.607239
],
[
19.98106,
52.63168
],
[
20.05653,
52.647541
],
[
20.33197,
52.61694
],
[
20.440701,
52.62476
],
[
20.49379,
52.65279
],
[
20.52486,
52.659981
],
[
20.570709,
52.66391
],
[
20.655951,
52.65588
],
[
20.707939,
52.67017
],
[
20.7414,
52.666321
],
[
20.81212,
52.68528
],
[
20.89023,
52.694012
],
[
21.043341,
52.67868
],
[
21.0809,
52.696308
],
[
21.09758,
52.69495
],
[
21.115641,
52.708408
],
[
21.31554,
52.724289
],
[
21.361641,
52.716061
],
[
21.39842,
52.698738
],
[
21.590389,
52.685459
],
[
21.59984,
52.694321
],
[
21.63352,
52.685341
],
[
21.85906,
52.784401
],
[
21.87155,
52.79987
],
[
21.89496,
52.802479
],
[
22.24649,
52.987999
],
[
22.4666,
53.090141
],
[
22.924431,
53.164379
],
[
22.9757,
53.163528
],
[
23.159651,
53.135971
],
[
23.196211,
53.120152
],
[
23.233709,
53.126122
],
[
23.41815,
53.12582
],
[
23.44846,
53.13739
],
[
23.50668,
53.14436
],
[
23.643511,
53.10825
],
[
23.796881,
53.108688
],
[
23.87129,
53.124249
],
[
24.06872,
53.116779
],
[
24.450899,
53.15369
],
[
24.47839,
53.14238
],
[
24.557699,
53.150539
],
[
24.71763,
53.137539
],
[
24.85112,
53.146969
],
[
25.131519,
53.118011
],
[
25.25131,
53.08876
],
[
25.303431,
53.086411
],
[
25.32103,
53.09425
],
[
25.41754,
53.097252
],
[
25.488529,
53.087769
],
[
25.59878,
53.1077
],
[
25.715191,
53.146481
],
[
25.90134,
53.13982
],
[
25.92585,
53.132629
],
[
26.067511,
53.181671
],
[
26.120001,
53.20966
],
[
26.330429,
53.266708
],
[
26.599449,
53.402821
],
[
26.76107,
53.50737
],
[
26.81377,
53.51268
],
[
26.96689,
53.55397
],
[
27.03907,
53.58942
],
[
27.05237,
53.619888
],
[
27.089849,
53.66666
],
[
27.303511,
53.73513
],
[
27.391319,
53.803421
],
[
27.432171,
53.817829
],
[
27.475559,
53.849411
],
[
27.49699,
53.85548
],
[
27.49404,
53.869808
],
[
27.5397,
53.88554
],
[
27.58568,
53.916759
],
[
27.71962,
53.955311
],
[
27.854549,
54.008701
],
[
27.997959,
54.030449
],
[
28.33709,
54.106628
],
[
28.48181,
54.20295
],
[
28.49527,
54.226021
],
[
28.51235,
54.237518
],
[
28.57115,
54.255291
],
[
28.770069,
54.27718
],
[
28.802771,
54.290051
],
[
28.876591,
54.29155
],
[
29.036091,
54.31271
],
[
29.166031,
54.364811
],
[
29.304399,
54.37254
],
[
29.807631,
54.477001
],
[
29.89637,
54.473911
],
[
30.11908,
54.506271
],
[
30.195641,
54.542679
],
[
30.27557,
54.55484
],
[
30.32493,
54.575699
],
[
30.35874,
54.602482
],
[
30.40913,
54.619732
],
[
30.591089,
54.642479
],
[
30.780769,
54.683159
],
[
31.06407,
54.689949
],
[
31.201559,
54.70348
],
[
31.37289,
54.738861
],
[
31.48156,
54.749538
],
[
31.63796,
54.814232
],
[
31.67371,
54.84396
],
[
32.004681,
54.86578
],
[
32.101212,
54.89006
],
[
32.147099,
54.9259
],
[
32.299351,
55.016338
],
[
32.344479,
55.029751
],
[
32.4063,
55.034019
],
[
32.504452,
55.056099
],
[
32.597309,
55.059959
],
[
32.674419,
55.078171
],
[
32.745689,
55.079319
],
[
33.19561,
55.132179
],
[
33.346119,
55.15284
],
[
33.471249,
55.183289
],
[
33.647659,
55.179359
],
[
33.89735,
55.1996
],
[
34.06139,
55.18755
],
[
34.237122,
55.22208
],
[
34.389042,
55.2654
],
[
34.562809,
55.32428
],
[
34.946049,
55.486511
],
[
34.976509,
55.49308
],
[
35.120701,
55.505718
],
[
35.398941,
55.491329
],
[
35.519581,
55.470581
],
[
35.61898,
55.46545
],
[
35.913269,
55.46558
],
[
36.064789,
55.457821
],
[
36.17548,
55.494419
],
[
36.455029,
55.54895
],
[
37.198662,
55.626869
],
[
37.29747,
55.6576
],
[
37.366482,
55.70998
],
[
37.53793,
55.73756
],
[
37.532028,
55.752178
],
[
37.538471,
55.76757
],
[
37.569962,
55.77998
]
]
}
body{
background-color:black;
}
.block{
display:inline-block;
}
.block2{
display:inline-block;
color:#fff;
}
#head{
font-size:125%;
}
textarea{
width:300px;
height:300px;
}
#map{
width:500px;
height:300px;
}
p{
color:#fff;
margin:5px;
}
#go{
border-radius: 5px;
border: 2px solid #fff;
background-color: #ddd;
width: 120px;
text-align: center;
}
#convert{
border-radius: 5px;
border: 2px solid #fff;
background-color: #999;
width: 100px;
text-align: center;
font-size:12px;
padding:3px;
}
#convert:hover{
background-color: #ddd;
}
a{
color:#fff;
text-decoration:none;
}
a:hover{
color:#ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment