Skip to content

Commit 35c5331

Browse files
backspacesbackspaces
committed
New: counties.html popup while hovering counties
- counties.html: add popup for county names - data0/: gitignored dir of original data before modified for MB use - mktiles: put large intermediate files in data0/
1 parent 59334fb commit 35c5331

9 files changed

+837
-6706
lines changed

‎.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,7 @@ yarn-error.log
1111

1212
# Files > 100MB, github limit
1313
santafe7.osm
14-
santafe7.json
14+
santafe7.json
15+
16+
# Original data before modifications
17+
data0/

‎bin/mktiles

+4-4
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@ bin=agentscript/bin
1717
echo $zxy $z $base $tiles
1818

1919
echo 'building osm'
20-
$bin/zxy2osm $zxy > $base.osm
20+
$bin/zxy2osm $zxy > data0/$base.osm
2121
echo 'building json'
22-
node_modules/osmtogeojson/osmtogeojson < $base.osm > $base.json
22+
node_modules/osmtogeojson/osmtogeojson < data0/$base.osm > data0/$base.json
2323

2424
echo 'building osm json roads'
25-
$bin/json2roads < $base.json | $bin/minifyjson > ${base}roads.json
25+
$bin/json2roads < data0/$base.json | $bin/minifyjson > data/${base}roads.json
2626
# echo 'getting .png base map'
2727
# curl https://tile.openstreetmap.org/${zxy}.png > $base.png
2828

2929
echo 'running tippecanoe'
3030
# tippecanoe/tippecanoe -z14 -f --no-simplification-of-shared-nodes -o ${base}.mbtiles ${base}roads.json
31-
bin/tippecanoe -zg -f -l roads -n "SantaFe Roads" -o ${base}roads.mbtiles ${base}roads.json
31+
bin/tippecanoe -zg -f -l roads -n "SantaFe Roads" -o data/${base}roads.mbtiles data/${base}roads.json

‎counties.html

+17-6
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
/* height: 800px; */
2525
width: 95%;
2626
}
27+
.mapboxgl-popup {
28+
max-width: 400px;
29+
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
30+
}
2731
</style>
2832
</head>
2933
<body>
@@ -80,12 +84,6 @@
8084
type: 'geojson',
8185
data: './data/usstates.geojson',
8286
},
83-
// REMIND: fix, id is numeric!
84-
// filter:
85-
// states.length === 0
86-
// ? ['to-boolean', true]
87-
// : ['in', ['id'], fips],
88-
// : ['==', ['id'], states],
8987
layout: {},
9088
paint: {
9189
'line-color': 'rgba(0,0,0,0.4)',
@@ -94,8 +92,15 @@
9492
})
9593
// }
9694

