Skip to content

Commit 1c160f1

Browse files
maptastikmaptastik
committed
update leaflet steps
1 parent 94356ad commit 1c160f1

File tree

1 file changed

+163
-3
lines changed

1 file changed

+163
-3
lines changed

‎maps/steps/lucasCo_hungarian_leaflet-steps.html‎

Lines changed: 163 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,169 @@
7474
//Add geojson
7575
$.getJSON("../data/prepared/lucasCo_hungarian_tracts.geojson", function(data) {
7676
geojson = L.geoJson(data, {
77-
//leave this space open,
78-
//also this one
77+
//style call will go here,
78+
//feature interaction call will go here
7979
}).addTo(map);
8080
</script> <!-- <- Don't add-->
8181

82-
<!--10. Add color stepzzzzzz-->
82+
83+
<!--10. Define color scheme and add it to a general styling function. Place under the creation of the geojson variable-->
84+
85+
<script> // <- Don't add
86+
//Define classification scheme and colors
87+
function getColor(d) {
88+
return d >= 10 ? '#006837' :
89+
d >= 7 ? '#31a354' :
90+
d >= 4 ? '#78c679' :
91+
d >= 1 ? '#c2e699' :
92+
'#ffffcc';
93+
}
94+
95+
//Style the polygons
96+
function style(feature) {
97+
return {
98+
fillColor: getColor(feature.properties.p_hung),
99+
weight: 1,
100+
opacity: 1,
101+
color: '#000',
102+
fillOpacity: 0.5
103+
};
104+
}
105+
</script> <!-- <- Don't add-->
106+
107+
108+
<!--11. Add styling to our geojson layer. This goes in the commented out section of geojson=L.geoJSON...addTo(map); Your updated call for the external geojson should look like this:-->
109+
110+
<script> // <- Don't add
111+
//Add geojson
112+
$.getJSON("../data/prepared/lucasCo_hungarian_tracts.geojson", function(data) {
113+
geojson = L.geoJson(data, {
114+
style: style //<- This is the new line in your geojson variable
115+
//feature interaction call will go here
116+
}).addTo(map);
117+
</script> <!-- <- Don't add-->
118+
119+
120+
<!--12. Add mouse interaction. This will highlight the feature your mouse is in and zoom to the feature you click. This goes underneath the style function-->
121+
<script> // <- Don't add
122+
//Changes style property for feature when your mouse touches it
123+
function highlightFeature(e) {
124+
var layer = e.target;
125+
126+
layer.setStyle({
127+
weight: 3,
128+
color: '#fff',
129+
fillOpacity: 0.5
130+
});
131+
132+
if (!L.Browser.ie && !L.Browser.opera) {
133+
layer.bringToFront();
134+
}
135+
136+
// we'll add something here eventually
137+
}
138+
139+
// Resets the style of the highlighted feature after your mouse leaves
140+
function resetHighlight(e) {
141+
geojson.resetStyle(e.target);
142+
// we'll add something here eventually.
143+
}
144+
145+
// Zooms to the feature you click
146+
function zoomToFeature(e) {
147+
map.fitBounds(e.target.getBounds());
148+
}
149+
150+
// This pulls the previous 3 functions together. It says "For each particular interaction (mouseover, mouseout, and click, with a feature (a census tract) in a layer (our Lucas Co. census tract geojson), carry out these functions (highlightFeature, resetHighlight, and zoomToFeature)
151+
function onEachFeature(feature, layer) {
152+
layer.on({
153+
mouseover: highlightFeature,
154+
mouseout: resetHighlight,
155+
click: zoomToFeature
156+
});
157+
}
158+
</script> <!-- <- Don't add-->
159+
160+
161+
<!--13. Associate interaction of onEachFeature function to our geojson. Add one line to our call for the external geojson to complete defining the interaction-->
162+
<script> // <- Don't add
163+
$.getJSON("../data/prepared/lucasCo_hungarian_tracts.geojson", function(data) {
164+
geojson = L.geoJson(data, {
165+
style: style, // Make sure to add a comma
166+
onEachFeature: onEachFeature //<- This is the new line in your geojson variable
167+
}).addTo(map);
168+
</script> <!-- <- Don't add-->
169+
170+
171+
<!--14. Create function for generating custom info window with information about a selected tract. Put this right under where we created var geojson-->
172+
173+
<script> // <- Don't add
174+
// Function for the tooltip box
175+
var info = L.control();
176+
177+
info.onAdd = function (map) {
178+
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
179+
this.update();
180+
return this._div;
181+
};
182+
183+
// method that we will use to update the control based on feature properties passed
184+
info.update = function (props) {
185+
this._div.innerHTML = '<h4>&#37 of Population Claiming Hungarian Ancestry</h4>' + (props ?
186+
'<b>' + props.t_hung + '</b> people claiming Hungarian ancestry.<br />That is ' + '<b>' + props.p_hung + '&#37;</b>' + ' of the population of Lucas Co. <b>Census Tract ' + props.NAME + '</b>.'
187+
: 'Hover over a state');
188+
};
189+
</script> <!-- <- Don't add-->
190+
191+
192+
<!--15. We need to associate info with geojson so the we can display a feature's data on on mousein and reset on mouse out. We need to update the highlightFeature and resetHighlight function-->
193+
194+
<script> // <- Don't add
195+
function highlightFeature(e) {
196+
var layer = e.target;
197+
198+
layer.setStyle({
199+
weight: 3,
200+
color: '#fff',
201+
fillOpacity: 0.5
202+
});
203+
204+
if (!L.Browser.ie && !L.Browser.opera) {
205+
layer.bringToFront(); // <- Add this
206+
}
207+
208+
info.update(layer.feature.properties);
209+
}
210+
211+
function resetHighlight(e) {
212+
geojson.resetStyle(e.target);
213+
info.update(); // <- Add this
214+
}
215+
</script> <!-- <- Don't add-->
216+
217+
<!--16. Create styling for the info box. Add this between the <style> tags in the head beneath your css for html, body, and #map-->
218+
219+
<style> /* <- Don't add
220+
.info {
221+
padding: 6px 8px;
222+
font: 14px/16px 'Open Sans', Helvetica, sans-serif;
223+
background: white;
224+
background: rgba(255,255,255,0.98);
225+
box-shadow: 0 0 15px rgba(0,0,0,0.2);
226+
border-radius: 0px;
227+
}
228+
.info h4 {
229+
margin: 0 0 5px;
230+
color: #000;
231+
}
232+
</style> <!-- <- Don't add-->
233+
234+
235+
<!--17. Add info window to the map. Add at the bottom of the <script> tag-->
236+
237+
<script> // <- Don't add
238+
//Add custom tool tip
239+
info.addTo(map);
240+
</script> <!-- <- Don't add-->
241+
242+
<!--Legend and we're done!-->

0 commit comments

Comments
 (0)