diff --git a/icon.png b/icon.png new file mode 100644 index 0000000..c0caa98 Binary files /dev/null and b/icon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..67d3438 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + + + + + + + + +
+
+
+

Our outlets

+
+ + +
+
+
+
+ + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..2d98192 --- /dev/null +++ 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 = '© OpenStreetMap 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 ` +
+

${shop.properties.name}

+

${shop.properties.address}

+ +
+ ${shop.properties.phone} +
+
+ `; +} + +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); +} + diff --git a/stores.js b/stores.js new file mode 100644 index 0000000..c60c3db --- /dev/null +++ b/stores.js @@ -0,0 +1,350 @@ +const storeList = [ + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [72.82952788802635, 18.920675417289807] + }, + "properties": { + "name": "Pizza outlet 1", + "address": "Ground Floor, Strand Coffee House, PJ Ramchandani Marg, Apollo Bandar, Colaba, Mumbai, Maharashtra 400005, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [72.82815459698692, 18.94324557965778] + }, + "properties": { + "name": "Pizza outlet 2", + "address": "Shop No 7, Ground Floor, Chemox House, Hospital Lane, Barrack Rd, New Marine Lines, Mumbai, Maharashtra 400020, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [72.81416419471911, 18.958588300624903] + }, + "properties": { + "name": "Pizza outlet 3", + "address": "Mathew Rd, Charni Road East, Opera House, Gamdevi, Mumbai, Maharashtra 400004, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [72.82468278992283, 18.99953227821179] + }, + "properties": { + "name": "Pizza outlet 4", + "address": "Unit NO. 6D, Block-17, Phoenix Mills Compound, 462, Senapati Bapat Marg, Lower Parel, Mumbai, Maharashtra 400013, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [72.87461342204949, 19.079330659542418] + }, + "properties": { + "name": "Pizza outlet 5", + "address": "Shop No 2, Ground floor Kanakia Zillion, LBS Marg, Kurla West, Mumbai, Maharashtra 400070, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [72.87289714156712, 19.229326479731387] + }, + "properties": { + "name": "Pizza outlet 6", + "address": "No. 1-5, Building, Shop, No. 35, Evershine Millennium Paradise, Thakur Village, Kandivali East, Mumbai, Maharashtra 400101, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [77.20889596191188, 28.68797557618975] + }, + "properties": { + "name": "Pizza outlet 7", + "address": "Ground Floor,Shop No. A,Municipal No. 26A & 27A-UA Jawahar Nagar,Kamla Nagar, near Malka Ganj, Chowk, Delhi 110007, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [77.11585549399085, 28.741270652258336] + }, + "properties": { + "name": "Pizza outlet 8", + "address": "SHOP NO. 10-11, COMMUNITY CENTRE, Garg Mall, Pocket 4, Sector 11, Rohini, New Delhi, Delhi 110020, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [77.30262307535264, 28.635858680378387] + }, + "properties": { + "name": "Pizza outlet 9", + "address": "Plot No. 7,LSC, Pankaj Plaza, near Prince Apartments, I.P.Extension, Patparganj, New Delhi, Delhi 110092, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [77.27116736919079, 28.539914829877652] + }, + "properties": { + "name": "Pizza outlet 10", + "address": "Plot No.16, Ground Floor, Community Center Rd, Pocket A, Okhla Phase I, Okhla Industrial Area, New Delhi, Delhi 110020, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [88.37799509128703, 22.632535906298756] + }, + "properties": { + "name": "Pizza outlet 11", + "address": "Ground Floor, Shop no. 3 & 4, Dist, Chinar Park, Noapara, Sukanta Pally, Newtown, Kolkata, West Bengal 700157, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [88.35190256153795, 22.56692525562484] + }, + "properties": { + "name": "Pizza outlet 12", + "address": "3A, Humayun Place Near New Empire Cinema, Esplanade, New Market Area, Dharmatala, Kolkata, West Bengal 700087, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [88.38795145132286, 22.70413303586267] + }, + "properties": { + "name": "Pizza outlet 13", + "address": "Municipality, 352/1889, Dakshminayan Barasat Road Under Panhihati, Sodepur, Kolkata, West Bengal 700110, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [88.3251233867392, 22.520947492726815] + }, + "properties": { + "name": "Pizza outlet 14", + "address": "Plot No. 99A, Block F, Nalini Ranjan Ave, New Alipore, Kolkata, West Bengal 700053, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [72.52382422967368, 23.080883179752515] + }, + "properties": { + "name": "Pizza outlet 15", + "address": "Plot No. 50 & 51, Survey No. 301/2, 313/1, 304/2, Shop No. G - 7 & 8 Ground Floor, Opp. Gujarat High Court, S. G. Road Town Planning Scheme No. 28, Ahmedabad, Gujarat 380061, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [72.58939887680621, 23.055613560773505] + }, + "properties": { + "name": "Pizza outlet 16", + "address": "Neelgagan Plaza, 1st And 2nd Floor Survey Number 2259 Commissioner Office, Dr Ambedkar Rd, Opposite Police, Jain Colony, Shahibag, Ahmedabad, Gujarat 380004, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [72.47507239777408, 23.033498752157918] + }, + "properties": { + "name": "Pizza outlet 17", + "address": "A1 Amrapali Axiom, Sardar Patel Ring Rd, Ambli, Ahmedabad, Gujarat 380058, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [72.66939307985272, 23.05340224332604] + }, + "properties": { + "name": "Pizza outlet 18", + "address": "Shop Number A/03 & A/04, Ground Floor, Gujarat 382350, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [73.87720724616587, 18.57728849915506] + }, + "properties": { + "name": "Pizza outlet 19", + "address": "Shop no 31/A, Ground floor, Shoppers Orbit, Next Mahalaxsmi Complex Near Visharantwadi Police Chowki, Dhanori Rd, Pune, Maharashtra 411015, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [73.93213888774288, 18.495259471467133] + }, + "properties": { + "name": "Pizza outlet 20", + "address": "Shop No:4,5,14,15,16 & 17 Fortune Plaza, Hadapsar, Pune, Maharashtra 411028, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [73.82364889562831, 18.48256098719139] + }, + "properties": { + "name": "Pizza outlet 21", + "address": "Plot No. 7, Dhanlaxmi Society, Opp. Jagtap Hospital, Pune, Maharashtra 411051, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [73.84321829294011, 18.52228131664155] + }, + "properties": { + "name": "Pizza outlet 22", + "address": "Bus Stop, Shop No. 6 & 7, opposite Deccan Gymkhana, Pune, Maharashtra 411004, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [73.79308003312877, 18.496413470622766] + }, + "properties": { + "name": "Pizza outlet 23", + "address": "Cipla Foundation, Survey No. 116/1, Shop No. 2, Opposite, Warje, Pune, Maharashtra 411058, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [78.68705181099095, 10.799619385080312] + }, + "properties": { + "name": "Pizza outlet 24", + "address": "Dukes Complex, 120, Bharathiar Salai, Melapudur, Cantonment, Tiruchirappalli, Tamil Nadu 620001, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [78.68405585878058, 10.834835813062087] + }, + "properties": { + "name": "Pizza outlet 25", + "address": "Vignesh Plaza, A-6, Ground Floor, Thillai Nagar Main Rd, Tiruchirappalli, Tamil Nadu 620018, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [74.63322891528135, 26.582440343492785] + }, + "properties": { + "name": "Pizza outlet 26", + "address": "Shop No. G5, G6 and G7, Ground Floor, Jaipur Rd, Hathi Bhata, Ajmer, Rajasthan 305001, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [75.12212052531665, 27.779609685150188] + }, + "properties": { + "name": "Pizza outlet 27", + "address": "Domino'S Pizza Ground Floor Shop No 2 Shiv Mandir cinema, Fatehpur Rd, Sikar, Rajasthan 332001, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [76.77930464002718, 28.378539373887044] + }, + "properties": { + "name": "Pizza outlet 28", + "address": "Khasra No. 489 & 490, V Square Mall, Alwar Bypass Road, Sector-15, Bhiwadi, Rajasthan 301019, India", + "phone": "23 2323 2323" + } + }, + { + "type": "Feature", + "geometry": { + "type": "Point", + "coordinates": [75.85537784187994, 25.13798803924888] + }, + "properties": { + "name": "Pizza outlet 29", + "address": "A-47, Jhalawar Road, Indraprastha Industrial Area, Kota, Rajasthan 324005, India", + "phone": "23 2323 2323" + } + } +] \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4761d40 --- /dev/null +++ b/styles.css @@ -0,0 +1,100 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,200&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + /* -webkit-font-smoothing:antialised; */ +} + +body{ + + font-family: 'Nunito Sans', sans-serif; +} + +#map{ + height:100vh; + width: 75%; +} + +.store-list{ + width: 25%; + height: 100vh; + overflow-y: scroll; + overflow-x: hidden; + background-color: whitesmoke; +} + +main{ + display: flex; +} + +.store-list .heading h2{ + background: #ff6900; + color: #fff; + padding: 1rem; +} + +::-webkit-scrollbar{ + width: 3px; + height: 3px; + border-left: 0; + background: rgba(0, 0, 0, 0.1); +} + +::-webkit-scrollbar-thumb{ + background: #ff6900; + border-radius: 0; +} + +.store-list ul.list { + padding: 0 1rem; + list-style-type: none; +} +.store-list .shop-item { + margin: 1rem 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding-bottom: 1rem; +} + +.store-list li:last-child .shop-item { + border: none; +} +.store-list .shop-item a { + text-decoration: none; + font-size: 20px; + color: #ff6900; + font-weight: 700; +} + +.store-list .shop-item p { + font-size: 14px; + color: #404040; +} + +.leaflet-popup-content-wrapper { + padding: 0; + overflow: hidden; +} +.leaflet-popup-content-wrapper .leaflet-popup-content { + margin: 0; +} +.leaflet-popup-content-wrapper h4 { + padding: 16px; + background: #ff6804; + color: #fff; + font-size: 16px; +} +.leaflet-popup-content-wrapper p { + padding: 0 16px; + font-size: 14px; + margin-bottom: 14px; +} +.leaflet-popup-content-wrapper .leaflet-popup-content .phone-number { + padding: 16px; + padding-top: 0; +} +.leaflet-popup-content-wrapper .leaflet-popup-content .phone-number a { + color: #ff6808; + font-size: 14px; +} \ No newline at end of file