Replace google maps with leaflet

  - Replace maps in edit schedule
  - Replace maps in tabs
  - Replace maps in competitions forms
  - Replace maps in persons profiles

WcaOnRails/app/assets/javascripts/competitions.js

@@ -71,9 +71,13 @@ 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 hide the map element, Leaflet needs to recompute the size.
+      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/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/EditSchedule.jsx

@@ -17,6 +17,7 @@ import { initElementsIds, newVenueId } from './utils'
 import { saveWcif } from 'wca/wcif-utils'
 
 export const schedulesEditPanelSelector = "#schedules-edit-panel";
+export const venuesEditPanelSelector = "#venues-edit-panel";
 
 export default class EditSchedule extends React.Component {
   componentWillMount() {
@@ -51,6 +52,11 @@ export default class EditSchedule extends React.Component {
   componentDidMount() {
     wca.datetimepicker();
     window.addEventListener("beforeunload", this.onUnload);
+    $(venuesEditPanelSelector).find('.panel-collapse').on('shown.bs.collapse', () => {
+      // Trigger this custom event so that venues' map are invalidated
+      // (necessary for leaflet maps)
+      $(window).trigger('venues-panel-shown');
+    });
   }
 
   componentWillUnmount() {

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

@@ -0,0 +1,59 @@
+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 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.erb';
+  import { toDegrees } from '../utils'
+  import { Row, Col } from 'react-bootstrap'
+  export class VenueLocationInput extends React.Component {
+
+    invalidateSize = () => {
+      this.mapElem.leafletElement.invalidateSize(false);
+    }
+
+    componentDidMount() {
+      $(window).on('venues-panel-shown', this.invalidateSize);
+    }
+
+    componentWillUnmount() {
+      $(window).off('venues-panel-shown', this.invalidateSize);
+    }
+
+    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; }}
+            >
+              <TileLayer url={provider.url} attribution={provider.attribution}/>
+              <Marker
+                position={mapPosition}
+                draggable={true}
+                onDragend={actionHandler}
+              />
+            </Map>
+          </Col>
+        </Row>
+      );
+    }
+  }
+<% end %>

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}>