I recently switched from the Here Routing API v7 to the v8 version, and after struggling to change all of the javascript code since it differs so much from the previous version, I discovered that the v8 version returns a Flexibe Polyline that is 4 times greater (in MBytes) than the v7 version.
The response is handled as follows in the Here API Routing v7 Javascript code:
var lineString = new H.geo.LineString(), routeShape = route.shape, polyline;
routeShape.forEach(function(point) {
var parts = point.split(',');
lineString.pushLatLngAlt(parts[0], parts[1], 0);
});
var polylineRoute = new H.map.Polyline(lineString, {
style : {
lineWidth : 4,
strokeColor : 'rgba(103, 117, 191, 1)'
}
});
The variable "polylineRoute" has a content size of approximately 515 KB, covering a distance of 2608.35 km.
However, the size of the v8 version is 2065 KB!
The sample code for the eighth version is provided below:
if (route.sections.length) {
let lineStringArray = [];
route.sections.forEach((section) => {
// Create a linestring to use as a point source for the route line
lineStringArray.push(H.geo.LineString.fromFlexiblePolyline(section.polyline));
});
let multiLineString = new H.geo.MultiLineString(lineStringArray);
}
Is there a way to make the V8 version of the Routing API's polyline response smaller?
Thank you.
Related
I have some code to export an LS8 image to Drive using GEE. Somehow, the resolution of the image seems to be lower (larger pixels) than what I am able to see on the browser. How can I increase the resolution? This is the code I´ve been using, with two different options.
I attempted to use .resample() as a solution but it produced a single band image that did not look good.
geometry2 = /* color: #57d64b */ee.Geometry.Polygon(
[[[-78.2812086867645, 2.3386717366200585],
[-77.56984394067075, 2.3729749945579948],
[-77.72227924340513, 2.776314152654142],
[-78.20842426293638, 2.725560942159387]]]);
function maskL8sr(image)
{
// Bits 3 and 5 are cloud shadow and cloud, respectively.
var cloudShadowBitMask = ee.Number(2).pow(3).int();
var cloudsBitMask = ee.Number(2).pow(5).int();
// Get the pixel QA band.
var qa = image.select('pixel_qa');
// Both flags should be set to zero, indicating clear conditions.
var mask = qa.bitwiseAnd(cloudShadowBitMask).eq(0)
.and(qa.bitwiseAnd(cloudsBitMask).eq(0));
// Return the masked image, scaled to TOA reflectance, without the QA bands.
return image.updateMask(mask).divide(10000)
.select("B[0-9]*")
.copyProperties(image, ["system:time_start"]);
}
// Map the function over one year of data.
var collection = ee.ImageCollection('LANDSAT/LC08/C01/T1_SR')
.filterDate('2016-04-01', '2018-7-31')
.map(maskL8sr)
var composite = collection.median();
var VIS = {bands: ['B5', 'B6', 'B4'], min: 0, max: 0.47};
// Display the results.
Map.addLayer(composite,VIS ,"compt2");
var params ={
crs: 'EPSG:4326',
maxPixels: 1e12,
region:geometry2
}
Export.image(composite,'Guapi',params);
Export.image.toDrive({
image: composite,
description: 'Guapi',
scale: 30,
region: geometry2,
maxPixels: 1000000000
});
Is it possible to create a single gravity / force point in matter.js that is at the center of x/y coordinates?
I have managed to do it with d3.js but wanted to enquire about matter.js as it has the ability to use multiple polyshapes.
http://bl.ocks.org/mbostock/1021841
The illustrious answer has arisen:
not sure if there is any interest in this. I'm a fan of what you have created. In my latest project, I used matter-js but I needed elements to gravitate to a specific point, rather than into a general direction. That was very easily accomplished. I was wondering if you are interested in that feature as well, it would not break anything.
All one has to do is setting engine.world.gravity.isPoint = true and then the gravity vector is used as point, rather than a direction. One might set:
engine.world.gravity.x = 355;
engine.world.gravity.y = 125;
engine.world.gravity.isPoint = true;
and all objects will gravitate to that point.
If this is not within the scope of this engine, I understand. Either way, thanks for the great work.
You can do this with the matter-attractors plugin. Here's their basic example:
Matter.use(
'matter-attractors' // PLUGIN_NAME
);
var Engine = Matter.Engine,
Events = Matter.Events,
Runner = Matter.Runner,
Render = Matter.Render,
World = Matter.World,
Body = Matter.Body,
Mouse = Matter.Mouse,
Common = Matter.Common,
Bodies = Matter.Bodies;
// create engine
var engine = Engine.create();
// create renderer
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: Math.min(document.documentElement.clientWidth, 1024),
height: Math.min(document.documentElement.clientHeight, 1024),
wireframes: false
}
});
// create runner
var runner = Runner.create();
Runner.run(runner, engine);
Render.run(render);
// create demo scene
var world = engine.world;
world.gravity.scale = 0;
// create a body with an attractor
var attractiveBody = Bodies.circle(
render.options.width / 2,
render.options.height / 2,
50,
{
isStatic: true,
// example of an attractor function that
// returns a force vector that applies to bodyB
plugin: {
attractors: [
function(bodyA, bodyB) {
return {
x: (bodyA.position.x - bodyB.position.x) * 1e-6,
y: (bodyA.position.y - bodyB.position.y) * 1e-6,
};
}
]
}
});
World.add(world, attractiveBody);
// add some bodies that to be attracted
for (var i = 0; i < 150; i += 1) {
var body = Bodies.polygon(
Common.random(0, render.options.width),
Common.random(0, render.options.height),
Common.random(1, 5),
Common.random() > 0.9 ? Common.random(15, 25) : Common.random(5, 10)
);
World.add(world, body);
}
// add mouse control
var mouse = Mouse.create(render.canvas);
Events.on(engine, 'afterUpdate', function() {
if (!mouse.position.x) {
return;
}
// smoothly move the attractor body towards the mouse
Body.translate(attractiveBody, {
x: (mouse.position.x - attractiveBody.position.x) * 0.25,
y: (mouse.position.y - attractiveBody.position.y) * 0.25
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/matter-attractors#0.1.6/build/matter-attractors.min.js"></script>
Historical note: the "gravity point" functionality was proposed as a feature in MJS as PR #132 but it was closed, with the author of MJS (liabru) offering the matter-attractors plugin as an alternate. At the time of writing, this answer misleadingly seems to indicate that functionality from the PR was in fact merged.
Unfortunately, the attractors library is 6 years outdated at the time of writing and raises a warning when using a newer version of MJS than 0.12.0. From discussion in issue #11, it sounds like it's OK to ignore the warning and use this plugin with, for example, 0.18.0. Here's the warning:
matter-js: Plugin.use: matter-attractors#0.1.4 is for matter-js#^0.12.0 but installed on matter-js#0.18.0.
Behavior seemed fine on cursory glance, but I'll keep 0.12.0 in the above example to silence it anyway. If you do update to a recent version, note that Matter.World is deprecated and should be replaced with Matter.Composite and engine.gravity.
I am following the code at http://www.gisdoctor.com/v3/mapserver.html to overlay a WMS as an image on Google Maps using API v3. The js code at the above link is as follows
"WMSGetTileUrl" : function(tile, zoom) {
var projection = map.getProjection();
var zpow = Math.pow(2, zoom);
var ul = new google.maps.Point(
tile.x * 256.0 / zpow,
(tile.y + 1) * 256.0 / zpow
);
var lr = new google.maps.Point(
(tile.x + 1) * 256.0 / zpow,
tile.y * 256.0 / zpow
);
var ulw = projection.fromPointToLatLng(ul);
var lrw = projection.fromPointToLatLng(lr);
var bbox = ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat();
return url = "http://url/to/mapserver?" +
"version=1.1.1&" +
"request=GetMap&" +
"Styles=default&" +
"SRS=EPSG:4326&" +
"Layers=wmsLayers&" +
"BBOX=" + bbox + "&" +
"width=256&" +
"height=256&" +
"format=image/png&" +
"TRANSPARENT=TRUE";
},
"addWmsLayer" : function() {
/*
Creating the WMS layer options. This code creates the Google
imagemaptype options for each wms layer. In the options the function
that calls the individual wms layer is set
*/
var wmsOptions = {
alt: "MapServer Layers",
getTileUrl: WMSGetTileUrl,
isPng: false,
maxZoom: 17,
minZoom: 1,
name: "MapServer Layer",
tileSize: new google.maps.Size(256, 256)
};
/*
Creating the object to create the ImageMapType that will call the WMS
Layer Options.
*/
wmsMapType = new google.maps.ImageMapType(wmsOptions);
map.overlayMapTypes.insertAt(0, wmsMapType);
},
Everything works fine, but, of course, the WMS is returned as 256 x 256 tiles. No surprises, because that is what I requested. However, following the discussion at http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/c22837333f9a1812/d410a2a453025b38 it seems that I might be better off requesting an untiled (single) image from mapserver. This would tax my server less. In any case, I would like to experiment with a single image, but I am unable to construct a request for one properly.
Specifically, I changed the size of the tile to something large; for example, I tried 1024 x 1024 tiles. I did get fewer tiles, but the returned images didn't match the Google Maps base layer boundaries.
What I would like is to not specify the tile size at all. Instead, I should dynamically figure out the tile size to be, say, 256 pixels bigger than the current map size. That way, a single image would be returned, no matter what the map size. Also, a seamless pan would be implemented with the help of the extra 256px along the map edges.
Suggestions?
1) it works for me - with 512 and 1024 also. You just have to make the change at all appropriate places (corner coordinate computation, tileSize setting, WMS parameters width & height setting). Any tile setting should be possible if you just handle it correctly at all places in code.
2) I think you are trying to optimize at wrong place. The 256x256 tiles have been established for a reason. Remember that google is caching the tiles, so with larger tiles the whole solution might be much slower. Also the map will be loaded more fast for the user.
3) The tile concept is a right thing and should be preserved. Things like receiving the whole map wouldn't work - imagine map panning then. DOn't try to reinvent the wheel and stick with the current google tile concept - it is optimized for this type of application. IF you need to receive the map as a single image, you can use the static google maps api.
See this same question I just answered for someone else. It's likely to be your projection. EPSG:4326 is not the correct projection for Google Maps. Changing the projection means you need to change the way coordinates are calculated and referenced.
with the v2 version we can fix the precision with toFixed
example: point.y.toFixed(4)
how can we do with the v3 version ?
toFixed is just JavaScript function - not from Google Maps API.
In API v3 you can do that during LatLng creating:
var latitude = -25.363882;
var longitude = 131.044922;
var latLng = new google.maps.LatLng(latitude.toFixed(4), longitude.toFixed(4));
I am trying to build support for tiled vector data into some of our Google Maps v3 web maps, and I'm having a hard time figuring out how to find out which 256 x 256 tiles are visible in the current map viewport. I know that the information needed to figure this out is available if you create a google.maps.ImageMapType like here: Replacing GTileLayer in Google Maps v3, with ImageMapType, Tile bounding box?, but I'm obviously not doing this to bring in traditional pre-rendered map tiles.
So, a two part question:
What is the best way to find out which tiles are visible in the current viewport?
Once I have this information, what is the best way to go about converting it into lat/lng bounding boxes that can be used to request the necessary data? I know I could store this information on the server, but if there is an easy way to convert on the client it would be nice.
Here's what I came up with, with help from the documentation (http://code.google.com/apis/maps/documentation/javascript/maptypes.html, especially the "Map Coordinates" section) and a number of different sources:
function loadData() {
var bounds = map.getBounds(),
boundingBoxes = [],
boundsNeLatLng = bounds.getNorthEast(),
boundsSwLatLng = bounds.getSouthWest(),
boundsNwLatLng = new google.maps.LatLng(boundsNeLatLng.lat(), boundsSwLatLng.lng()),
boundsSeLatLng = new google.maps.LatLng(boundsSwLatLng.lat(), boundsNeLatLng.lng()),
zoom = map.getZoom(),
tiles = [],
tileCoordinateNw = pointToTile(boundsNwLatLng, zoom),
tileCoordinateSe = pointToTile(boundsSeLatLng, zoom),
tileColumns = tileCoordinateSe.x - tileCoordinateNw.x + 1;
tileRows = tileCoordinateSe.y - tileCoordinateNw.y + 1;
zfactor = Math.pow(2, zoom),
minX = tileCoordinateNw.x,
minY = tileCoordinateNw.y;
while (tileRows--) {
while (tileColumns--) {
tiles.push({
x: minX + tileColumns,
y: minY
});
}
minY++;
tileColumns = tileCoordinateSe.x - tileCoordinateNw.x + 1;
}
$.each(tiles, function(i, v) {
boundingBoxes.push({
ne: projection.fromPointToLatLng(new google.maps.Point(v.x * 256 / zfactor, v.y * 256 / zfactor)),
sw: projection.fromPointToLatLng(new google.maps.Point((v.x + 1) * 256 / zfactor, (v.y + 1) * 256 / zfactor))
});
});
$.each(boundingBoxes, function(i, v) {
var poly = new google.maps.Polygon({
map: map,
paths: [
v.ne,
new google.maps.LatLng(v.sw.lat(), v.ne.lng()),
v.sw,
new google.maps.LatLng(v.ne.lat(), v.sw.lng())
]
});
polygons.push(poly);
});
}
function pointToTile(latLng, z) {
var projection = new MercatorProjection();
var worldCoordinate = projection.fromLatLngToPoint(latLng);
var pixelCoordinate = new google.maps.Point(worldCoordinate.x * Math.pow(2, z), worldCoordinate.y * Math.pow(2, z));
var tileCoordinate = new google.maps.Point(Math.floor(pixelCoordinate.x / MERCATOR_RANGE), Math.floor(pixelCoordinate.y / MERCATOR_RANGE));
return tileCoordinate;
};
An explanation: Basically, everytime the map is panned or zoomed, I call the loadData function. This function calculates which tiles are in the map view, then iterates through the tiles that are already loaded and deletes the ones that are no longer in the view (I took this portion of code out, so you won't see it above). I then use the LatLngBounds stored in the boundingBoxes array to request data from the server.
Hope this helps someone else...
For more recent users, it's possible to get tile images from the sample code in the documentation on this page of the Google Maps Javascript API documentation.
Showing Pixel and Tile Coordinates