Permalink
Browse files

responsive polygon styling based on feature data

  • Loading branch information...
jsoma committed Nov 9, 2011
1 parent ea66ede commit 17d308f3cb7fd12373c0a86557bbd4741780d75b
Showing with 145 additions and 43 deletions.
  1. +32 −16 gmap-features.js
  2. +8 −7 gmap-features.min.js
  3. +73 −4 index.html
  4. +22 −10 src/feature.js
  5. +10 −6 src/gmap-loadpolygons.js
View
@@ -99,15 +99,21 @@ var gmap = gmap || {};
// }
// }
}
this.controller = params.controller;
this._selected = false;
this._highlighted = false;
if (params.highlightCallback) {
this.highlightCallback = params.highlightCallback;
}
if (params.selectCallback) {
this.selectCallback = params.selectCallback;
}
var empty_function = function() { return { }; }
this._responsive_unselected_poly_options = params.responsive_unselected_opts == null ? empty_function : params.responsive_unselected_opts;
this._responsive_highlighted_poly_options = params.responsive_highlighted_opts == null ? empty_function : params.responsive_highlighted_opts;
this._responsive_selected_poly_options = params.responsive_selected_opts == null ? empty_function : params.responsive_selected_opts;
if (params.color) {
this.unselected_poly_options = gmap._.extend({}, this._unselected_poly_options, {"fillColor": params.color});
} else {
@@ -128,7 +134,7 @@ var gmap = gmap || {};
}
}
for (var i=0,len=params.multipolygon.length; i<len; i++) {
this.polygons.push( new google.maps.Polygon(gmap._.extend({}, this.unselected_poly_options, {
this.polygons.push( new google.maps.Polygon(gmap._.extend({}, this.unselected_poly_options, this._responsive_unselected_poly_options(), {
paths: params.multipolygon[i],
map: params.map
} )) );
@@ -171,14 +177,20 @@ var gmap = gmap || {};
}
return multipoly;
},
// Redraw the polygons associated with the feature
// Highlighted and selected states inherit from unselected state
// NOTE: Remember to set your z-index for your highlights/selects above
// your unselected polygons!
redraw: function() {
var opts = gmap._.extend({}, this.unselected_poly_options);
var opts = gmap._.extend({}, this.unselected_poly_options, this._responsive_unselected_poly_options());
if(this._highlighted) {
opts = gmap._.extend(opts, this._highlighted_poly_options);
} else if(this._selected) {
opts = gmap._.extend(opts, this._selected_poly_options);
opts = gmap._.extend(opts, this._highlighted_poly_options, this._responsive_highlighted_poly_options());
}
if(this._selected) {
opts = gmap._.extend(opts, this._selected_poly_options, this._responsive_selected_poly_options());
}
for (i=0,len=this.polygons.length; i<len; i++) {
@@ -195,8 +207,8 @@ var gmap = gmap || {};
this.controller.selected.setSelected(false);
}
this._selected = true;
this.redraw();
this.controller.selected = this;
this.redraw();
if (this.selectCallback) {
this.selectCallback();
}
@@ -370,12 +382,16 @@ var gmap = gmap || {};
if (params.getColor) {
opts.color = params.getColor(data[i].properties);
}
if (params.highlightCallback) {
opts.highlightCallback = params.highlightCallback;
}
if (params.selectCallback) {
opts.selectCallback = params.selectCallback;
}
// Responsive polygon options
opts.responsive_unselected_opts = params.responsive_unselected_opts;
opts.responsive_highlighted_opts = params.responsive_highlighted_opts;
opts.responsive_selected_opts = params.responsive_selected_opts;
// Callbacks
opts.highlightCallback = params.highlightCallback;
opts.selectCallback = params.selectCallback;
self[data[i].id] = new gmap.Feature(opts);
}
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -8,14 +8,11 @@
padding: 0;
height: 100%;
}
#map1, #map2 {
}
</style>
</head>
<body>
<h1>Demo of gmap-features</h1>
<ul>
<ul class="maps">
<li>
<p>Parsing JSON data file</p>
<div id="map1" style="width:500px;height:300px;"></div>
@@ -28,6 +25,10 @@ <h1>Demo of gmap-features</h1>
<p>Supports features with holes and multiple parts</p>
<div id="map3" style="width:500px;height:300px;"></div>
</li>
<li>
<p>Highlighting/selecting/unselecting colors are based on feature data, via responsive_*_opts callbacks</p>
<div id="map4" style="width:500px;height:300px;"></div>
</li>
</ul>
@@ -189,10 +190,78 @@ <h1>Demo of gmap-features</h1>
});
}
// example using json data and responsive callbacks for highlighted/selected/unselected states
function map4() {
var map, features;
map = new google.maps.Map(document.getElementById("map4"), {
center: new google.maps.LatLng(40.731368,-73.975071),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false
});
$.getJSON("sampledata/data.json", function(data) {
var BLUES = ["#E9F6FF", "#B3D6FF", "#7BB1FF", "#4C89E0", "#4073BC", "#284A72"];
/*
* invoke load_polygons
*/
features = gmap.load_polygons({
map: map,
data: data, //required. all other params are optional
data_type: "json", // 'json' is default. can also use 'kml' in which case pass the kml document as data as a string
unselected_opts: {
"fillOpacity": .75
},
highlighted_opts: {
strokeWeight: 2.0,
strokeColor: "#000000"
},
selected_opts: {
strokeWeight: 2.0,
strokeColor: "#000000"
},
responsive_unselected_opts: function() {
if(this.fields.totpop_wnh > 100) {
return { fillColor: "#8DEEEE" };
} else {
return { fillColor: "#EE1289" };
}
},
responsive_highlighted_opts: function() {
if(this.fields.totpop_wnh > 100) {
return { fillColor: "#8DEE00" };
} else {
return { fillColor: "#EE1200" };
}
},
responsive_selected_opts: function() {
if(this.fields.totpop_wnh > 100) {
return { strokeWeight: 5, strokeColor: "#00EE00" };
} else {
// You can also just let it inherit the default
return { };
}
},
highlightCallback: function(e) {
console.log("highlighted "+this.id);
},
selectCallback: function(e) {
console.log(this.fields);
}
});
});
}
function initialize() {
map1();
map2();
map3();
map4();
}
google.maps.event.addDomListener(window, 'load', initialize);
View
@@ -99,15 +99,21 @@ var gmap = gmap || {};
// }
// }
}
this.controller = params.controller;
this._selected = false;
this._highlighted = false;
if (params.highlightCallback) {
this.highlightCallback = params.highlightCallback;
}
if (params.selectCallback) {
this.selectCallback = params.selectCallback;
}
var empty_function = function() { return { }; }
this._responsive_unselected_poly_options = params.responsive_unselected_opts == null ? empty_function : params.responsive_unselected_opts;
this._responsive_highlighted_poly_options = params.responsive_highlighted_opts == null ? empty_function : params.responsive_highlighted_opts;
this._responsive_selected_poly_options = params.responsive_selected_opts == null ? empty_function : params.responsive_selected_opts;
if (params.color) {
this.unselected_poly_options = gmap._.extend({}, this._unselected_poly_options, {"fillColor": params.color});
} else {
@@ -128,7 +134,7 @@ var gmap = gmap || {};
}
}
for (var i=0,len=params.multipolygon.length; i<len; i++) {
this.polygons.push( new google.maps.Polygon(gmap._.extend({}, this.unselected_poly_options, {
this.polygons.push( new google.maps.Polygon(gmap._.extend({}, this.unselected_poly_options, this._responsive_unselected_poly_options(), {
paths: params.multipolygon[i],
map: params.map
} )) );
@@ -171,14 +177,20 @@ var gmap = gmap || {};
}
return multipoly;
},
// Redraw the polygons associated with the feature
// Highlighted and selected states inherit from unselected state
// NOTE: Remember to set your z-index for your highlights/selects above
// your unselected polygons!
redraw: function() {
var opts = gmap._.extend({}, this.unselected_poly_options);
var opts = gmap._.extend({}, this.unselected_poly_options, this._responsive_unselected_poly_options());
if(this._highlighted) {
opts = gmap._.extend(opts, this._highlighted_poly_options);
} else if(this._selected) {
opts = gmap._.extend(opts, this._selected_poly_options);
opts = gmap._.extend(opts, this._highlighted_poly_options, this._responsive_highlighted_poly_options());
}
if(this._selected) {
opts = gmap._.extend(opts, this._selected_poly_options, this._responsive_selected_poly_options());
}
for (i=0,len=this.polygons.length; i<len; i++) {
@@ -195,8 +207,8 @@ var gmap = gmap || {};
this.controller.selected.setSelected(false);
}
this._selected = true;
this.redraw();
this.controller.selected = this;
this.redraw();
if (this.selectCallback) {
this.selectCallback();
}
View
@@ -73,12 +73,16 @@ var gmap = gmap || {};
if (params.getColor) {
opts.color = params.getColor(data[i].properties);
}
if (params.highlightCallback) {
opts.highlightCallback = params.highlightCallback;
}
if (params.selectCallback) {
opts.selectCallback = params.selectCallback;
}
// Responsive polygon options
opts.responsive_unselected_opts = params.responsive_unselected_opts;
opts.responsive_highlighted_opts = params.responsive_highlighted_opts;
opts.responsive_selected_opts = params.responsive_selected_opts;
// Callbacks
opts.highlightCallback = params.highlightCallback;
opts.selectCallback = params.selectCallback;
self[data[i].id] = new gmap.Feature(opts);
}

0 comments on commit 17d308f

Please sign in to comment.