criando clusters no mapa e correções

joelxr · Jul 29, 2016 · 6032125 · 6032125
1 parent d5a1a68
commit 6032125
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 19 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -36,7 +36,7 @@
     <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.defaut.css">
+    <link type="text/css" rel="stylesheet" href="{{ site.baseurl }}/assets/css/leaflet.markercluster.default.css">
 
     <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
 </head>
diff --git a/assets/images/icons/map_marker.png b/assets/images/icons/map_marker.png
diff --git a/assets/sass/_base.scss b/assets/sass/_base.scss
@@ -72,7 +72,7 @@ ul, ol {
 li {
     > ul,
     > ol {
-         margin-bottom: 0;
+        margin-bottom: 0;
     }
 }
 
@@ -204,3 +204,44 @@ pre {
         }
     }
 }
+
+
+#geolocate {
+    font-weight: 600;
+    background: #fff;
+    position: absolute;
+    top: 1%;
+    left: 10%;
+    width: 158px;
+    margin-left: -80px;
+    z-index: 1000;
+    font-size: 21px;
+    text-align: center;
+    padding: 10px 0;
+    color: #3C4E5A;
+    display: block;
+    border: 1px solid #BBB;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    text-decoration: none;
+}
+
+#geolocate:hover {
+    background: #ECF5FA;
+}
+
+@media only screen and (min-width: 768px) {
+    #geolocate {
+        left: 8%;
+    }
+}
+@media only screen and (max-width: 768px) {
+    #geolocate {
+        left: 40%;
+    }
+}
+@media only screen and (max-width: 320px) {
+    #geolocate {
+        left: 40%;
+    }
+}
diff --git a/mapa/index.html b/mapa/index.html
@@ -3,13 +3,14 @@
 ---
 <div class="video-container">
     <div id='map' style="position:absolute; top:0; bottom:0; width:100%;"></div>
+    <a href='#' id='geolocate'>PERTO DE MIM</a>
     <script>
 
 L.mapbox.accessToken = 'pk.eyJ1Ijoiam9lbHhyIiwiYSI6ImNpcTI3b3l5MzAxM3ZmaW5uMDBnMjYxd2IifQ.8HAKtUOggFVWSy1OlDvx2Q';
 var map = L.mapbox.map('map', 'mapbox.streets').setView([-3.742394, -38.511909], 13) ;
-var myLayer = L.mapbox.featureLayer().addTo(map);
+var markers = L.markerClusterGroup();
 
-var geojson = {
+var json = {
     type: 'FeatureCollection',
     features: [
     {% for post in site.posts %}
@@ -53,29 +54,27 @@
             {% 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 %}
-            'marker-size': 'large',
-            'marker-color': '#BE9A6B',
-            'marker-symbol': 'cafe'
+            icon : {
+                iconUrl : "{{ site.baseurl }}/assets/images/icons/map_marker.png",
+                iconSize : [32,32]
+            }
         }
     },
     {% endfor %}
     ]
 };
 
-myLayer.on('mouseover', function(e) {
-    e.layer.openPopup();
+var geojson = L.geoJson(json, {
+    onEachFeature: function (feature, layer) {
+        layer.setIcon(L.icon(feature.properties.icon));
+    }
 });
 
-myLayer.on('ready', function(e) {
-    map.fitBounds(myLayer.getBounds());
-    var clusterGroup = new L.MarkerClusterGroup();
-    e.target.eachLayer(function(layer) {
-        clusterGroup.addLayer(layer);
-    });
-    map.addLayer(clusterGroup);
-});
+markers.addLayer(geojson);
+markers.addTo(map);
 
-myLayer.on('layeradd', function(e) {
+markers.on('click', function(e) {
+    map.panTo(e.layer.getLatLng(),16);
     var marker = e.layer;
     var feature = marker.feature;
     var popupContent =
@@ -88,9 +87,29 @@
         '<li><i class="fa fa-credit-card"></i> ' + feature.properties.price + '</li>' +
         '</ul>';
     marker.bindPopup(popupContent, {closeButton: true, minWidth: 320});
+    marker.openPopup();
 });
 
-myLayer.setGeoJSON(geojson);
+if (!navigator.geolocation) {
+    geolocate.innerHTML = 'Geolocation is not available';
+} else {
+    map.locate();
+    geolocate.onclick = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        map.locate();
+    };
+} 
+
+map.on('locationfound', function(e) {
+    map.fitBounds(e.bounds);
+    map.setZoom(15);
+    geolocate.parentNode.removeChild(geolocate);
+});
+
+map.on('locationerror', function() {
+    geolocate.innerHTML = 'Position could not be found';
+});
     </script>