Skip to content

Commit b5aba94

Browse files
corintxtcorintxt
committed
Call map styling function on dropdown change
1 parent 588a2dc commit b5aba94

File tree

3 files changed

+109
-100
lines changed

3 files changed

+109
-100
lines changed

‎index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,17 +53,17 @@ <h2>A Lab12 Project</h2>
5353

5454
<div class="row" style="margin-top: 5%">
5555
<div class="one-half column">
56-
<h3>Industry: {{ industry }}</h3>
56+
<h3>Industry: {{ selected }}</h3>
5757
</div>
5858
<div class="one-half column">
5959
<!-- to do: populate list with a v-for loop -->
60-
<label for="industrySelect">Select another industry:</label>
61-
<select v-model="selected" class="u-full-width" id="industryInput">
62-
<option v-for="option in options" v-bind:value="option.value">
60+
<label for="industrySelect">Select an industry:</label>
61+
<select v-model="selected" v-on:change="changeIndustry" class="u-full-width">
62+
<option disabled value="">Please select one</option>
63+
<option v-for="option in options" v-bind:value="option.text">
6364
{{ option.text }}
6465
</option>
6566
</select>
66-
<span>Selected: {{ selected }}</span>
6767
</div>
6868
</div>
6969

‎src/js/app.js

Lines changed: 88 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -34,99 +34,107 @@ function getColor(d) {
3434
'#fde0dd';
3535
}
3636

37-
var industryName = 'Manufacturing';
38-
industryVue.setIndustry(industryName);
39-
40-
//Add feature styling to map
41-
function style(feature) {
42-
return {
43-
fillColor: getColor(feature.properties[industryName].locq),
44-
weight: 1,
45-
opacity: 1,
46-
color: 'white',
47-
dashArray: '3',
48-
fillOpacity: 0.5
49-
};
50-
}
51-
L.geoJson(statesData, {style: style}).addTo(statesmap);
52-
53-
//Define a mouseover highlight listener
54-
function highlightFeature(e) {
55-
var layer = e.target;
56-
//todo vm.data.selected = e.target
57-
layer.setStyle({
58-
weight: 3,
59-
color: '#3388ff',
60-
dashArray: '',
61-
fillOpacity: 0.9
62-
});
63-
64-
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
65-
layer.bringToFront();
37+
//Initialize map with default industry
38+
styleMapforIndustry('Manufacturing');
39+
40+
//Wrap up all map functions in one, starting here:
41+
var info, legend;
42+
function styleMapforIndustry(industry){
43+
//Add feature styling to map
44+
function style(feature) {
45+
return {
46+
fillColor: getColor(feature.properties[industry].locq),
47+
weight: 1,
48+
opacity: 1,
49+
color: 'white',
50+
dashArray: '3',
51+
fillOpacity: 0.5
52+
};
6653
}
54+
L.geoJson(statesData, {style: style}).addTo(statesmap);
6755

68-
info.update(layer.feature.properties);
56+
//Define a mouseover highlight listener
57+
function highlightFeature(e) {
58+
var layer = e.target;
59+
//todo vm.data.selected = e.target
60+
layer.setStyle({
61+
weight: 3,
62+
color: '#3388ff',
63+
dashArray: '',
64+
fillOpacity: 0.9
65+
});
6966

70-
}
71-
//Define highlight reset
72-
function resetHighlight(e) {
73-
geojson.resetStyle(e.target);
74-
info.update()
75-
}
67+
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
68+
layer.bringToFront();
69+
}
7670

77-
//Add event listeners for interactivity
78-
function onEachFeature(feature, layer) {
79-
layer.on({
80-
mouseover: highlightFeature,
81-
mouseout: resetHighlight,
82-
click: zoomToFeature
83-
});
84-
}
71+
info.update(layer.feature.properties);
8572

86-
//Zoom to state
87-
function zoomToFeature(e) {
88-
statesmap.fitBounds(e.target.getBounds());
89-
}
73+
}
74+
//Define highlight reset
75+
function resetHighlight(e) {
76+
geojson.resetStyle(e.target);
77+
info.update()
78+
}
9079

91-
geojson = L.geoJson(statesData, {
92-
style: style,
93-
onEachFeature: onEachFeature
94-
}).addTo(statesmap);
80+
//Add event listeners for interactivity
81+
function onEachFeature(feature, layer) {
82+
layer.on({
83+
mouseover: highlightFeature,
84+
mouseout: resetHighlight,
85+
click: zoomToFeature
86+
});
87+
}
9588

96-
//Add info display panel
97-
var info = L.control();
89+
//Zoom to state
90+
function zoomToFeature(e) {
91+
statesmap.fitBounds(e.target.getBounds());
92+
}
9893

