Регулировка размера API карт Google на пользовательском интерфейсе - PullRequest
Новая
       10

Регулировка размера API карт Google на пользовательском интерфейсе

0 голосов
/ 17 октября 2019

У меня есть этот пользовательский интерфейс, встроенный в экспресс + node.js:

enter image description here

Когда я добавляю в него карты Google Mapbox, я получаю следующее:

enter image description here

Что полностью охватывает интерфейс, который я построил. Теперь, как мне настроить карты Google? Я не смог найти ничего полезного в Интернете и подумал, что это мой 5-й день с использованием Node.JS + Express + HTML.

Вот мой код .ejs: 

<!DOCTYPE html>
<html lang="en">

<% include includes/header.html %>

<body>

  <div class="d-flex" id="wrapper">

    <!-- Sidebar -->
    <% include includes/sidebar.html %>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div style="background-color:  #202D56  ;" id="page-content-wrapper">
      <% include includes/navbar.html %>
      <div class="container-fluid">
        <div id="div_page_gaea">
         <div style="background-color:#192544;"><font color="white"><h4><h2> <b> 
           <img class="logo" src="/images/GAEA-logo.png" alt="" width="100" height="100"> DELPHI </b>- Demographic Effect Leading 
         Predictor (for) Housing Indices</h2> </h4></div>
          <!-- <button id="g_button" type="button" class="btn-primary">Click me</button> -->
          <!-- Start adding HTML HERE -->
          <div class="form-group" style="text-align: center">
            <label for="select-variable" >ENTER AN ADDRESS | SEPARATE MULTIPLE ADDRESSES BY SEMICOLONS (;):</label>
              <input id="address_text" class="form-control col-sm-12" placeholder="693 Bluebird Canyon Drive, Laguna Beach, CA 92651" 
              style="text-align: center">
          </div>
          <div class="form-group col-sm-3" >
              <label for="select-variable" >CHOOSE YOUR VARIABLE:</label>
              <select class="form-control" id="sel1" style="text-align: center">
                <option value="">Predicted Growth Rank</option>
              </select>
            </div>
          <div class="form-group col-sm-3">
              <label for="select-variable">DATA YEAR FOR DISPLAY:</label>
              <select class="form-control" id="sel2" style="text-align: center">
                <option value="">2017</option>
                <option value="">2016</option>
                <option value="">2015</option>
                <option value="">2014</option>
                <option value="">2013</option>
                <option value="">2012</option>
              </select>
            </div>
          <div class="form-group col-sm-3">
              <label for="select-variable">BENCHMARK YEAR:</label>
              <select class="form-control" id="sel3" style="text-align: center">
                <option value="">2012</option>
                <option value="">2013</option>
                <option value="">2014</option>
                <option value="">2015</option>
                <option value="">2016</option>
              </select>
            </div>
          <p><button type="button" class="btn btn-primary col-sm-3" >SUBMIT AND RUN</button></p>
          <p><button type="button" class="btn btn-success col-sm-3" >DOWNLOAD EXCEL (First address only)</button></p>

          <title></title>
          <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
          <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
          <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
          <style>
            body {
              margin: 0;
              padding: 0;
            }

            #map {
              position: absolute;
              top: 0;
              bottom: 0;
              width: 100%;
            }
          </style>

          <div id='map'></div>
            <script>
            // add the JavaScript here
            mapboxgl.accessToken = 'pk.KEYYYYYYYYYYYYYYYYYYYYYY';
            var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v10',
            center: [-122.662323, 45.523751], // starting position
            zoom: 12
            });
            </script>
      </div>
    </div>
    <!-- /#page-content-wrapper -->
  </div>
  <!-- /#wrapper -->

  <!-- Bootstrap core JavaScript -->
  <script src="/vendor/jquery/jquery.min.js"></script>
  <script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <script>

  </script>

</body>

</html>

Вот мой. js код: 

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();
const port = process.env.PORT || 80;
const server = process.env.SERVER || 'pa-dev-1.flanderscapital.com';
const bodyParser = require('body-parser')

// default options
app.use(fileUpload());

// set the view engine to ejs
app.set('view engine', 'ejs');

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

app.use(express.static(__dirname + '/public'));

var routes = require('./app/routes')(app);


app.listen(port, server, () => console.log(`PA Tools Server listening on port ${port}!`))

// Get image of GAEA logo
var publicDir = require('path').join(__dirname, 'public');
app.use(express.static(publicDir));

РЕДАКТИРОВАТЬ:

После регулировки: 

#map {
              position: absolute;
              top: 1.0;
              bottom: 0;
              left:2.0;
              height:65%;
              width: 45%;
            }

У меня теперь есть:

enter image description here

Я хочу переместить эту карту вправо.

...