Replace google-map with openStreetMap in map interaction. (oppia#6309)

* Replaced google-map with openStreetMap in interaction.

* Changes made after testing UI on mobile devices.

* Simple UI changes.

* Updated correct depen. URL.

* Fixed state navigation issue.

* Fixed lint issue.

* Added review changes.

* Added review changes.

* Made some stylistic changes after following a user journey.

* Remove googlemaps from node_modules.

* Added leaflet type for npm.

* made changes in tsconfig.json

* Added CSS class.

core/templates/dev/head/app.js

@@ -21,10 +21,10 @@
 // in order to make the testing and production environments match.
 var oppia = angular.module(
   'oppia', [
-    'ngMaterial', 'ngAnimate', 'ngAudio', 'angularAudioRecorder', 'ngSanitize',
-    'ngTouch', 'ngResource', 'ui.bootstrap', 'ui.tree', 'ui.sortable',
-    'infinite-scroll', 'ngJoyRide', 'ngImgCrop', 'ui.validate',
-    'pascalprecht.translate', 'ngCookies', 'toastr', 'headroom', 'dndLists'
+    'angularAudioRecorder', 'dndLists', 'headroom', 'infinite-scroll',
+    'ngAnimate', 'ngAudio', 'ngCookies', 'ngImgCrop', 'ngJoyRide', 'ngMaterial',
+    'ngResource', 'ngSanitize', 'ngTouch', 'pascalprecht.translate', 'toastr',
+    'ui.bootstrap', 'ui.sortable', 'ui.tree', 'ui.validate'
   ].concat(
     window.GLOBALS ? (window.GLOBALS.ADDITIONAL_ANGULAR_MODULES || []) : []));
 

core/templates/dev/head/css/oppia.css

@@ -1598,6 +1598,10 @@ pre.oppia-pre-wrapped-text {
 .oppia-editable-section:hover .oppia-interaction-preview {
   background: rgba(5, 140, 166, 0.5);
   border-radius: 4px;
+  /* The z-index value of leaflet map zoom control is 1000, to make it go lower
+     in stack we have used 1001.
+  */
+  z-index: 1001;
 }
 
 .oppia-editor-edit-icon {

core/templates/dev/head/pages/exploration_player/supplemental_card_directive.html

@@ -43,7 +43,10 @@
     right: 12px;
     text-align: left;
     transition: all 350ms;
-    z-index: 500;
+    /* The z-index value of leaflet map attribution is 1000, to make it go lower
+       in stack we have used 1001.
+    */
+    z-index: 1001;
   }
 
   .conversation-skin-help-card.ng-enter,

extensions/dependencies/dependencies_config.py

@@ -21,7 +21,7 @@
 # should insert when the Angular app is first initialized.
 DEPENDENCIES_TO_ANGULAR_MODULES_DICT = {
     'codemirror': ['ui.codemirror'],
-    'google_maps': ['ui.map'],
+    'ui_leaflet': ['ui-leaflet'],
     'guppy': [],
     'logic_proof': [],
     'math_expressions': [],

extensions/dependencies/ui_leaflet.html

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="/third_party/static/leaflet-1.4.0/leaflet.css">
+<script src="/third_party/static/leaflet-1.4.0/leaflet.js"></script>
+<script src="/third_party/static/angular-ui-leaflet-1.0.3/ui-leaflet.min.no-header.js"></script>
+<!-- The angular-simple-logger is a dependency in ui-leaflet angular plugin. -->
+<script src="/third_party/static/angular-simple-logger-0.1.7/angular-simple-logger.min.js"></script>

extensions/interactions/InteractiveMap/InteractiveMap.py

@@ -26,7 +26,7 @@ class InteractiveMap(base.BaseInteraction):
     description = 'Allows learners to specify a position on a world map.'
     display_mode = base.DISPLAY_MODE_SUPPLEMENTAL
     is_trainable = False
-    _dependency_ids = ['google_maps']
+    _dependency_ids = ['ui_leaflet']
     answer_type = 'CoordTwoDim'
     instructions = 'Click on the map'
     narrow_instructions = 'View map'

extensions/interactions/InteractiveMap/directives/OppiaInteractiveInteractiveMapDirective.js

@@ -34,34 +34,61 @@ oppia.directive('oppiaInteractiveInteractiveMap', [
         '/interactions/InteractiveMap/directives/' +
         'interactive_map_interaction_directive.html'),
       controller: [
-        '$scope', '$attrs', '$timeout', 'CurrentInteractionService',
-        function($scope, $attrs, $timeout, CurrentInteractionService) {
+        '$attrs', '$scope', '$timeout', 'BrowserCheckerService',
+        'CurrentInteractionService', function(
+            $attrs, $scope, $timeout, BrowserCheckerService,
+            CurrentInteractionService) {
           $scope.coords = [
             HtmlEscaperService.escapedJsonToObj($attrs.latitudeWithValue),
             HtmlEscaperService.escapedJsonToObj($attrs.longitudeWithValue)];
           $scope.zoom = (
             HtmlEscaperService.escapedJsonToObj($attrs.zoomWithValue));
           $scope.interactionIsActive = ($scope.getLastAnswer() === null);
-          $scope.mapMarkers = [];
+          $scope.mapMarkers = {};
+          var coords = $scope.coords || [0, 0];
+          var zoomLevel = parseInt($scope.zoom, 10) || 0;
 
           $scope.setOverlay = function() {
             $scope.overlayStyle = {
-              'background-color': 'black'
-            };
-            $scope.mapStyle = {
-              opacity: '0.8'
+              'background-color': 'white',
+              opacity: 0.5,
+              'z-index': 1001
             };
           };
 
           $scope.hideOverlay = function() {
             $scope.overlayStyle = {
               'background-color': 'white'
             };
-            $scope.mapStyle = {
-              opacity: '1'
-            };
           };
 
+          var changeMarkerPosition = function(lat, lng) {
+            $scope.mapMarkers.mainMarker = {
+              lat: lat,
+              lng: lng,
+              icon: {
+                iconUrl: UrlInterpolationService.getExtensionResourceUrl(
+                  '/interactions/InteractiveMap/static/marker-icon.png'),
+                // The size of the icon image in pixels.
+                iconSize: [25, 41],
+                // The coordinates of the "tip" of the icon.
+                iconAnchor: [12, 41],
+                shadowUrl: UrlInterpolationService.getExtensionResourceUrl(
+                  '/interactions/InteractiveMap/static/marker-shadow.png'),
+                // The size of the shadow image in pixels.
+                shadowSize: [41, 41],
+                // The coordinates of the "tip" of the shadow.
+                shadowAnchor: [13, 41],
+                // The URL to a retina sized version of the icon image.
+                // Used for Retina screen devices.
+                iconRetinaUrl: UrlInterpolationService.getExtensionResourceUrl(
+                  '/interactions/InteractiveMap/static/marker-icon-2x.png'),
+                shadowRetinaUrl: (
+                  UrlInterpolationService.getExtensionResourceUrl(
+                    '/interactions/InteractiveMap/static/marker-shadow.png'))
+              }
+            };
+          };
 
           $scope.$on(EVENT_NEW_CARD_AVAILABLE, function() {
             $scope.interactionIsActive = false;
@@ -72,61 +99,53 @@ oppia.directive('oppiaInteractiveInteractiveMap', [
             refreshMap();
           });
 
-          // This is required in order to avoid the following bug:
-          //   http://stackoverflow.com/questions/18769287
           var refreshMap = function() {
-            $timeout(function() {
-              google.maps.event.trigger($scope.map, 'resize');
-              $scope.map.setCenter({
+            $scope.mapOptions = {
+              center: {
                 lat: coords[0],
-                lng: coords[1]
-              });
-              if (!$scope.interactionIsActive) {
-                $scope.mapMarkers.push(new google.maps.Marker({
-                  map: $scope.map,
-                  position: new google.maps.LatLng(
-                    $scope.getLastAnswer()[0], $scope.getLastAnswer()[1])
-                }));
+                lng: coords[1],
+                zoom: zoomLevel
+              },
+              defaults: {
+                // Disable dragging for mobile devices.
+                dragging: !BrowserCheckerService.isMobileDevice()
+              },
+              events: {
+                map: {
+                  enable: ['click', 'mouseover', 'mouseout'],
+                  logic: 'emit'
+                }
               }
-            }, 100);
-          };
-
-          var coords = $scope.coords || [0, 0];
-          var zoomLevel = parseInt($scope.zoom, 10) || 0;
-          $scope.mapOptions = {
-            center: new google.maps.LatLng(coords[0], coords[1]),
-            zoom: zoomLevel,
-            mapTypeId: google.maps.MapTypeId.ROADMAP,
-            draggable: $scope.interactionIsActive
-          };
-
-          $scope.onMouseOver = function() {
-            if ($scope.interactionIsActive) {
-              return;
+            };
+            if (!$scope.interactionIsActive) {
+              changeMarkerPosition(
+                $scope.getLastAnswer()[0], $scope.getLastAnswer()[1]);
             }
-            $scope.setOverlay();
           };
 
-          $scope.onMouseOut = function() {
-            if ($scope.interactionIsActive) {
-              return;
-            }
-            $scope.hideOverlay();
-          };
+          $scope.$on('leafletDirectiveMap.interactiveMap.mouseover',
+            function() {
+              if (!$scope.interactionIsActive) {
+                $scope.setOverlay();
+              }
+            });
 
-          $scope.registerClick = function($event, $params) {
+          $scope.$on('leafletDirectiveMap.interactiveMap.mouseout', function() {
             if (!$scope.interactionIsActive) {
-              return;
+              $scope.hideOverlay();
             }
-            var ll = $params[0].latLng;
-            $scope.mapMarkers.push(new google.maps.Marker({
-              map: $scope.map,
-              position: ll
-            }));
+          });
 
-            CurrentInteractionService.onSubmit(
-              [ll.lat(), ll.lng()], interactiveMapRulesService);
-          };
+          $scope.$on('leafletDirectiveMap.interactiveMap.click',
+            function(evt, args) {
+              if ($scope.interactionIsActive) {
+                var newLat = args.leafletEvent.latlng.lat;
+                var newLng = args.leafletEvent.latlng.lng;
+                changeMarkerPosition(newLat, newLng);
+                CurrentInteractionService.onSubmit(
+                  [newLat, newLng], interactiveMapRulesService);
+              }
+            });
 
           refreshMap();
         }

extensions/interactions/InteractiveMap/directives/OppiaResponseInteractiveMapDirective.js

@@ -31,13 +31,44 @@ oppia.directive('oppiaResponseInteractiveMap', [
         'interactive_map_response_directive.html'),
       controller: ['$scope', '$attrs', function($scope, $attrs) {
         var _answer = HtmlEscaperService.escapedJsonToObj($attrs.answer);
-
-        var latLongPair = _answer[0] + ',' + _answer[1];
-        $scope.staticMapUrl =
-          'https://maps.googleapis.com/maps/api/staticmap?' +
-          'center=' + latLongPair + '&zoom=4&size=500x400' +
-          '&maptype=roadmap&visual_refresh=true&markers=color:red|' +
-          latLongPair + '&sensor=false';
+        $scope.mapOptions = {
+          defaults: {
+            zoomControl: false,
+            attributionControl: false
+          },
+          center: {
+            lat: _answer[0],
+            lng: _answer[1],
+            zoom: 8
+          },
+          mapMarkers: {
+            mainMarker: {
+              lat: _answer[0],
+              lng: _answer[1],
+              icon: {
+                iconUrl: UrlInterpolationService.getExtensionResourceUrl(
+                  '/interactions/InteractiveMap/static/marker-icon.png'),
+                // The size of the icon image in pixels.
+                iconSize: [25, 41],
+                // The coordinates of the "tip" of the icon.
+                iconAnchor: [12, 41],
+                shadowUrl: UrlInterpolationService.getExtensionResourceUrl(
+                  '/interactions/InteractiveMap/static/marker-shadow.png'),
+                // The size of the shadow image in pixels.
+                shadowSize: [41, 41],
+                // The coordinates of the "tip" of the shadow.
+                shadowAnchor: [13, 41],
+                // The URL to a retina sized version of the icon image.
+                // Used for Retina screen devices.
+                iconRetinaUrl: UrlInterpolationService.getExtensionResourceUrl(
+                  '/interactions/InteractiveMap/static/marker-icon-2x.png'),
+                shadowRetinaUrl: (
+                  UrlInterpolationService.getExtensionResourceUrl(
+                    '/interactions/InteractiveMap/static/marker-shadow.png'))
+              }
+            }
+          }
+        };
       }]
     };
   }

extensions/interactions/InteractiveMap/directives/interactive_map_interaction_directive.html

@@ -1,13 +1,5 @@
 <style>
-  /* Fixes for Google Maps zoom controls. */
-  .gm-style img {
-    max-width: none;
-  }
-  .gm-style label {
-    width: auto; display:inline;
-  }
-
-  #map_canvas {
+  .oppia-interactive-map {
     height: 400px;
     margin: auto;
     max-height: 400px;
@@ -22,10 +14,10 @@
   }
 
   @media screen and (max-width: 559px) {
-    #map_canvas {
-      max-width: 100vw;
-      min-width: 100vw;
-      width: 100vw;
+    .oppia-interactive-map {
+      max-width: 83vw;
+      min-width: 83vw;
+      width: 83vw;
     }
 
     .interactive-map-container {
@@ -36,9 +28,12 @@
 
 <div class="interactive-map-container">
   <div ng-style="overlayStyle">
-    <div id="map_canvas" ng-style="mapStyle" ui-map="map" ui-options="mapOptions"
-         ui-event="{'map-click': 'registerClick($event, $params)', 'map-mouseover': 'onMouseOver()',
-                   'map-mouseout': 'onMouseOut()'}">
-    </div>
+    <leaflet id="interactiveMap"
+             class="oppia-interactive-map"
+             defaults="mapOptions.defaults"
+             event-broadcast="mapOptions.events"
+             lf-center="mapOptions.center"
+             markers="mapMarkers">
+    </leaflet>
   </div>
 </div>

extensions/interactions/InteractiveMap/directives/interactive_map_response_directive.html

@@ -1 +1,19 @@
-<img ng-src="<[staticMapUrl]>" style="margin: 3px auto; display: block;">
+<div>
+  <div class="oppia-overlay-map-response"></div>
+  <leaflet id="interactiveMapResponse"
+           defaults="mapOptions.defaults"
+           lf-center="mapOptions.center"
+           markers="mapOptions.mapMarkers"
+           height="150px"
+           width="150px">
+  </leaflet>
+</div>
+<style>
+  .oppia-overlay-map-response {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    opacity: 0.5;
+    z-index: 1001;
+  }
+</style>