map markers testing only

js/map.css

@@ -10,9 +10,15 @@ html, body, #leaflet_map {
 .measurementtooltip{
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   padding: 0px 3px;
-  margin:14px 0px 0px 5px;
+/*   margin:20px 0px 0px 7px; */
   font-weight: normal;
   border-radius: 1px;
+  font-size: 16px;
+  display:block;
+  
+  position:absolute;
+  top: 16px;
+  left: 3px;
 }
 
 .leaflet-tooltip-left.measurementtooltip::before {
@@ -23,4 +29,32 @@ html, body, #leaflet_map {
 .leaflet-tooltip-right.measurementtooltip::before {
   border: 0px;
   border-right-color: cyan;
+}
+
+.hcontrol-button{
+    background-color: red;
+}
+
+.hcontrol-button:hover{
+    background-color: red;
+}
+
+.leaflet-interactive img{
+    user-select:none;
+    pointer-events: none;
+}
+
+.leaflet-interactive path{
+    user-select:none;
+    pointer-events: none;
+}
+
+.leaflet-tooltip-pane { z-index: 350; }
+
+.leaflet-control-zoom-in, .leaflet-control-zoom-out{
+    user-select:none;
+}
+
+.leaflet-control-zoom{
+    user-select:none;
 }
\ No newline at end of file

js/map.js

@@ -96,6 +96,7 @@ function drawCamera(basepoint){
       fillOpacity: 0.5,
       radius: 10,
       heading: 45,
+      h_control: true,
       fov: 45*Math.PI/180,
       id: "basecircle"
   }).addTo(map);

map.html

@@ -5,6 +5,7 @@
   <meta charset="utf-8"/>
   <script type='text/javascript' src='js/jquery-3.1.1.js'></script>
   <script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
+  <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker-controls.js'></script>
   <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.js'></script>
   <script type='text/javascript' src='js/leaflet/leaflet.camera-view-marker.measure.js'></script>
   <script type='text/javascript' src='js/map.js'></script>