Skip to content

Commit 17d308f

Browse files
jsomajsoma
committed
responsive polygon styling based on feature data
1 parent ea66ede commit 17d308f

5 files changed

Lines changed: 145 additions & 43 deletions

File tree

‎gmap-features.js‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -99,15 +99,21 @@ var gmap = gmap || {};
9999
// }
100100
// }
101101
}
102+
102103
this.controller = params.controller;
103104
this._selected = false;
104105
this._highlighted = false;
105-
if (params.highlightCallback) {
106+
106107
this.highlightCallback = params.highlightCallback;
107-
}
108-
if (params.selectCallback) {
109108
this.selectCallback = params.selectCallback;
110-
}
109+
110+
var empty_function = function() { return { }; }
111+
112+
this._responsive_unselected_poly_options = params.responsive_unselected_opts == null ? empty_function : params.responsive_unselected_opts;
113+
this._responsive_highlighted_poly_options = params.responsive_highlighted_opts == null ? empty_function : params.responsive_highlighted_opts;
114+
this._responsive_selected_poly_options = params.responsive_selected_opts == null ? empty_function : params.responsive_selected_opts;
115+
116+
111117
if (params.color) {
112118
this.unselected_poly_options = gmap._.extend({}, this._unselected_poly_options, {"fillColor": params.color});
113119
} else {
@@ -128,7 +134,7 @@ var gmap = gmap || {};
128134
}
129135
}
130136
for (var i=0,len=params.multipolygon.length; i<len; i++) {
131-
this.polygons.push( new google.maps.Polygon(gmap._.extend({}, this.unselected_poly_options, {
137+
this.polygons.push( new google.maps.Polygon(gmap._.extend({}, this.unselected_poly_options, this._responsive_unselected_poly_options(), {
132138
paths: params.multipolygon[i],
133139
map: params.map
134140
} )) );
@@ -171,14 +177,20 @@ var gmap = gmap || {};
171177
}
172178
return multipoly;
173179
},
180+
174181
// Redraw the polygons associated with the feature
182+
// Highlighted and selected states inherit from unselected state
183+
// NOTE: Remember to set your z-index for your highlights/selects above
184+
// your unselected polygons!
175185
redraw: function() {
176-
var opts = gmap._.extend({}, this.unselected_poly_options);
186+
var opts = gmap._.extend({}, this.unselected_poly_options, this._responsive_unselected_poly_options());
177187

178188
if(this._highlighted) {
179-
opts = gmap._.extend(opts, this._highlighted_poly_options);
180-
} else if(this._selected) {
181-
opts = gmap._.extend(opts, this._selected_poly_options);
189+
opts = gmap._.extend(opts, this._highlighted_poly_options, this._responsive_highlighted_poly_options());
190+
}
191+
192+
if(this._selected) {
193+
opts = gmap._.extend(opts, this._selected_poly_options, this._responsive_selected_poly_options());
182194
}
183195

184196
for (i=0,len=this.polygons.length; i<len; i++) {
@@ -195,8 +207,8 @@ var gmap = gmap || {};
195207
this.controller.selected.setSelected(false);
196208
}
197209
this._selected = true;
198-
this.redraw();
199210
this.controller.selected = this;
211+
this.redraw();
200212
if (this.selectCallback) {
201213
this.selectCallback();
202214
}
@@ -370,12 +382,16 @@ var gmap = gmap || {};
370382
if (params.getColor) {
371383
opts.color = params.getColor(data[i].properties);
372384
}
373-
if (params.highlightCallback) {
374-
opts.highlightCallback = params.highlightCallback;
375-
}
376-
if (params.selectCallback) {
377-
opts.selectCallback = params.selectCallback;
378-
}
385+
386+
// Responsive polygon options
387+
opts.responsive_unselected_opts = params.responsive_unselected_opts;
388+
opts.responsive_highlighted_opts = params.responsive_highlighted_opts;
389+
opts.responsive_selected_opts = params.responsive_selected_opts;
390+
391+
// Callbacks
392+
opts.highlightCallback = params.highlightCallback;
393+
opts.selectCallback = params.selectCallback;
394+
379395
self[data[i].id] = new gmap.Feature(opts);
380396
}
381397

‎gmap-features.min.js‎

Lines changed: 8 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 73 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,11 @@
88
padding: 0;
99
height: 100%;
1010
}
11-
#map1, #map2 {
12-
13-
}
1411
</style>
1512
</head>
1613
<body>
1714
<h1>Demo of gmap-features</h1>
18-
<ul>
15+
<ul class="maps">
1916
<li>
2017
<p>Parsing JSON data file</p>
2118
<div id="map1" style="width:500px;height:300px;"></div>
@@ -28,6 +25,10 @@ <h1>Demo of gmap-features</h1>
2825
<p>Supports features with holes and multiple parts</p>
2926
<div id="map3" style="width:500px;height:300px;"></div>
3027
</li>
28+
<li>
29+
<p>Highlighting/selecting/unselecting colors are based on feature data, via responsive_*_opts callbacks</p>
30+
<div id="map4" style="width:500px;height:300px;"></div>
31+
</li>
3132
</ul>
3233

3334

@@ -189,10 +190,78 @@ <h1>Demo of gmap-features</h1>
189190
});
190191
}
191192

