Skip to content

Commit e853cd9

Browse files
lchenbblchenbb
committed
Add province boundary and mousedown callback
1. The province boundary is shown on the map 2. When click on a point inside a province, the province name is displayed in console. (Can be directed to data collection and illustration further)
1 parent 62b0f7e commit e853cd9

File tree

2 files changed

+100
-1
lines changed

2 files changed

+100
-1
lines changed

‎index.html

+86-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
<script src="lib/leaflet.js"></script>
1111
<script src="lib/leaflet.groupedlayercontrol.min.js"></script>
1212

13+
<!-- Seems to have contradiction with groupedlayercontrol
14+
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css'
15+
rel='stylesheet' type='text/css'/>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet-src.js"></script>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"></script>
18+
-->
1319
<style>
1420
body { margin:0; padding:0; }
1521
body, table, tr, td, th, div, h1, h2, input { font-family: "Calibri", "Trebuchet MS", "Ubuntu", Serif; font-size: 11pt; }
@@ -34,15 +40,18 @@
3440

3541
</head>
3642
<body>
37-
43+
<script src='lib/topojson.min.js'></script>
44+
<script src="lib/d3.min.js"></script>
3845
<div id="map"></div>
3946

47+
4048
<script>
4149

4250
/* **** Leaflet **** */
4351

4452
// Base layers
4553
// .. OpenStreetMap
54+
d3.geoPath();
4655
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
4756

4857
// .. CartoDB Positron
@@ -128,6 +137,82 @@
128137
// Fit to overlay bounds (SW and NE points with (lat, lon))
129138
map.fitBounds([[9.92035336588, 101.633885799], [28.5669647084, 92.1384540862]]);
130139

140+
141+
// Add canton border to the map
142+
let svg = d3.select(map.getPanes().overlayPane).append('svg').attr('id', 'svg');
143+
144+
let g = svg.append('g').attr('class', 'leaflet-zoom-hide');
145+
146+
// Map promise
147+
const map_promise = d3.json('map/MYANMAR_GEOJSON.json').then(x => x);
148+
149+
// Define project point function
150+
function project_point(x, y){
151+
let point = map.latLngToLayerPoint(new L.LatLng(y, x));
152+
this.stream.point(point.x, point.y);
153+
}
154+
155+
let transform = d3.geoTransform({point: project_point});
156+
let gen_path = d3.geoPath().projection(transform);
157+
Promise.all([map_promise]).then((results) => {
158+
console.log(results);
159+
let feature = g.selectAll('path')
160+
.data(results[0].features)
161+
.enter()
162+
.append('path')
163+
feature.attr('d', gen_path)
164+
.attr('fill-opacity', 0)
165+
.attr('postion', 'relative')
166+
.attr('stroke', 'green')
167+
.attr('stroke-width', 2)
168+
.attr('stroke-opacity', 0.5)
169+
.on('mousedown.log', (d) => console.log(d.properties['NAME_1']));
170+
171+
let bounds = gen_path.bounds(results[0]);
172+
let top_left = bounds[0];
173+
let bottom_right = bounds[1];
174+
175+
svg.attr('width', bottom_right[0] - top_left[0])
176+
.attr('height', bottom_right[1] - top_left[1])
177+
.style('left', top_left[0] + 'px')
178+
.style('top', top_left[1] + 'px');
179+
180+
g.attr('transform', 'translate(' + -top_left[0] + ',' + -top_left[1] + ')');
181+
182+
183+
map.on('moveend', () => {
184+
bounds = gen_path.bounds(results[0]);
185+
top_left = bounds[0];
186+
bottom_right = bounds[1];
187+
svg.attr('width', bottom_right[0] - top_left[0])
188+
.attr('height', bottom_right[1] - top_left[1])
189+
.style('left', top_left[0] + 'px')
190+
.style('top', top_left[1] + 'px');
191+
192+
g.attr('transform', 'translate(' + -top_left[0] + ',' + -top_left[1] + ')');
193+
feature.attr('d', gen_path);
194+
});
195+
196+
});
197+
198+
/* Alternative solution
199+
var countries = [];
200+
var countriesOverlay = L.d3SvgOverlay(function(sel, proj) {
201+
202+
var upd = sel.selectAll('path').data(countries);
203+
upd.enter()
204+
.append('path')
205+
.attr('d', proj.pathFromGeojson)
206+
.attr('stroke', 'black')
207+
.attr('fill', function(){ return d3.hsl(Math.random() * 360, 0.9, 0.5) })
208+
.attr('fill-opacity', '0.5');
209+
upd.attr('stroke-width', 1 / proj.scale);
210+
});
211+
212+
//L.control.layers({"Geo Tiles": tiles}, {"Countries": countriesOverlay}).addTo(map);
213+
214+
d3.json("map/MYANMAR_GEOJSON.json", function(data) { countries = data.features[0]; countriesOverlay.addTo(map) });
215+
*/
131216
</script>
132217

133218
</body>

0 commit comments

Comments
 (0)