Add a crosshair for the center point to correspond to the center coor…

…ds being displayed.
aaronr · Nov 14, 2013 · 50bc1fc · 50bc1fc
1 parent 58a564d
commit 50bc1fc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/images/crosshair.png b/images/crosshair.png
diff --git a/js/bbox.js b/js/bbox.js
@@ -439,6 +439,15 @@ $(function() {
 
     map.addControl(lsidebar);
 
+    // Add in a crosshair for the map
+    var crosshairIcon = L.icon({
+        iconUrl: 'images/crosshair.png',
+        iconSize:     [20, 20], // size of the icon
+        iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
+    });
+    crosshair = new L.marker(map.getCenter(), {icon: crosshairIcon, clickable:false});
+    crosshair.addTo(map);
+
     // Initialize the FeatureGroup to store editable layers
     drawnItems = new L.FeatureGroup();
     map.addLayer(drawnItems);
@@ -525,6 +534,10 @@ $(function() {
     $('#mousepos').text(formatPoint(new L.LatLng(0, 0),'4326','gdal'));
     $('#mouseposmerc').text(formatPoint(new L.LatLng(0, 0),currentproj,'gdal'));
 
+    map.on('move', function(e) {
+        crosshair.setLatLng(map.getCenter());
+    });
+
     map.on('mousemove', function(e) {
         $('#mousepos').text(formatPoint(e.latlng,'4326','gdal'));
         $('#mouseposmerc').text(formatPoint(e.latlng,currentproj,'gdal'));