Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Documentation

  • Loading branch information...
commit d0717b89806ff52739a7ab9e2272db261de4f91f 1 parent 922b08c
@mmarcon authored
View
5 README.md
@@ -1,5 +0,0 @@
-# Neighborhood Hangout
-
-**See where your neighbors are hanging out.**
-
-This little application uses heat maps to display interesting places in your neighborhood. It pulls checkin information from the Foursquare API and displays on the map the areas where people normally hangout in your neighborhood and the most popular spots in the area around you.
View
64 css/normalize.css
@@ -1,64 +0,0 @@
-/*------------------------------------*\
- RESET
-\*------------------------------------*/
-/* http://meyerweb.com/eric/tools/css/reset/
- v2.0b1 | 201101
- NOTE:WORK IN PROGRESS
- USE WITH CAUTION AND TEST WITH ABANDON */
-
-html,body,div,span,applet,object,iframe,
-h1,h2,h3,h4,h5,h6,p,blockquote,pre,
-a,abbr,acronym,address,big,cite,code,
-del,dfn,em,img,ins,kbd,q,s,samp,
-small,strike,strong,sub,sup,tt,var,
-b,u,i,center,
-dl,dt,dd,ol,ul,li,
-fieldset,form,label,legend,
-table,caption,tbody,tfoot,thead,tr,th,td,
-article,aside,canvas,details,figcaption,figure,
-footer,header,hgroup,menu,nav,section,summary,
-time,mark,audio,video{
- margin:0;
- padding:0;
- border:0;
- outline:0;
- font-size:100%;
- font:inherit;
- vertical-align:baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,aside,details,figcaption,figure,
-footer,header,hgroup,menu,nav,section{
- display:block;
-}
-body{
- line-height:1;
-}
-ol,ul{
- list-style:none;
-}
-blockquote,q{
- quotes:none;
-}
-blockquote:before,blockquote:after,
-q:before,q:after{
- content:'';
- content:none;
-}
-/* remember to define visible focus styles!
-:focus{
- outline:?????;
-} */
-
-/* remember to highlight inserts somehow! */
-ins{
- text-decoration:none;
-}
-del{
- text-decoration:line-through;
-}
-
-table{
- border-collapse:collapse;
- border-spacing:0;
-}
View
169 css/style.css
@@ -1,169 +0,0 @@
-/*
- * Copyright 2012 Massimiliano Marcon (http://marcon.me)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-@import url(https://fonts.googleapis.com/css?family=Graduate);
-
-body {
- background-color: #fff;
- color: #222;
- font-weight: 100;
- font-size: 14px;
- font-family: 'Graduate', cursive;
-}
-
-header {
- padding: 10px 0;
- background-color: #222;
- position: relative;
- z-index: 10;
-}
-
-h1 {
- color: #afeeee;
- font-size: 30px;
- font-family: 'Graduate', cursive;
- padding: 0 10px;
-}
-
-h2 {
- position: fixed;
- right: 10px;
- bottom: 0;
- padding: 5px;
- background-color: #222;
- color: white;
- font-size: 12px;
- line-height: 1.5;
-}
-
-h4 {
- background-color: #222;
- color: #afeeee;
- padding: 10px;
- width: 33%;
- margin-top: 20px;
-}
-
-a:link,
-a:visited,
-a:active {
- color: #4169e1;
- text-decoration: none;
-}
-
-a:hover {
- color: #6495ED;
-}
-
-#map {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- width: 66%;
- box-shadow: 5px 0 20px #222;
- z-index: 9;
-}
-
-dl, ul {
- width: 33%;
- font-size: 20px;
- padding: 10px;
-}
-
-ul {
- font-size: 16px;
-}
-
-li {
- padding: 3px;
-}
-
-dt {
- margin-top: 50px;
-}
-
-dt:first-child {
- margin-top: 10px;
-}
-
-dd:before {
- content: "";
- display: block;
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 0 15px 15px 15px;
- border-color: transparent transparent #222222 transparent;
- position: absolute;
- top: -10px;
-}
-
-dd {
- position: relative;
- top: -3px;
- color: #fff;
- background-color: #222;
- font-size: 16px;
- padding: 10px;
- margin: 0 20px 0 0;
- border-radius: 10px;
-}
-
-a.hm:link,
-a.hm:visited {
- display: inline-block;
- background-color: #ff6347;
- color: #222;
- text-align: left;
- font-size: 20px;
- opacity: 0.7;
- /*border: 1px solid #999;*/
- box-shadow: inset -1px -1px 8px #dc143c;
- padding: 10px 20px 10px 35px;
- border-radius: 6px;
- margin-bottom: 10px;
- background-position: 10px center;
- background-repeat: no-repeat;
-}
-
-a.hm:hover,
-a.hm:active {
- opacity: 0.85;
- box-shadow: inset 1px 1px 6px #dc143c;
-}
-
-.density {
- background-image: url(../img/hangout.png);
-}
-
-.value {
- background-image: url(../img/heart-mini.png);
-}
-
-.bubble {
- font-size: 9px;
- font-family: 'Graduate', cursive;
- line-height: 1.3;
-}
-
-.bubble b {
- color: #ff6347;
-}
-
-.nm_bubble_content {
- padding: 8px !important;
-}
View
0  docs/docco.css → docco.css
File renamed without changes
View
144 docs/main.html
@@ -1,144 +0,0 @@
-<!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>
View
BIN  img/circle.png
Deleted file not rendered
View
BIN  img/hangout.png
Deleted file not rendered
View
BIN  img/heart-mini.png
Deleted file not rendered
View
BIN  img/heart.png
Deleted file not rendered
View
BIN  img/me.png
Deleted file not rendered
View
189 index.html
@@ -1,55 +1,144 @@
-<!--
- Copyright 2012 Massimiliano Marcon (http://marcon.me)
+<!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>
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
+<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>
- http://www.apache.org/licenses/LICENSE-2.0
+ <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>
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
+<p><code>{value: &lt;# of checkins&gt;,
+ latitude: &lt;lat&gt;,
+ longitude: &lt;lng&gt;,
+ name: &lt;place name&gt;}</code></p>
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8" />
- <title>Neighborhood Hangouts</title>
- <link rel="stylesheet" type="text/css" href="css/normalize.css" />
- <link rel="stylesheet" type="text/css" href="css/style.css" />
-</head>
+<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>
-<body>
- <header>
- <h1>Neighborhood Hangouts</h1>
- <h2>Powered by <a href="http://api.maps.nokia.com" title="Nokia Maps API">Nokia Maps</a><br/>and <a href="http://foursquare.com" title="Foursquare">Foursquare</a></h2>
- </header>
-
- <!--http://localhost:8000/?p=52.516769,13.383015-->
-
- <dl>
- <dt><a href="#" class="hm density" title="In what area your neighbors hang out the most">Hangouts</a></dt>
- <dd>Visualize on the map the areas where your neighbors like to hang out.</dd>
- <dt><a href="#" class="hm value" title="In what place your neighbors hang out the most">Popular spots</a></dt>
- <dd>Display on the map the spots that people like the most in your neighborhood.</dd>
- </dl>
-
- <section class="interesting">
- <h4>Interesting Neighborhoods</h4>
- <ul>
- <li><a href="?p=52.516417,13.379478">Berlin</a></li>
- <li><a href="?p=36.116999,-115.173892">Las Vegas</a></li>
- <li><a href="?p=41.890002,12.49464">Rome</a></li>
- </ul>
- <section>
-
- <section id="map"></section>
-
-<script type="text/javascript" src="https://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script>
-<script type="text/javascript" src="js/main.js"></script>
-</body>
-</html>
+</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
View
229 js/main.js
@@ -1,229 +0,0 @@
-/*
- * Copyright 2012 Massimiliano Marcon (http://marcon.me)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * 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';
-
- var init, locationFound, locationNotFound, cities, attachEventHandlers, dataReady,
- API = {
- id: 'C2Cse_31xwvbccaAIAaP',
- 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;
- 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: {
- latitude: parseFloat(m[1]),
- longitude: parseFloat(m[2])
- }
- };
- 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);
- }
- else {
- locationNotFound();
- }
- };
-
- //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,
- components:[
- new nokia.maps.map.component.ZoomBar(),
- 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({
- //Greatest zoom level for which the overlay will provide tiles.
- max: 20,
- //Overall opacity of the heatmap.
- opacity: 0.45,
- //Heatmap is value based.
- type: "value",
- //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({
- max: 20,
- opacity: 0.8,
- //Heatmap is now density based.
- type: "density",
- 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 {
- //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)) {
- if(e.target.classList.contains('value')) {
- map.overlays.remove(density);
- map.overlays.add(value);
- } else {
- map.overlays.remove(value);
- map.overlays.add(density);
- }
- }
- }, 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);
Please sign in to comment.
Something went wrong with that request. Please try again.