95+
// https://docs.mapbox.com/mapbox-gl-js/example/query-similar-features/
96+
// Create a popup, but don't add it to the map yet.
97+
const popup = new mapboxgl.Popup({
98+
closeButton: false,
99+
})
100+
97101
// https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/
98102
let hoveredStateId = null
103+
99104
map.on('mousemove', 'counties', function (e) {
100105
map.getCanvas().style.cursor = 'default' //'crosshair'
101106

@@ -112,10 +117,16 @@
112117
{ source: 'counties', id: hoveredStateId },
113118
{ hover: true }
114119
)
120+
121+
popup
122+
.setLngLat(e.lngLat)
123+
.setText(feature.properties.NAME)
124+
.addTo(map)
115125
}
116126
})
117127
map.on('mouseleave', 'counties', function () {
118128
map.getCanvas().style.cursor = ''
129+
popup.remove()
119130
})
120131
}
121132
map.on('load', function () {

‎data/counties0.json

-6,447
This file was deleted.

‎santafe7roads.json ‎data/santafe7roads.json

+198-192
Large diffs are not rendered by default.

‎santafe7roads.mbtiles ‎data/santafe7roads.mbtiles

5.54 MB
Binary file not shown.

‎notes.txt

+98-41
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,74 @@ Commits:
55
......................................................................
66
todo
77
- states: finer detail
8+
- usstates.geojson 87K, us_040_00_20m.json 1.4MB, 5m 2.4MB?
89
- counties: featureState seems backwards!
10+
- find source for all data/ files, put in npm run scripts
11+
12+
13+
14+
https://docs.mapbox.com/mapbox-gl-js/api/#geojsonsource#setdata
15+
https://docs.mapbox.com/mapbox-gl-js/api/#map#setstyle
16+
https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/
917

1018
......................................................................
11-
style: 'mapbox://styles/mapbox/streets-v11',
12-
// style: 'mapbox://styles/mapbox/satellite-v9',
13-
// style: 'mapbox://styles/mapbox/dark-v10',
14-
// style: 'mapbox://styles/mapbox/light-v10',
19+
Mapbox docs:
20+
21+
https://docs.mapbox.com/mapbox-gl-js/api/
22+
https://docs.mapbox.com/mapbox-gl-js/api/#popup
23+
https://docs.mapbox.com/mapbox-gl-js/example/query-similar-features/
24+
25+
26+
https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/
27+
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#filter
28+
29+
30+
https://docs.mapbox.com/help/tutorials/mapbox-gl-js-expressions/
31+
https://docs.mapbox.com/help/tutorials/studio-heatmap-tutorial/
32+
33+
https://docs.mapbox.com/help/glossary/filter/
34+
35+
36+
https://docs.mapbox.com/help/how-mapbox-works/web-apps/
37+
https://docs.mapbox.com/help/tutorials/building-a-store-locator
38+
39+
https://docs.mapbox.com/mapbox-gl-js/examples/
40+
https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/
41+
https://docs.mapbox.com/mapbox-gl-js/example/canvas-source/
42+
https://docs.mapbox.com/mapbox-gl-js/example/data-join/
43+
https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature/
44+
https://docs.mapbox.com/mapbox-gl-js/example/vector-source/
45+
https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/
46+
https://docs.mapbox.com/mapbox-gl-js/example/updating-choropleth/
47+
https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature/
48+
49+
https://docs.mapbox.com/help/tutorials/
50+
https://docs.mapbox.com/help/troubleshooting/
51+
https://docs.mapbox.com/help/troubleshooting/large-data-tippecanoe/
52+
https://docs.mapbox.com/help/troubleshooting/adjust-tileset-zoom-extent/
53+
https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/
54+
https://docs.mapbox.com/help/tutorials/optimization-api/
55+
56+
https://blog.mapbox.com/@Mapbox
57+
https://blog.mapbox.com/visualizing-election-data-a-guide-to-mapbox-gl-expressions-92cc469b8dfd
58+
https://blog.mapbox.com/going-live-with-electoral-maps-a-guide-to-feature-state-b520e91a22d
59+
https://blog.mapbox.com/designing-electoral-maps-exploring-mapbox-gl-js-a7b7db75bd13
60+
http://turfjs.org/
61+
62+
63+
64+
https://www.mapbox.com/mapbox-studio/
65+
https://docs.mapbox.com/studio-manual/overview/
66+
https://blog.cartong.org/wordpress/wp-content/uploads/2020/02/How-to-Using-mapbox-into-PowerBI_CartONG_Final.pdf
67+
http://build-failed.blogspot.com/2017/02/playing-with-mapbox-vector-tiles-part-1.html
68+
https://github.com/mapbox/awesome-vector-tiles
69+
70+
71+
......................................................................
72+
styles/mapbox/streets-v11',
73+
styles/mapbox/satellite-v9',
74+
styles/mapbox/dark-v10',
75+
styles/mapbox/light-v10',
1576
......................................................................
1677
https://github.com/johan/world.geo.json
1778
https://catalog.data.gov/dataset
@@ -36,7 +97,7 @@ https://github.com/PublicaMundi/MappingAPI/tree/master/data/geojson
3697
https://github.com/rstudio/leaflet/tree/gh-pages/json
3798

3899

39-
https://www.naturalearthdata.com/downloads/
100+
https://www.naturalearthdata.com/downloads/ //shp files, not geojson
40101
https://www.naturalearthdata.com/
41102

42103
https://www.convertcsv.com/csv-to-geojson.htm
@@ -62,52 +123,43 @@ usstates.geojson counties.json:
62123
states:
63124
agentscript/bin/minifyjson
64125

65-
https://eric.clst.org/tech/usgeojson/
66-
Downloads
67-
-rw-r--r--@ 1 owen staff 2.6M Apr 10 17:51 gz_2010_us_500_11_20m.json
68-
-rw-r--r--@ 1 owen staff 3.3M Apr 10 17:23 gz_2010_us_050_00_20m.json
69-
-rw-r--r--@ 1 owen staff 22M Apr 10 13:43 gz_2010_us_050_00_500k.json
70126

71-
......................................................................
72-
......................................................................
73-
Heatmap tutorial
74-
https://docs.mapbox.com/help/tutorials/mapbox-gl-js-expressions/
75-
https://docs.mapbox.com/help/tutorials/studio-heatmap-tutorial/
76-
https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/
77-
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#filter
78-
https://docs.mapbox.com/help/glossary/filter/
79-
[
80-
"interpolate",
81-
["linear"],
82-
["heatmap-density"],
83-
0,
84-
"rgba(0, 0, 255, 0)",
85-
0.1,
86-
"royalblue",
87-
0.3,
88-
"cyan",
89-
0.5,
90-
"lime",
91-
0.7,
92-
"yellow",
93-
1,
94-
"red"
95-
]
127+
Downloads data0/ https://eric.clst.org/tech/usgeojson/
128+
us_040: states
129+
-rw-r--r--@ 1 owen staff 1.4M Apr 16 15:30 gz_2010_us_040_00_20m.json
130+
-rw-r--r--@ 1 owen staff 2.4M Apr 16 15:30 gz_2010_us_040_00_5m.json
131+
us_050: counties
132+
-rw-r--r--@ 1 owen staff 3.3M Apr 16 15:30 gz_2010_us_050_00_20m.json
133+
-rw-r--r--@ 1 owen staff 22M Apr 16 15:30 gz_2010_us_050_00_500k.json
134+
us_500: congressional
135+
-rw-r--r--@ 1 owen staff 2.6M Apr 16 15:30 gz_2010_us_500_11_20m.json
136+
Uses: https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html
96137

97-
......................................................................
98138
https://www.nrcs.usda.gov/wps/portal/nrcs/detail/?cid=nrcs143_013696
99139
clip | tr '\t' ' ' > data/FIPS.txt
100140
Note: 55 entries but last FIPS number is 78. OK tho, several gaps.
101141

142+
......................................................................
143+
......................................................................
144+
......................................................................
145+
......................................................................
146+
Issues:
147+
148+
149+
- Key problem is that mapbox gl js doesn't use js where you'd like (expressions)
150+
151+
- Filtering on feature ID:
152+
string ("05") converted to number causing multiple hits in string using "in" expr. Soln is to use an array I suspect
153+
// REMIND: fix, id is numeric!
154+
// filter:
155+
// states.length === 0
156+
// ? ['to-boolean', true]
157+
// : ['in', ['id'], fips],
158+
// : ['==', ['id'], states],
102159

103160
......................................................................
104161
Commits:
105162
......................................................................
106-
https://backspaces.github.io/MB/test.html
107-
https://backspaces.github.io/MB/counties.html
108-
MB.html cities0.html heatmap.html
109-
cities.html counties.html test.html
110-
//////////
111163
git add .
112164
files=`git status | grep '^\t' | egrep -v '(models/scripts|dist/|deleted|yarn)' | sed 's/^.*: //;s/^.*-> //'`; echo $files | tr ' ' '\n'
113165
gitdiff $files | mate
@@ -116,6 +168,11 @@ gitcommit
116168

117169
//////////
118170

171+
172+
- data0/: gitignored dir of original data before modified for MB use
173+
- mktiles: put large intermediate files in data0/
174+
175+
119176
counties.html: state filter
120177
- bin/fips2json:
121178
- add both Postal & ID code keys

‎package.json

+7-3
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,19 @@
1212
},
1313
"scripts": {
1414
"tiles": "bin/mktiles 7/26/50",
15-
"citiesjson": "node_modules/csv2geojson/csv2geojson --numeric-fields population,density,ranking,county_fips,id data/uscities.csv | agentscript/bin/minifyjson > data/uscities.geojson",
15+
"citiesjson": "csv2geojson --numeric-fields population,density,ranking,county_fips,id data/uscities.csv | agentscript/bin/minifyjson > data/uscities.geojson",
1616
"citiestiles": "bin/tippecanoe -zg -f -l cities -n 'Cities Populations' -o data/uscities.mbtiles data/uscities.geojson",
17-
"cities": "npm run citiesjson & npm run citiesjson",
18-
"fips": "bin/fips2json < data/fips.txt > data/fips.json"
17+
"cities": "npm-run-all citiesjson citiesjson",
18+
"states": "agentscript/bin/minifyjson < data0/gz_2010_us_040_00_20m.json > data/usstates.geojson",
19+
"fips": "bin/fips2json < data/fips.txt > data/fips.json",
20+
"foo": "mapshaper -h"
1921
},
2022
"dependencies": {
2123
"@turf/turf": "^5.1.6",
2224
"csv2geojson": "^5.1.1",
2325
"esm": "^3.2.25",
26+
"mapshaper": "^0.5.1",
27+
"npm-run-all": "^4.1.5",
2428
"osmtogeojson": "^3.0.0-beta.4",
2529
"shx": "^0.3.2"
2630
}

0 commit comments

Comments
 (0)