finalizando o mapa

joelxr · Jul 30, 2016 · 76a606d · 76a606d
1 parent 39d66a0
commit 76a606d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -33,10 +33,12 @@
     <!-- Mapbox -->
     <script type="text/javascript" src="{{ site.baseurl }}/assets/js/mapbox.js"></script>
     <script type="text/javascript" src="{{ site.baseurl }}/assets/js/leaflet.markercluster.js"></script>
+    <script type="text/javascript" src="{{ site.baseurl }}/assets/js/leaflet.awesome-markers.js"></script>
     <link type="text/css" rel="stylesheet" href="{{ site.baseurl }}/assets/css/mapbox.css">
     <link type="text/css" rel="stylesheet" href="{{ site.baseurl }}/assets/css/leaflet.css">
     <link type="text/css" rel="stylesheet" href="{{ site.baseurl }}/assets/css/leaflet.markercluster.css">
     <link type="text/css" rel="stylesheet" href="{{ site.baseurl }}/assets/css/leaflet.markercluster.default.css">
+    <link type="text/css" rel="stylesheet" href="{{ site.baseurl }}/assets/css/leaflet.awesome-markers.css">
 
     <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
 </head>
diff --git a/assets/sass/_base.scss b/assets/sass/_base.scss
@@ -212,8 +212,8 @@ pre {
     position: absolute;
     top: 1%;
     left: 10%;
-    width: 158px;
     margin-left: -80px;
+    width: 158px;
     z-index: 1000;
     font-size: 21px;
     text-align: center;
@@ -232,7 +232,7 @@ pre {
 
 @media only screen and (min-width: 768px) {
     #geolocate {
-        left: 8%;
+        left: 15%;
     }
 }
 @media only screen and (max-width: 768px) {

diff --git a/mapa/index.html b/mapa/index.html
@@ -3,7 +3,7 @@
 ---
 <div class="video-container">
     <div id='map' style="position:absolute; top:0; bottom:0; width:100%;"></div>
-    <a href='#' id='geolocate'>MINHA LOCALIZAÇÃO</a>
+    <a href='#' id='geolocate'><i class="fa fa-compass" aria-hidden="true"></i> LOCALIZAÇÃO</a>
     <script>
 
 L.mapbox.accessToken = 'pk.eyJ1Ijoiam9lbHhyIiwiYSI6ImNpcTI3b3l5MzAxM3ZmaW5uMDBnMjYxd2IifQ.8HAKtUOggFVWSy1OlDvx2Q';
@@ -33,6 +33,7 @@
             state: '{{ post.state }}',
             coffee: '{{ post.coffee }}',
             price: '{{ post.price }}',
+            rateValue: '{{ post.rate }}',
             {% if post.rate == 0.5 %}
             rate:  '<i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>',
             {% elsif post.rate == 1 %}
@@ -54,24 +55,32 @@
             {% elsif post.rate == 5 %}
             rate:  '<div class="yellow-text text-darken-3"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></div>',
             {% endif %}
-            icon : {
-                iconUrl : "{{ site.baseurl }}/assets/images/icons/map_marker.png",
-                iconSize : [32,32]
-            }
         }
     },
     {% endfor %}
     ]
 };
 
-  var redMarker = L.AwesomeMarkers.icon({
+var goodMarker = L.AwesomeMarkers.icon({
     icon: 'coffee',
-    markerColor: 'red'
+    prefix: 'fa',
+    spin: false,
+    markerColor: 'orange',
+    iconColor: 'white'
   });
 
+var badMarker = L.AwesomeMarkers.icon({
+    icon: 'coffee',
+    prefix: 'fa',
+    spin: false,
+    markerColor: 'gray',
+    iconColor: 'white'
+  });
+
+
 var geojson = L.geoJson(json, {
     onEachFeature: function (feature, layer) {
-        layer.setIcon(L.icon(feature.properties.icon));
+         layer.setIcon( (feature.properties.rateValue > 4.0) ? goodMarker : badMarker );
     }
 });
 
@@ -104,7 +113,7 @@
         e.stopPropagation();
         map.locate();
     };
-} 
+}
 
 map.on('locationfound', function(e) {
     map.fitBounds(e.bounds);