Paris Metro Map

Download metromap.zip After clicking the link choose “Open in DICE.”

While we built this app to aid disaster response and search and rescue groups, it is our hope that they won’t have a reason to use it any time soon.

So for the times that they are not in the field helping folks get out of harm’s way, a nice trip to Europe could get them charged back up. This example could help in planning a sightseeing trip to Paris.

Subway maps are great, but sometimes it can be difficult to see where the metro lines actually go in relation to the city. This map lets you view the museums and must see sights of Paris alongside the routes of the city’s excellent subway system.

Add a couple of points to the map where you find a new favorite creperie or cafe so you will remember them for next time.

The export and GPS functions of this map use the iOS Javascript bridge to call code in the DICE app to get the user’s location and write the geoJSON to a file. You could use HTML 5 geolocation, but every time the page loads you would have to get the user’s permission to get their location. This way, you authorize the app to use your location once, and use the native code to access the GPS.

Below is the code that this example uses to get the user’s location.

  $scope.initBridge = function() {
    $scope.connectWebViewJavascriptBridge(function(bridge) {
      bridge.init(function(message, responseCallback) {
        console.log('JS got a message', message)
      })
    })
  }

  $scope.connectWebViewJavascriptBridge = function(callback) {
    if (window.WebViewJavascriptBridge) {
      callback(WebViewJavascriptBridge);
    } else {
      document.addEventListener('WebViewJavascriptBridgeReady', function() {
        callback(WebViewJavascriptBridge);
      }, false)
    }
  }

  $scope.getLocation = function() {
    console.log("Controller: in getLocaion");
    $scope.connectWebViewJavascriptBridge(function(bridge) {
      bridge.callHandler('getLocation', {}, function(response) {
        console.log("Recieved callback from geolocation.");
        if (response != null && response.success == "true") {
          $scope.setCoordinates(response);
        } else { // no GPS? set the map center to Denver.
          console.log("No navigator, setting coordinates to defaults... " + response.message);
          $scope.lat = 39.739093;
          $scope.lon = -104.984794;
        }
      })
    })
  }
  

Resources used to create the user guide: Bootstrap for layout, Leaflet.js for the map, Awesome Markers for custom map pins, AngularJS to tie together the points you create with the map and to use the DICE JS bridge.

Data for the map comes from Map Cruzin and Open Street Map under the Open Data Commons Open Database License (ODbL).