RM11760: Géolocalisation: Centrer sur sa position

implement #8
axelor · Apr 27, 2018 · 0b892bd · 0b892bd
1 parent 2bf7106
commit 0b892bd
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 1 deletion.
diff --git a/modules/abs b/modules/abs
diff --git a/src/main/webapp/map/gmap-objs.html b/src/main/webapp/map/gmap-objs.html
@@ -28,6 +28,7 @@
     <link href="../lib/font-awesome/css/font-awesome.css" rel="stylesheet"/>
     <script src="../lib/jquery.ui/js/jquery.js" type="text/javascript"></script>
     <script type="text/javascript" src="js/markerclusterer.js"></script>
+    <script type="text/javascript" src="js/your_location.js"></script>
     <script type="text/javascript" src="js/gmap_mainpage.js"></script>
   </head>
   <body>

diff --git a/src/main/webapp/map/gmaps.html b/src/main/webapp/map/gmaps.html
@@ -30,6 +30,8 @@
     <!-- <script type="text/javascript"
       src="https://maps.googleapis.com/maps/api/js?sensor=false&region=FR"> 
     </script> -->
+    <script src="../lib/jquery.ui/js/jquery.js" type="text/javascript"></script>
+    <script type="text/javascript" src="js/your_location.js"></script>
     <script type="text/javascript">
 	    var query = window.location.search.substring(1);
 		query = decodeURIComponent(query.replace(/\+/g, '%20'));
@@ -82,6 +84,7 @@
 		      title: title || "Here!"
 			  });
 
+			addYourLocationButton(map);
 	    }
 
 

diff --git a/src/main/webapp/map/js/gmap_mainpage.js b/src/main/webapp/map/js/gmap_mainpage.js
@@ -154,6 +154,8 @@
                             map.setZoom(15);
                         }
                     }
+
+                    addYourLocationButton(map);
                 } // end if
             });
 

diff --git a/src/main/webapp/map/js/your_location.js b/src/main/webapp/map/js/your_location.js
@@ -0,0 +1,86 @@
+function addYourLocationButton(map, marker) {
+    if (marker === undefined) {
+        var myloc = new google.maps.Marker({
+            clickable: false,
+            icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
+                                                            new google.maps.Size(22,22),
+                                                            new google.maps.Point(0,18),
+                                                            new google.maps.Point(11,11)),
+            shadow: null,
+            zIndex: 999,
+            map: map
+        });
+
+        if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
+            var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
+            myloc.setPosition(me);
+        }, function(error) {
+            alert(error);
+        });
+
+        marker = myloc;
+    }
+
+    var controlDiv = document.createElement('div');
+
+    var firstChild = document.createElement('button');
+    firstChild.style.backgroundColor = '#fff';
+    firstChild.style.border = 'none';
+    firstChild.style.outline = 'none';
+    firstChild.style.width = '28px';
+    firstChild.style.height = '28px';
+    firstChild.style.borderRadius = '2px';
+    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
+    firstChild.style.cursor = 'pointer';
+    firstChild.style.marginRight = '10px';
+    firstChild.style.padding = '0px';
+    firstChild.title = 'Your Location';
+    controlDiv.appendChild(firstChild);
+
+    var secondChild = document.createElement('div');
+    secondChild.style.margin = '5px';
+    secondChild.style.width = '18px';
+    secondChild.style.height = '18px';
+    secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)';
+    secondChild.style.backgroundSize = '180px 18px';
+    secondChild.style.backgroundPosition = '0px 0px';
+    secondChild.style.backgroundRepeat = 'no-repeat';
+    secondChild.id = 'you_location_img';
+    firstChild.appendChild(secondChild);
+
+    google.maps.event.addListener(map, 'dragend', function() {
+        $('#you_location_img').css('background-position', '0px 0px');
+    });
+
+    firstChild.addEventListener('click', function() {
+        var imgX = '0';
+        var animationInterval = setInterval(function() {
+            if (imgX == '-18')
+                imgX = '0';
+            else
+                imgX = '-18';
+            $('#you_location_img').css('background-position', imgX + 'px 0px');
+        }, 500);
+        if (navigator.geolocation) {
+            navigator.geolocation
+                    .getCurrentPosition(function(position) {
+                        var latlng = new google.maps.LatLng(
+                                position.coords.latitude,
+                                position.coords.longitude);
+                        marker.setPosition(latlng);
+                        map.setCenter(latlng);
+                        clearInterval(animationInterval);
+                        $('#you_location_img').css('background-position',
+                                '-144px 0px');
+                    });
+        } else {
+            clearInterval(animationInterval);
+            $('#you_location_img').css('background-position', '0px 0px');
+        }
+    });
+
+    controlDiv.index = 1;
+    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
+}
+
+