<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Luke Tully]]></title><description><![CDATA[Luke Tully]]></description><link>https://luketully.ca/</link><image><url>https://luketully.ca/favicon.png</url><title>Luke Tully</title><link>https://luketully.ca/</link></image><generator>Ghost 5.87</generator><lastBuildDate>Sat, 18 Apr 2026 22:23:36 GMT</lastBuildDate><atom:link href="https://luketully.ca/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[Dar es Salaam - A Townscape Analysis]]></title><description><![CDATA[A paper on the past and future urban development of Dar es Salaam.]]></description><link>https://luketully.ca/dar-es-salaam-a-townscape-analysis/</link><guid isPermaLink="false">5f368828e7eec129b33f604d</guid><dc:creator><![CDATA[Luke Tully]]></dc:creator><pubDate>Wed, 01 May 2019 02:19:37 GMT</pubDate><media:content url="https://images.unsplash.com/photo-1562153824-8ef805b9e64e?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=2000&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ" medium="image"/><content:encoded><![CDATA[<!--kg-card-begin: markdown--><img src="https://images.unsplash.com/photo-1562153824-8ef805b9e64e?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=2000&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ" alt="Dar es Salaam - A Townscape Analysis"><p>Table of Contents</p>
<ol>
<li><a href="#introduction">Introduction</a>
<ol>
<li><a href="#daressalaampresentday">Dar es Salaam - Present Day</a></li>
</ol>
</li>
<li><a href="#history">History</a></li>
<li>Geography
<ol>
<li><a href="#populationgeographyandurbandevelopmenthistory">Population Geography</a></li>
<li><a href="#physicalgeographyoftheregion">Physical Geography</a></li>
</ol>
</li>
<li><a href="#conclusion">Conclusion</a></li>
</ol>
<h2 id="introduction">Introduction</h2>
<p>New York, Los Angeles, London, or Tokyo might be the first places that come to mind when asked which of the world&#x2019;s cities could be considered megacities. These cities have long been established as global economic centres, having grown at a considerably fast pace over the last few centuries. If this rate continues, we may soon have another megacity to add to the list. As of the 2012 census, Dar es Salaam (Dar), a rapidly growing city in Tanzania, had a population of around 4.36m, displaying an average 5.6 percent annual growth rate between 2002 and 2012[^1]. Compared to some other megacities, Dar is expected to grow to a population of around 21m by 2050, amounting to a total rise of around 20.7m between 1950 and 2050 (Sturgis, 2015). Many challenges stand to accompany these patterns of rapid expansion; some of which are only contemporary in nature or rarely occurring over such a short projected timescale. Framed by the heritage and urban geography of Dar es Salaam, I intend to examine these challenges to better understand how sustainable growth might be realized.</p>
<h3 id="daressalaampresentday">Dar es Salaam - Present Day</h3>
<p>Dar es Salaam is an expansive, ethnically diverse, and architecturally varied city. Dar is also one of the few favoured harbor locations along the eastern African coast. The mouth of the harbour opens narrowly into the Indian Ocean&#x2014;so narrowly that only one large boat can pass through at any given time (De Blij, 1963). Situated very close to the equator along the eastern edge of Africa in Tanzania, it&#x2019;s well situated to handle most of Tanzania&#x2019;s international trade. The harbour itself sits adjacent to the Central Business District (CBD) which the rest of the city radiates outward from. Over its relatively short lifespan of around 156 years, the city has grown to a population of at least 4.3m, up from only 150000 at the midpoint of the 20th century. The coupling of a minimal urban planning strategy with the city&#x2019;s tumultuous political history has led to the creation a situation that will likely prove challenging to adapt. One symptom of these factors can be seen in the approximately 70% of the population that reside in informal settlements on the periphery of the developed city. This is a significant issue that is currently faced in Dar and will carry forward into this period of intense growth, which in North America&#x2014;particularly after World War II and during the middle of the 20th century&#x2014;saw the adoption of unsustainable development patterns that rely on the automobile for transit. This pattern is characterized by the term &#x2018;urban sprawl&#x2019; and has resulted in many cities&apos; unrestrained and low density outward expansion. Dar&apos;s development until now has largely followed a similar pattern; albeit with far less reliance on automobiles. Despite 88% of the population choosing some form of public transit, congestion in Dar is still quite high; likely as a result of commuters travelling from suburbs by car to work in the CBD (Nkurunziza et al. 2012). With little formal strategy in place to grow a city upward and slowly from the centre, the population spreads out, and along with it, costs. Another consequence of the aforementioned lack of formal urban planning initiative, is that neighbourhoods in Dar don&#x2019;t conform to a specific grid pattern or regular system, leading to property development within odd angular shaped parcel boundaries (De Blij, 1963). Architecturally, the CBD shares traits of other African-Portuguese cities, inherits direct German influence in many governmental buildings, and even incorporating some parisian flavour through the embrace of street level cafes. Suburban dwellings are reminiscent of large American single family homes, while informal settlements are characterized by more rudimentary shelters.</p>
<h2 id="history">History</h2>
<p>Around 1860 the Sultan Sayyid Majid bin Said Al-Busaidi of Zanzibar was reaching the pinnacle of his control over African territory. His empire was built on profits made from the slave trade&#x2014;which in Zanzibar was centred upon the Bagamoyo port&#x2014;and his affairs were becoming the subject of greater British interference. According to Harm de Blij, it was out of an increasing sense of uneasiness towards this interference that Majid decided to seek an alternative headquarters for his empire. Materializing as an Arab settlement, this alternative headquarters became Dar es Salaam. (De Blij, 1963).</p>
<p>The sultan&#x2019;s death in 1870 coincided with the first British attack on the slave trade in Zanzibar and along coastal Africa and Dar es Salaam was left abandoned. The British would return a few years later, attacking the mainland slave trade and spurring growth in Dar; which because of its location directly across the sea from Zanzibar was better suited for a port than Bagamoyo. During the 1870&#x2019;s, there was an effort to build a road from Dar to Lake Malawi with an intention to stifle the slave trade by providing alternative and legitimate ways to engage in commerce. This was a matter of replacing the previously shortest path between Bagamoyo&#x2014;which was the slave trade centre&#x2014;and the deep interior.</p>
<p>From 1881 and onward, Dar became a garrison town for the Germans while they engaged in conflict with Africans in the interior. Remaining primarily a military town for the Germans until around 1914, Dar begins to see it&#x2019;s first notable population growth, as the British and Arabs did little to develop the city as a settlement. The Germans would act as the first influencers to the city&#x2019;s urban character, as can be seen in throughout the buildings originating during German rule. They&#x2019;d also establish the first street plan which led to the aforementioned irregular property development in the urban core. 1914 would see the defeat of the Germans, and a return to British rule; temporarily administered from elsewhere due to a scarcity of accommodation for new personnel (De Blij, 1963).</p>
<p>Between Britain regaining administration over Dar (1914) and 1945, Dar experienced highly fluctuating growth as a subject of the same financial effects as the rest of the world during the great depression. One such effect being changes in market forces for their main commodity Sisal during World War II. After the war, Tanganyika&#x2014;present day Tanzania&#x2014;would once again fall back to British administration and a new phase would begin in the capital.</p>
<p>Post-world-war Dar es Salaam moved quickly and managed to pass the first urban development plan called the &#x201C;Colonial Development and Welfare Act&#x201D;. This was a ten-year plan that was meant to encourage faith in Her Majesty&#x2019;s Government by promoting development through investments. The harbour would be renewed, many governmental institutions would be constructed, and in 1961 the state of Tanganyika would gain independence as a sovereign nation. Tanganyika didn&#x2019;t last long however, as it was dissolved three years later when it joined the United Republic of Tanganyika and Zanzibar, later to become Tanzania, a portmanteau of the names of Tanganyika and Zanzibar.</p>
<h3 id="populationgeographyandurbandevelopmenthistory">Population Geography and Urban Development History</h3>
<p>With the relief of an order that had restricted the migration of africans into towns in 1961, the population started growing rapidly (Sheuya, 2010). The rate of population growth in Dar started growing at almost double its population per decade and in an effort to quell this growth, citizens of Dar es Salaam were actively encouraged to reside in rural towns under a socialist farming movement (Sturgis, 2015).  Further efforts to slow its growth came in 1974 when the capital was moved from Dar to Dodoma.</p>
<p>While these efforts likely hampered Dar&#x2019;s growth for a few decades, the city still continued to grow at around the previous rate, though it could have become a notable city sooner had these efforts not been in place. The movement against city life started dissipating in 1985 and the city once again had an influx of people, growing from approximately 1,360,850 in 1988 to 3,825,877 in 2012 (Sturgis, 2015). This trend is expected to continue, reaching 21 million in 2050.</p>
<p>As a consequence of the active discouragement toward city living, and during this first influx of people, the city was severely lacking in urban planning and general development. This led to a severe shortage in accommodation and a massive rise in informal settlement growth. Informal settlements can be thought of as shelters constructed illegally or not in compliance with an urban planning regulation or specification. The UN places the figure of informal settlements at 70% of the population of Dar es Salaam (Sheuya, 2010).</p>
<p>However, according to CityLab, this does not mean that Dar is largely composed of people living in poverty, nor that the city is necessarily doomed to collapse. Dar will lift more people into the middle class than any other African city in the coming decades and maintains a 4.1 percent poverty rate compared to the 33 percent poverty rate in surrounding rural towns (Sturgis, 2015).</p>
<h2 id="physicalgeographyoftheregion">Physical Geography of the Region</h2>
<h3 id="harbour">Harbour</h3>
<p>Dar es Salaam has been established in one of East Africa&#x2019;s optimal locations for a natural harbour; earning its place as Tanzania&#x2019;s primary port city. Natural harbours require a sheltered body of water and deep enough water for ships to dock. Dar fits this criteria reasonably well, as the harbour sits in the drowned estuary of Mzinga creek. Evidence suggests that the whole area, including where the city sits today, were recently submerged. (De Blij, 1963) There are a few obstacles however, such as shallow terraces beneath the water and near the mouth of the harbor that necessitate careful navigation. These geographical limitations restrict the harbour from servicing a large amount of traffic simultaneously; an existing source of growing pain that presented itself more prominently in the latter half of the 20th century and only stands to become dramatically more difficult to manage in coming years.</p>
<h3 id="topography">Topography</h3>
<p>Dar is a topographically flat and low-lying area, with most of the land under 35m from sea level. A few miles inland we see a terrace rise above 300m. Surrounding this low-lying area is a bluff that stretches from the shore to the terrace, in Northern areas forming a cliff and in some areas giving way to beaches.</p>
<h3 id="climate">Climate</h3>
<p>Dar&apos;s location in equatorial East Africa provides for an extremely hot and humid climate year round; making shade a precious commodity and a desirable feature of urban development. To lessen this burden, both the Germans and the British helped to introduce trees into the urban landscape; at least in the more desirable areas east of the downtown core. There are few viable agricultural crops supported by the land surrounding the city, but yields of Sisal&#x2014;a species of the Agave plant&#x2014;were found to be worthwhile and became one of the primary exports from Dar.</p>
<p>In summary, Dar es Salaam&#x2019;s notable features include its harbor and port, the underlying estuary, and the cliffs that bound the region. It&#x2019;s a relatively flat and low area, that suffers from exposure to the intense near-equatorial sun. Agriculturally undiversified, Dar primarily relies on other economic exports than cash crops, but farmers have been able to farm Sisal for most of the last century.</p>
<h3 id="urbangrowthpatternsandcitystructure">Urban Growth Patterns and City Structure</h3>
<p>Dar es Salaam is composed of the municipalities Ilala, Temeke, and Kinondoni, each of which have a share of 73 total wards and 276 sub-wards. The city radiates outward from its Central Business District along the major thoroughfares that run to the north, northwest, west, and south. As early as the first major growth period in the mid-twentieth century, suburbs began developing outside the CBD. Residents originally conglomerated into their own ethnic areas, but now the suburbs compare more closely to North American cities where the population is distributed by wealth, increasing in a as they move further away from the center. One notable example of what would be called &apos;first-class&apos; residential is called Oyster Bay, which sits just to the North of the city. First-class residential also appears near the harbour on the edge of the CBD. Second-class residential can also be seen northward from the CBD, but closer in proximity, while third-class residential mixes with commercial in the inner city. Lastly, outside the built city we see the aforementioned informally developed sprawling settlements.</p>
<h3 id="managingthegrowthsolutions">Managing the Growth - Solutions</h3>
<p>One of the most obvious symptoms of sprawl in any city is traffic congestion and Dar es Salaam is no exception. In the last 15 years, a master transportation plan has been developed with consideration towards the majority 88% of the population that commutes via public transit, and a bus rapid transit system conceived. This system is being deployed in 6 phases, the first of which was completed in 2016 and proceeded to service 300,000 daily commuters. All of the built city of Dar, including some parts of the outer informal areas will be serviceable by end the 6th phase. This is a big step in the right direction, but this plan will only go to serve a small portion of the population that lives in informal settlements. Gradual re-development of informal settlements, that were originally poorly planned for, could provide for a sustainable growth pattern going forward, and a positive impact on the economy as people are able to realize the benefits of a modern accessible city. My suggestion here would be to build and plan for rapid growth, addressing former mistakes now before the city grows outward further. More formal building development would invite those of informal populations into the city as well as newcomers, densifying a potentially massive economic base and supporting Dar&#x2019;s projected evolution into a megacity.</p>
<h3 id="conclusion">Conclusion</h3>
<p>Dar es Salaam is a very young city of only around 156 years, largely in existence as a result of it&#x2019;s viability as a port city and military outpost, once the headquarters of the Tanganyikan slave trade. Growth and development was hampered severely during the first 80 years of the city&#x2019;s history, but now finds itself within the top 9 fastest growing cities in the world (City Mayors, 2018), projected to reach a population of 21m by 2050 (Sturgis, 2015). With regard to urban development, Dar&#x2019;s neighbourhoods follow familiar patterns. Concentric circles of residential suburbs radiate outward from the CBD with increasing levels of wealth furthest north. By contrast, residents had at one point ethnically conglomerated in such a way that would have determined different neighborhood boundaries. Other high income residents live near the harbour on the edge of the CBD, while the lowest income residents either live adjacent to commercial development within the CBD or outside the built city in informal settlements. The city currently sits at a transitionary period in which it&#x2019;s adopting modern methods of city planning, public transportation, and increasing densification, in contrast to the lack of these intentions during the first half of the city&#x2019;s history. While these efforts do stand to serve the vast majority of Dar&#x2019;s built urban area, it may struggle to serve the 70% of its population that live outside in informal settlements.</p>
<h2 id="notes">Notes</h2>
<p>1 - National Bureau of Statistics, Office of Chief Government Statistician President&#x2019;s Office (2012)._ Population and Housing Census 2012_ [Data file]. Retrieved from <a href="http://catalog.ihsn.org/index.php/catalog/4618/download/58601?ref=luketully.ca">http://catalog.ihsn.org/index.php/catalog/4618/download/58601</a><br>
2 - Thanks to ODILRAK91 for the photo of Dar&apos;s night lights found on <a href="https://commons.wikimedia.org/wiki/File:Dar_es_sallam_skyline.jpg?ref=luketully.ca">Wikimedia Commons</a></p>
<h3 id="bibliography">Bibliography</h3>
<pre><code>    Abebe, F. (2011). _Modelling informal settlements in Dar es Salaam, Tanzania._[ https://doi.org/10.13140/RG.2.1.4392.7282](https://doi.org/10.13140/RG.2.1.4392.7282)


    City Mayors: World&#x2019;s fastest growing urban areas. (n.d.). Retrieved April 9, 2018, from City Mayors website:[ http://www.citymayors.com/statistics/urban_growth1.html](http://www.citymayors.com/statistics/urban_growth1.html)


    De Blij, H. J. (1963). _Dar es Salaam: a study in urban geography_. Retrieved from[ http://archive.org/details/daressalaamstudy00debl](http://archive.org/details/daressalaamstudy00debl)


    Nkurunziza, A., Zuidgeest, M., Brussel, M., &amp; van Maarseveen, M. (2012). Modeling Commuter Preferences for the Proposed Bus Rapid Transit in Dar-es-Salaam. _Journal of Public Transportation_, _15_(2), 95&#x2013;116.[ https://doi.org/10.5038/2375-0901.15.2.5](https://doi.org/10.5038/2375-0901.15.2.5)


    Sawio, C. J. (2008). Perception and conceptualisation of urban environmental change: Dar es Salaam City. _Geographical Journal_, _174_(2), 164&#x2013;168.[ https://doi.org/10.1111/j.1475-4959.2008.00289.x](https://doi.org/10.1111/j.1475-4959.2008.00289.x)


    Sheuya, S. A. (2010). _Informal settlements and finance in Dar es Salaam, Tanzania_. Nairobi: UN-HABITAT.


    Sturgis, S. (2015, February 25). Tanzania&#x2019;s Dar es Salaam Is on Track to Become One of Africa&#x2019;s Most Important Megacities. Retrieved April 9, 2018, from CityLab website:[ https://www.citylab.com/design/2015/02/the-bright-future-of-dar-es-salaam-an-unlikely-african-megacity/385801/](https://www.citylab.com/design/2015/02/the-bright-future-of-dar-es-salaam-an-unlikely-african-megacity/385801/)
</code></pre>
<!--kg-card-end: markdown-->]]></content:encoded></item><item><title><![CDATA[Set up and Configure a Personal Remote Git Repo]]></title><description><![CDATA[A step by step guide on how to create your own git repository on your own unix server.]]></description><link>https://luketully.ca/self-hosting-a-git-repo/</link><guid isPermaLink="false">5f368828e7eec129b33f6048</guid><category><![CDATA[git]]></category><dc:creator><![CDATA[Luke Tully]]></dc:creator><pubDate>Sat, 10 Dec 2016 02:50:43 GMT</pubDate><content:encoded><![CDATA[<!--kg-card-begin: markdown--><p>Sites like Github, Bitbucket, and GitLab make it ridiculously easy to setup public and private remote repos, which might make a lot of sense for your team. Sometimes there is an added cost to this though, whether financially or simply introducing another third-party dependency into your project.</p>
<p>Setting up your own git repo is easy and allows you to host your versioning system on your own server.</p>
<h2 id="gettingstartedontheremoteserver">Getting started on the remote server</h2>
<p>We&apos;ll need to set up a dedicated user to manage the repos.</p>
<ol>
<li><code>su - // Enter super user</code></li>
<li><code>adduser git // Create the new user with home directory</code></li>
<li><code>su git // Login as that user</code></li>
<li><code>cd ~/ &amp;&amp; mkdir .ssh</code></li>
<li><code>cd .ssh</code></li>
<li><code>touch authorized_keys</code></li>
</ol>
<h2 id="ontheclient">On the client</h2>
<h3 id="optionalinstallingsshcopyid">Optional: Installing ssh-copy-id</h3>
<p>ssh-copy-id is a handy package that allows you to copy your local machine&apos;s public key to the authorized_keys file on the remote machine.</p>
<p>I use the homebrew package manager on macOS which, if you don&apos;t, you can find more information on at <a href="http://brew.sh/?ref=luketully.ca">http://brew.sh/</a></p>
<p><code>brew install ssh-copy-id</code></p>
<ol>
<li><code>ssh-keygen -C &quot;your@email.com&quot; // Generate a new rsa key</code></li>
<li><code>ssh-copy-id &lt;user@server&gt; // Copies rsa keys to the authorized_keys file on the host</code></li>
<li><code>mkdir gitDirectory // Create folder for wherever you&apos;ll want the git repo</code></li>
<li><code>cd gitDirectory &amp;&amp; git clone user@server:&lt;repo.git&gt;</code></li>
<li><code>git pull origin &lt;branch&gt; // or do an initial commit and push it up to the server</code></li>
</ol>
<p>Other notes:<br>
To push a branch up to the server:</p>
<ol>
<li><code>git checkout -b feature_branch_name</code></li>
<li>... edit files, add and commit ...</li>
<li><code>git push -u origin feature_branch_name</code></li>
</ol>
<p>And that&apos;s it. You have a remote repo that you and your team can use, have full control over, and with no added cost. Happy coding!</p>
<!--kg-card-end: markdown-->]]></content:encoded></item><item><title><![CDATA[On the Ambleside Skatepark Rebuild and Skateboarding]]></title><description><![CDATA[On the value of skateboarding and the return on investment of skateparks.]]></description><link>https://luketully.ca/on-ambleside-and-skateboarding/</link><guid isPermaLink="false">5f368828e7eec129b33f6045</guid><category><![CDATA[skateboarding]]></category><category><![CDATA[ambleside]]></category><dc:creator><![CDATA[Luke Tully]]></dc:creator><pubDate>Thu, 17 Mar 2016 17:46:04 GMT</pubDate><content:encoded><![CDATA[<!--kg-card-begin: markdown--><p>From <a href="http://www.vancitybuzz.com/2015/01/ambleside-skatepark-project-rebuild/?ref=luketully.ca">this article</a> originally written on Vancity Buzz. Eric Savics couldn&apos;t have articulated this thought better.</p>
<blockquote>
<p>The individual progression of skill builds self-confidence, and we need that kind of thing as much as possible these days,&#x201D; he said. &#x201C;Our kids are exposed to way too much materialistic and meaningless crap that constantly reminds them that they&#x2019;re not good enough, and here we have an opportunity to create a space that inherently removes the screens and the monitors, and gets them outside! We have an opportunity here to create a safe space for kids to come and be physical, creative, and social. We HAVE to care about creating and maintaining public spaces like this, it&#x2019;s a no-brainer.</p>
</blockquote>
<!--kg-card-end: markdown-->]]></content:encoded></item><item><title><![CDATA[The Web of Ads]]></title><description><![CDATA[Be sure to turn off your adblocker so you can buy our product :) k thx bae]]></description><link>https://luketully.ca/web-of-ads/</link><guid isPermaLink="false">5f368828e7eec129b33f6042</guid><category><![CDATA[ads]]></category><category><![CDATA[adblockers]]></category><category><![CDATA[progressive enhancement]]></category><category><![CDATA[web2.0]]></category><dc:creator><![CDATA[Luke Tully]]></dc:creator><pubDate>Sat, 05 Mar 2016 07:06:18 GMT</pubDate><content:encoded><![CDATA[<!--kg-card-begin: markdown--><p>So much of my time is now spent figuring out which marketing library acts as a dependency for basic content.<br>
<img src="https://luketully.ca/content/images/2016/03/Screen-Shot-2016-03-04-at-10-47-27-PM.png" alt="Ghostery showing how I&apos;ll be tracked" loading="lazy"><br>
Yep that&apos;s the one. HoneyBadger. Obviously the images wouldn&apos;t load because of that. I wonder if they have analytics on how many people are running adblockers and subsequently won&apos;t see or buy their products.</p>
<!--kg-card-end: markdown-->]]></content:encoded></item><item><title><![CDATA[Making Better Maps With SVG]]></title><description><![CDATA[A better strategy for making responsive maps on the web. Why SVG allows the problem of responsive maps to be solved in a more elegant way.]]></description><link>https://luketully.ca/making-maps-better/</link><guid isPermaLink="false">5f368828e7eec129b33f6041</guid><dc:creator><![CDATA[Luke Tully]]></dc:creator><pubDate>Sun, 13 Dec 2015 11:29:50 GMT</pubDate><media:content url="https://images.unsplash.com/photo-1478860409698-8707f313ee8b?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=2000&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ" medium="image"/><content:encoded><![CDATA[<!--kg-card-begin: markdown--><img src="https://images.unsplash.com/photo-1478860409698-8707f313ee8b?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=2000&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ" alt="Making Better Maps With SVG"><p>Fairly recently I was given the opportunity to work on mostly the front-end of a product/service that consisted of atrociously legacy, poorly written vb.net code and no clear direction. This is my attempt at sharing what I learned.</p>
<h2 id="maketheappresponsive">Make the app responsive</h2>
<p>Ignoring the ridiculous way my task was described, the most significant part of the front-end of this application was the ability to view pages of a catalog and interact with them. These pages were scanned or otherwise saved in a digital form, then displayed as large images on the web. The interactive part was provided in the form of image maps which were manually constructed by a person hired to draw them in a very old copy of Photoshop and then export the code which was then saved as raw HTML in a database. <em>Everything about this bothered me</em>.</p>
<ul>
<li>The images represented scanned pages of large print catalogs.</li>
<li>The existing interface only considered screens that were about 1000px wide or so. No proper consideration for small screens.</li>
<li>No solution for a better input method<br>
None of the existing interface code could be re-used, but the general style and content could be.</li>
</ul>
<p>Technical Requirements</p>
<ul>
<li>Invisible polygons needed to be displays over top of the pages</li>
<li>The polygons needed to be positioned at all times relative to the constraints of the image below</li>
<li>The polygons needed to be clickable and link externally</li>
<li>No changes to data entry workflow could be changed</li>
<li>Most of the backend needed to stay unchanged</li>
</ul>
<p>Sane requirements</p>
<ul>
<li>Needed to be affected by CSS</li>
</ul>
<p>Initially, I gave the problem some thought and came up dry on an approach that would handle these requirements well.</p>
<p>Curious about the obvious question: &#x201C;Why don&#x2019;t <code>&lt;map&gt;</code>&#x2019;s solve this problem?&#x201D;, I tested them.</p>
<h3 id="testingmaps">Testing <code>&lt;map&gt;</code>s</h3>
<p>When I came on, the app was in a weird state. There wasn&apos;t an interface that you would describe as responsive, but there was some strange effort to force the interface into a weird state of an incredibly ugly implementation of a desktop image based &#x2026;fluid layout of some sort. The images I was dealing with scaled with the browser but it really didn&apos;t make sense given the rest of the layout and didn&apos;t attempt to actually provide value.</p>
<p>Still, the image maps themselves scaled proportionally with the images and the screen.</p>
<h3 id="whyarentimagemapsresponsivelycapable">Why aren&apos;t image maps responsively capable?</h3>
<ul>
<li>Reliance on initial markup to set the spatial constraints of the coordinate plane</li>
<li>Lack of re-calculation of vertices if the coordinate plane changes</li>
</ul>
<p>Why else do they suck?<br>
Turns out, image maps only serve exactly the requirements of this particular type of interface. They don&apos;t accommodate any changes whatsoever. Want to style the polygons? Outta luck. Want to bind events to the elements? Maybe. I didn&apos;t test that extensively because I couldn&apos;t really think of a reason that would be useful. I suppose theoretically if you did get that working, you could bind clicks to address changes and subsequently change views or something with the location api. Don&apos;t try inspecting them as elements in dev tools, because that is only what they seem to be. In reality they are just coordinate mappings, though they do have real markup.</p>
<p>So how about a solution?</p>
<h3 id="usesvg">Use SVG</h3>
<p>At first I couldn&apos;t think of a way to handle this. Drawing arbitrarily complex polygons  transparently, with external links, and ideally styleable? You might not think of SVG either because typically it&apos;s used for drawing things rather than not drawing things. However it seems to excel at both, and when it comes time to do something with it you can.</p>
<p>Comparing the capabilities of image maps to what is possible with the <a href="http://www.w3.org/TR/SVG/?ref=luketully.ca">SVG Api</a> the only real work needed to be done to allow SVG to hypothetically fit into our workflow was the transformation of exisiting image map data, such as coords, into the various pieces of information needed to render the same <code>&lt;area&gt;</code> as a <code>&lt;poly&gt;</code> or <code>&lt;rect&gt;</code>. I wrote a <a href="https://github.com/LukeTully/maptosvg?ref=luketully.ca">pretty shallow abstraction</a> library to handle this and as a nice side effect get progressive enhancement for free. Browsers that don&apos;t support SVG can be allowed to render image maps if you so choose.</p>
<p>In summary, the benefits of SVG are great. Below are some of the technical differences in capabilities between SVG and legacy maps.</p>
<p><strong>Maps</strong></p>
<ul>
<li>Ability to create polygonal shapes based on the coordinate plane of an associated image</li>
<li>The shapes are invisisible and can&apos;t be otherwiser styled.</li>
<li>The shapes can link to things</li>
<li>No responsiveness</li>
</ul>
<p><strong>SVG Elements</strong></p>
<ul>
<li>Can create polygons</li>
<li>Polygons can link to things</li>
<li>Polygons can be styled with CSS or be transparent</li>
<li>Full scaling capability built in</li>
<li>No association with actual images. Use an image to set the viewBox or don&apos;t. Draw your whole map with just SVG if you want.</li>
<li>Solid JavaScript API</li>
</ul>
<!--kg-card-end: markdown-->]]></content:encoded></item></channel></rss>