HW10-HyoSungKim

examples-leaflet-plugins/example1/index.html

@@ -9,6 +9,8 @@
 
     <!-- Add leaflet plugins here -->
     <!-- Navigate to: https://leafletjs.com/plugins.html to find official leaflet plugins -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
 
 
 
@@ -35,7 +37,7 @@ <h1 id="title">geolocation</h1>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js" integrity="sha256-O4179En8zabOlPYBNvGp8cF0uh0vnSZpW4Q6Ul1h+8c=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
     <!-- add leaflet plugin here -->
-
+    <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
     <script src="js/main.js"></script>
   </body>
 </html>

examples-leaflet-plugins/example1/js/main.js

@@ -16,10 +16,12 @@ var Stamen_TonerLite = L.tileLayer(basemapURL, {
   ext: 'png'
 }).addTo(map);
 
+L.control.locate().addTo(map);
+
 
 var url = 'https://gist.githubusercontent.com/rossbernet/739cfd731519c8b49dd063779adedbd7/raw/cb1ca853899e9833f02ca0bc272dee74937c5d0c/squaresPoly.geojson';
 var jsondata;
 $.ajax(url).done(function(res) {
   jsondata = JSON.parse(res);
-  layer = L.geoJSON(jsondata).addTo(map)
+  layer = L.geoJSON(jsondata).addTo(map);
 });

examples-leaflet-plugins/example2/index.html

@@ -32,6 +32,7 @@ <h1 id="title">geocoding</h1>
     <!-- plugin -->
     <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
 
+
     <script src="js/main.js"></script>
   </body>
 </html>

examples-leaflet-plugins/example2/js/main.js

@@ -23,5 +23,5 @@ var url = 'https://gist.githubusercontent.com/rossbernet/739cfd731519c8b49dd0637
 var jsondata;
 $.ajax(url).done(function(res) {
   jsondata = JSON.parse(res);
-  layer = L.geoJSON(jsondata).addTo(map)
+  layer = L.geoJSON(jsondata).addTo(map);
 });

lab/lab1/js/draw.js

@@ -71,6 +71,7 @@ Moving your mouse outside of the circle should remove the highlighting.
 
 // Global Variables
 var myRectangle;
+var myRectangles=[];
 
 // Initialize Leaflet Draw
 var drawControl = new L.Control.Draw({
@@ -90,4 +91,21 @@ map.on('draw:created', function (e) {
     var type = e.layerType; // The type of shape
     var layer = e.layer; // The Leaflet layer for the shape
     var id = L.stamp(layer); // The unique Leaflet ID for the layer
+
+    //Task 2 ~ 4;
+    if (myRectangle) {
+      map.removeLayer(myRectangle);
+      $('#shapes').empty();
+    }
+    myRectangle = layer;
+    map.addLayer(layer);
+    $('#shapes').append('<div class="shape" data-leaflet-id='+id+'"><h1>Current ID:'+id+'</h1></div>');
+
+    // //Stretch goal: Task 5
+    // myRectangles.push(layer);
+    // console.log(myRectangles);
+    // $('#shapes').append('<div class="shape" data-leaflet-id='+id+'"><h1>Current ID:'+id+'</h1></div>');
+    // map.addLayer(layer);
+
+
 });