diff --git a/index.html b/index.html
index c3eb386..c2996b4 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
+
@@ -110,18 +111,63 @@
return aname === bname ? 0 : +(aname > bname) || -1;
}
)
- $.each(data, function(key, value) { value.rowNumber = key; });
+ $.each(data, function(key, value) {
+ value.rowNumber = key;
+ value.slug = slugify(value.name);
+ });
$('#storeCount').html(data.length);
+ window.data = data;
loadMap(data);
});
});
+ window.addEventListener("hashchange", function(e){
+ updateViewBySlug(e.newURL.split('#')[1]);
+ }, false);
+
+ function updateHash(slug) {
+ history.pushState(null, null, "#" + slug);
+ }
+
+ function slugify(str) {
+ return str
+ .toLowerCase()
+ .replace(/&/g,' and ')
+ .replace(/ /g,'-')
+ .replace(/[']+/g,'')
+ .replace(/[^\w-]+/g,'-')
+ .replace(/-+/g,'-')
+ .replace(/^-|-$/g,'');
+ }
+
+ function getStoreBySlug(slug) {
+ var ret = false;
+ $.each(window.data, function(key, value) {
+ if (value.slug === slug) {
+ ret = value;
+ return false;
+ }
+ });
+ return ret;
+ }
+
+ function updateViewBySlug(slug) {
+ if (slug === "info" || slug === undefined) {
+ showInfo(false);
+ } else {
+ var store = getStoreBySlug(slug);
+ if (store) {
+ updateSelectedStore(store, false);
+ }
+ }
+ }
+
function boundingBox(point) {
// add some buffer to a point to give the user some leeway
return [[point.x - 5, point.y - 5], [point.x + 5, point.y + 5]]
}
- function updateSelectedStore(store) {
+ function updateSelectedStore(store, pushState=false) {
map.flyTo({center: [store.long, store.lat]});
popup.setLngLat([store.long, store.lat])
@@ -133,11 +179,17 @@
var rendered = Mustache.render(template, {store: store});
$('#selected').html(rendered);
$('#selected').show();
+ if (pushState) {
+ updateHash(store.slug);
+ }
}
- function showInfo() {
+ function showInfo(pushState=true) {
$('#selected').hide();
$('#info').show();
+ if (pushState) {
+ updateHash('info');
+ }
}
function loadMap(data) {
@@ -176,6 +228,7 @@
if(navigator.geolocation) {
map.addControl(geolocate, 'top-right');
}
+ updateViewBySlug(window.location.hash.split("#")[1]);
});
map.on('click', function (e) {
@@ -188,7 +241,7 @@
if (features.length) {
var store = features[0];
// Get coordinates from the symbol and center the map on those coordinates
- updateSelectedStore(store.properties);
+ updateSelectedStore(store.properties, true);
}
});
@@ -209,8 +262,9 @@
var template = $('#Table').html();
var rendered = Mustache.render(template, {rows: data});
$('#Stores').html(rendered);
- $("#Stores tbody tr").on("click", function() {
- updateSelectedStore(data[$(this)[0].id]);
+ $("#Stores tbody tr").not(':first').on("click", function() {
+ updateSelectedStore(data[$(this)[0].id], true);
+ $(window).scrollTo($("#selected"), 250, {offset: {top: -15}});
});
$('#viewInfo').on("click", showInfo);