99-
info.onAdd = function (map) {
100-
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
101-
this.update();
102-
return this._div;
103-
};
94+
geojson = L.geoJson(statesData, {
95+
style: style,
96+
onEachFeature: onEachFeature
97+
}).addTo(statesmap);
10498

105-
info.update = function (props) {
106-
this._div.innerHTML = '<h4>Automation Quotient By State</h4>' + (props ?
107-
'<b>' + props.name + '</b><br />' + 'Quotient: ' + props[industryName].locq.toFixed(4)
108-
: 'Hover over a state');
109-
};
99+
//Add info display panel
100+
if (info){ info.remove() } //clear if called before
110101

111-
info.addTo(statesmap);
102+
info = L.control();
112103

113-
//Add legend
114-
var legend = L.control({position: 'bottomright'});
104+
info.onAdd = function (map) {
105+
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
106+
this.update();
107+
return this._div;
108+
};
115109

116-
legend.onAdd = function (map) {
110+
info.update = function (props) {
111+
this._div.innerHTML = '<h4>Automation Quotient By State</h4>' + (props ?
112+
'<b>' + props.name + '</b><br />' + 'Quotient: ' + props[industry].locq.toFixed(4)
113+
: 'Hover over a state');
114+
};
117115

118-
var div = L.DomUtil.create('div', 'info legend'),
119-
grades = [0, .25, .5, .75, 1.0, 1.25, 1.5, 1.75],
120-
labels = [];
116+
info.addTo(statesmap);
121117

122-
// loop through our density intervals and generate a label with a colored square for each interval
123-
for (var i = 0; i < grades.length; i++) {
124-
div.innerHTML +=
125-
'<i style="background:' + getColor(grades[i]+.25) + '"></i> ' +
126-
grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
127-
}
118+
//Add legend
119+
if (legend){ legend.remove() }
120+
legend = L.control({position: 'bottomright'});
121+
122+
legend.onAdd = function (map) {
128123

129-
return div;
130-
};
124+
var div = L.DomUtil.create('div', 'info legend'),
125+
grades = [0, .25, .5, .75, 1.0, 1.25, 1.5, 1.75],
126+
labels = [];
131127

132-
legend.addTo(statesmap);
128+
// loop through our density intervals and generate a label with a colored square for each interval
129+
for (var i = 0; i < grades.length; i++) {
130+
div.innerHTML +=
131+
'<i style="background:' + getColor(grades[i]+.25) + '"></i> ' +
132+
grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
133+
}
134+
135+
return div;
136+
};
137+
138+
legend.addTo(statesmap);
139+
140+
}

‎src/js/vue-code.js

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,28 @@ var industryVue = new Vue({
77
el: '#vue',
88
data: {
99
message: 'VueJS: on.',
10-
industry: 'default',
10+
selected: 'Manufacturing',
1111
par1: para1,
1212
par2: para2,
1313
options: [
14-
{ text: 'Accommodation and Food Services', value: ''},
15-
{ text: 'Agriculture, Forestry, Fishing and Hunting', value: ''},
16-
{ text: 'Arts, Entertainment, and Recreation', value: ''},
17-
{ text: 'Construction', value: ''},
18-
{ text: 'Educational Services', value: ''},
19-
{ text: 'Finance and Insurance', value: ''},
20-
{ text: 'Health Care and Social Assistance', value: ''},
21-
{ text: 'Manufacturing', value: ''},
22-
{ text: 'Mining, Quarrying, and Oil and Gas Extraction', value: ''},
23-
{ text: 'Retail Trade', value: ''},
24-
{ text: 'Transportation and Warehousing', value: ''},
25-
{ text: 'Wholesale Trade', value: ''},
14+
{ text: 'Accommodation and Food Services'},
15+
{ text: 'Agriculture, Forestry, Fishing and Hunting'},
16+
{ text: 'Arts, Entertainment, and Recreation'},
17+
{ text: 'Construction'},
18+
{ text: 'Educational Services'},
19+
{ text: 'Finance and Insurance'},
20+
{ text: 'Health Care and Social Assistance'},
21+
{ text: 'Manufacturing'},
22+
{ text: 'Mining, Quarrying, and Oil and Gas Extraction'},
23+
{ text: 'Retail Trade'},
24+
{ text: 'Transportation and Warehousing'},
25+
{ text: 'Wholesale Trade'},
2626
]
2727
},
2828
methods: {
29-
setIndustry: function (title) {
30-
this.industry = title;
29+
changeIndustry: function (){
30+
console.log("Industry: " + this.selected);
31+
styleMapforIndustry(this.selected);
3132
}
3233
}
3334
})

0 commit comments

Comments
 (0)