Skip to content
Browse files

Docco documentation update

  • Loading branch information...
1 parent f1302ff commit 04c3e83b3d96e8678c7b6160537ed881c976fcd4 @mmarcon committed Oct 3, 2012
Showing with 87 additions and 24 deletions.
  1. +11 −11 docs/main.html
  2. +76 −13 js/main.js
View
22 docs/main.html
@@ -40,7 +40,7 @@
<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>
+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>
@@ -50,7 +50,7 @@
<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>
+<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>
@@ -77,7 +77,7 @@
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
+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>
@@ -91,9 +91,9 @@
<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="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="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>
@@ -103,20 +103,20 @@
<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 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">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-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="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 di 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="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.
View
89 js/main.js
@@ -14,6 +14,10 @@
* limitations under the License.
*/
+//##Neighborhood Hangouts
+//
+//This little app is live on Mozilla Hacks.
+//Go and play with [Neighborhood Hangouts](https://developer.mozilla.org/en-US/demos/detail/neighborhood-hangouts)!
(function(doc, nokia){
'use strict';
@@ -23,15 +27,19 @@
token: 'fjFdGyRjstwqr9iJxLwQ-g'
},
FSQ = {
+ //Foursquare API base URL. This already contains MY credentials, please get yours for you tests.
baseUrl: 'https://api.foursquare.com/v2/venues/search?radius=1500&ll={LAT},{LON}&limit=50&client_id=ORIQ5J0OX5QKKIWXFGEEADVVKI0DUKHW10QV2LCKC4KYC3SU&client_secret=4VSNLFBMRRED1ISQF5FNC4RBDSXAJJL11ZMJZP4XUMTRS51G&v=20120927&callback=fsqdata'
},
map, mapEl = doc.querySelector('#map'), density, value, infoBubbles;
+ //Bootstrap the application. Everything begins here.
init = function(){
var m, pos;
- //app lives here
attachEventHandlers();
+ //Before attempting to get the location via the API
+ //let's see if there is one contained in the URL.
+ //Use `domain.com?p=<latitude>,<longitude>` to set the location.
if((m = window.location.href.match(/\?p=(.+),(.+)/))) {
pos = {
coords: {
@@ -42,6 +50,8 @@
locationFound(pos);
return;
}
+ //Here we go: let's try to detect the user's location
+ //with the **Geolocation API**..
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);
}
@@ -50,13 +60,20 @@
}
};
+ //Location was found, the application lives here.
locationFound = function(position){
var lat = position.coords.latitude,
lon = position.coords.longitude,
jsonp;
+ //Credentials for Nokia Maps API.
+ //**Register yours [here](http://api.developer.nokia.com)**.
nokia.maps.util.ApplicationContext.set({"appId": API.id, "authenticationToken": API.token});
+
+ //Keep a reference to the `InfoBubbles` component. We are going to need it later.
infoBubbles = new nokia.maps.map.component.InfoBubbles()
+
+ //Build the `map` object.
map = new nokia.maps.map.Display(mapEl,
{center: [lat, lon],
zoomLevel: 16,
@@ -65,83 +82,128 @@
new nokia.maps.map.component.Behavior(),
infoBubbles
]});
+ //`nokia.maps.map.Display.SMARTMAP` is a pretty clever map style.
+ //tiles are gray-ish and are perfect to put data viz layers on top.
map.set("baseMapType", nokia.maps.map.Display.SMARTMAP);
+
+ //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.
map.set("maxZoomLevel", 18);
map.set("minZoomLevel", 15);
+ //Let's use JSONP to get the data from Foursquare.
+ //It's the safest way, it'll always work.
jsonp = doc.createElement('script');
doc.querySelector('head').appendChild(jsonp);
jsonp.src = FSQ.baseUrl.replace('{LAT}', lat).replace('{LON}', lon);
+ //Also add a marker in the user's current location.
var me = new nokia.maps.map.Marker([lat, lon], {
icon: "img/me.png",
anchor: new nokia.maps.util.Point(12, 24)
});
map.objects.add(me);
};
+ //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 `console.log`.
+ //In an actual application you'd call from here some UI component
+ //to notify the user about the unavailability of her position.
locationNotFound = function(){
console.log('No location');
};
+ //This will be the JSONP callback.
+ //Will be called with the data pulled from Foursquare.
dataReady = function(data) {
+ //We *normalize* 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:
+ //
+ // `{value: <# of checkins>,
+ // latitude: <lat>,
+ // longitude: <lng>,
+ // name: <place name>}`
+ //
+ //This is the format expected by the **Heatmap** module.
var normalizedData = data.map(function(place){
return {value: place.stats.checkinsCount,
latitude: place.location.lat,
longitude: place.location.lng,
name: place.name};
}), fav, favMarker;
+ //Sort by number of checkins, ascending.
normalizedData.sort(function(o1, o2){
return o1.value - o2.value;
});
+ //Get the favorite place, i.e. the one where people checked in the most.
fav = normalizedData[normalizedData.length - 1];
+ //And display a marker for it.
favMarker = new nokia.maps.map.Marker([fav.latitude, fav.longitude], {
icon: "img/heart-mini.png",
anchor: new nokia.maps.util.Point(8, 16)
});
map.objects.add(favMarker);
-
+ //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.
infoBubbles.openBubble('<span class="bubble"><b>Most popular spot:</b><br/>' + fav.name + '<br/>Checkins: '+ fav.value + '</span>',
[fav.latitude, fav.longitude],
function(){},
true);
+ //Make the **value based heatmap object** to
+ //display the spots that people like the most.
value = new nokia.maps.heatmap.Overlay({
- // This is the greatest zoom level for which the overlay will provide tiles
+ //Greatest zoom level for which the overlay will provide tiles.
max: 20,
- // This is the overall opacity applied to this overlay
+ //Overall opacity of the heatmap.
opacity: 0.45,
- // Defines if our heatmap is value or density based
+ //Heatmap is value based.
type: "value",
- // Coarseness defines the resolution with which the heat map is created.
+ //Resolution.
coarseness: 2
});
+ //Add the data to render the heatmap.
value.addData(normalizedData);
+ //Make the **density based heatmap object** to
+ //display the areas where people like to hang out.
density = new nokia.maps.heatmap.Overlay({
- // This is the greatest zoom level for which the overlay will provide tiles
max: 20,
- // This is the overall opacity applied to this overlay
opacity: 0.8,
- // Defines if our heatmap is value or density based
+ //Heatmap is now density based.
type: "density",
- // Coarseness defines the resolution with which the heat map is created.
coarseness: 2
});
+ //Add the data to render the heatmap.
density.addData(normalizedData);
};
+ //Attaches all the event handlers that are needed within
+ //the application.
+ //Everything done in one place, to keep things clean...
attachEventHandlers = function(){
+ //Provide an ungly global callback for the JSONP call
+ //to Foursquare.
window.fsqdata = function(data){
if(data.meta.code === 200) {
+ //Call succeeded, pass the result to `dataReady`.
dataReady(data.response.venues);
}
else {
- alert('uhmm... something wrong with Foursquare API')
+ //Oh god, what do I see here? An `alert`?! Seriously?
+ alert('uhmm... something wrong with Foursquare API');
}
};
+ //Use **[Event Delegation](https://developer.mozilla.org/en-US/docs/DOM/event.target)**
+ //to attach event handlers to the links.
+ //Clicking on links will switch heatmap type
doc.querySelector('dl').addEventListener('click', function(e){
e.preventDefault();
if(e.target.tagName.match(/a/i)) {
@@ -156,11 +218,12 @@
}, true);
};
+ //Wait for the DOM to be ready.
+ //Or for `window.onload` if we have to.
if(doc.addEventListener) {
doc.addEventListener('DOMContentLoaded', init, false);
}
else {
window.onload = init;
}
-})(document, nokia);
-
+})(document, nokia);

0 comments on commit 04c3e83

Please sign in to comment.
Something went wrong with that request. Please try again.