Switch from mapbox to OpenFreeMap using maplibre

pinballmap · Sep 24, 2024 · 547656d · 547656d
1 parent 85f292c
commit 547656d
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 79 deletions.
diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
@@ -5,8 +5,6 @@
 var map;
 var region;
 var ismap;
-var testMode;
-var bot_detected;
 var searchMachineIDString;
 var numMachinesVal;
 var locationTypeVal;
@@ -53,24 +51,16 @@ function showLocations(ids, lats, lons, contents, num_machines, latLng) {
 
   locationIDs = ids;
 
-  if (bot_detected != true) {
-    mapboxgl.accessToken = '<%= ENV.fetch("MAPBOX_API_KEY", "pk.eyJ1IjoicnlhbnRnIiwiYSI6ImNsZTV5dW11YTBoankzbnFsZTEzcnQycWsifQ._0FYgeHFSQCQJ6VboGXl8A") %>';
-  } else {
-    mapboxgl.accessToken = ''
-  }
-
-  var bounds = new mapboxgl.LngLatBounds();
+  var bounds = new maplibregl.LngLatBounds();
 
   if (mapAdjusted === 0) {
-    map = new mapboxgl.Map({
+    map = new maplibregl.Map({
       container: 'map_canvas',
-      testMode: testMode,
-      style: 'mapbox://styles/mapbox/streets-v12',
-      projection: 'mercator'
+      style: 'https://tiles.openfreemap.org/styles/bright',
     });
-    map.addControl(new mapboxgl.ScaleControl({unit: 'imperial'}), 'bottom-right');
-    map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
-    map.addControl(new mapboxgl.FullscreenControl(), 'top-right');
+    map.addControl(new maplibregl.ScaleControl({unit: 'imperial'}), 'bottom-right');
+    map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
+    map.addControl(new maplibregl.FullscreenControl(), 'top-right');
   }
 
   for (i in ids) {
@@ -84,7 +74,6 @@ function showLocations(ids, lats, lons, contents, num_machines, latLng) {
         var locationID = locationIDs[index];
 
         el.id = 'marker_' + locationID;
-        el.style.cssText += 'z-index:' + num_machines[i]; 
         el.innerHTML = '<span><b>' + num_machines[i] + '</b></span>';
         el.addEventListener('touchstart', function () {
           showLocationDetail(locationID);
@@ -103,10 +92,10 @@ function showLocations(ids, lats, lons, contents, num_machines, latLng) {
       })(el, i);
     }
 
-    var popup = new mapboxgl.Popup({ offset: 25 })
+    var popup = new maplibregl.Popup({ offset: 25 })
       .setHTML(contents[i]);
 
-    var marker = new mapboxgl.Marker(el, { anchor: 'center' })
+    var marker = new maplibregl.Marker({element: el}, { anchor: 'center' })
       .setLngLat([lons[i], lats[i]])
       .setPopup(popup)
       .addTo(map);

diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb
@@ -2696,14 +2696,6 @@ span.begin {
   background: #ffffff;
 }
 
-#region_map {
-  width: 700px;
-  height: 450px;
-  margin: 10px 0;
-  border: 5px solid $purple;
-  box-shadow: 1px 2px 7px rgba(90, 100, 117, 0.3);
-}
-
 #map {
   left: 42%;
   width: 100%;
@@ -3059,12 +3051,12 @@ div.score_list {
 
 /** Map API **/
 
-.mapboxgl-popup {
+.maplibregl-popup {
   max-width: 200px;
   z-index: 500;
 }
 
-.mapboxgl-popup-content {
+.maplibregl-popup-content {
   overflow-y: auto;
   max-height: 310px;
   font-family: 'Open Sans', sans-serif;
@@ -3080,40 +3072,17 @@ div.score_list {
   color: black;
 }
 
-#region_map .gm_region_name a {
-  font-family: $Nunito_700Bold !important;
-  font-weight: normal !important;
-  color: $darkgrey;
-}
-
-#region_map .gm_region_name a:hover {
-  color: $red;
-}
-
-.markersm {
-  background: url(<%= asset_path 'teardrop200.png' %>) no-repeat;
-  background-size: cover;
-  width: 45px;
-  height: 45px;
-  cursor: pointer;
-}
-
-.markersm {
-  width: 35px;
-  height: 35px;
-}
-
-.marker span {
+.marker {
   display: flex;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   width: 40px;
   height: 40px;
   font-size: 16px;
-  color: #f5f5ff;
-  background: #616182;
-  border: 2px solid #fee7f5;
+  color: #440152;
+  background: #ffffff;
+  border: 2px solid #979797;
   border-radius: 50%;
   cursor: pointer;
 }

diff --git a/app/assets/stylesheets/mediaqueries.css b/app/assets/stylesheets/mediaqueries.css
@@ -81,11 +81,11 @@ only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (or
     padding-left: 0;
   }
 
-  div.mapboxgl-ctrl-top-left {
+  div.maplibregl-ctrl-top-left {
     left: 0% !important;
   }
 
-  div.mapboxgl-ctrl-bottom-right {
+  div.maplibregl-ctrl-bottom-right {
     right: 0% !important;
   }
 }
@@ -120,11 +120,11 @@ only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (or
 }
 
 @media (max-width: 1555px) {
-  .mapboxgl-ctrl-top-left {
+  .maplibregl-ctrl-top-left {
     left: 30% !important;
   }
 
-  .mapboxgl-ctrl-bottom-right {
+  .maplibregl-ctrl-bottom-right {
     right: 30% !important;
   }
 }

diff --git a/app/assets/stylesheets/mobile-application.css.erb b/app/assets/stylesheets/mobile-application.css.erb
@@ -1261,12 +1261,12 @@ p.welcome {
 
 /* map api */
 
-#map .mapboxgl-ctrl-top-right,
-#map .mapboxgl-ctrl-bottom-right {
+#map .maplibregl-ctrl-top-right,
+#map .maplibregl-ctrl-bottom-right {
   right: 0;
 }
 
-.mapboxgl-popup-content {
+.maplibregl-popup-content {
   max-height: 200px;
   max-width: 250px;
 }

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -21,8 +21,8 @@
       = stylesheet_link_tag 'mobile-application'
     = javascript_include_tag 'application', 'jquery.form', 'jquery.remotipart'
     - if current_page?(saved_path) || current_page?(map_path) || current_page?(operators_path) || ((defined? @region) and current_page?(region_homepage_path))
-      = stylesheet_link_tag 'lightbox', 'https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css'
-      = javascript_include_tag 'lightbox.min', 'https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'
+      = stylesheet_link_tag 'lightbox', 'https://unpkg.com/maplibre-gl/dist/maplibre-gl.css'
+      = javascript_include_tag 'lightbox.min', 'https://unpkg.com/maplibre-gl/dist/maplibre-gl.js'
     - if ((defined? @region) and current_page?(suggest_path)) || current_page?(map_location_suggest_path) 
       = javascript_include_tag 'https://maps.googleapis.com/maps/api/js?libraries=places&key=' + ENV['GOOGLE_MAPS_API_KEY'].to_s, 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js'
       = stylesheet_link_tag 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css'

diff --git a/app/views/locations/_map.html.haml b/app/views/locations/_map.html.haml
@@ -9,10 +9,3 @@
             Or Search.
         - else
           Or Search.
-
-- testMode = Rails.env.production? ? false : true
-- bot_detected = browser.bot? ? true : false
-
-:javascript
-  var testMode = #{testMode}
-  var bot_detected = #{bot_detected}
diff --git a/spec/features/location_machine_xrefs_controller_spec.rb b/spec/features/location_machine_xrefs_controller_spec.rb
@@ -658,7 +658,6 @@
     end
 
     it 'allows case insensitive searches of a region' do
-      stub_const('ENV', 'MAPBOX_DEV_API_KEY' => ENV['MAPBOX_DEV_API_KEY'])
 
       chicago_region = FactoryBot.create(:region, name: 'chicago', full_name: 'Chicago')
       FactoryBot.create(:location, id: 23, region: chicago_region, name: 'Chicago Location')
@@ -902,8 +901,6 @@
     end
 
     it 'displays appropriate values in location description' do
-      stub_const('ENV', 'MAPBOX_DEV_API_KEY' => ENV['MAPBOX_DEV_API_KEY'])
-
       @user = FactoryBot.create(:user)
       login(@user)
 

diff --git a/spec/features/locations_controller_spec.rb b/spec/features/locations_controller_spec.rb
@@ -548,8 +548,6 @@
     end
 
     it 'regionless page: lets you pick any operator' do
-      stub_const('ENV', 'MAPBOX_DEV_API_KEY' => ENV['MAPBOX_DEV_API_KEY'])
-
       FactoryBot.create(:operator, region: nil, name: 'Regionless operator')
       FactoryBot.create(:operator, region: @region, name: 'Quarterworld')
       FactoryBot.create(:operator, region: FactoryBot.create(:region, name: 'la'), name: 'Other region operator')
@@ -622,8 +620,6 @@
     end
 
     it 'allows users to update a location metadata - stubbed out spam detection' do
-      stub_const('ENV', 'MAPBOX_DEV_API_KEY' => ENV['MAPBOX_DEV_API_KEY'])
-
       t = FactoryBot.create(:location_type, name: 'Bar')
       o = FactoryBot.create(:operator, region: @location.region, name: 'Quarterworld')