Besides the political relevance of the platform, the interesting challenge of this project was to implement the main navigation of the projects via a global map, for which we chose a combination of the Mapbox API and Open Street Maps, a great alternative to Google Maps. Using these techniques allows for a great amount of freedom in design and programming.
The map offers to explore this layer of political activities in an intuitive and playful way. Using the online form, new projects can be submitted.
htaccess-Redirect
Another challenge was the redirection of specific page requests to Ajax - endpoints, while other pages should retain their 'normal' functionality. To realize this, we used a combination of htaccess Rewrite Rules and the JavaScript Navigo plugin.
# Map Require Navigo
# http://citiesofchange.dev/map/london/
# http://citiesofchange.dev/map/berlin/berlin-fur-berlin/
RewriteCond %{HTTP:X-Requested-With} !=XMLHttpRequest
RewriteCond %{REQUEST_URI} ^/map.*$
RewriteRule ^(.*)$ index.php?it=map/ [L]
Load content dynamically with Ajax and Navigo
Pull the content in via Ajax from endpoint with Http-Header: X-Requested-With:XMLHttpRequest
Simple vanilla JavaScript router Navigo
// init Navigo
if(typeof Navigo == 'function') {
var root = window.location.origin;
router = new Navigo(root, false);
router
.on({
'/map': function(r) {
/* reset */
},
'/map/:city': function(r) {
setContent(r, 'list');
},
'/map/:city/:project': function(r) {
setContent(r, 'detail');
}
})
.resolve();
}