Hi
I have a html file that I included here. The file has text boxes and one push button. The push button will be activated in JavaScript file.
When the javaScript runs it has an initialization section that loads the Google Maps tool to do certain measurements of a location or roof.
I need to create a function that will do the followings:
The existing code is already creating a huge square area or polygon. So idea is to create few smaller squares those will fit into the existing square in a straight line with small spaces in between of the squares.
I have attached the JavaScript code and highlighted the section where this new function or code should evolve.
I just started learning JavaScript specially google map API and I am stuck. Please assist me how I can implement this, it will be monumental help.
JavaScript file
// JavaScript source code
'use strict';
var mapScript = (function () {
var GMap; // global variable within the solar module scope
var squarePolys = []; //global array of Shape that will be attached to google maps
function initMap() {
// Load map at default location
GMap = new google.maps.Map(document.getElementById('map'), {
center: { lat: 37.76963799867498, lng: -122.45126726263503 },
mapTypeId: google.maps.MapTypeId.SATELLITE,
draggableCursor: 'crosshair',
zoom: 20,
disableDefaultUI: true
});
// force orthorgraphic imagery
GMap.setTilt(0);
// wait till map display is fully updated before drawing an area or roof section
google.maps.event.addListenerOnce(GMap, "projection_changed", makeASite);
//button hook up
var createButton = $("#create-button");
createButton.click(function () {
makeASite();
});
}
//creating an area with modules
function makeASite() {
deletePreviousSite(); //removed any old polgyons first
// draw default area or roof rectangle
var rAreaSqPoly = constructRFSqPoly();
squarePolys.push(rAreaSqPoly);
// Create unites
var unites = makeUnits(rAreaSqPoly);
for (var i = 0; i < unites.length; i++) {
squarePolys.push(unites[i]);
}
render();
}
// Create the default roof or an area rectangle
function constructRFSqPoly() {
// The areas rectangle definition.
// Center: the latitude, longitude location of the center of the rectangle
// Width: width of rectangel in meters
// Height: height of rectangel
// rotation: rotation angle of rectangle
var rAreaSqPolyChoices = {
center: new google.maps.LatLng(37.76963799867498, -122.45126726263503),
width: 40.46, // meters
length: 28.35,
rotation: 20, // degrees
color: '#0072ff',
googleMap: GMap
};
// Create a google Shape object to overlay on the aerial
return new Shape(rAreaSqPolyChoices);
}
// Create a list of pv module rectangles those will be later attached to the map
function makeUnits(rAreaSqPoly) {
var unitSqPolys = [];
var unitWd = Number($("#site-width").val());
var unitLn = Number($("#site-length").val());
var unitSp = Number($("#site-spacing").val());
//Need code FOR DRAWING unites (square/polygon) on the Area
//(this could be a car parking or roof)
return unitSqPolys;
}
// Redraws each Shape in the Shape list
function render() {
for (var i = 0; i < squarePolys.length; i++) {
var Shape = squarePolys[i];
Shape.clearMap();
Shape.attachToMap();
}
}
//Removes old Shapes from map and clears out the Shape list
function deletePreviousSite() {
for (var i = 0; i < squarePolys.length; i++) {
var Shape = squarePolys[i];
Shape.clearMap();
}
squarePolys = [];
}
var Shape = (function () { //This is the class definition for Shape
//Width and length are in distance units,
//Center is a google maps point in lat,lng coordinates
//Rotation is in degress
function Shape(options)
{ //This is the constructor for thos class
// if(width !== "number" || length !== "number" || center !== "object", rotation !== "number")
// throw new Error("Invalid arguments for constructing a Shape object");
var _self = this;
_self.width = options.width;
_self.length = options.length;
_self.center = options.center;
_self.rotation = options.rotation;
_self.googleMap = options.googleMap;
_self.color = typeof options.color === "string" ? options.color : "#0072ff";
_self.line = [];
createShape();
// In JavaScript member functions declared inside the contruction are private
function createShape() {
// Create rectangle coordinates, in latitude, longitude space to define an area or roof section of rectangle
var line = [
Shape.setValuesInMtr(_self.center, _self.length / 2, -1 * _self.width / 2),
Shape.setValuesInMtr(_self.center, -1 * _self.length / 2, -1 * _self.width / 2),
Shape.setValuesInMtr(_self.center, -1 * _self.length / 2, 1 * _self.width / 2),
Shape.setValuesInMtr(_self.center, _self.length / 2, _self.width / 2)
];
// Rotate the coordinates by the angle relative to the center of it
_self.line = moveline(line, _self.rotation, _self.center);
_self.googleMapsShape = new google.maps.Shape({
lines: _self.line,
strokeColor: _self.color,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: _self.color,
fillOpacity: 0.35
});
}
// Rotates an input array of latitude, longitude locations by the specified
// angle around the specified latitude/longitude center
function moveline(line, angle, origin) {
var thisProjection = _self.googleMap.getProjection();
var originPt = thisProjection.fromLatLngToPoint(origin);
var moveOrders = line.map(function (latLng) {
var point = thisProjection.fromLatLngToPoint(latLng);
var rotatedLatLng = thisProjection.fromPointToLatLng(circulatePts(point, originPt, angle));
return rotatedLatLng;
});
return moveOrders;
};
// Rotation transformation
function circulatePts(point, origin, angle) {
var thisAngleR = angle * Math.PI / 180.0;
return {
x: Math.cos(thisAngleR) * (point.x - origin.x) - Math.sin(thisAngleR) * (point.y - origin.y) + origin.x,
y: Math.sin(thisAngleR) * (point.x - origin.x) + Math.cos(thisAngleR) * (point.y - origin.y) + origin.y
};
}
}
//Attaches Shape to google maps
Shape.prototype.attachToMap = function () { //public member function
this.googleMapsShape.setMap(this.googleMap);
};
//Removes this Shape from google maps
Shape.prototype.clearMap = function () { //public member function
this.googleMapsShape.setMap(null);
};
// When provide a latitude, longitude location, and a distance north as well as east,
// will return a new latitude, longitude location by the distances.
Shape.setValuesInMtr = function (pointLatLng, nhMeters, eTMeters)
{ //Public static member function
var R = 6378137; //PlanetEarth’s radius, sphere
//offsets in radians
var dLat = nhMeters / R;
var dLon = eTMeters / (R * Math.cos(Math.PI * pointLatLng.lat() / 180));
return new google.maps.LatLng(
pointLatLng.lat() + dLat * 180 / Math.PI,
pointLatLng.lng() + dLon * 180 / Math.PI);
};
return Shape
})();
return {
initMap: initMap
}
})();
HTML file
<html>
<head>
<title>Simple Map To Test</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 60%;
width: 60%;
}
#site-input {
margin: 10px;
}
input {
margin: 5px;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<div id="site-input">
Wd: <input type="text" id="site-width" value="5"><br>
Ln: <input type="text" id="site-length" value="7"><br>
Sp: <input type="text" id="site-spacing" value="0"><br>
<button id="create-button">Create</button><br>
</div>
<div id="map"></div>
<script src="./mapScript.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=mapScript.initMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
</body>
</html>
type or paste code here
