I have coordinates saved in variables, and want to create a polygon from them.
I understand I need to use something like this:
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
My question is, how do I get my variables:
"point1" which contains something like "(22.944440598889003, 113.96972241210938)" into the paths for the polygon?
You mean you want to add new vertex to polygon? Use array .push() method:
triangleCoords.push(new google.maps.LatLng(40, -70));
I used slightly different coordinates so that the polygon looks nice. You may want to redraw it:
bermudaTriangle.setMap(null); // remove the old triangle from map
// draw the new one:
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
Related
I want to save each image of this collection into my drive.
var filtered_Image=ee.ImageCollection('LANDSAT/LC8_L1T_TOA')
.filter(ee.Filter.eq('WRS_PATH', 138))
.filter(ee.Filter.eq('WRS_ROW', 45))
.filterMetadata('CLOUD_COVER','less_than',20)
.filterDate('2017-01-01', '2017-06-31')
.select(['B2', 'B3', 'B4']);
Try this
choose your geometry/point of interest from imports.
var batch = require('users/fitoprincipe/geetools:batch');
var filtered_Image=ee.ImageCollection('LANDSAT/LC8_L1T_TOA')
.filterBounds(POI)
.filter(ee.Filter.eq('WRS_PATH', 138))
.filter(ee.Filter.eq('WRS_ROW', 45))
.filterMetadata('CLOUD_COVER','less_than',20)
.filterDate('2017-01-01', '2019-12-31')
.select(['B2', 'B3', 'B4']);
Map.setCenter(88, 21, 7);
var vizParams = {
bands: ['B2', 'B3', 'B4'],
min: 0,
max: 0.5,
gamma: [0.95, 1.1, 1]
};
Map.addLayer (filtered_Image.first(), vizParams, 'false color composite')
batch.Download.ImageCollection.toDrive(filtered_Image, 'Landsat8', {
name: 'filtered_Image_{system:index}',
type: 'float',
scale: 30,
region: POI
});
Edit: Working solution.
(Works with the changes made by DevBab).
Extra: added an option to style the Polygon. (var polyStyle)
var url = 'http://reverse.geocoder.cit.api.here.com/6.2/reversegeocode.json' +
'?app_id='+ app_id +
'&app_code=' + app_code +
'&prox=' + lat +','+ lng +',1000' +
'&mode=retrieveAddresses&maxresults=1' +
'&level=county'+
'&additionaldata=IncludeShapeLevel,county';
$.getJSON(url,function (data) {
var location = data.Response.View[0].Result[0].Location;
var wktShape = location.Shape.Value;
var polyStyle = {
strokeColor: 'red',
fillColor: 'rgba(255, 255, 255, 0.3',
lineWidth: 2
};
var geoPoint = H.util.wkt.toGeometry(wktShape);
map.addObject(new H.map.Polygon(geoPoint,{style:polyStyle}));
});
You are creating a polygon, not a marker, so modify this:
map.addObject(new H.map.Marker(geoPoint));
by that:
map.addObject(new H.map.Polygon(geoPoint));
How can we get the bounding Rectangle that contains all items in the project?
Currently I'm calculating them one by one:
calc-bounds = (scope) ->
fit = {}
for layer in scope.project.layers
for item in layer.children
for <[ top left ]>
if item.bounds[..] < fit[..] or not fit[..]?
fit[..] = item.bounds[..]
for <[ bottom right ]>
if item.bounds[..] > fit[..] or not fit[..]?
fit[..] = item.bounds[..]
#console.log "fit bounds: ", fit
top-left = new scope.Point fit.left, fit.top
bottom-right = new scope.Point fit.right, fit.bottom
new scope.Rectangle top-left, bottom-right
Rationale
A "Fit all" function that sets project.center and project.zoom will need this calculation.
You can just unite (merge) all the bounds from all elements.
This will return a Rectangle that tightly fits all the elements, a.k.a a Bounding Box.
Here's a Sketch.
And here's the code:
var items = [
new Path.Circle({
position: new Point(100, 200),
radius: 50,
fillColor: 'blue'
}),
new Path.Circle({
position: new Point(200, 70),
radius: 50,
fillColor: 'purple'
}),
new Path.Circle({
position: new Point(400, 100),
radius: 50,
fillColor: 'magenta'
})
]
// Unite all bounds from all items.
var unitedBounds = items.reduce((bbox, item) => {
return !bbox ? item.bounds : bbox.unite(item.bounds)
}, null)
// Draw the united bounds.
var bbox = new Path.Rectangle(unitedBounds)
bbox.strokeColor = 'black'
You can use the layer bounds or group the element you want to bound instead of doing the reduce trick from #nicholaswmin
Here is a sketch with both solutions
const items = [
new Path.Circle({
position: new Point(100, 200),
radius: 50,
fillColor: 'blue'
}),
new Path.Circle({
position: new Point(200, 70),
radius: 50,
fillColor: 'purple'
}),
new Path.Circle({
position: new Point(400, 100),
radius: 50,
fillColor: 'magenta'
})
]
// Use the layer bounds
const layerBounds = project.activeLayer.bounds
// Group all needed items and use the bounds
const groupBounds = (new Group(items)).bounds
// Draw the bounds.
const bbox = new Path.Rectangle(layerBounds)
const bbox2 = new Path.Rectangle(groupBounds)
bbox.strokeWidth = 3
bbox.strokeColor = 'blue'
bbox2.strokeWidth = 6
bbox2.strokeColor = 'red'
bbox2.dashArray = [10, 10]
I am trying to draw an airline flight map using Google Map APIs. But I got some issues in generating polylines between every two points. So far, it only returns one polyline of the very first two points. I could not find any error so far. Is there anything wrong with the last for loop? Any comments and help will be highly appreciated!
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 41.871314, lng: -99.869580},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var Lat = [42.365843,37.756066,47.450431,28.431450,38.898793,34.040667];
var Lng = [-71.009625,-122.440175,-122.308806,-81.308094,-77.037227,-118.289537];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var Poly = new Array();
for (var i = 0; i<Lat.length; i++) {
var pos = new google.maps.LatLng(Lat[i],Lng[i]);
Poly.push(pos);
};
for (var j = 0; j<Poly.length; j++) {
if (j%2 == 0){
var poly = new Array();
poly = Poly.slice(j,j+2);
var flowline = new google.maps.Polyline({
path: poly,
geodesic: true,
strokeColor: "#DC143C",
strokeOpacity: .8,
strokeWeight: 2,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
});
}
};
flowline.setMap(map);
}
You are only setting the map property of the last polyline. This is outside of the loop that creates the polylines:
flowline.setMap(map);
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {
lat: 41.871314,
lng: -99.869580
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var Poly = new Array();
for (var i = 0; i < Lat.length; i++) {
var pos = new google.maps.LatLng(Lat[i], Lng[i]);
Poly.push(pos);
}
var flowlineNonGeodesic = new google.maps.Polyline({
path: Poly,
geodesic: false,
strokeColor: "#00FF00",
strokeOpacity: .8,
strokeWeight: 2,
map: map
});
for (var j = 0; j < Poly.length; j++) {
if (j % 2 == 0) {
var poly = Poly.slice(j, j + 2);
var flowline = new google.maps.Polyline({
path: poly,
geodesic: true,
strokeColor: "#DC143C",
strokeOpacity: .8,
strokeWeight: 2,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
});
flowline.setMap(map);
}
}
}
google.maps.event.addDomListener(window, "load", initMap);
var Lat = [42.365843, 37.756066, 47.450431, 28.431450, 38.898793, 34.040667];
var Lng = [-71.009625, -122.440175, -122.308806, -81.308094, -77.037227, -118.289537];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I need to draw a square polygon of 100x100 screenpixels whereever I click on the Google map (Amsterdam, lat 52, lng 4), on every zoomlevel, with e.latlng at the center of the polygon. I tried to figure it out using fromLatLngToPoint, fromPointToLatLng, scale and worldCoordinates, but I can't get the polygon drawn. If someone likes this puzzle I would appreciate the solution very much.
(I want to use this as a simple start to edit the polygon to a more complex shape, not using the DrawingManager)
I tried:
google.maps.event.addListener(map, 'click', function(e) {
var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(map.getBounds().getNorthEast().lat(),map.getBounds().getSouthWest().lng());
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(e.latLng);
var deX = Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale);
var deY = Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale);
// so far so good, deX and deY give the centerpixel
var deNW = map.getProjection().fromPointToLatLng(new google.maps.Point(deX-50,deY-50));
var deNO = map.getProjection().fromPointToLatLng(new google.maps.Point(deX+50,deY-50));
var deZO = map.getProjection().fromPointToLatLng(new google.maps.Point(deX+50,deY+50));
var deZW = map.getProjection().fromPointToLatLng(new google.maps.Point(deX-50,deY+50));
var dePathArray = [deNW, deNO, deZO, deZW];
deObjectNew = new google.maps.Polygon({
paths: dePathArray,
strokeColor: '#000000',
strokeWeight: 1,
fillColor: "#FF0000",
fillOpacity: 0.3,
});
deObjectNew.setMap(map);
});
Got it:
var deNW = deKaart.getProjection().fromPointToLatLng(new google.maps.Point((deX-50)/scale+worldCoordinateNW.x,(deY-50)/scale+worldCoordinateNW.y));
var deNO = deKaart.getProjection().fromPointToLatLng(new google.maps.Point((deX+50)/scale+worldCoordinateNW.x,(deY-50)/scale+worldCoordinateNW.y));
var deZO = deKaart.getProjection().fromPointToLatLng(new google.maps.Point((deX+50)/scale+worldCoordinateNW.x,(deY+50)/scale+worldCoordinateNW.y));
var deZW = deKaart.getProjection().fromPointToLatLng(new google.maps.Point((deX-50)/scale+worldCoordinateNW.x,(deY+50)/scale+worldCoordinateNW.y));