Final project progress

Since there are so many midterm projects that I have to complete soon these days, I decided to associate my midterm project for Mashups class to this final project.
The basic goal of the Mashups project is mixing two APIs and my plan for this is creating a photo map using Google Maps API and Instagram API. I’ll build this web application on my Digital Ocean server.
I tried loading the map using Google Maps API and it was successful. However, Instagram API is a bit complicated. It uses OAuth protocol.
Fortunately, it is expected that we will learn about OAuth in the next DWD class, therefore I will try to integrate Instagram API after the class.

The source codes are like below:

[index.html]

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mapsta</title>
    <link rel="stylesheet" href="style.css">
    <!-- <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> -->
  </head>

  <body>
    <header>
      <div class="appTitle">Mapsta</div>
    </header>
    <div id="map">
    </div>
    <div id="thumbnails">
      <div id="thumbContainer">
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
        <div class="dummyImg"></div>
      </div>
    </div>
    <script src="script.js"></script>
    <script id="mapkey" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

[style.css]

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

body{
  position: relative;
}

header {
  width: 100%;
  padding: 20px 0;
  background-color: rgba(0, 0, 0, 1);
}

header .appTitle {
  display: inline-block;
  margin: auto 0;
  margin-left: 2%;

  color: white;
  font-size: 2em;
  font-weight: 600;
}

div#map {
  display: block;
  float: left;
  width: 100%;
  /*height: 70%;*/
  height: 90vh;
  background-color: black;
  overflow: hidden;
}

div#thumbContainer {
  width: 5000px;
  float: left;
  height: 90vh;
  position: relative;
}

div#thumbnails{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;

}



#thumbnails .dummyImg {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: gray;
  border: 0.02px solid black ;
  float: left;
  bullets: true;
}

[script.js]

var map;

var latlngCtr = {
  lat: 19.71388249013611,
  lng: 9.209659489448029
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    'center' : latlngCtr,
    'zoom' : 3,
    'mapTypeId' : google.maps.MapTypeId.ROADMAP,
    'draggable' : true,
    'scrollwheel' : true
  });
}

[server.js]

var express = require('express')
var app = express()

app.use(express.static('public'));

// body parser
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: true }); // for parsing form data
app.use(urlencodedParser); 

app.listen(8000, function () {
  console.log('Example app listening on port 8000!')
})

 

I couldn’t upload the source files to my github yet coz my google map api key is currently exposed in my index.html. I don’t know how to hide it.

The following image is the result:

Instagram photo thumbnails will appear on the bottom trails when the API is integrated.

Leave a Reply

Your email address will not be published. Required fields are marked *