{"id":307,"date":"2008-04-05T15:36:27","date_gmt":"2008-04-05T20:36:27","guid":{"rendered":"http:\/\/crschmidt.net\/blog\/?p=307"},"modified":"2008-04-05T15:36:27","modified_gmt":"2008-04-05T20:36:27","slug":"choropleth-maps-with-openlayers-26","status":"publish","type":"post","link":"https:\/\/crschmidt.net\/blog\/archives\/307\/choropleth-maps-with-openlayers-26\/","title":{"rendered":"Choropleth Maps with OpenLayers 2.6"},"content":{"rendered":"<div style=\"text-align: center;\"><img decoding=\"async\" src=\"http:\/\/crschmidt.net\/images\/choropleth-mercator.png\" style=\"margin: 5px auto\" \/><\/div>\n<p>OpenLayers 2.6 adds some cool mechanisms for doing your styling on the client side: allowing you to use attributes of your data to create styling information on the fly.<\/p>\n<p>A couple days ago, there was a <a href=\"http:\/\/blog.thematicmapping.org\/2008\/04\/thematic-mapping-with-geojson.html\">post about using GeoJSON for thematic mapping<\/a>. The conclusion of that post puts the blame in the wrong place: &#8220;Conclusion: GeoJSON has a lot of potential, but is currently not suitable for world maps due to browser restrictions.&#8221; was the conclusion, but this is the case for all formats: nothing here is specific to GeoJSON. It also stated that Firefox is the best browser for in-browser vector display: this is also wrong, as both Safari and Opera do significantly better with SVG rendering than Firefox or IE.<\/p>\n<p>I&#8217;ve moved beyond that, though, and wanted to look at various ways to style the data.<\/p>\n<p>The original map was essentially only styled by using data built into the GeoJSON for storing attribute color. Clearly this is not ideal: embedding styling information with the data is great when you want to control the user experience, but seperating it allows application developers more control. Luckily, with the upcoming release of OpenLayers (OpenLayers 2.6), you can do this styling in the browser.<\/p>\n<p><a href=\"http:\/\/crschmidt.net\/mapping\/choropleth.html\">This choropleth map<\/a> uses the same data as the example in the Thematic Mapping blog post, but instead of taking the style rules from the data, creates a graduated color set. (I don&#8217;t know what this is actually called: Thematic mapping isn&#8217;t my gig.) Looking at the code, it&#8217;s easy to see the color ranges: 0 -> 10, 10-> 20, 20->50, 50->100. (The theme is separated into a separate function for readability.) No base map: we don&#8217;t need one for the visual effect to be reasonably pronounced. We get a worldwide, colored map of internet users (in 2005), with attribution and the ability to hover over a country to see its statistics.<\/p>\n<p>But wait, there&#8217;s more!<\/p>\n<p>OpenLayers 2.6 has reprojection support: the ability to change the projection of data. So, we can <a href=\"http:\/\/crschmidt.net\/mapping\/choropleth-mercator.html\">reproject the map into mercator<\/a>. This is actually a useful educational map: you can see that different projections show significantly different percentages of the world as being covered with high-percentage of internet users. <\/p>\n<p>Anyway, threw it together, and thought it was cool.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>OpenLayers 2.6 adds some cool mechanisms for doing your styling on the client side: allowing you to use attributes of your data to create styling information on the fly. A couple days ago, there was a post about using GeoJSON for thematic mapping. The conclusion of that post puts the blame in the wrong place: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,54],"tags":[],"class_list":["post-307","post","type-post","status-publish","format-standard","hentry","category-locality-and-space","category-openlayers"],"_links":{"self":[{"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/posts\/307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":0,"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"wp:attachment":[{"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}