Drop Google Maps for Open Street Map

WcaOnRails/Gemfile

@@ -85,6 +85,7 @@ gem 'json-schema'
 gem 'translighterate'
 gem 'enum_help'
 gem 'google-api-client'
+gem 'rest-client'
 
 source 'https://rails-assets.org' do
   gem 'rails-assets-autosize'

WcaOnRails/Gemfile.lock

@@ -164,6 +164,8 @@ GEM
       devise (>= 4.6)
     diff-lcs (1.3)
     docile (1.1.5)
+    domain_name (0.5.20180417)
+      unf (>= 0.0.5, < 1.0.0)
     doorkeeper (5.0.2)
       railties (>= 4.2)
     doorkeeper-i18n (5.0.0)
@@ -229,6 +231,8 @@ GEM
     high_voltage (3.1.0)
     highline (2.0.1)
     htmlentities (4.3.4)
+    http-cookie (1.0.3)
+      domain_name (~> 0.5)
     http_accept_language (2.1.1)
     httpclient (2.8.3)
     i18n (1.6.0)
@@ -328,6 +332,7 @@ GEM
     nenv (0.3.0)
     net-http-persistent (3.0.0)
       connection_pool (~> 2.2)
+    netrc (0.11.0)
     newrelic_rpm (6.1.0.352)
     nio4r (2.3.1)
     nokogiri (1.10.2)
@@ -430,6 +435,10 @@ GEM
     responders (2.4.1)
       actionpack (>= 4.2.0, < 6.0)
       railties (>= 4.2.0, < 6.0)
+    rest-client (2.0.2)
+      http-cookie (>= 1.0.2, < 2.0)
+      mime-types (>= 1.16, < 4.0)
+      netrc (~> 0.8)
     retriable (3.1.2)
     rspec (3.8.0)
       rspec-core (~> 3.8.0)
@@ -544,6 +553,9 @@ GEM
     uber (0.1.0)
     uglifier (4.1.20)
       execjs (>= 0.3.0, < 3)
+    unf (0.1.4)
+      unf_ext
+    unf_ext (0.0.7.5)
     unicode-display_width (1.4.1)
     unicorn (5.5.0)
       kgio (~> 2.6)
@@ -645,6 +657,7 @@ DEPENDENCIES
   rake
   recaptcha
   redcarpet
+  rest-client
   rspec-rails
   rubocop
   sass-rails

WcaOnRails/app/assets/javascripts/competitions.js

@@ -71,9 +71,16 @@ onPage('competitions#index', function() {
     $('#loading').hide();
 
     // Scroll to the top of the form if we are in map mode and screen width is greater than 800px
-    if($('#competitions-map').is(':visible') && $(window).innerWidth() > 800) {
-      var formTop = $('#competition-query-form').offset().top;
-      $('html, body').animate({ scrollTop: formTop - 5 }, 300);
+    if($('#competitions-map').is(':visible')) {
+      // Switching between list/map/admin uses AJAX to load the map element,
+      // unfortunately it does not trigger our iframe resize trick...
+      // Google maps somehow did make this work, so if you're motivated,
+      // you could look at their source code to try to figure out how they detect and handle this situation.
+      wca._competitionsIndexMap.invalidateSize();
+      if ($(window).innerWidth() > 800) {
+        var formTop = $('#competition-query-form').offset().top;
+        $('html, body').animate({ scrollTop: formTop - 5 }, 300);
+      }
     }
   });
 

WcaOnRails/app/assets/stylesheets/competitions.scss

@@ -67,18 +67,12 @@ $venue-map-wrapper-height: 400px;
 #venue-map-wrapper {
   height: $venue-map-wrapper-height;
 
-  #googleMapsLocationInput {
-    position: absolute;
-    z-index: 1;
-    width: 50%;
-    margin-top: 10px;
-  }
-
-  .map {
+  #map {
     height: $venue-map-wrapper-height - 10px;
     position: absolute;
     left: 0;
     right: 0;
+    z-index: 0;
   }
 }
 

WcaOnRails/app/assets/stylesheets/edit_schedule.scss

@@ -6,7 +6,7 @@
   }
 
   #venues-edit-panel {
