Permalink
Browse files

Styling changes

  • Loading branch information...
1 parent 3ec77fc commit 7e684d38ba18fa7ff33d830182b961bd0e253083 @mmarcon committed Sep 29, 2012
Showing with 135 additions and 93 deletions.
  1. +105 −76 css/style.css
  2. BIN img/hangout.png
  3. BIN img/heart-mini.png
  4. BIN img/heart.png
  5. +9 −8 index.html
  6. +21 −9 js/main.js
View
@@ -1,174 +1,203 @@
-/*
- * Copyright 2012 Massimiliano Marcon (http://marcon.me)
+/* * 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.
- */
+ * Licensed under the Apache License, Version 2.0 (the "License"); */
@import url(http://fonts.googleapis.com/css?family=Graduate);
body {
- font-family: 'Graduate', cursive;
- font-weight: 100;
- font-size: 14px;
background-color: #fff;
color: #222;
+ font-weight: 100;
+ font-size: 14px;
+ font-family: 'Graduate', cursive;
}
header {
- background-color: #222;
padding: 10px 0;
+ background-color: #222;
+ position: relative;
+ z-index: 10;
}
h1 {
- font-family: 'Graduate', cursive;
+ color: #afeeee;
font-size: 30px;
+ font-family: 'Graduate', cursive;
+ padding: 0 20px;
text-align: center;
- color: #afeeee;
}
h2 {
position: fixed;
right: 10px;
bottom: 0;
+ padding: 5px;
background-color: #222;
color: white;
- line-height: 1.5;
- padding: 5px;
font-size: 12px;
+ line-height: 1.5;
}
a:link,
a:visited,
a:active {
- text-decoration: none;
color: #4169e1;
+ text-decoration: none;
}
a:hover {
color: #6495ED;
}
-#map {
- width: 400px;
- height: 400px;
+/*#map {
position: absolute;
top: 50%;
left: 50%;
margin: -205px 0 0 -205px;
+ width: 400px;
+ height: 400px;
border: 10px solid #fff;
box-shadow: 0 0 8px #ccc;
- border-radius: 4px;
+}*/
+#map {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ width: 50%;
+ border-left: 1px solid #666;
+ /*box-shadow: 0 0 8px #ccc;*/
+ z-index: 9;
+}
+
+dl {
+ width: 45%;
+ font-size: 20px;
+ padding: 10px;
+}
+
+dt {
+ margin-top: 50px;
+}
+
+dd {
+ color: #222;
+ font-size: 24px;
}
a.hm:link,
a.hm:visited {
- width: 100px;
- height: 100px;
- border-radius: 50px;
+ display: inline-block;
background-color: #ff6347;
- display: block;
- line-height: 100px;
- text-align: center;
color: #222;
- font-size: 24px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -50px;
- opacity: 0.8;
+ text-align: left;
+ font-size: 18px;
+ 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: 1;
+ opacity: 0.85;
+ box-shadow: inset 1px 1px 6px #dc143c;
}
.density {
- margin-left: -400px;
+ background-image: url(../img/hangout.png);
}
.value {
- margin-left: 300px;
+ background-image: url(../img/heart-mini.png);
}
.tooltip {
- font-weight: normal;
- text-transform: none;
- background: #333;
+ position: absolute;
bottom: 100%;
- color: #fff;
+ left: 50%;
display: block;
margin-bottom: 15px;
- opacity: 0;
+ margin-left: -95px;
padding: 20px;
- pointer-events: none;
- position: absolute;
width: 150px;
- left: 50%;
- margin-left: -95px;
- line-height: 1.3;
+ background: #333;
+ color: #fff;
+ text-transform: none;
+ font-weight: normal;
font-size: 16px;
- -webkit-transform: translateY(10px);
- -moz-transform: translateY(10px);
- -ms-transform: translateY(10px);
- -o-transform: translateY(10px);
- transform: translateY(10px);
+ line-height: 1.3;
+ opacity: 0;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
- -ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
+ -webkit-transform: translateY(10px);
+ -moz-transform: translateY(10px);
+ -o-transform: translateY(10px);
+ -ms-transform: translateY(10px);
+ -ms-transition: all .25s ease-out;
+ transform: translateY(10px);
+ pointer-events: none;
}
.tooltip:before {
+ position: absolute;
bottom: -20px;
- content: " ";
- display: block;
- height: 20px;
left: 0;
- position: absolute;
+ display: block;
width: 100%;
+ height: 20px;
+ content: " ";
}
.tooltip:after {
- border-left: solid transparent 10px;
- border-right: solid transparent 10px;
- border-top: solid #222 10px;
+ position: absolute;
bottom: -10px;
- content: " ";
- height: 0;
left: 50%;
margin-left: -13px;
- position: absolute;
width: 0;
+ height: 0;
+ border-top: solid #222 10px;
+ border-right: solid transparent 10px;
+ border-left: solid transparent 10px;
+ content: " ";
}
-a.hm:hover .tooltip {
+/*a.hm:hover .tooltip {
opacity: 1;
- pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
- -ms-transform: translateY(0px);
-o-transform: translateY(0px);
+ -ms-transform: translateY(0px);
transform: translateY(0px);
-}
+ pointer-events: auto;
+}*/
.what-is-popular {
+ display: none;
+ margin: 15px auto;
+ padding-left: 60px;
width: 348px;
min-height: 48px;
- line-height: 48px;
background: transparent url(../img/heart.png) no-repeat center left;
- padding-left: 60px;
font-size: 20px;
- margin: 15px auto;
- display: none;
+ line-height: 48px;
+}
+
+.bubble {
+ font-size: 9px;
+ font-family: 'Graduate', cursive;
+ line-height: 1.3;
+}
+
+.bubble b {
+ color: #ff6347;
+}
+
+.nm_bubble_content {
+ padding: 8px !important;
}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -26,17 +26,18 @@
<body>
<header>
<h1>Neighborhood Hangouts</h1>
- <h2>Powered by <a href="http://api.maps.nokia.com" title="Nokia Maps API">Nokia Maps</a></h2>
+ <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 maps 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>
- <ul>
- <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>
- <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>
- </ul>
- <section class="what-is-popular">
- <span class="popular"></span>
- </section>
<section id="map"></section>
<script type="text/javascript" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script>
View
@@ -25,7 +25,7 @@
FSQ = {
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;
+ map, mapEl = doc.querySelector('#map'), density, value, infoBubbles;
init = function(){
@@ -56,15 +56,18 @@
jsonp;
nokia.maps.util.ApplicationContext.set({"appId": API.id, "authenticationToken": API.token});
+ infoBubbles = new nokia.maps.map.component.InfoBubbles()
map = new nokia.maps.map.Display(mapEl,
{center: [lat, lon],
- zoomLevel: 17,
+ zoomLevel: 16,
components:[
- new nokia.maps.map.component.ZoomBar()
+ new nokia.maps.map.component.ZoomBar(),
+ new nokia.maps.map.component.Behavior(),
+ infoBubbles
]});
map.set("baseMapType", nokia.maps.map.Display.SMARTMAP);
map.set("maxZoomLevel", 18);
- map.set("minZoomLevel", 16);
+ map.set("minZoomLevel", 15);
jsonp = doc.createElement('script');
doc.querySelector('head').appendChild(jsonp);
@@ -87,18 +90,27 @@
latitude: place.location.lat,
longitude: place.location.lng,
name: place.name};
- });
+ }), fav, favMarker;
normalizedData.sort(function(o1, o2){
return o1.value - o2.value;
});
- // console.log(normalizedData);
+ console.log(normalizedData);
// console.log(data);
- doc.querySelector('.popular').textContent = normalizedData[normalizedData.length - 1].name;
- doc.querySelector('.what-is-popular').style.display = 'block';
+ fav = normalizedData[normalizedData.length - 1];
+ 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);
+
+ infoBubbles.openBubble('<span class="bubble"><b>Most popular place:</b><br/>' + fav.name + '<br/>Checkins: '+ fav.value + '</span>',
+ [fav.latitude, fav.longitude],
+ function(){},
+ true);
value = new nokia.maps.heatmap.Overlay({
// This is the greatest zoom level for which the overlay will provide tiles
@@ -134,7 +146,7 @@
alert('uhmm... something wrong with Foursquare API')
}
};
- doc.querySelector('ul').addEventListener('click', function(e){
+ doc.querySelector('dl').addEventListener('click', function(e){
e.preventDefault();
if(e.target.tagName.match(/a/i)) {
if(e.target.classList.contains('value')) {

0 comments on commit 7e684d3

Please sign in to comment.