193+
// example using json data and responsive callbacks for highlighted/selected/unselected states
194+
function map4() {
195+
var map, features;
196+
197+
map = new google.maps.Map(document.getElementById("map4"), {
198+
center: new google.maps.LatLng(40.731368,-73.975071),
199+
zoom: 15,
200+
mapTypeId: google.maps.MapTypeId.ROADMAP,
201+
mapTypeControl: false,
202+
streetViewControl: false
203+
});
204+
205+
206+
$.getJSON("sampledata/data.json", function(data) {
207+
var BLUES = ["#E9F6FF", "#B3D6FF", "#7BB1FF", "#4C89E0", "#4073BC", "#284A72"];
208+
/*
209+
* invoke load_polygons
210+
*/
211+
features = gmap.load_polygons({
212+
map: map,
213+
data: data, //required. all other params are optional
214+
data_type: "json", // 'json' is default. can also use 'kml' in which case pass the kml document as data as a string
215+
unselected_opts: {
216+
"fillOpacity": .75
217+
},
218+
highlighted_opts: {
219+
strokeWeight: 2.0,
220+
strokeColor: "#000000"
221+
},
222+
selected_opts: {
223+
strokeWeight: 2.0,
224+
strokeColor: "#000000"
225+
},
226+
responsive_unselected_opts: function() {
227+
if(this.fields.totpop_wnh > 100) {
228+
return { fillColor: "#8DEEEE" };
229+
} else {
230+
return { fillColor: "#EE1289" };
231+
}
232+
},
233+
responsive_highlighted_opts: function() {
234+
if(this.fields.totpop_wnh > 100) {
235+
return { fillColor: "#8DEE00" };
236+
} else {
237+
return { fillColor: "#EE1200" };
238+
}
239+
},
240+
responsive_selected_opts: function() {
241+
if(this.fields.totpop_wnh > 100) {
242+
return { strokeWeight: 5, strokeColor: "#00EE00" };
243+
} else {
244+
// You can also just let it inherit the default
245+
return { };
246+
}
247+
},
248+
249+
highlightCallback: function(e) {
250+
console.log("highlighted "+this.id);
251+
},
252+
selectCallback: function(e) {
253+
console.log(this.fields);
254+
}
255+
});
256+
});
257+
}
258+
259+
192260
function initialize() {
193261
map1();
194262
map2();
195263
map3();
264+
map4();
196265
}
197266

198267
google.maps.event.addDomListener(window, 'load', initialize);

