leaflet plugin testing only

4cbbe6ce · Oleg Dzhimiev · 42259844 · 4cbbe6ce · 4cbbe6ce · 4cbbe6ce
Commit 4cbbe6ce authored Jun 03, 2017 by Oleg Dzhimiev
Hide whitespace changes
Inline Side-by-side

Showing with 147 additions and 0 deletions

map.css js/map.css +26 -0

map.js js/map.js +103 -0

map.html map.html +18 -0

No files found.
--- a/js/map.css
+++ b/js/map.css
+body {
+    padding: 0;
+    margin: 0;
+}
+html, body, #leaflet_map {
+    height: 100vh;
+    width: 100vw;
+}
+
+.measurementtooltip{
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 0px 3px;
+  margin:14px 0px 0px 5px;
+  font-weight: normal;
+  border-radius: 1px;
+}
+
+.leaflet-tooltip-left.measurementtooltip::before {
+  border: 0px;
+  border-left-color: cyan;
+}
+
+.leaflet-tooltip-right.measurementtooltip::before {
+  border: 0px;
+  border-right-color: cyan;
+}
\ No newline at end of file
--- a/js/map.js
+++ b/js/map.js
+/* 
+ * TODO:
+ *    * 
+ * 
+ */
+
+// http://stackoverflow.com/questions/9394190/leaflet-map-api-with-google-satellite-layer
+
+// http://leafletjs.com/examples/extending/extending-1-classes.html
+// - extend or include
+
+$(function(){
+  light_init();
+});
+
+function light_init(){
+  
+  $.ajax({
+    url: "kml/test.kml",
+    success: function(data){
+
+      var marker = [
+        parseFloat($(data).find("Camera").find("latitude").text()),
+        parseFloat($(data).find("Camera").find("longitude").text())
+      ];
+      
+      var heading = parseFloat($(data).find("Camera").find("longitude").text());
+      
+      init_maps(marker);
+
+    },
+  });
+  
+  
+}
+
+var map;
+var markers = Array();
+
+function init_maps(center){
+
+  var elphelinc = center;//[40.7233861, -111.9328843];
+  
+  // https: also suppported.
+  var Esri_WorldImagery = L.tileLayer(
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 
+    {
+      maxZoom: 21,
+      attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+    }
+  );
+
+  var googleSat = L.tileLayer(
+    'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+    {
+      maxZoom: 21,
+      attribution: 'Many thanks to Google for our happy childhood',
+      subdomains:['mt0','mt1','mt2','mt3'],
+    }
+  );
+  
+  var OSMTiles = L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', 
+    {
+      maxZoom: 21,
+      attribution: 'Map data and images &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
+    }
+  );
+  
+  map = L.map('leaflet_map',{
+    layers:[googleSat]
+  }).setView(elphelinc, 17);
+
+  var baseMaps = {
+    "Esri world imagery": Esri_WorldImagery,
+    "Google": googleSat,
+    "Open Street Map": OSMTiles
+  };
+  
+  //Esri_WorldImagery.addTo(map);
+  //googleSat.addTo(map);
+  
+  //custom control:
+  //http://www.coffeegnome.net/control-button-leaflet/
+  
+  L.control.layers(baseMaps).addTo(map);
+ 
+  drawCamera(elphelinc);
+  
+}
+
+function drawCamera(basepoint){
+  
+  var circle = L.cameraViewMarker(basepoint, {
+      color: '#191',
+      fillColor: '#0f3',
+      fillOpacity: 0.5,
+      radius: 10,
+      heading: 45,
+      fov: 45*Math.PI/180,
+      id: "basecircle"
+  }).addTo(map);
+
+}
--- a/map.html
+++ b/map.html
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <title>Ze Map</title>
+  <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.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>
+  <link rel='stylesheet' type='text/css' href='js/leaflet/leaflet.css'></link>
+  <link rel='stylesheet' type='text/css' href='js/index.css'></link>
+  <link rel='stylesheet' type='text/css' href='js/map.css'></link>
+</head>
+<body>
+  <div id="leaflet_map"></div>
+</body>
+</html>
\ No newline at end of file