projects / prog / leaflet-demos.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 077df4d)
Added second map to "just_a_map" demo. develop
authorChuck Scott <cscott@gaslightmedia.com>
Fri, 7 Dec 2018 16:46:57 +0000 (11:46 -0500)
committerChuck Scott <cscott@gaslightmedia.com>
Fri, 7 Dec 2018 16:46:57 +0000 (11:46 -0500)
Getting_Started/just_a_map.html patch | blob | history

diff --git a/Getting_Started/just_a_map.html b/Getting_Started/just_a_map.html
index 701b84b..fca88cb 100755 (executable)
--- a/Getting_Started/just_a_map.html
+++ b/Getting_Started/just_a_map.html
@@ -5,23 +5,32 @@
         <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
     </head>
     <body>
-      
+
         <!-- Leaflet Map -->
-        <h2>Leaflet</h2>       
-        <div id="LeafletMap" style="height:100%; width: 100%;"></div>
-        
+        <h2>Leaflet Basic Demo</h2>
+        <p>This demo shows how to put up a basic map. We also added a second map to the demo to show how to keep them separate.</p>
+        <h3>Map Name: LeafletMap</h3>
+        <div id="LeafletMap" style="height:40%; width: 90%; margin: 2em; "></div>
+        <h3>Map Name: LeafletMap2</h3>
+        <div id="LeafletMap2" style="height:40%; width: 90%; margin: 2em;"></div>
+
         <script>
-        
+
             // Map
             var mymap = L.map('LeafletMap').setView([45.4, -84.92], 12);
-            
+            var mymap2 = L.map('LeafletMap2').setView([45.4, -84.92], 12);
+
             // Tile server - Uses GLM Map Key
             L.tileLayer('https://maps.gaslightmedia.com/08172018-7c3a5c166644aa4b8dd6ad2ba7148015/{z}/{x}/{y}.png', {
                 attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
                 maxZoom: 18
             }).addTo(mymap);
-        
+            L.tileLayer('https://maps.gaslightmedia.com/08172018-7c3a5c166644aa4b8dd6ad2ba7148015/{z}/{x}/{y}.png', {
+                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
+                maxZoom: 18
+            }).addTo(mymap2);
+
         </script>
-                 
+
     </body>
 </html>