Created
October 20, 2018 09:52
-
-
Save ahmad307/30a1e1ff8cafd5d568a2aaa92b4404e0 to your computer and use it in GitHub Desktop.
Safe Discovery Website showing cycling safe map.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment