Skip to content

Commit c1b5354

Browse files
arrayjamarrayjam
committed
things
1 parent 89697d4 commit c1b5354

File tree

3 files changed

+53
-65
lines changed

3 files changed

+53
-65
lines changed

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
</head>
1111
<body>
12+
<input type="text" class="postcode" />
1213
<div id="map" style="width: 800px; height: 700px;"></div>
1314
<script src="https://api.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js"></script>
1415
<script type="text/javascript" src="/dist/postcodes.js"></script>

‎index.js

Lines changed: 50 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import mapboxgl from "mapbox-gl";
2-
import { feature } from "topojson";
3-
import { json } from "d3-request";
4-
import { schemeCategory10 as colors } from "d3-scale";
5-
import { range } from "d3-array";
2+
// import { feature } from "topojson";
3+
// import { json } from "d3-request";
4+
// import { schemeCategory10 as colors } from "d3-scale";
5+
// import { range } from "d3-array";
6+
// import { select } from "d3-selection";
7+
import * as d3 from "d3";
68

79
var digitProperties = ["digit_one", "digit_two", "digit_three", "digit_four"];
810
var testPostcodes = [
@@ -13,40 +15,60 @@ var testPostcodes = [
1315
[3 , 1 , 9 , 6] , // 4
1416
];
1517

16-
json("bounds.json", function(error, bounds) {
18+
d3.json("bounds.json", function(error, bounds) {
1719
var map = initMap();
1820
window.map = map;
1921

20-
21-
// var boundInfo =
22-
23-
// var bound = getBounds(bounds, postcode);
24-
2522
map.style.on("load", function() {
26-
var postcodeIndex = 0;
23+
var postcodeIndex = 2;
2724
var addedLayers = false;
28-
var interval = setInterval(function() {
29-
// if (addedLayers) clearMapLayers(map);
30-
if (postcodeIndex === testPostcodes.length - 1) {
31-
clearInterval(interval);
25+
d3.select(".postcode").on("input", function() {
26+
if (addedLayers) clearMapLayers(map);
27+
var value = d3.select(this).property("value").split("");
28+
var postcode = [ null, null, null, null ];
29+
for (var valueIndex = 0; valueIndex < value.length && valueIndex < 4; valueIndex++) {
30+
postcode[valueIndex] = +value[valueIndex];
3231
}
3332

34-
var postcode = testPostcodes[postcodeIndex];
33+
console.log(postcode);
34+
35+
// debugger
3536
var layers = buildLayers(buildFilters(postcode));
37+
// debugger
3638
setMapLayers(map, layers);
37-
addedLayers = true;
38-
postcodeIndex++;
39+
var bound = getBounds(bounds, postcode);
40+
console.log(layers);
41+
if (bound.infos.length) {
42+
map.fitBounds(bound.bounds);
43+
addedLayers = true;
44+
}
45+
3946

47+
});
48+
// var interval = setInterval(function() {
49+
// if (addedLayers) clearMapLayers(map);
50+
// if (postcodeIndex === testPostcodes.length - 1) {
51+
// clearInterval(interval);
52+
// }
53+
54+
// var postcode = testPostcodes[postcodeIndex];
55+
// var layers = buildLayers(buildFilters(postcode));
56+
// setMapLayers(map, layers);
57+
// var bound = getBounds(bounds, postcode);
58+
// map.fitBounds(bound.bounds);
59+
// addedLayers = true;
60+
// postcodeIndex++;
61+
// }, 5000);
4062

41-
}, 2000);
4263
});
43-
// moveMap(map, bound, filter);
44-
// makeMap(testBounds.map(function(b) { return getBounds(bounds, b); }));
4564
});
4665

4766
function clearMapLayers(map) {
48-
range(10).map(function(id) {
49-
map.removeLayer(id.toString());
67+
d3.range(10).map(function(id) {
68+
try {
69+
map.removeLayer(id.toString());
70+
} catch (e) {
71+
}
5072
});
5173
}
5274

@@ -64,7 +86,7 @@ function buildLayers(filters) {
6486
"source-layer": "POA_2011_AUST_DIGITS",
6587
"type": "fill",
6688
"paint": {
67-
"fill-color": colors[filterIndex],
89+
"fill-color": d3.schemeCategory10[filterIndex],
6890
"fill-opacity": 0.6,
6991
},
7092
"filter": filter,
@@ -77,7 +99,7 @@ function buildFilters(postcode) {
7799

78100
// Build filter for existing digits
79101
var digitIndex;
80-
for (digitIndex = 0; postcode[digitIndex]; digitIndex++) {
102+
for (digitIndex = 0; digitIndex < postcode.join("").length; digitIndex++) {
81103
var digitKey = digitProperties[digitIndex];
82104
var digit = postcode[digitIndex];
83105
baseFilter.push([ "==", digitKey, digit ]);
@@ -86,9 +108,8 @@ function buildFilters(postcode) {
86108
if (digitIndex === postcode.length) {
87109
return [ baseFilter ];
88110
} else {
89-
console.log(digitIndex);
90111
// Return 10 filters with existing filter + each digit
91-
return range(10).map(function(digit) {
112+
return d3.range(10).map(function(digit) {
92113
var digitFilter = baseFilter.slice();
93114
var digitKey = digitProperties[digitIndex];
94115
if (digitKey) {
@@ -133,9 +154,9 @@ function makeEnvelope(bounds) {
133154
var height = bounds[1][1] - bounds[0][1];
134155
var side = Math.max(width, height);
135156

136-
var envelopeRatio = 0.2;
157+
var envelopeRatio = 0.3;
137158

138-
var envelope = Math.max(side * envelopeRatio, 0.02);
159+
var envelope = Math.max(side * envelopeRatio, 0.1);
139160

140161
return [
141162
[ bounds[0][0] - envelope, bounds[0][1] - envelope ],
@@ -170,38 +191,3 @@ function initMap() {
170191
return map;
171192
}
172193

173-
// var filter = [ "==", "digit_four", 3 ];
174-
175-
// var newLayer = {
176-
// "id": "newLayer",
177-
// "source": "mapbox://arrayjam.88b94e49",
178-
// "source-layer": "POA_2011_AUST_DIGITS",
179-
// "type": "fill",
180-
// "paint": {
181-
// "fill-color": "#ff0000",
182-
// },
183-
// "filter": filter,
184-
// };
185-
186-
// window.newLayer = newLayer;
187-
// window.map = map;
188-
// window.filter = filter;
189-
190-
// map.style.on("load", function() {
191-
// map.addLayer(newLayer);
192-
193-
// var boundIndex = 0;
194-
// var interval = setInterval(function() {
195-
// if (boundIndex >= bounds.length) {
196-
// clearInterval(interval);
197-
// return;
198-
// }
199-
200-
// map.fitBounds(bounds[boundIndex++]);
201-
// }, 3000);
202-
// // map.style.on("tile.load", function() {
203-
// // var query = map.querySourceFeatures("mapbox://arrayjam.88b94e49", { sourceLayer: "POA_2011_AUST_DIGITS", filter: filter });
204-
// // console.log(map, newLayer, query);
205-
// // });
206-
// });
207-
// }

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@
1313
"url": "https://github.com/arrayjam/auspostcodes.git"
1414
},
1515
"dependencies": {
16-
"d3": "^4.0.0",
16+
"d3": "^4.1.1",
1717
"d3-array": "^1.0.0",
1818
"d3-scale": "^1.0.1",
1919
"d3-scale-chromatic": "^1.0.0",
20+
"d3-selection": "^1.0.0",
2021
"mapbox-gl": "^0.20.0",
2122
"topojson": "^1.6.26"
2223
},

0 commit comments

Comments
 (0)