first commit

SaurabhKumar171 · Aug 8, 2023 · 002b2ad · 002b2ad
commit 002b2ad
Show file tree

Hide file tree

Showing 5 changed files with 568 additions and 0 deletions.
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="./styles.css">
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+    </head>
+    <body>
+
+        <main>
+             <div class="store-list">
+                <div class="heading">
+                    <h2>Our outlets</h2>
+                </div>
+
+                <ul class="list">
+                </ul>
+             </div>
+             <div id="map">
+             </div>
+        </main>
+
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+        <script src="./stores.js"></script>
+        <script src="./script.js"></script>
+    </body>
+</html>
+
+
diff --git a/script.js b/script.js
@@ -0,0 +1,85 @@
+const myMap =L.map('map').setView([22.9074872, 79.07306671], 5);
+
+const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+
+const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Coded by saurabh';
+
+const tiles=L.tileLayer(tileUrl,{attribution});
+tiles.addTo(myMap);
+
+
+function generateList(){
+    const ul = document.querySelector(".list");
+
+    storeList.forEach((shop) => {
+        const li=document.createElement("li");
+        const div =document.createElement("div");
+        const a =document.createElement("a");
+        const p =document.createElement("p");
+
+        a.addEventListener('click',()=>{
+            flyToShop(shop);
+        })
+
+        div.classList.add("shop-item");
+        a.innerText=shop.properties.name;
+        a.href="#";
+        p.innerText=shop.properties.address;
+
+        div.appendChild(a);
+        div.appendChild(p);
+
+        li.appendChild(div);
+        ul.appendChild(li);
+
+    });
+}
+
+generateList();
+
+
+function makePopupContent(shop){
+   return `
+          <div>
+              <h4>${shop.properties.name}</h4>
+              <p>${shop.properties.address}</p>
+
+              <div class="phone-number">
+              <a href="tel:${shop.properties.phone}">${shop.properties.phone}</a>
+              </div>
+          </div>      
+   `;
+}
+
+var myIcon= L.icon({
+    iconUrl:"icon.png",
+    iconSize:[30,40]
+});
+
+
+function onEachFeature(feature,layer){
+     layer.bindPopup(makePopupContent(feature),{closeButton:false,offset:L.point(0,-8)});
+}
+
+const shopsLayer= L.geoJSON(storeList,{
+    onEachFeature:onEachFeature,
+    pointToLayer:function(feature, latlng){
+        return L.marker(latlng,{icon:myIcon});
+    }
+})
+
+shopsLayer.addTo(myMap);
+
+
+
+function flyToShop(store){
+
+    let lat =store.geometry.coordinates[1];
+    let lng=store.geometry.coordinates[0];
+    myMap.flyTo([lat,lng],15,{
+        duration:3
+    });
+
+    L.popup({closeButton:false,offset:L.point(0,-8)}).setLatLng([lat,lng]).setContent(makePopupContent(store)).openOn(myMap);
+}
+