-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (90 loc) · 5.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE HTML>
<!--
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Geocoding with Mapbox API</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="logo">
<span class="icon fa-compass"></span>
</div>
<div class="content">
<div class="inner">
<h1>GEOCODING WITH MAPBOX API</h1>
<p>A replication of google maps search functionality developed by <a href="https://twitter.com/aman_bagrecha">Aman Bagrecha</a>
</div>
</div>
<nav>
<ul>
<li><a href="./map.html">Explore</a></li>
<li><a href="#work">About the App</a></li>
<li><a href="#about">About Me</a></li>
<!-- <li><a href="#contact">Contact</a></li> -->
<!--<li><a href="#elements">Elements</a></li>-->
</ul>
</nav>
</header>
<!-- Main -->
<div id="main">
<!-- Intro -->
<!-- <article id="intro">
<h2 class="major">Intro</h2>
<span class="image main"><img src="images/pic01.jpg" alt="" /></span>
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my <a href="#work">awesome work</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.</p>
</article> -->
<!-- work -->
<article id="work" style="width: 60rem;!important">
<h2 class="major">The Idea!</h2>
<span class="image " style="float: left; "><img src="./images/app.png" alt="" />
</span>
<p style="padding-left: 1rem;display: flex;">This small Application demonstrates how to geocode an address using mapbox api implemented in openlayers v6. Additionally, on-click of search, the map gets zoomed to the location of Interest.</p>
<p style="padding-left: 1rem;display: flex;">The idea stems from google maps search functionality wherein you type the address and it zooms in to the location of interest. We replicate this exact functionality with mapbox API for geocoding and openlayers for client side zoom to the address of interest.</p>
<p style="padding: 1rem;float:right"><b>How to use the app?</b> Clone the repository from <a href="https://github.com/amanbagrecha/mapbox-search-functionality">Github</a> and edit <code>YOUR_MAPBOX_API_KEY</code> in <code>map.js</code>. Search for address and click <code>SUBMIT</code></p>
</article>
<!-- About Me-->
<article id="about" style="width: 60rem;!important">
<h2 class="major">About</h2>
<span class="image " style="float: left;"><img src="images/pp.jpg" alt="" />
</span>
<p style=" padding-left: 1rem;display: flex;">I am a civil engineering graduate from Rashtreeya Vidyalaya College of Engineering. I care about all things geospatial and AI.
<p style=" padding-left: 1rem;display: flex;color: darkturquoise;">So far I've had experience working on Django, Openlayers, Jquery, postgresql/postgis, geoserver, qgis/arcgis, S3 and ec2 in professional carrer and while in college I got to work on GEE, Adobe suites, MS Office suites. </p>
<p style=" padding-left: 1rem;display: flex;">I regularly write on Quora, tweet about FOSS, Deep Learning and my wild thoughts.
When I'm not on my laptop, I'm usually seen in park, jogging and playing batminton.</p>
<p style=" padding-left: 1rem;display: flex;">My Strengths include communication, adaptive learning and problem solving. I like keeping things clean, be it my code or my wardrobe.</p></p>
<span>
<!-- <a href="#"><i class="fa fa-envolope"></i></a> -->
<a href="twitter.com/aman_bagrecha" style="font-size: 22px;margin: 5px;"><i class="fa fa-twitter"></i></a>
<a href="https://www.linkedin.com/in/amanbagrecha/" style="font-size: 22px;margin: 5px;"><i class="fa fa-linkedin"></i></a>
<a href="https://www.github.com/amanbagrecha" style="font-size: 22px;margin: 5px;"><i class="fa fa-github"></i></a>
</span>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Credit: HTML5 UP</p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>