Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Added most popular place.

  • Loading branch information...
commit 3ec77fc0a259f1ebada85f3b5e0778e5a33acbae 1 parent 90e696c
Massimiliano Marcon authored
72 css/style.css
@@ -99,4 +99,76 @@ a.hm:active {
99 99
100 100 .value {
101 101 margin-left: 300px;
  102 +}
  103 +
  104 +.tooltip {
  105 + font-weight: normal;
  106 + text-transform: none;
  107 + background: #333;
  108 + bottom: 100%;
  109 + color: #fff;
  110 + display: block;
  111 + margin-bottom: 15px;
  112 + opacity: 0;
  113 + padding: 20px;
  114 + pointer-events: none;
  115 + position: absolute;
  116 + width: 150px;
  117 + left: 50%;
  118 + margin-left: -95px;
  119 + line-height: 1.3;
  120 + font-size: 16px;
  121 + -webkit-transform: translateY(10px);
  122 + -moz-transform: translateY(10px);
  123 + -ms-transform: translateY(10px);
  124 + -o-transform: translateY(10px);
  125 + transform: translateY(10px);
  126 + -webkit-transition: all .25s ease-out;
  127 + -moz-transition: all .25s ease-out;
  128 + -ms-transition: all .25s ease-out;
  129 + -o-transition: all .25s ease-out;
  130 + transition: all .25s ease-out;
  131 +}
  132 +
  133 +.tooltip:before {
  134 + bottom: -20px;
  135 + content: " ";
  136 + display: block;
  137 + height: 20px;
  138 + left: 0;
  139 + position: absolute;
  140 + width: 100%;
  141 +}
  142 +
  143 +.tooltip:after {
  144 + border-left: solid transparent 10px;
  145 + border-right: solid transparent 10px;
  146 + border-top: solid #222 10px;
  147 + bottom: -10px;
  148 + content: " ";
  149 + height: 0;
  150 + left: 50%;
  151 + margin-left: -13px;
  152 + position: absolute;
  153 + width: 0;
  154 +}
  155 +a.hm:hover .tooltip {
  156 + opacity: 1;
  157 + pointer-events: auto;
  158 + -webkit-transform: translateY(0px);
  159 + -moz-transform: translateY(0px);
  160 + -ms-transform: translateY(0px);
  161 + -o-transform: translateY(0px);
  162 + transform: translateY(0px);
  163 +}
  164 +
  165 +.what-is-popular {
  166 + width: 348px;
  167 + min-height: 48px;
  168 + line-height: 48px;
  169 + background: transparent url(../img/heart.png) no-repeat center left;
  170 + padding-left: 60px;
  171 + font-size: 20px;
  172 + margin: 15px auto;
  173 + display: none;
102 174 }
BIN  img/heart.png
7 index.html
@@ -31,9 +31,12 @@
31 31
32 32
33 33 <ul>
34   - <li><a href="#" class="density hm" title="In what area your neighbors hang out the most">Area</a></li>
35   - <li><a href="#" class="value hm" title="In what place your neighbors hang out the most">Place</a></li>
  34 + <li><a href="#" class="density hm" title="In what area your neighbors hang out the most">Areas<div class="tooltip">In what area your neighbors hang out the most</div></a></li>
  35 + <li><a href="#" class="value hm" title="In what place your neighbors hang out the most">Places<div class="tooltip">Popular places in your neighborhood</div></a></li>
36 36 </ul>
  37 + <section class="what-is-popular">
  38 + <span class="popular"></span>
  39 + </section>
37 40 <section id="map"></section>
38 41
39 42 <script type="text/javascript" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script>
22 js/main.js
@@ -29,8 +29,19 @@
29 29
30 30
31 31 init = function(){
  32 + var m, pos;
32 33 //app lives here
33 34 attachEventHandlers();
  35 + if((m = window.location.href.match(/\?p=(.+),(.+)/))) {
  36 + pos = {
  37 + coords: {
  38 + latitude: parseFloat(m[1]),
  39 + longitude: parseFloat(m[2])
  40 + }
  41 + };
  42 + locationFound(pos);
  43 + return;
  44 + }
34 45 if (navigator.geolocation) {
35 46 navigator.geolocation.getCurrentPosition(locationFound, locationNotFound);
36 47 }
@@ -78,7 +89,16 @@
78 89 name: place.name};
79 90 });
80 91
81   - console.log(data);
  92 + normalizedData.sort(function(o1, o2){
  93 + return o1.value - o2.value;
  94 + });
  95 +
  96 + // console.log(normalizedData);
  97 +
  98 + // console.log(data);
  99 +
  100 + doc.querySelector('.popular').textContent = normalizedData[normalizedData.length - 1].name;
  101 + doc.querySelector('.what-is-popular').style.display = 'block';
82 102
83 103 value = new nokia.maps.heatmap.Overlay({
84 104 // This is the greatest zoom level for which the overlay will provide tiles

0 comments on commit 3ec77fc

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