-    .venue-map {
+    .leaflet-container {
       height: 300px;
     }
     .venue-form-label {

WcaOnRails/app/assets/stylesheets/wca.scss

@@ -469,3 +469,13 @@ select.input-xs {
     text-decoration: none;
   }
 }
+
+.invisible-iframe-map {
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border: 0;
+}

WcaOnRails/app/controllers/api/v0/geocoding_controller.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Api::V0::GeocodingController < Api::V0::ApiController
+  GMAPS_GEOCODING_URL = "https://maps.googleapis.com/maps/api/geocode/json"
+  # Enable CSRF protection on our GET action, to restrict usage of our API key to legit queries.
+  before_action :raise_if_invalid
+
+  def get_location_from_query
+    query_params = {
+      address: params.require(:q),
+      key: ENVied.GOOGLE_MAPS_API_KEY,
+    }
+    render json: JSON.parse(RestClient.get(GMAPS_GEOCODING_URL, params: query_params).body)
+  end
+
+  private def raise_if_invalid
+    raise ActionController::InvalidAuthenticityToken unless any_authenticity_token_valid?
+  end
+end

WcaOnRails/app/controllers/competitions_controller.rb

@@ -16,6 +16,7 @@ class CompetitionsController < ApplicationController
   before_action :authenticate_user!, except: [
     :index,
     :show,
+    :embedable_map,
     :show_podiums,
     :show_all_results,
     :show_results_by_person,
@@ -500,6 +501,12 @@ def show_results_by_person
     @competition = competition_from_params
   end
 
+  def embedable_map
+    # NOTE: by default rails has a SAMEORIGIN X-Frame-Options
+    @query = params.require(:q)
+    render layout: false
+  end
+
   def update
     @competition = competition_from_params(includes: CHECK_SCHEDULE_ASSOCIATIONS)
     @competition_admin_view = params.key?(:competition_admin_view) && current_user.can_admin_competitions?

WcaOnRails/app/helpers/application_helper.rb

@@ -217,4 +217,8 @@ def flag_icon(iso2, html_options = {})
   def format_money(money)
     "#{humanized_money_with_symbol(money)} (#{money.currency.name})"
   end
+
+  def embedded_map_url(query)
+    "#{ENVied.ROOT_URL}/map?q=#{URI.encode_www_form_component(CGI.unescapeHTML(query))}"
+  end
 end

WcaOnRails/app/helpers/markdown_helper.rb

@@ -30,10 +30,9 @@ def header(text, header_level)
     end
 
     def postprocess(full_document)
-      # Support embed Google Maps
+      # Support embed Open Street Map
       full_document.gsub!(/map\(([^)]*)\)/) do
-        google_maps_url = "https://www.google.com/maps/embed/v1/place?key=#{ENVied.GOOGLE_MAPS_API_KEY}&q=#{URI.encode_www_form_component(CGI.unescapeHTML($1))}"
-        "<iframe width='600' height='450' frameborder='0' style='border:0' src=\"#{google_maps_url}\"></iframe>"
+        "<iframe width='600' height='450' style='overflow: hidden' frameborder='0' style='border:0' src=\"#{embedded_map_url($1)}\"></iframe>"
       end
 
       # Support embed YouTube videos

WcaOnRails/app/javascript/edit-schedule/EditVenue/VenueLocationInput.jsx.erb

@@ -0,0 +1,14 @@
+import React from 'react'
+<%#
+  NOTE: Our headless browser PhantomJS doesn't support HTMLVideoElement.
+  Leaflet has a built-in video plugin and its code do an "instanceOf(HTMLVideoElement)",
+  which throws an error during tests.
+  For this reason, we only import stuff from Leaflet if we are not in test environment.
+  In test environment we just create a dummy VenueLocationInput.
+%>
+<% if Rails.env.test? %>
+  export const VenueLocationInput = () => (<div/>);
+<% else %>
+  import { VenueLocationInputImpl } from './VenueLocationInputImpl.jsx'
+  export const VenueLocationInput = (props) => (<VenueLocationInputImpl {...props} />);
+<% end %>

WcaOnRails/app/javascript/edit-schedule/EditVenue/VenueLocationInputImpl.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+// Import leaflet, and the fix for the icon url
+import 'leaflet-wca';
+import { Map, TileLayer, Marker } from "react-leaflet"
+import { userTileProvider } from 'leaflet-wca/providers.js';
+import { toDegrees } from '../utils'
+import { Row, Col } from 'react-bootstrap'
+
+class InvisibleIFrame extends React.Component {
+
+  componentDidMount() {
+    this.iframe.contentWindow.addEventListener('resize', this.props.onResizeAction);
+  }
+
+  componentWillUnmount() {
+    this.iframe.contentWindow.removeEventListener('resize', this.props.onResizeAction);
+  }
+
+  render() {
+    return (
+      <iframe src="about:blank" className="invisible-iframe-map" ref={m => { this.iframe = m }} />
+    );
+  }
+}
+
+export class VenueLocationInputImpl extends React.Component {
+
+  invalidateSize = () => {
+    this.mapElem.leafletElement.invalidateSize(false);
+  }
+
+  render() {
+    let { lat, lng, actionHandler } = this.props;
+    let provider = userTileProvider;
+    let mapPosition = { lat: toDegrees(lat), lng: toDegrees(lng) };
+    return (
+      <Row>
+        <Col xs={12}>
+          <span className="venue-form-label control-label">Please pick the venue location below:</span>
+        </Col>
+        <Col xs={12} className="venue-map">
+          <Map center={mapPosition}
+               zoom={16}
+               scrollWheelZoom={false}
+               ref={m => { this.mapElem = m; }}
+          >
+            <InvisibleIFrame onResizeAction={this.invalidateSize} />
+            <TileLayer url={provider.url} attribution={provider.attribution}/>
+            <Marker
+              position={mapPosition}
+              draggable={true}
+              onDragend={actionHandler}
+            />
+          </Map>
+        </Col>
+      </Row>
+    );
+  }
+}

WcaOnRails/app/javascript/edit-schedule/EditVenue/index.jsx

@@ -4,14 +4,12 @@ import {
   convertVenueActivitiesToVenueTimezone,
   newRoomId,
   toMicrodegrees,
-  toDegrees,
 } from '../utils'
 import { defaultRoomColor } from './constants.js.erb'
 import { EditRoom } from './EditRoom'
-import { compose, withProps } from "recompose"
-import { withGoogleMap, GoogleMap, Marker } from "react-google-maps"
 import { Button, Panel, Row, Col } from 'react-bootstrap'
 import { timezoneData } from 'wca/timezoneData.js.erb'
+import { VenueLocationInput } from './VenueLocationInput.jsx.erb'
 
 export class EditVenue extends React.Component {
 
@@ -28,9 +26,9 @@ export class EditVenue extends React.Component {
   }
 
   handlePositionChange = event => {
-    let pos = event.latLng;
-    let newLat = toMicrodegrees(pos.lat());
-    let newLng = toMicrodegrees(pos.lng());
+    let pos = event.target._latlng;
+    let newLat = toMicrodegrees(pos.lat);
+    let newLng = toMicrodegrees(pos.lng);
     // Update parent's WCIF
     this.props.venueWcif.latitudeMicrodegrees = newLat;
     this.props.venueWcif.longitudeMicrodegrees = newLng;
@@ -64,7 +62,6 @@ export class EditVenue extends React.Component {
         rootRender();
       },
     };
-
     return (
       <div>
         <div className="panel-venue">
@@ -113,39 +110,6 @@ const NameInput = ({name, actionHandler}) => (
   </Row>
 );
 
-const VenueLocationInput = ({lat, lng, actionHandler}) => (
-  <Row>
-    <Col xs={12}>
-      <span className="venue-form-label control-label">Please pick the venue location below:</span>
-    </Col>
-    <Col xs={12}>
-      <MapPickerComponent latitudeMicrodegrees={lat}
-                          longitudeMicrodegrees={lng}
-                          onPositionChange={actionHandler} />
-    </Col>
-  </Row>
-);
-
-const MapPickerComponent = compose(
-  withProps({
-    containerElement: <div className="venue-map" />,
-    mapElement: <div style={{ height: `100%` }} />,
-  }),
-  withGoogleMap
-)((props) => {
-  let { latitudeMicrodegrees, longitudeMicrodegrees, onPositionChange } = props;
-  let [lat, lng] = [latitudeMicrodegrees, longitudeMicrodegrees].map(toDegrees);
-  return (
-    <GoogleMap
-      defaultZoom={12}
-      defaultCenter={{ lat, lng }}
-    >
-      <Marker position={{ lat, lng }} draggable={true} onDragEnd={onPositionChange} />
-    </GoogleMap>
-  );
-})
-
-
 const TimezoneInput = ({timezone, selectKeys, actionHandler}) => (
   <Row>
     <Col xs={3}>