Safe Discovery | 1D, 2D, 3D, Go!
Team Updates
Presentation:
https://docs.google.com/presentation/d/1nLt6pKQLzr...
A
Ahmed ElmayyahGitHub Repo:
A
Ahmed ElmayyahGoogle's Maps API is not free anymore so we used Here Maps API.
A
Ahmed Elmayyah| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <title>Safe Discovery</title> | |
| <!-- Bootstrap core CSS --> | |
| <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Custom fonts for this template --> | |
| <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> | |
| <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> | |
| <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> | |
| <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'> | |
| <!-- Custom styles for this template --> | |
| <link href="css/agency.min.css" rel="stylesheet"> | |
| </head> | |
| <body id="page-top"> | |
| <!-- Navigation --> | |
| <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> | |
| <div class="container"> | |
| <a class="navbar-brand js-scroll-trigger" href="#page-top">Safe Discovery</a> | |
| <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> | |
| Menu | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarResponsive"> | |
| <ul class="navbar-nav text-uppercase ml-auto"> | |
| <li class="nav-item"> | |
| <a class="nav-link js-scroll-trigger" href="#header">Home</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link js-scroll-trigger" href="#services">Map</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Header --> | |
| <header id="header" class="masthead"> | |
| <div class="container"> | |
| <div class="intro-text"> | |
| <div class="intro-lead-in">Welcome To Safe Discovery!</div> | |
| <div class="intro-heading text-uppercase">Explore Earth Safely</div> | |
| <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Go To Map</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Services --> | |
| <section id="services"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-12 text-center"> | |
| <h2 class="section-heading text-uppercase">Cycling Map</h2> | |
| </div> | |
| </div> | |
| <div id="map" style="width: 100%; height: 400px; background: grey" /> | |
| <div class="row text-center"></div> | |
| </div> | |
| </section> | |
| <!-- scripts for here maps --> | |
| <meta name="viewport" content="initial-scale=1.0, width=device-width" /> | |
| <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" /> | |
| <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script> | |
| <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script> | |
| <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script> | |
| <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script> | |
| <script type="text/javascript" src="js/script.js"></script> | |
| </body> | |
| </html> |
| var data = [ | |
| [30.012815,31.289761,30.013502,31.287544, 'green'], | |
| [30.013502,31.287544,30.014068,31.285439,'green'], | |
| [30.014068,31.285439,30.015095,31.281898,'yellow'], | |
| [30.013327,31.287314,30.012036,31.286758,'red'] | |
| ] | |
| /** | |
| * Adds a polyline between Dublin, London, Paris and Berlin to the map | |
| * | |
| * @param {H.Map} map A HERE Map instance within the application | |
| */ | |
| function addPolylineToMap(map) { | |
| for (int i=0;i<data.length;i+=2){ | |
| var lineString = new H.geo.LineString(); | |
| lineString.pushPoint({lat:data[i][0], lng:data[i][1]}); | |
| lineString.pushPoint({lat:data[i+1][0], lng:data[i+1][1]}); | |
| map.addObject(new H.map.Polyline( | |
| lineString, { style: { lineWidth: 4, strokeColor: '#ffa500' }} | |
| )); | |
| } | |
| } | |
| /** | |
| * Boilerplate map initialization code starts below: | |
| */ | |
| //Step 1: initialize communication with the platform | |
| var platform = new H.service.Platform({ | |
| app_id: 'qGiZiXtd8ERGAjh19GVy', | |
| app_code: '1_lj4pbQ6BrtThgc-0kzQQ', | |
| useHTTPS: true | |
| }); | |
| var pixelRatio = window.devicePixelRatio || 1; | |
| var defaultLayers = platform.createDefaultLayers({ | |
| tileSize: pixelRatio === 1 ? 256 : 512, | |
| ppi: pixelRatio === 1 ? undefined : 320 | |
| }); | |
| //Step 2: initialize a map - this map is centered over Europe | |
| var map = new H.Map(document.getElementById('map'), | |
| defaultLayers.normal.map,{ | |
| center: {lat:30.2, lng:30.5}, | |
| zoom: 8, | |
| pixelRatio: pixelRatio | |
| }); | |
| //Step 3: make the map interactive | |
| // MapEvents enables the event system | |
| // Behavior implements default interactions for pan/zoom (also on mobile touch environments) | |
| var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); | |
| // Create the default UI components | |
| var ui = H.ui.UI.createDefault(map, defaultLayers); | |
| // Now use the map as required... | |
| addPolylineToMap(map); |
A
Ahmed Elmayyah
The website's home page
A
Ahmed Elmayyah
The map that is drawn by the web application
A
Ahmed Elmayyah
SpaceApps is a NASA incubator innovation program.