Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
144 lines (139 sloc) 40 KB
<!DOCTYPE html> <html> <head> <title>main.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> main.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*</span>
<span class="cm"> * Copyright 2012 Massimiliano Marcon (http://marcon.me)</span>
<span class="cm"> * </span>
<span class="cm"> * Licensed under the Apache License, Version 2.0 (the &quot;License&quot;);</span>
<span class="cm"> * you may not use this file except in compliance with the License.</span>
<span class="cm"> * You may obtain a copy of the License at</span>
<span class="cm"> * </span>
<span class="cm"> * http://www.apache.org/licenses/LICENSE-2.0</span>
<span class="cm"> * </span>
<span class="cm"> * Unless required by applicable law or agreed to in writing, software</span>
<span class="cm"> * distributed under the License is distributed on an &quot;AS IS&quot; BASIS,</span>
<span class="cm"> * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.</span>
<span class="cm"> * See the License for the specific language governing permissions and</span>
<span class="cm"> * limitations under the License.</span>
<span class="cm"> */</span>
</pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>Neighborhood Hangouts</h2>
<p>This little app is live on Mozilla Hacks.
Go and play with <a href="https://developer.mozilla.org/en-US/demos/detail/neighborhood-hangouts">Neighborhood Hangouts</a>!</p> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="nx">nokia</span><span class="p">){</span>
<span class="s1">&#39;use strict&#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">init</span><span class="p">,</span> <span class="nx">locationFound</span><span class="p">,</span> <span class="nx">locationNotFound</span><span class="p">,</span> <span class="nx">cities</span><span class="p">,</span> <span class="nx">attachEventHandlers</span><span class="p">,</span> <span class="nx">dataReady</span><span class="p">,</span>
<span class="nx">API</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">id</span><span class="o">:</span> <span class="s1">&#39;C2Cse_31xwvbccaAIAaP&#39;</span><span class="p">,</span>
<span class="nx">token</span><span class="o">:</span> <span class="s1">&#39;fjFdGyRjstwqr9iJxLwQ-g&#39;</span>
<span class="p">},</span>
<span class="nx">FSQ</span> <span class="o">=</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <p>Foursquare API base URL. This already contains MY credentials, please get yours for you tests.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">baseUrl</span><span class="o">:</span> <span class="s1">&#39;https://api.foursquare.com/v2/venues/search?radius=1500&amp;ll={LAT},{LON}&amp;limit=50&amp;client_id=ORIQ5J0OX5QKKIWXFGEEADVVKI0DUKHW10QV2LCKC4KYC3SU&amp;client_secret=4VSNLFBMRRED1ISQF5FNC4RBDSXAJJL11ZMJZP4XUMTRS51G&amp;v=20120927&amp;callback=fsqdata&#39;</span>
<span class="p">},</span>
<span class="nx">map</span><span class="p">,</span> <span class="nx">mapEl</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#map&#39;</span><span class="p">),</span> <span class="nx">density</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="nx">infoBubbles</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>Bootstrap the application. Everything begins here.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">init</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">m</span><span class="p">,</span> <span class="nx">pos</span><span class="p">;</span>
<span class="nx">attachEventHandlers</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>Before attempting to get the location via the API
let's see if there is one contained in the URL.
Use <code>domain.com?p=&lt;latitude&gt;,&lt;longitude&gt;</code> to set the location.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">((</span><span class="nx">m</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/\?p=(.+),(.+)/</span><span class="p">)))</span> <span class="p">{</span>
<span class="nx">pos</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">coords</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">latitude</span><span class="o">:</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">m</span><span class="p">[</span><span class="mi">1</span><span class="p">]),</span>
<span class="nx">longitude</span><span class="o">:</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">m</span><span class="p">[</span><span class="mi">2</span><span class="p">])</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="nx">locationFound</span><span class="p">(</span><span class="nx">pos</span><span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Here we go: let's try to detect the user's location
with the <strong>Geolocation API</strong>..</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span><span class="p">(</span><span class="nx">locationFound</span><span class="p">,</span> <span class="nx">locationNotFound</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">locationNotFound</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Location was found, the application lives here.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">locationFound</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">lat</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">,</span>
<span class="nx">lon</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">,</span>
<span class="nx">jsonp</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Credentials for Nokia Maps API.
<strong>Register yours <a href="http://api.developer.nokia.com">here</a></strong>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">ApplicationContext</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="s2">&quot;appId&quot;</span><span class="o">:</span> <span class="nx">API</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="s2">&quot;authenticationToken&quot;</span><span class="o">:</span> <span class="nx">API</span><span class="p">.</span><span class="nx">token</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Keep a reference to the <code>InfoBubbles</code> component. We are going to need it later.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">infoBubbles</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">component</span><span class="p">.</span><span class="nx">InfoBubbles</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>Build the <code>map</code> object.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">Display</span><span class="p">(</span><span class="nx">mapEl</span><span class="p">,</span>
<span class="p">{</span><span class="nx">center</span><span class="o">:</span> <span class="p">[</span><span class="nx">lat</span><span class="p">,</span> <span class="nx">lon</span><span class="p">],</span>
<span class="nx">zoomLevel</span><span class="o">:</span> <span class="mi">16</span><span class="p">,</span>
<span class="nx">components</span><span class="o">:</span><span class="p">[</span>
<span class="k">new</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">component</span><span class="p">.</span><span class="nx">ZoomBar</span><span class="p">(),</span>
<span class="k">new</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">component</span><span class="p">.</span><span class="nx">Behavior</span><span class="p">(),</span>
<span class="nx">infoBubbles</span>
<span class="p">]});</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p><code>nokia.maps.map.Display.SMARTMAP</code> is a pretty clever map style.
tiles are gray-ish and are perfect to put data viz layers on top.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">map</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s2">&quot;baseMapType&quot;</span><span class="p">,</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">Display</span><span class="p">.</span><span class="nx">SMARTMAP</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>Limit the min and max zoom levels.
Considering the type/amount of data that is possible
to pull from Foursquare zooming out of this range doesn't really make sense.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">map</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s2">&quot;maxZoomLevel&quot;</span><span class="p">,</span> <span class="mi">18</span><span class="p">);</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s2">&quot;minZoomLevel&quot;</span><span class="p">,</span> <span class="mi">15</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Let's use JSONP to get the data from Foursquare.
It's the safest way, it'll always work.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">jsonp</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;script&#39;</span><span class="p">);</span>
<span class="nx">doc</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;head&#39;</span><span class="p">).</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">jsonp</span><span class="p">);</span>
<span class="nx">jsonp</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">FSQ</span><span class="p">.</span><span class="nx">baseUrl</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;{LAT}&#39;</span><span class="p">,</span> <span class="nx">lat</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;{LON}&#39;</span><span class="p">,</span> <span class="nx">lon</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>Also add a marker in the user's current location.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">me</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">Marker</span><span class="p">([</span><span class="nx">lat</span><span class="p">,</span> <span class="nx">lon</span><span class="p">],</span> <span class="p">{</span>
<span class="nx">icon</span><span class="o">:</span> <span class="s2">&quot;img/me.png&quot;</span><span class="p">,</span>
<span class="nx">anchor</span><span class="o">:</span> <span class="k">new</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">Point</span><span class="p">(</span><span class="mi">12</span><span class="p">,</span> <span class="mi">24</span><span class="p">)</span>
<span class="p">});</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">objects</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">me</span><span class="p">);</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>No location in URL, browser does not support Geolocation or the
user has not allowed the browser to detect location.
There is nothing we can do, and this is just a proof-of-concept,
so we just <code>console.log</code>.
In an actual application you'd call from here some UI component
to notify the user about the unavailability of her position.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">locationNotFound</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;No location&#39;</span><span class="p">);</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>This will be the JSONP callback.
Will be called with the data pulled from Foursquare.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dataReady</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>We <em>normalize</em> the data here, in the sense that we
get the raw data from Foursquare and we make an array
of simple objects that look like this:</p>
<p><code>{value: &lt;# of checkins&gt;,
latitude: &lt;lat&gt;,
longitude: &lt;lng&gt;,
name: &lt;place name&gt;}</code></p>
<p>This is the format expected by the <strong>Heatmap</strong> module.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">normalizedData</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">place</span><span class="p">){</span>
<span class="k">return</span> <span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="nx">place</span><span class="p">.</span><span class="nx">stats</span><span class="p">.</span><span class="nx">checkinsCount</span><span class="p">,</span>
<span class="nx">latitude</span><span class="o">:</span> <span class="nx">place</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">lat</span><span class="p">,</span>
<span class="nx">longitude</span><span class="o">:</span> <span class="nx">place</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">lng</span><span class="p">,</span>
<span class="nx">name</span><span class="o">:</span> <span class="nx">place</span><span class="p">.</span><span class="nx">name</span><span class="p">};</span>
<span class="p">}),</span> <span class="nx">fav</span><span class="p">,</span> <span class="nx">favMarker</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Sort by number of checkins, ascending.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">normalizedData</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">o1</span><span class="p">,</span> <span class="nx">o2</span><span class="p">){</span>
<span class="k">return</span> <span class="nx">o1</span><span class="p">.</span><span class="nx">value</span> <span class="o">-</span> <span class="nx">o2</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>Get the favorite place, i.e. the one where people checked in the most.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">fav</span> <span class="o">=</span> <span class="nx">normalizedData</span><span class="p">[</span><span class="nx">normalizedData</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">];</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p>And display a marker for it.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">favMarker</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">Marker</span><span class="p">([</span><span class="nx">fav</span><span class="p">.</span><span class="nx">latitude</span><span class="p">,</span> <span class="nx">fav</span><span class="p">.</span><span class="nx">longitude</span><span class="p">],</span> <span class="p">{</span>
<span class="nx">icon</span><span class="o">:</span> <span class="s2">&quot;img/heart-mini.png&quot;</span><span class="p">,</span>
<span class="nx">anchor</span><span class="o">:</span> <span class="k">new</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">Point</span><span class="p">(</span><span class="mi">8</span><span class="p">,</span> <span class="mi">16</span><span class="p">)</span>
<span class="p">});</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">objects</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">favMarker</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>Additionally add a bubble that containes the place name
We can use HTML for the buble and add a class so we can override
the default style via CSS if we need to.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">infoBubbles</span><span class="p">.</span><span class="nx">openBubble</span><span class="p">(</span><span class="s1">&#39;&lt;span class=&quot;bubble&quot;&gt;&lt;b&gt;Most popular spot:&lt;/b&gt;&lt;br/&gt;&#39;</span> <span class="o">+</span> <span class="nx">fav</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">&#39;&lt;br/&gt;Checkins: &#39;</span><span class="o">+</span> <span class="nx">fav</span><span class="p">.</span><span class="nx">value</span> <span class="o">+</span> <span class="s1">&#39;&lt;/span&gt;&#39;</span><span class="p">,</span>
<span class="p">[</span><span class="nx">fav</span><span class="p">.</span><span class="nx">latitude</span><span class="p">,</span> <span class="nx">fav</span><span class="p">.</span><span class="nx">longitude</span><span class="p">],</span>
<span class="kd">function</span><span class="p">(){},</span>
<span class="kc">true</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>Make the <strong>value based heatmap object</strong> to
display the spots that people like the most.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">value</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">heatmap</span><span class="p">.</span><span class="nx">Overlay</span><span class="p">({</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>Greatest zoom level for which the overlay will provide tiles.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">max</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Overall opacity of the heatmap.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">opacity</span><span class="o">:</span> <span class="mf">0.45</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>Heatmap is value based.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;value&quot;</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>Resolution.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">coarseness</span><span class="o">:</span> <span class="mi">2</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Add the data to render the heatmap.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">value</span><span class="p">.</span><span class="nx">addData</span><span class="p">(</span><span class="nx">normalizedData</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>Make the <strong>density based heatmap object</strong> to
display the areas where people like to hang out.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">density</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">nokia</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">heatmap</span><span class="p">.</span><span class="nx">Overlay</span><span class="p">({</span>
<span class="nx">max</span><span class="o">:</span> <span class="mi">20</span><span class="p">,</span>
<span class="nx">opacity</span><span class="o">:</span> <span class="mf">0.8</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>Heatmap is now density based.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;density&quot;</span><span class="p">,</span>
<span class="nx">coarseness</span><span class="o">:</span> <span class="mi">2</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>Add the data to render the heatmap.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">density</span><span class="p">.</span><span class="nx">addData</span><span class="p">(</span><span class="nx">normalizedData</span><span class="p">);</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">&#182;</a> </div> <p>Attaches all the event handlers that are needed within
the application.
Everything done in one place, to keep things clean...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">attachEventHandlers</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">&#182;</a> </div> <p>Provide an ungly global callback for the JSONP call
to Foursquare.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">fsqdata</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nx">code</span> <span class="o">===</span> <span class="mi">200</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Call succeeded, pass the result to <code>dataReady</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">dataReady</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">response</span><span class="p">.</span><span class="nx">venues</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">&#182;</a> </div> <p>Oh god, what do I see here? An <code>alert</code>?! Seriously?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;uhmm... something wrong with Foursquare API&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <p>Use <strong><a href="https://developer.mozilla.org/en-US/docs/DOM/event.target">Event Delegation</a></strong>
to attach event handlers to the links.
Clicking on links will switch heatmap type</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">doc</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;dl&#39;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">if</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">tagName</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/a/i</span><span class="p">))</span> <span class="p">{</span>
<span class="k">if</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="s1">&#39;value&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">overlays</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">density</span><span class="p">);</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">overlays</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">overlays</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">overlays</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">density</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span> <span class="kc">true</span><span class="p">);</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <p>Wait for the DOM to be ready.
Or for <code>window.onload</code> if we have to.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">doc</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;DOMContentLoaded&#39;</span><span class="p">,</span> <span class="nx">init</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="nx">init</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">})(</span><span class="nb">document</span><span class="p">,</span> <span class="nx">nokia</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>