‎src/feature.js‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -99,15 +99,21 @@ var gmap = gmap || {};
9999
// }
100100
// }
101101
}
102+
102103
this.controller = params.controller;
103104
this._selected = false;
104105
this._highlighted = false;
105-
if (params.highlightCallback) {
106+
106107
this.highlightCallback = params.highlightCallback;
107-
}
108-
if (params.selectCallback) {
109108
this.selectCallback = params.selectCallback;
110-
}
109+
110+
var empty_function = function() { return { }; }
111+
112+
this._responsive_unselected_poly_options = params.responsive_unselected_opts == null ? empty_function : params.responsive_unselected_opts;
113+
this._responsive_highlighted_poly_options = params.responsive_highlighted_opts == null ? empty_function : params.responsive_highlighted_opts;
114+
this._responsive_selected_poly_options = params.responsive_selected_opts == null ? empty_function : params.responsive_selected_opts;
115+
116+
111117
if (params.color) {
112118
this.unselected_poly_options = gmap._.extend({}, this._unselected_poly_options, {"fillColor": params.color});
113119
} else {
@@ -128,7 +134,7 @@ var gmap = gmap || {};
128134
}
129135
}
130136
for (var i=0,len=params.multipolygon.length; i<len; i++) {
131-
this.polygons.push( new google.maps.Polygon(gmap._.extend({}, this.unselected_poly_options, {
137+
this.polygons.push( new google.maps.Polygon(gmap._.extend({}, this.unselected_poly_options, this._responsive_unselected_poly_options(), {
132138
paths: params.multipolygon[i],
133139
map: params.map
134140
} )) );
@@ -171,14 +177,20 @@ var gmap = gmap || {};
171177
}
172178
return multipoly;
173179
},
180+
174181
// Redraw the polygons associated with the feature
182+
// Highlighted and selected states inherit from unselected state
183+
// NOTE: Remember to set your z-index for your highlights/selects above
184+
// your unselected polygons!
175185
redraw: function() {
176-
var opts = gmap._.extend({}, this.unselected_poly_options);
186+
var opts = gmap._.extend({}, this.unselected_poly_options, this._responsive_unselected_poly_options());
177187

178188
if(this._highlighted) {
179-
opts = gmap._.extend(opts, this._highlighted_poly_options);
180-
} else if(this._selected) {
181-
opts = gmap._.extend(opts, this._selected_poly_options);
189+
opts = gmap._.extend(opts, this._highlighted_poly_options, this._responsive_highlighted_poly_options());
190+
}
191+
192+
if(this._selected) {
193+
opts = gmap._.extend(opts, this._selected_poly_options, this._responsive_selected_poly_options());
182194
}
183195

184196
for (i=0,len=this.polygons.length; i<len; i++) {
@@ -195,8 +207,8 @@ var gmap = gmap || {};
195207
this.controller.selected.setSelected(false);
196208
}
197209
this._selected = true;
198-
this.redraw();
199210
this.controller.selected = this;
211+
this.redraw();
200212
if (this.selectCallback) {
201213
this.selectCallback();
202214
}

‎src/gmap-loadpolygons.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,16 @@ var gmap = gmap || {};
7373
if (params.getColor) {
7474
opts.color = params.getColor(data[i].properties);
7575
}
76-
if (params.highlightCallback) {
77-
opts.highlightCallback = params.highlightCallback;
78-
}
79-
if (params.selectCallback) {
80-
opts.selectCallback = params.selectCallback;
81-
}
76+
77+
// Responsive polygon options
78+
opts.responsive_unselected_opts = params.responsive_unselected_opts;
79+
opts.responsive_highlighted_opts = params.responsive_highlighted_opts;
80+
opts.responsive_selected_opts = params.responsive_selected_opts;
81+
82+
// Callbacks
83+
opts.highlightCallback = params.highlightCallback;
84+
opts.selectCallback = params.selectCallback;
85+
8286
self[data[i].id] = new gmap.Feature(opts);
8387
}
8488

0 commit comments

Comments
 (0)