patch: made code public

.gitignore

@@ -0,0 +1,30 @@
+
+# Node modules
+node_modules/
+
+# Logs
+logs
+*.log
+
+# OS generated files
+.DS_Store
+Thumbs.db
+
+# IDE specific files
+.vscode/
+.idea/
+
+# Git specific files
+.git/
+
+# Temporary files
+*.tmp
+*.swp
+*.bak
+
+# Ignore build artifacts
+dist/
+build/
+
+# Miscellaneous
+.env

README.md

@@ -0,0 +1,43 @@
+
+# Random Map Shape Generator
+
+
+A web app that randomly generates shapes (points, lines, polygons) on a map using [Leaflet.js](https://leafletjs.com/). Features layer switching, search, and shape downloads in ZIP format. 
+
+## Features
+
+- Random shape generation: points, lines, polygons
+- Layer switcher (Street, Light, Dark)
+- Search locations with Leaflet Geocoder
+- Download shapes as ZIP
+- Clear all shapes
+- Right-click map context menu
+
+## Installation
+
+1. Clone the repo:
+   ```bash
+   git clone https://github.com/konishon/random-map-shape-generator.git
+   ```
+2. Open `index.html` in a browser (no server needed).
+
+## Project Structure
+
+```bash
+.
+├── index.html        # Main HTML file
+├── css/styles.css    # Custom styles
+├── js/script.js      # Main JS logic
+```
+
+## Dependencies
+
+- Leaflet.js
+- Leaflet Control Geocoder
+- JSZip, FileSaver.js
+
+
+
+## License
+
+MIT License

css/styles.css

@@ -0,0 +1,150 @@
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+#map {
+    height: 100vh;
+}
+
+#zoom-level {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    transition: all 0.3s;
+}
+
+#zoom-level:hover {
+    transform: scale(1.05);
+}
+
+#context-menu {
+    display: none;
+    position: absolute;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+}
+
+#context-menu button {
+    width: 100%;
+    border: none;
+    padding: 10px;
+    background: #f0f0f0;
+    border-radius: 8px;
+    text-align: left;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+#context-menu button:hover {
+    background-color: #eee;
+}
+
+label {
+    display: block;
+    margin: 5px;
+    text-align: left;
+}
+
+html, body {
+    margin: 0;  
+    padding: 0; 
+    height: 100%; 
+}
+
+#map {
+    height: 100vh; 
+    width: 100%;   
+}
+#context-menu {
+    position: absolute;
+    top: 50px;
+    left: 10px;
+    z-index: 1000;
+    background: white;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0,0,0,0.5);
+}
+/* Default footer styles */
+footer {
+    position: absolute;
+    bottom: 10px;  
+    left: 50%;    
+    transform: translateX(-50%);  
+    z-index: 1000;
+    background: white;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0,0,0,0.5);
+    width: 55.5%;
+    max-width: 1200px;
+    display: flex;
+    flex-wrap: wrap; /* Wrap buttons for larger screens */
+    justify-content: center;
+}
+footer button {
+    margin: 5px;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+    font-size: 14px;
+}
+
+/* Responsive styles for smaller screens */
+@media (max-width: 768px) {
+    footer {
+        width: 100%; /* Make the footer take full width */
+        left: 0;
+        bottom: 0;
+        transform: none;
+        padding: 10px;
+        box-shadow: none;
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto; /* Allow horizontal scrolling */
+        white-space: nowrap; /* Prevent line breaks */
+    }
+
+    footer button {
+        flex-shrink: 0; /* Prevent buttons from shrinking */
+        margin: 0 5px; /* Adjust button margins */
+    }
+}
+
+.leaflet-control-geocoder {
+    font-size: 14px;
+    width: 250px;
+    border: 1px solid red; 
+}
+.download-zip-btn {
+    background-color: #4CAF50; 
+    color: white; 
+    font-weight: bold; 
+    padding: 15px 25px; 
+    font-size: 16px; 
+    border-radius: 8px; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
+    transition: transform 0.2s, background-color 0.2s;
+}
+
+.download-zip-btn:hover {
+    background-color: #45a049; 
+    transform: scale(1.05); 
+}
+
+.download-zip-btn:active {
+    background-color: #3e8e41; 
+    transform: scale(0.98); 
+}
+

index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shapes on Map</title>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shapes on Map | Draw, Customize, and Download</title>
+
+    <!-- SEO Meta Tags -->
+    <meta name="description" content="Interactive tool to draw random shapes like stars, hearts, and more on a map. Download your customized shapes as GeoJSON or ZIP.">
+    <meta name="keywords" content="shapes, maps, Leaflet, draw shapes, GeoJSON, shapes on map, download map shapes, zip download, heart, star, butterfly">
+    <meta name="author" content="Nishon Tandukar">
+
+    <!-- Other Meta Tags -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+    <link rel="stylesheet" href="css/styles.css">
+
+    <!-- Open Graph Meta Tags for Share Previews (Facebook, LinkedIn) -->
+    <meta property="og:title" content="Shapes on Map | Interactive Map Shape Drawer">
+    <meta property="og:description" content="Draw, customize, and download shapes like stars and hearts directly on a map! Export them as GeoJSON or ZIP files.">
+    <meta property="og:image" content="/public/share-preview.jpg"> 
+    <meta property="og:url" content="https://naxa.com.np/random">
+    <meta property="og:type" content="website">
+
+    <!-- Twitter Card Meta Tags for Share Previews (Twitter) -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Shapes on Map | Interactive Shape Drawer">
+    <meta name="twitter:description" content="Draw shapes like stars, hearts, and more on maps, then download them as GeoJSON or ZIP files.">
+    <meta name="twitter:image" content="/public/share-preview.jpg"> 
+    <meta name="twitter:site" content="@naxanp">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />   
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
+    <link rel="stylesheet" href="css/styles.css">
+
+</head>
+<body>
+
+    <div id="map"></div>
+
+    <div id="context-menu">
+        <button onclick="dropRandomShapeAtClickedLatLng()">🎲 Drop Random Shape</button>
+        <button onclick="drawRandomPoint()">📍 Random Point</button>
+        <button onclick="drawRandomLine()">📏 Random Line</button>
+        <button onclick="drawRandomPolygon()">🔺 Random Polygon</button>
+        <!-- Placeholder for the "Remove Layer" button -->
+        <button id="remove-layer-btn" style="display: none;" onclick="removeLayer()">❌ Remove this shape</button>
+
+    </div>
+
+    <footer>
+        <button onclick="dropRandomShapeAtCenter()">🎲 Drop Random Shape</button>
+        <button onclick="drawRandomPoint()">📍 Random Point</button>
+        <button onclick="drawRandomLine()">📏 Random Line</button>
+        <button onclick="drawRandomPolygon()">🔺 Random Polygon</button>
+        <button class="download-zip-btn" onclick="downloadShapesAsZip()">Download Shapes</button>
+        <button onclick="clearMap()">❌ Clear All Shapes</button>
+
+    </footer>
+
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>  
+    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
+    <script src="js/script.js"></script>
+
+</body>
+</html>