Add very raw scratch map

app/controllers/map_controller.rb

@@ -8,8 +8,8 @@ class MapController < ApplicationController
 
     @countries_and_cities = CountriesAndCities.new(@points).call
     @coordinates =
-      @points.pluck(:latitude, :longitude, :battery, :altitude, :timestamp, :velocity, :id)
+      @points.pluck(:latitude, :longitude, :battery, :altitude, :timestamp, :velocity, :id, :country)
-             .map { [_1.to_f, _2.to_f, _3.to_s, _4.to_s, _5.to_s, _6.to_s, _7.to_s] }
+             .map { [_1.to_f, _2.to_f, _3.to_s, _4.to_s, _5.to_s, _6.to_s, _7.to_s, _8.to_s] }
     @distance = distance
     @start_at = Time.zone.at(start_at)
     @end_at = Time.zone.at(end_at)

app/javascript/controllers/maps_controller.js

@@ -42,6 +42,35 @@ export default class extends Controller {
     this.distanceUnit = this.element.dataset.distance_unit || "km";
     this.pointsRenderingMode = this.userSettings.points_rendering_mode || "raw";
 
+    this.countryCodeMap = {
+      'Russia': 'RU',
+      'Germany': 'DE',
+      'United States': 'US',
+      'United Kingdom': 'GB',
+      'France': 'FR',
+      'Italy': 'IT',
+      'Spain': 'ES',
+      'Canada': 'CA',
+      'Australia': 'AU',
+      'Japan': 'JP',
+      'China': 'CN',
+      'Brazil': 'BR',
+      'India': 'IN',
+      'Mexico': 'MX',
+      'South Africa': 'ZA',
+      'South Korea': 'KR',
+      'Netherlands': 'NL',
+      'Switzerland': 'CH',
+      'Sweden': 'SE',
+      'Norway': 'NO',
+      'Denmark': 'DK',
+      'Poland': 'PL',
+      'Greece': 'GR',
+      'Portugal': 'PT',
+      'Ireland': 'IE',
+      // Add more countries as needed
+    };
+
     this.center = this.markers[this.markers.length - 1] || [52.514568, 13.350111];
 
     this.map = L.map(this.containerTarget).setView([this.center[0], this.center[1]], 14);
@@ -61,6 +90,7 @@ export default class extends Controller {
     this.heatmapLayer = L.heatLayer(this.heatmapMarkers, { radius: 20 }).addTo(this.map);
     this.fogOverlay = L.layerGroup(); // Initialize fog layer
     this.areasLayer = L.layerGroup(); // Initialize areas layer
+    this.setupScratchLayer();
 
     if (!this.settingsButtonAdded) {
       this.addSettingsButton();
@@ -71,6 +101,7 @@ export default class extends Controller {
       Polylines: this.polylinesLayer,
       Heatmap: this.heatmapLayer,
       "Fog of War": this.fogOverlay,
+      "Scratch map": this.scratchLayer,
       Areas: this.areasLayer // Add the areas layer to the controls
     };
 
@@ -140,6 +171,53 @@ export default class extends Controller {
     this.map.remove();
   }
 
+
+  async setupScratchLayer() {
+    this.scratchLayer = L.geoJSON(null, {
+      style: {
+        fillColor: '#FFD700',
+        fillOpacity: 0.3,
+        color: '#FFA500',
+        weight: 1
+      }
+    }).addTo(this.map)
+
+    const response = await fetch('https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson')
+    const worldData = await response.json()
+
+    const visitedCountries = this.getVisitedCountries()
+    const filteredFeatures = worldData.features.filter(feature =>
+      visitedCountries.includes(feature.properties.ISO_A2)
+    )
+
+    this.scratchLayer.addData({
+      type: 'FeatureCollection',
+      features: filteredFeatures
+    })
+  }
+
+  getVisitedCountries() {
+    if (!this.markers) return [];
+
+    return [...new Set(
+      this.markers
+        .filter(marker => marker[7]) // Ensure country exists
+        .map(marker => {
+          // Convert country name to ISO code, or return the original if not found
+          return this.countryCodeMap[marker[7]] || marker[7];
+        })
+    )];
+  }
+
+  // Optional: Add methods to handle user interactions
+  toggleScratchLayer() {
+    if (this.map.hasLayer(this.scratchLayer)) {
+      this.map.removeLayer(this.scratchLayer)
+    } else {
+      this.scratchLayer.addTo(this.map)
+    }
+  }
+
   baseMaps() {
     let selectedLayerName = this.userSettings.preferred_map_layer || "OpenStreetMap";
 

app/javascript/maps/country_codes.js

@@ -0,0 +1,730 @@
+export function countryCodeMap() {
+  [
+    {
+      "Afghanistan": "AF"
+    },
+    {
+      "Aland Islands": "AX"
+    },
+    {
+      "Albania": "AL"
+    },
+    {
+      "Algeria": "DZ"
+    },
+    {
+      "AmericanSamoa": "AS"
+    },
+    {
+      "Andorra": "AD"
+    },
+    {
+      "Angola": "AO"
+    },
+    {
+      "Anguilla": "AI"
+    },
+    {
+      "Antarctica": "AQ"
+    },
+    {
+      "Antigua and Barbuda": "AG"
+    },
+    {
+      "Argentina": "AR"
+    },
+    {
+      "Armenia": "AM"
+    },
+    {
+      "Aruba": "AW"
+    },
+    {
+      "Australia": "AU"
+    },
+    {
+      "Austria": "AT"
+    },
+    {
+      "Azerbaijan": "AZ"
+    },
+    {
+      "Bahamas": "BS"
+    },
+    {
+      "Bahrain": "BH"
+    },
+    {
+      "Bangladesh": "BD"
+    },
+    {
+      "Barbados": "BB"
+    },
+    {
+      "Belarus": "BY"
+    },
+    {
+      "Belgium": "BE"
+    },
+    {
+      "Belize": "BZ"
+    },
+    {
+      "Benin": "BJ"
+    },
+    {
+      "Bermuda": "BM"
+    },
+    {
+      "Bhutan": "BT"
+    },
+    {
+      "Bolivia, Plurinational State of": "BO"
+    },
+    {
+      "Bosnia and Herzegovina": "BA"
+    },
+    {
+      "Botswana": "BW"
+    },
+    {
+      "Brazil": "BR"
+    },
+    {
+      "British Indian Ocean Territory": "IO"
+    },
+    {
+      "Brunei Darussalam": "BN"
+    },
+    {
+      "Bulgaria": "BG"
+    },
+    {
+      "Burkina Faso": "BF"
+    },
+    {
+      "Burundi": "BI"
+    },
+    {
+      "Cambodia": "KH"
+    },
+    {
+      "Cameroon": "CM"
+    },
+    {
+      "Canada": "CA"
+    },
+    {
+      "Cape Verde": "CV"
+    },
+    {
+      "Cayman Islands": "KY"
+    },
+    {
+      "Central African Republic": "CF"
+    },
+    {
+      "Chad": "TD"
+    },
+    {
+      "Chile": "CL"
+    },
+    {
+      "China": "CN"
+    },
+    {
+      "Christmas Island": "CX"
+    },
+    {
+      "Cocos (Keeling) Islands": "CC"
+    },
+    {
+      "Colombia": "CO"
+    },
+    {
+      "Comoros": "KM"
+    },
+    {
+      "Congo": "CG"
+    },
+    {
+      "Congo, The Democratic Republic of the Congo": "CD"
+    },
+    {
+      "Cook Islands": "CK"
+    },
+    {
+      "Costa Rica": "CR"
+    },
+    {
+      "Cote d'Ivoire": "CI"
+    },
+    {
+      "Croatia": "HR"
+    },
+    {
+      "Cuba": "CU"
+    },
+    {
+      "Cyprus": "CY"
+    },
+    {
+      "Czech Republic": "CZ"
+    },
+    {
+      "Denmark": "DK"
+    },
+    {
+      "Djibouti": "DJ"
+    },
+    {
+      "Dominica": "DM"
+    },
+    {
+      "Dominican Republic": "DO"
+    },
+    {
+      "Ecuador": "EC"
+    },
+    {
+      "Egypt": "EG"
+    },
+    {
+      "El Salvador": "SV"
+    },
+    {
+      "Equatorial Guinea": "GQ"
+    },
+    {
+      "Eritrea": "ER"
+    },
+    {
+      "Estonia": "EE"
+    },
+    {
+      "Ethiopia": "ET"
+    },
+    {
+      "Falkland Islands (Malvinas)": "FK"
+    },
+    {
+      "Faroe Islands": "FO"
+    },
+    {
+      "Fiji": "FJ"
+    },
+    {
+      "Finland": "FI"
+    },
+    {
+      "France": "FR"
+    },
+    {
+      "French Guiana": "GF"
+    },
+    {
+      "French Polynesia": "PF"
+    },
+    {
+      "Gabon": "GA"
+    },
+    {
+      "Gambia": "GM"
+    },
+    {
+      "Georgia": "GE"
+    },
+    {
+      "Germany": "DE"
+    },
+    {
+      "Ghana": "GH"
+    },
+    {
+      "Gibraltar": "GI"
+    },
+    {
+      "Greece": "GR"
+    },
+    {
+      "Greenland": "GL"
+    },
+    {
+      "Grenada": "GD"
+    },
+    {
+      "Guadeloupe": "GP"
+    },
+    {
+      "Guam": "GU"
+    },
+    {
+      "Guatemala": "GT"
+    },
+    {
+      "Guernsey": "GG"
+    },
+    {
+      "Guinea": "GN"
+    },
+    {
+      "Guinea-Bissau": "GW"
+    },
+    {
+      "Guyana": "GY"
+    },
+    {
+      "Haiti": "HT"
+    },
+    {
+      "Holy See (Vatican City State)": "VA"
+    },
+    {
+      "Honduras": "HN"
+    },
+    {
+      "Hong Kong": "HK"
+    },
+    {
+      "Hungary": "HU"
+    },
+    {
+      "Iceland": "IS"
+    },
+    {
+      "India": "IN"
+    },
+    {
+      "Indonesia": "ID"
+    },
+    {
+      "Iran, Islamic Republic of Persian Gulf": "IR"
+    },
+    {
+      "Iraq": "IQ"
+    },
+    {
+      "Ireland": "IE"
+    },
+    {
+      "Isle of Man": "IM"
+    },
+    {
+      "Israel": "IL"
+    },
+    {
+      "Italy": "IT"
+    },
+    {
+      "Jamaica": "JM"
+    },
+    {
+      "Japan": "JP"
+    },
+    {
+      "Jersey": "JE"
+    },
+    {
+      "Jordan": "JO"
+    },
+    {
+      "Kazakhstan": "KZ"
+    },
+    {
+      "Kenya": "KE"
+    },
+    {
+      "Kiribati": "KI"
+    },
+    {
+      "Korea, Democratic People's Republic of Korea": "KP"
+    },
+    {
+      "Korea, Republic of South Korea": "KR"
+    },
+    {
+      "Kuwait": "KW"
+    },
+    {
+      "Kyrgyzstan": "KG"
+    },
+    {
+      "Laos": "LA"
+    },
+    {
+      "Latvia": "LV"
+    },
+    {
+      "Lebanon": "LB"
+    },
+    {
+      "Lesotho": "LS"
+    },
+    {
+      "Liberia": "LR"
+    },
+    {
+      "Libyan Arab Jamahiriya": "LY"
+    },
+    {
+      "Liechtenstein": "LI"
+    },
+    {
+      "Lithuania": "LT"
+    },
+    {
+      "Luxembourg": "LU"
+    },
+    {
+      "Macao": "MO"
+    },
+    {
+      "Macedonia": "MK"
+    },
+    {
+      "Madagascar": "MG"
+    },
+    {
+      "Malawi": "MW"
+    },
+    {
+      "Malaysia": "MY"
+    },
+    {
+      "Maldives": "MV"
+    },
+    {
+      "Mali": "ML"
+    },
+    {
+      "Malta": "MT"
+    },
+    {
+      "Marshall Islands": "MH"
+    },
+    {
+      "Martinique": "MQ"
+    },
+    {
+      "Mauritania": "MR"
+    },
+    {
+      "Mauritius": "MU"
+    },
+    {
+      "Mayotte": "YT"
+    },
+    {
+      "Mexico": "MX"
+    },
+    {
+      "Micronesia, Federated States of Micronesia": "FM"
+    },
+    {
+      "Moldova": "MD"
+    },
+    {
+      "Monaco": "MC"
+    },
+    {
+      "Mongolia": "MN"
+    },
+    {
+      "Montenegro": "ME"
+    },
+    {
+      "Montserrat": "MS"
+    },
+    {
+      "Morocco": "MA"
+    },
+    {
+      "Mozambique": "MZ"
+    },
+    {
+      "Myanmar": "MM"
+    },
+    {
+      "Namibia": "NA"
+    },
+    {
+      "Nauru": "NR"
+    },
+    {
+      "Nepal": "NP"
+    },
+    {
+      "Netherlands": "NL"
+    },
+    {
+      "Netherlands Antilles": "AN"
+    },
+    {
+      "New Caledonia": "NC"
+    },
+    {
+      "New Zealand": "NZ"
+    },
+    {
+      "Nicaragua": "NI"
+    },
+    {
+      "Niger": "NE"
+    },
+    {
+      "Nigeria": "NG"
+    },
+    {
+      "Niue": "NU"
+    },
+    {
+      "Norfolk Island": "NF"
+    },
+    {
+      "Northern Mariana Islands": "MP"
+    },
+    {
+      "Norway": "NO"
+    },
+    {
+      "Oman": "OM"
+    },
+    {
+      "Pakistan": "PK"
+    },
+    {
+      "Palau": "PW"
+    },
+    {
+      "Palestinian Territory, Occupied": "PS"
+    },
+    {
+      "Panama": "PA"
+    },
+    {
+      "Papua New Guinea": "PG"
+    },
+    {
+      "Paraguay": "PY"
+    },
+    {
+      "Peru": "PE"
+    },
+    {
+      "Philippines": "PH"
+    },
+    {
+      "Pitcairn": "PN"
+    },
+    {
+      "Poland": "PL"
+    },
+    {
+      "Portugal": "PT"
+    },
+    {
+      "Puerto Rico": "PR"
+    },
+    {
+      "Qatar": "QA"
+    },
+    {
+      "Romania": "RO"
+    },
+    {
+      "Russia": "RU"
+    },
+    {
+      "Rwanda": "RW"
+    },
+    {
+      "Reunion": "RE"
+    },
+    {
+      "Saint Barthelemy": "BL"
+    },
+    {
+      "Saint Helena, Ascension and Tristan Da Cunha": "SH"
+    },
+    {
+      "Saint Kitts and Nevis": "KN"
+    },
+    {
+      "Saint Lucia": "LC"
+    },
+    {
+      "Saint Martin": "MF"
+    },
+    {
+      "Saint Pierre and Miquelon": "PM"
+    },
+    {
+      "Saint Vincent and the Grenadines": "VC"
+    },
+    {
+      "Samoa": "WS"
+    },
+    {
+      "San Marino": "SM"
+    },
+    {
+      "Sao Tome and Principe": "ST"
+    },
+    {
+      "Saudi Arabia": "SA"
+    },
+    {
+      "Senegal": "SN"
+    },
+    {
+      "Serbia": "RS"
+    },
+    {
+      "Seychelles": "SC"
+    },
+    {
+      "Sierra Leone": "SL"
+    },
+    {
+      "Singapore": "SG"
+    },
+    {
+      "Slovakia": "SK"
+    },
+    {
+      "Slovenia": "SI"
+    },
+    {
+      "Solomon Islands": "SB"
+    },
+    {
+      "Somalia": "SO"
+    },
+    {
+      "South Africa": "ZA"
+    },
+    {
+      "South Sudan": "SS"
+    },
+    {
+      "South Georgia and the South Sandwich Islands": "GS"
+    },
+    {
+      "Spain": "ES"
+    },
+    {
+      "Sri Lanka": "LK"
+    },
+    {
+      "Sudan": "SD"
+    },
+    {
+      "Suriname": "SR"
+    },
+    {
+      "Svalbard and Jan Mayen": "SJ"
+    },
+    {
+      "Swaziland": "SZ"
+    },
+    {
+      "Sweden": "SE"
+    },
+    {
+      "Switzerland": "CH"
+    },
+    {
+      "Syrian Arab Republic": "SY"
+    },
+    {
+      "Taiwan": "TW"
+    },
+    {
+      "Tajikistan": "TJ"
+    },
+    {
+      "Tanzania, United Republic of Tanzania": "TZ"
+    },
+    {
+      "Thailand": "TH"
+    },
+    {
+      "Timor-Leste": "TL"
+    },
+    {
+      "Togo": "TG"
+    },
+    {
+      "Tokelau": "TK"
+    },
+    {
+      "Tonga": "TO"
+    },
+    {
+      "Trinidad and Tobago": "TT"
+    },
+    {
+      "Tunisia": "TN"
+    },
+    {
+      "Turkey": "TR"
+    },
+    {
+      "Turkmenistan": "TM"
+    },
+    {
+      "Turks and Caicos Islands": "TC"
+    },
+    {
+      "Tuvalu": "TV"
+    },
+    {
+      "Uganda": "UG"
+    },
+    {
+      "Ukraine": "UA"
+    },
+    {
+      "United Arab Emirates": "AE"
+    },
+    {
+      "United Kingdom": "GB"
+    },
+    {
+      "United States": "US"
+    },
+    {
+      "Uruguay": "UY"
+    },
+    {
+      "Uzbekistan": "UZ"
+    },
+    {
+      "Vanuatu": "VU"
+    },
+    {
+      "Venezuela, Bolivarian Republic of Venezuela": "VE"
+    },
+    {
+      "Vietnam": "VN"
+    },
+    {
+      "Virgin Islands, British": "VG"
+    },
+    {
+      "Virgin Islands, U.S.": "VI"
+    },
+    {
+      "Wallis and Futuna": "WF"
+    },
+    {
+      "Yemen": "YE"
+    },
+    {
+      "Zambia": "ZM"
+    },
+    {
+      "Zimbabwe": "ZW"
+    }
+  ]
+}

app/javascript/maps/markers.js

@@ -6,6 +6,7 @@ export function createMarkersArray(markersData, userSettings) {
   } else {
     return markersData.map((marker) => {
       const [lat, lon] = marker;
+      const country = marker[7];
       const popupContent = createPopupContent(marker, userSettings.timezone, userSettings.distanceUnit);
       return L.circleMarker([lat, lon], { radius: 4 }).bindPopup(popupContent);
     });

app/views/map/index.html.erb

@@ -51,6 +51,11 @@
         <div data-maps-target="container" class="h-[25rem] w-full min-h-screen">
           <div id="fog" class="fog"></div>
         </div>
+        <button
+          data-action="click->maps#toggleScratchLayer"
+          class="btn btn-primary mt-4">
+          Toggle Visited Countries
+        </button>
       </div>
     </div>
   </div>