I'm trying to animate the path of a tracked vehicle on a Google Map (v3 API). I have 4 polylines: one being a grey background line to indicate the entire route, and 3 more to indicate the previous hours worth of tracking data (red for the past 10 minutes, orange for 10-30 minutes and yellow for 30-60 minutes).
Even though I've set the zIndex correctly for the polylines, as I create the new animated lines and destroy the old ones the grey background line keeps overlapping the other lines (I don't touch this polyline during animation).
It also seriously reduces the performance of the animation, if I disable the grey line the performance is just fine.
I believe what's happening is that Google Maps is using one canvas element to draw all the polylines that intersect that rectangle, so it has to redraw all of my polylines in that rectangle, not just the ones I'm animating. Is there any way to get Google Maps to put them on separate layers so it only redraws the ones I want to redraw?
Update: I've created a sample that performs pretty well, but does demonstrate the background line overlapping the other lines.
HTML:
<button>Animate</button> <div id="slider"/>
<div id="map" style="height: 600px; margin-top: 20px;"/>
Javascript:
google.maps.LatLng.prototype.destinationPoint = function(brng, dist) {
dist = dist / 6371;
brng = brng.toRad();
var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();
var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
Math.cos(lat1),
Math.cos(dist) - Math.sin(lat1) *
Math.sin(lat2));
if (isNaN(lat2) || isNaN(lon2)) return null;
return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
Number.prototype.toDeg = function() {
return this * 180 / Math.PI;
}
var range_lines = {
red: null,
orange: null,
yellow: null
};
var range_colors = {
red: '#ff0000',
orange: '#FFA500',
yellow: '#FFFF00'
};
function onSlide(e, ui) {
var end_minute = ui.value;
var start_minute = Math.max(0, end_minute - 60);
var line_points = [];
var last_range = null;
var last_point = null;
for (var minute = start_minute; minute < end_minute; minute++) {
var diff = Math.abs(end_minute - minute);
var range = '';
if (diff <= 10) {
range = 'red';
} else if (diff <= 30) {
range = 'orange';
} else {
range = 'yellow';
}
if (range != last_range) {
renderLine(line_points, last_range);
line_points = [];
last_range = range;
}
if (points_by_minute.hasOwnProperty(minute)) {
for (var i = 0; i < points_by_minute[minute].length; i++) {
line_points.push(points[points_by_minute[minute][i]]);
last_point = points[points_by_minute[minute][i]];
}
}
}
marker.setPosition(last_point);
renderLine(line_points, last_range);
}
function renderLine(line_points, range) {
var line = new google.maps.Polyline({
path: line_points,
strokeColor: range_colors[range],
strokeWeight: 3,
map: map,
zIndex: getZIndex(range)
});
if (range_lines[range] != null) {
range_lines[range].setMap(null);
}
range_lines[range] = line;
}
function getZIndex(range) {
switch (range) {
case 'yellow':
return 10;
case 'orange':
return 20;
case 'red':
return 30;
}
}
var points = [];
var points_by_minute = {};
var map;
var marker;
var interval;
$(document).ready(function() {
var start_point = new google.maps.LatLng(51.3767, -0.0960);
var point = new google.maps.LatLng(51.3767, -0.0960);
var minute = 0;
var bearing = 0;
var bounds = new google.maps.LatLngBounds()
for (var i = 0; i < 5000; i++) {
if (Math.random() > 0.5) {
if (Math.random() > 0.5) {
bearing += Math.round(Math.random() * 10);
} else {
bearing -= Math.round(Math.random() * 10);
}
}
if (i != 0 && i % 12 == 0) {
minute++;
}
if (!points_by_minute.hasOwnProperty(minute)) {
points_by_minute[minute] = [];
}
points_by_minute[minute].push(points.length);
point = point.destinationPoint(bearing, 0.01);
points.push(point);
bounds.extend(point);
}
for (var i = 0; i < 5000; i++) {
if (i != 0 && i % 12 == 0) {
minute++;
}
if (!points_by_minute.hasOwnProperty(minute)) {
points_by_minute[minute] = [];
}
points_by_minute[minute].push(points.length);
var latJitter = Math.random() / 10000;
if (Math.random() > 0.5) {
latJitter = -latJitter;
}
var lngJitter = Math.random() / 10000;
if (Math.random() > 0.5) {
lngJitter = -lngJitter;
}
point = new google.maps.LatLng(
points[4999 - i].lat() + latJitter,
points[4999 - i].lng() + lngJitter
);
points.push(point);
}
map = new google.maps.Map($('#map')[0], {
center: start_point,
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
map.fitBounds(bounds);
$('button').button().click(function() {
if (interval) clearInterval(interval);
var value = $('#slider').slider("option", "value");
if (value == $('#slider').slider("option", "max")) {
clearInterval(interval);
}
$('#slider').slider("option", "value", $('#slider').slider("option", "min"));
interval = setInterval(animate, 10);
});
$('#slider').slider({
min: 0,
max: minute++,
step: 1,
value: 0,
change: onSlide
});
new google.maps.Polyline({
path: points,
strokeColor: '#cccccc',
strokeWeight: 1.5,
map: map,
zIndex: 1
});
marker = new google.maps.Marker({
position: start_point,
map: map
});
});
function animate() {
var value = $('#slider').slider("option", "value");
value++;
$('#slider').slider("option", "value", value);
if (value == $('#slider').slider("option", "max")) {
clearInterval(interval);
}
}
Related
I have a Europe terrain map made from some DEM files which were then combined into one binary file. Then this file is read in React and the map is created. This can also be created using a simple heightmap but for the sake of this application I have to use the binary file.
Now when I have a terrain map I would like to add counties' borders using a geojson file to create geometries. The componentDidMount function is shown in the snippet below:
const SIZE_AMPLIFIER = 20;
const WIDTH = 2500 * SIZE_AMPLIFIER;
var container = document.getElementById("main_map");
var renderer, scene, camera;
var terrainData;
//load map datd from bin file
function loadTerrain(file) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', file, true);
xhr.onload = function (evt) {
if (xhr.response) {
terrainData = new Uint16Array(xhr.response)
init();
}
};
xhr.send(null);
}
loadTerrain('stats.bin');
function init() {
// initialize camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .1, 100000);
camera.position.set(9191, 15000, 21000);
// initialize scene
scene = new THREE.Scene();
var containerWidth = container.getBoundingClientRect().right - container.getBoundingClientRect().left;
// initialize directional light (sun)
var sun = new THREE.DirectionalLight(0xFFFFFF, 1.0);
sun.position.set(300, 400, 300);
sun.distance = 1000;
scene.add(sun);
var frame = new THREE.SpotLightHelper(sun);
scene.add(frame);
// initialize renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x006994);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(containerWidth, containerWidth / 2 + 150);
container.append(renderer.domElement);
//initialize controls
var controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 1;
controls.rotateSpeed = .8;
//controls.maxPolarAngle = Math.PI / 2 - .3;
//initialize plane ***** 999, 999 because file size is 1000x1000
var terrainGeometry = new THREE.PlaneBufferGeometry(WIDTH, WIDTH, 999, 999);
terrainGeometry.castShadow = true;
terrainGeometry.receiveShadow = true;
var heightsArray = terrainGeometry.attributes.position.array;
// apply height map to vertices of terrainGeometry
for (let i = 0, j = 2; i < terrainData.length; i += 1, j += 3) {
if (terrainData[i] == 0) {
heightsArray[j] = terrainData[i]
} else {
heightsArray[j] = terrainData[i] / 65535 * 480 + 10
}
}
var colorsArray = new Float32Array(heightsArray.length);
var waterLevel = 1.7;
var adjustHeight = 10 + waterLevel// 0.1 ~ 50cm water level, starts from 1.7
function addColors(counterJ, colorR, colorG, colorB) {
colorsArray[counterJ] = new THREE.Color(colorR).r;
colorsArray[counterJ + 1] = new THREE.Color(colorG).g;
colorsArray[counterJ + 2] = new THREE.Color(colorB).b;
}
for (let i = 2, j = 0; i < heightsArray.length; i += 3, j += 3) {
if (heightsArray[i] >= 0 && heightsArray[i] < 350 / adjustHeight) {
addColors(j, 0x000000, 0x006900, 0x000094);
}
else if (heightsArray[i] >= 350 / adjustHeight && heightsArray[i] < 900 / adjustHeight) {
addColors(j, 0x6e0000, 0x00dc00, 0x00006e);
}
else if (heightsArray[i] >= 900 / adjustHeight && heightsArray[i] < 1300 / adjustHeight) {
addColors(j, 0xf00000, 0x00fa00, 0x0000a0);
}
else if (heightsArray[i] >= 1300 / adjustHeight && heightsArray[i] < 1900 / adjustHeight) {
addColors(j, 0xe00000, 0x0bd00, 0x000077);
}
else if (heightsArray[i] >= 1900 / adjustHeight && heightsArray[i] < 2500 / adjustHeight) {
addColors(j, 0xdd0000, 0x009800, 0x000056);
}
else if (heightsArray[i] >= 2500 / adjustHeight && heightsArray[i] < 3300 / adjustHeight) {
addColors(j, 0xa00000, 0x005200, 0x00002d);
}
else {
addColors(j, 0xd20000, 0x00d200, 0x0000d2);
}
}
terrainGeometry.setAttribute('position', new THREE.BufferAttribute(heightsArray, 3));
terrainGeometry.setAttribute('color', new THREE.BufferAttribute(colorsArray, 3))
var terrainMaterial = new THREE.MeshLambertMaterial({
vertexColors: THREE.VertexColors, side: THREE.DoubleSide
})
var terrainMesh = new THREE.Mesh(terrainGeometry, terrainMaterial);
terrainMesh.rotation.x = - Math.PI / 2;
terrainMesh.matrixAutoUpdate = false;
terrainMesh.updateMatrix();
terrainGeometry.computeFaceNormals();
terrainGeometry.computeVertexNormals();
scene.add(terrainMesh);
const width1 = terrainGeometry.parameters.width; //2500 * SIZE_AMPLIFIER,
const projection = d3.geoTransverseMercator().rotate([-10, 0, 0]) //center meridian
.center([10, 52]) //longitude, latitude
.scale(width1 * 1.55); //scale
const path = d3.geoPath().projection(projection);
const svg = d3.select("#Map").append("svg")
d3.json('/Europe1.geo.json')
.then(topology => {
svg.selectAll(".country")
.data(topology.features)
.enter()
.append("path")
.attr("class", ".country")
.attr("d", path)
var svgMarkup = svg.node().outerHTML;
var loader = new SVGLoader();
var svgData = loader.parse(svgMarkup);
var svgGroup = new THREE.Group();
svgData.paths.forEach((path, i) => {
var shapes = path.toShapes(true);
shapes.forEach((shape, j) => {
var geomSVG = new THREE.ExtrudeBufferGeometry(shape, {
depth: 10,
bevelEnabled: false
})
//needed for click event!
// var materialSVG = new THREE.MeshLambertMaterial({
// color: 0xFFFFFF,
// transparent: true,
// opacity: 0,
// });
//var meshSVG = new THREE.Mesh(geomSVG, materialSVG);
//svgGroup.add(meshSVG);
//create borders
var borderMaterial = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 3 })
var borderGeometry = new THREE.EdgesGeometry(geomSVG, 15);
var bordermesh = new THREE.LineSegments(borderGeometry, borderMaterial);
svgGroup.add(bordermesh);
})
})
var axesHelper = new THREE.AxesHelper(50000);
scene.add(axesHelper);
svgGroup.rotateX(Math.PI / 2)
scene.add(svgGroup);
svg.remove();
})
animate();
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
I am sure that this is the correct projection.
ETRS_1989_LAEA projection
The problem has to be in the scale but I am not capable of scaling it perfectly in order to fit on the map. The best I could achieve:
I am new to threejs and this seems impossible to me, I would really appreaciate your help!
I just started exploring three.js and have been trying to adapt a project I found.
I would like to know if it would be possible to have the globe object rotate around it's y-axis with minor additions to the code or whether it has to be rewritten from the ground up.
var canvas = document.querySelector('canvas');
var width = canvas.offsetWidth,
height = canvas.offsetHeight;
var colors = [
new THREE.Color(0xac1122),
new THREE.Color(0x96789f),
new THREE.Color(0x535353)];
var renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(width, height);
renderer.setClearColor(0xffffff);
var scene = new THREE.Scene();
var raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 6;
var camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 2000);
camera.position.set(0, 0, 350);
var galaxy = new THREE.Group();
scene.add(galaxy);
// Create dots
var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
var dotTexture = loader.load("img/dotTexture.png");
var dotsAmount = 3000;
var dotsGeometry = new THREE.Geometry();
var positions = new Float32Array(dotsAmount * 3);
var sizes = new Float32Array(dotsAmount);
var colorsAttribute = new Float32Array(dotsAmount * 3);
for (var i = 0; i < dotsAmount; i++) {
var vector = new THREE.Vector3();
vector.color = Math.floor(Math.random() * colors.length);
vector.theta = Math.random() * Math.PI * 2;
vector.phi =
(1 - Math.sqrt(Math.random())) *
Math.PI /
2 *
(Math.random() > 0.5 ? 1 : -1);
vector.x = Math.cos(vector.theta) * Math.cos(vector.phi);
vector.y = Math.sin(vector.phi);
vector.z = Math.sin(vector.theta) * Math.cos(vector.phi);
vector.multiplyScalar(120 + (Math.random() - 0.5) * 5);
vector.scaleX = 5;
if (Math.random() > 0.5) {
moveDot(vector, i);
}
dotsGeometry.vertices.push(vector);
vector.toArray(positions, i * 3);
colors[vector.color].toArray(colorsAttribute, i*3);
sizes[i] = 5;
}
function moveDot(vector, index) {
var tempVector = vector.clone();
tempVector.multiplyScalar((Math.random() - 0.5) * 0.2 + 1);
TweenMax.to(vector, Math.random() * 3 + 3, {
x: tempVector.x,
y: tempVector.y,
z: tempVector.z,
yoyo: true,
repeat: -1,
delay: -Math.random() * 3,
ease: Power0.easeNone,
onUpdate: function () {
attributePositions.array[index*3] = vector.x;
attributePositions.array[index*3+1] = vector.y;
attributePositions.array[index*3+2] = vector.z;
}
});
}
var bufferWrapGeom = new THREE.BufferGeometry();
var attributePositions = new THREE.BufferAttribute(positions, 3);
bufferWrapGeom.addAttribute('position', attributePositions);
var attributeSizes = new THREE.BufferAttribute(sizes, 1);
bufferWrapGeom.addAttribute('size', attributeSizes);
var attributeColors = new THREE.BufferAttribute(colorsAttribute, 3);
bufferWrapGeom.addAttribute('color', attributeColors);
var shaderMaterial = new THREE.ShaderMaterial({
uniforms: {
texture: {
value: dotTexture
}
},
vertexShader: document.getElementById("wrapVertexShader").textContent,
fragmentShader: document.getElementById("wrapFragmentShader").textContent,
transparent:true
});
var wrap = new THREE.Points(bufferWrapGeom, shaderMaterial);
scene.add(wrap);
// Create white segments
var segmentsGeom = new THREE.Geometry();
var segmentsMat = new THREE.LineBasicMaterial({
color: 0xffffff,
transparent: true,
opacity: 0.3,
vertexColors: THREE.VertexColors
});
for (i = dotsGeometry.vertices.length - 1; i >= 0; i--) {
vector = dotsGeometry.vertices[i];
for (var j = dotsGeometry.vertices.length - 1; j >= 0; j--) {
if (i !== j && vector.distanceTo(dotsGeometry.vertices[j]) < 12) {
segmentsGeom.vertices.push(vector);
segmentsGeom.vertices.push(dotsGeometry.vertices[j]);
segmentsGeom.colors.push(colors[vector.color]);
segmentsGeom.colors.push(colors[vector.color]);
}
}
}
var segments = new THREE.LineSegments(segmentsGeom, segmentsMat);
galaxy.add(segments);
var hovered = [];
var prevHovered = [];
function render(a) {
var i;
dotsGeometry.verticesNeedUpdate = true;
segmentsGeom.verticesNeedUpdate = true;
raycaster.setFromCamera( mouse, camera );
var intersections = raycaster.intersectObjects([wrap]);
hovered = [];
if (intersections.length) {
for(i = 0; i < intersections.length; i++) {
var index = intersections[i].index;
hovered.push(index);
if (prevHovered.indexOf(index) === -1) {
onDotHover(index);
}
}
}
for(i = 0; i < prevHovered.length; i++){
if(hovered.indexOf(prevHovered[i]) === -1){
mouseOut(prevHovered[i]);
}
}
prevHovered = hovered.slice(0);
attributeSizes.needsUpdate = true;
attributePositions.needsUpdate = true;
renderer.render(scene, camera);
}
function onDotHover(index) {
dotsGeometry.vertices[index].tl = new TimelineMax();
dotsGeometry.vertices[index].tl.to(dotsGeometry.vertices[index], 1, {
scaleX: 10,
ease: Elastic.easeOut.config(2, 0.2),
onUpdate: function() {
attributeSizes.array[index] = dotsGeometry.vertices[index].scaleX;
}
});
}
function mouseOut(index) {
dotsGeometry.vertices[index].tl.to(dotsGeometry.vertices[index], 0.4, {
scaleX: 5,
ease: Power2.easeOut,
onUpdate: function() {
attributeSizes.array[index] = dotsGeometry.vertices[index].scaleX;
}
});
}
function onResize() {
canvas.style.width = '';
canvas.style.height = '';
width = canvas.offsetWidth;
height = canvas.offsetHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
var mouse = new THREE.Vector2(-100,-100);
function onMouseMove(e) {
var canvasBounding = canvas.getBoundingClientRect();
mouse.x = ((e.clientX - canvasBounding.left) / width) * 2 - 1;
mouse.y = -((e.clientY - canvasBounding.top) / height) * 2 + 1;
}
TweenMax.ticker.addEventListener("tick", render);
window.addEventListener("mousemove", onMouseMove);
var resizeTm;
window.addEventListener("resize", function(){
resizeTm = clearTimeout(resizeTm);
resizeTm = setTimeout(onResize, 200);
});
Codepen here - https://codepen.io/quickwaste/pen/PaGPdw
Thanks.
(A stretch goal would be to have the camera move in response to mouse movement)
Simply add galaxy.rotateY(0.005 * Math.PI); to render(), right before renderer.render(scene, camera) call, like this:
// pulled from the CodePen
function render(a) {
// ... omitted for brevity
prevHovered = hovered.slice(0);
attributeSizes.needsUpdate = true;
attributePositions.needsUpdate = true;
galaxy.rotateY(0.005 * Math.PI);
renderer.render(scene, camera);
}
I used a multiplier of 0.005 to give the globe a nice, lazy spin.
The 'galaxy' object is a THREE.Group, a wrapper of sorts for collections of THREE.Object3D objects. The Object3D has all sorts of nifty functions to help rotate, translate, and transform 3D objects. The rotateY() will spin the model around its local y-axis.
I'd like to know if it possible to change the marker orientation according the path drawn on the map. Here is a example:
As you can see the marker is a car (with front bumper and tail lights). I'd like to orientate the car in the direction the path is going (in this exemple orientate the car around 45 degrees to the right).
I'm using DirectionsService to draw the path and I have a random number of point. Sometime only one, sometime 10 points. I'm adding the markers before drawing the paths. Here is how I'm drawing the path:
// Intialize the Path Array
var path = new google.maps.MVCArray();
// Intialise the Direction Service
var service = new google.maps.DirectionsService();
// Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: gmap, strokeColor: '#dd0000' }); // #4986E7
// Draw the path for this vehicle
for (var i = 0; i < pathPoints.length; i++) {
if ((i + 1) < pathPoints.length) {
var src = pathPoints[i];
var des = pathPoints[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++){
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
Is it possible to do that?
One option is to translate your icon to SVG then use the Symbol rotation property to align it with the road (you can do the same with a PNG image by either making a large number of copies of the icon rotated by a degree or two, or by making a custom icon that allows you to rotate the PNG icon arbitrarily)
marker.setPosition(p);
var heading = google.maps.geometry.spherical.computeHeading(lastPosn,p);
icon.rotation = heading;
marker.setIcon(icon);
proof of concept fiddle
code snippet:
var map;
var directionDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];
var position;
var marker = null;
var polyline = null;
var poly2 = null;
var speed = 0.000005,
wait = 1;
var infowindow = null;
var timerHandle = null;
function createMarker(latlng, label, html) {
var contentString = '<b>' + label + '</b><br>' + html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: label,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
marker.myname = label;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
return marker;
}
function initialize() {
infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService();
// Create a map and center it on Manhattan.
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
address = 'new york';
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
map.setCenter(results[0].geometry.location);
});
// Create a renderer for directions and bind it to the map.
var rendererOptions = {
map: map
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// Instantiate an info window to hold step text.
stepDisplay = new google.maps.InfoWindow();
polyline = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
poly2 = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
}
var steps = [];
function calcRoute() {
if (timerHandle) {
clearTimeout(timerHandle);
}
if (marker) {
marker.setMap(null);
}
polyline.setMap(null);
poly2.setMap(null);
directionsDisplay.setMap(null);
polyline = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
poly2 = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
// Create a renderer for directions and bind it to the map.
var rendererOptions = {
map: map
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var travelMode = google.maps.DirectionsTravelMode.DRIVING;
var request = {
origin: start,
destination: end,
travelMode: travelMode
};
// Route the directions and pass the response to a
// function to create markers for each step.
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var bounds = new google.maps.LatLngBounds();
var route = response.routes[0];
startLocation = new Object();
endLocation = new Object();
// For each route, display summary information.
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
if (i === 0) {
startLocation.latlng = legs[i].start_location;
startLocation.address = legs[i].start_address;
// marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green");
}
endLocation.latlng = legs[i].end_location;
endLocation.address = legs[i].end_address;
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
map.fitBounds(bounds);
map.setZoom(18);
startAnimation();
}
});
}
var step = 50; // 5; // metres
var tick = 100; // milliseconds
var eol;
var k = 0;
var stepnum = 0;
var speed = "";
var lastVertex = 1;
//=============== animation functions ======================
function updatePoly(d) {
// Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
if (poly2.getPath().getLength() > 20) {
poly2 = new google.maps.Polyline([polyline.getPath().getAt(lastVertex - 1)]);
// map.addOverlay(poly2)
}
if (polyline.GetIndexAtDistance(d) < lastVertex + 2) {
if (poly2.getPath().getLength() > 1) {
poly2.getPath().removeAt(poly2.getPath().getLength() - 1);
}
poly2.getPath().insertAt(poly2.getPath().getLength(), polyline.GetPointAtDistance(d));
} else {
poly2.getPath().insertAt(poly2.getPath().getLength(), endLocation.latlng);
}
}
function animate(d) {
if (d > eol) {
map.panTo(endLocation.latlng);
marker.setPosition(endLocation.latlng);
return;
}
var p = polyline.GetPointAtDistance(d);
map.panTo(p);
var lastPosn = marker.getPosition();
marker.setPosition(p);
var heading = google.maps.geometry.spherical.computeHeading(lastPosn, p);
icon.rotation = heading;
marker.setIcon(icon);
updatePoly(d);
timerHandle = setTimeout("animate(" + (d + step) + ")", tick);
}
function startAnimation() {
eol = polyline.Distance();
map.setCenter(polyline.getPath().getAt(0));
marker = new google.maps.Marker({
position: polyline.getPath().getAt(0),
map: map,
icon: icon
});
poly2 = new google.maps.Polyline({
path: [polyline.getPath().getAt(0)],
strokeColor: "#0000FF",
strokeWeight: 10
});
// map.addOverlay(poly2);
setTimeout("animate(50)", 2000); // Allow time for the initial map display
}
google.maps.event.addDomListener(window, 'load', initialize);
//=============== ~animation funcitons =====================
var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z";
var icon = {
path: car,
scale: .7,
strokeColor: 'white',
strokeWeight: .10,
fillOpacity: 1,
fillColor: '#404040',
offset: '5%',
// rotation: parseInt(heading[i]),
anchor: new google.maps.Point(10, 25) // orig 10,50 back of car, 10,0 front of car, 10,25 center of car
};
/*********************************************************************\
* *
* epolys.js by Mike Williams *
* updated to API v3 by Larry Ross *
* *
* A Google Maps API Extension *
* *
* Adds various Methods to google.maps.Polygon and google.maps.Polyline *
* *
* .Contains(latlng) returns true is the poly contains the specified *
* GLatLng *
* *
* .Area() returns the approximate area of a poly that is *
* not self-intersecting *
* *
* .Distance() returns the length of the poly path *
* *
* .Bounds() returns a GLatLngBounds that bounds the poly *
* *
* .GetPointAtDistance() returns a GLatLng at the specified distance *
* along the path. *
* The distance is specified in metres *
* Reurns null if the path is shorter than that *
* *
* .GetPointsAtDistance() returns an array of GLatLngs at the *
* specified interval along the path. *
* The distance is specified in metres *
* *
* .GetIndexAtDistance() returns the vertex number at the specified *
* distance along the path. *
* The distance is specified in metres *
* Returns null if the path is shorter than that *
* *
* .Bearing(v1?,v2?) returns the bearing between two vertices *
* if v1 is null, returns bearing from first to last *
* if v2 is null, returns bearing from v1 to next *
* *
* *
***********************************************************************
* *
* This Javascript is provided by Mike Williams *
* Blackpool Community Church Javascript Team *
* http://www.blackpoolchurch.org/ *
* http://econym.org.uk/gmap/ *
* *
* This work is licenced under a Creative Commons Licence *
* http://creativecommons.org/licenses/by/2.0/uk/ *
* *
***********************************************************************
* *
* Version 1.1 6-Jun-2007 *
* Version 1.2 1-Jul-2007 - fix: Bounds was omitting vertex zero *
* add: Bearing *
* Version 1.3 28-Nov-2008 add: GetPointsAtDistance() *
* Version 1.4 12-Jan-2009 fix: GetPointsAtDistance() *
* Version 3.0 11-Aug-2010 update to v3 *
* *
\*********************************************************************/
// === first support methods that don't (yet) exist in v3
google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
var EarthRadiusMeters = 6378137.0; // meters
var lat1 = this.lat();
var lon1 = this.lng();
var lat2 = newLatLng.lat();
var lon2 = newLatLng.lng();
var dLat = (lat2 - lat1) * Math.PI / 180;
var dLon = (lon2 - lon1) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = EarthRadiusMeters * c;
return d;
}
google.maps.LatLng.prototype.latRadians = function() {
return this.lat() * Math.PI / 180;
}
google.maps.LatLng.prototype.lngRadians = function() {
return this.lng() * Math.PI / 180;
}
// === A method which returns the length of a path in metres ===
google.maps.Polygon.prototype.Distance = function() {
var dist = 0;
for (var i = 1; i < this.getPath().getLength(); i++) {
dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1));
}
return dist;
}
// === A method which returns a GLatLng of a point a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polygon.prototype.GetPointAtDistance = function(metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
if (this.getPath().getLength() < 2) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1));
}
if (dist < metres) {
return null;
}
var p1 = this.getPath().getAt(i - 2);
var p2 = this.getPath().getAt(i - 1);
var m = (metres - olddist) / (dist - olddist);
return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m);
}
// === A method which returns an array of GLatLngs of points a given interval along the path ===
google.maps.Polygon.prototype.GetPointsAtDistance = function(metres) {
var next = metres;
var points = [];
// some awkward special cases
if (metres <= 0) return points;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength()); i++) {
olddist = dist;
dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1));
while (dist > next) {
var p1 = this.getPath().getAt(i - 1);
var p2 = this.getPath().getAt(i);
var m = (next - olddist) / (dist - olddist);
points.push(new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m));
next += metres;
}
}
return points;
}
// === A method which returns the Vertex number at a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polygon.prototype.GetIndexAtDistance = function(metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1));
}
if (dist < metres) {
return null;
}
return i;
}
// === Copy all the above functions to GPolyline ===
google.maps.Polyline.prototype.Distance = google.maps.Polygon.prototype.Distance;
google.maps.Polyline.prototype.GetPointAtDistance = google.maps.Polygon.prototype.GetPointAtDistance;
google.maps.Polyline.prototype.GetPointsAtDistance = google.maps.Polygon.prototype.GetPointsAtDistance;
google.maps.Polyline.prototype.GetIndexAtDistance = google.maps.Polygon.prototype.GetIndexAtDistance;
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
font-family: Helvetica, Arial;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="tools">start:
<input type="text" name="start" id="start" value="union square, NY" />end:
<input type="text" name="end" id="end" value="times square, NY" />
<input type="submit" onclick="calcRoute();" />
</div>
<div id="map_canvas" style="width:100%;height:90%;"></div>
Easiest solution for this (FOR GOOGLE MAPS) :
var rotationAngle = google.maps.geometry.spherical.computeHeading(oldLatlng, currentlatlng);
$('img[src="path_to_marker_icon_image"]').css({
transform: "rotate(" + rotationAngle + "deg)"
});
You can use it easily do with the help of the 'GMSMapView' Delegates method.
var lastMapBearing: CLLocationDirection?
var lastUserBearing: CLLocationDirection?
func mapView(_ mapView: GMSMapView, didChange position: GMSCameraPosition) {
lastMapBearing = position.bearing
driverMarker?.rotation = (lastUserBearing ?? 0) - lastMapBearing!
}
func locationManager(_ manager: CLLocationManager, didUpdateHeading newHeading: CLHeading) {
lastUserBearing = newHeading.trueHeading
driverMarker?.rotation = lastUserBearing! - (lastMapBearing ?? 0)
}
Make sure you can assign the delegate itSelf.
I would like to draw a 'distance traveled' polyline over a preset route using V3 of the google maps API.
The polyline would need to run through multiple waypoints/legs.
I am currently using the DirectionsService to draw the complete route.
I am also using epolys.js to get the marker position for the distance traveled.
I am copying the complete route into a new polyline, but I would only like to copy the route up to the marker position.
Demo link: http://codepen.io/1983ron/pen/wKMVQr
And here's where I'm currently at with the JS
var geocoder;
var map;
var marker;
var gmarkers = [];
var METERS_TO_MILES = 0.000621371192;
var walked = (Math.round(670 * 1609.344));
//ICON
var iconImage = new google.maps.MarkerImage(
'http://www.ronnieatkinson.co.uk/clients/wc2015/maps/01/mapIcons/marker_red.png', //MARKER URL
new google.maps.Size(20, 34), //MARKER SIZE (WxH)
new google.maps.Point(0,0), //MARKER ORIGIN
new google.maps.Point(9, 34) //MARKER ANCHOR
);
//SHADOW
var iconShadow = new google.maps.MarkerImage(
'http://www.google.com/mapfiles/shadow50.png', //SHADOW URL
new google.maps.Size(37, 34), //SHADOW SIZE (WxH)
new google.maps.Point(0,0), //SHADOW ORIGIN
new google.maps.Point(9, 34) //SHADOW ANCHOR
);
//INFO WINDOW
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});
//CREATE MARKER
function createMarker(latlng, label, html) {
var contentString = '<b>'+label+'</b><br>'+html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: iconShadow,
icon: iconImage,
title: label,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
marker.myname = label;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
return marker;
}
function initialize() {
var latlng = new google.maps.LatLng(51.555967, -0.279736);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var rendererOptions = {
map: map,
suppressMarkers: true,
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
//Edinburgh to Eden Project
var point1 = new google.maps.LatLng(58.981386, -2.973751); //Orkney Rugby Football Club
var point2 = new google.maps.LatLng(55.881517, -4.342057); //Scotstoun Stadium
var point3 = new google.maps.LatLng(54.998080, -7.319812); //Guildhall St
var point4 = new google.maps.LatLng(54.563716, -5.942729); //Belfast Harlequins RFC
var point5 = new google.maps.LatLng(53.271057, -9.054253); //Hotel Spanish Arch
var point6 = new google.maps.LatLng(52.674222, -8.642515); //Thomond Park
var point7 = new google.maps.LatLng(53.291755, -3.713769); //Colwyn Leisure Centre
var point8 = new google.maps.LatLng(51.748180, -3.618567); //Glynneath Rugby Football Club
var wps = [
{ location: point1 },
{ location: point2 },
{ location: point3 },
{ location: point4 },
{ location: point5 },
{ location: point6 },
{ location: point7 },
{ location: point8 }
];
//START
var org = new google.maps.LatLng (55.945315, -3.205309); //EDINBURGH
//FINISH
var dest = new google.maps.LatLng (50.360130, -4.744717); //EDEN PROJECT
var request = {
origin: org,
destination: dest,
waypoints: wps,
travelMode: google.maps.DirectionsTravelMode.WALKING,
//unitSystem: google.maps.UnitSystem.IMPERIAL
};
directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
//SHOW ROUTE
directionsDisplay.setDirections(response);
//COPY POLY FROM DIRECTION SERVICE
var polyline = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
var bounds = new google.maps.LatLngBounds();
var legs = response.routes[0].legs;
for (i=0;i<legs.length;i++) {
var steps = legs[i].steps;
for (j=0;j<steps.length;j++) {
var nextSegment = steps[j].path;
for (k=0;k<nextSegment.length;k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
map.fitBounds(bounds);
//alert(walked);
//ADD MARKER TO NEW POLYLINE AT 'X' DISTANCE
createMarker(polyline.GetPointAtDistance(walked), "You are here", (Math.round( walked * METERS_TO_MILES * 10 ) / 10)+' miles');
//GET THE TOTAL DISTANCE
var distance= 0;
//var METERS_TO_MILES = 0.000621371192;
for(i = 0; i < response.routes[0].legs.length; i++){
//FOR EACH LEG GET THE DISTANCE AND ADD IT TO THE TOTAL
distance += parseFloat(response.routes[0].legs[i].distance.value);
}
//alert((Math.round( distance * METERS_TO_MILES * 10 ) / 10)+' miles');
//alert(distance); //METERS
} else if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
alert ('Max waypoints exceeded');
} else {
alert ('failed to get directions');
}
});
};window.onload = function() { initialize(); };
Any help would be appreciated.
Calculate the length of the line as you create it. Once it becomes greater than or equal to the distance "walked", stop adding points to it.
var lengthMeters = 0;
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
if (lengthMeters <= walked) {
// if polyline is less than distance "walked", keep adding to it
polyline.getPath().push(nextSegment[k]);
if (polyline.getPath().getLength() > 1) {
var lastPt = polyline.getPath().getLength() - 1;
lengthMeters += google.maps.geometry.spherical.computeDistanceBetween(polyline.getPath().getAt(lastPt - 1), polyline.getPath().getAt(lastPt));
}
}
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
proof of concept fiddle
code snippet:
var geocoder;
var map;
var marker;
var gmarkers = [];
var METERS_TO_MILES = 0.000621371192;
var walked = (Math.round(670 * 1609.344));
//ICON
var iconImage = {
url: 'http://www.ronnieatkinson.co.uk/clients/wc2015/maps/01/mapIcons/marker_red.png', //MARKER URL
size: new google.maps.Size(20, 34), //MARKER SIZE (WxH)
origin: new google.maps.Point(0, 0), //MARKER ORIGIN
anchor: new google.maps.Point(9, 34) //MARKER ANCHOR
};
//INFO WINDOW
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
//CREATE MARKER
function createMarker(latlng, label, html) {
var contentString = '<b>' + label + '</b><br>' + html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: iconImage,
title: label,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
marker.myname = label;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
return marker;
}
function initialize() {
var latlng = new google.maps.LatLng(51.555967, -0.279736);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var rendererOptions = {
map: map,
suppressMarkers: true,
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
//Edinburgh to Eden Project
var point1 = new google.maps.LatLng(58.981386, -2.973751); //Orkney Rugby Football Club
var point2 = new google.maps.LatLng(55.881517, -4.342057); //Scotstoun Stadium
var point3 = new google.maps.LatLng(54.998080, -7.319812); //Guildhall St
var point4 = new google.maps.LatLng(54.563716, -5.942729); //Belfast Harlequins RFC
var point5 = new google.maps.LatLng(53.271057, -9.054253); //Hotel Spanish Arch
var point6 = new google.maps.LatLng(52.674222, -8.642515); //Thomond Park
var point7 = new google.maps.LatLng(53.291755, -3.713769); //Colwyn Leisure Centre
var point8 = new google.maps.LatLng(51.748180, -3.618567); //Glynneath Rugby Football Club
var wps = [{
location: point1
}, {
location: point2
}, {
location: point3
}, {
location: point4
}, {
location: point5
}, {
location: point6
}, {
location: point7
}, {
location: point8
}];
//START
var org = new google.maps.LatLng(55.945315, -3.205309); //EDINBURGH
//FINISH
var dest = new google.maps.LatLng(50.360130, -4.744717); //EDEN PROJECT
var request = {
origin: org,
destination: dest,
waypoints: wps,
travelMode: google.maps.DirectionsTravelMode.WALKING,
//unitSystem: google.maps.UnitSystem.IMPERIAL
};
directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
//SHOW ROUTE
directionsDisplay.setDirections(response);
//COPY POLY FROM DIRECTION SERVICE
var polyline = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
var bounds = new google.maps.LatLngBounds();
var lengthMeters = 0;
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
if (lengthMeters <= walked) {
polyline.getPath().push(nextSegment[k]);
if (polyline.getPath().getLength() > 1) {
var lastPt = polyline.getPath().getLength() - 1;
lengthMeters += google.maps.geometry.spherical.computeDistanceBetween(polyline.getPath().getAt(lastPt - 1), polyline.getPath().getAt(lastPt));
}
}
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
map.fitBounds(bounds);
//alert(walked);
//ADD MARKER TO NEW POLYLINE AT 'X' DISTANCE
createMarker(polyline.GetPointAtDistance(walked), "You are here", (Math.round(walked * METERS_TO_MILES * 10) / 10) + ' miles');
//GET THE TOTAL DISTANCE
var distance = 0;
//var METERS_TO_MILES = 0.000621371192;
for (i = 0; i < response.routes[0].legs.length; i++) {
//FOR EACH LEG GET THE DISTANCE AND ADD IT TO THE TOTAL
distance += parseFloat(response.routes[0].legs[i].distance.value);
}
//alert((Math.round( distance * METERS_TO_MILES * 10 ) / 10)+' miles');
//alert(distance); //METERS
} else if (status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED) {
alert('Max waypoints exceeded');
} else {
alert('failed to get directions');
}
});
};
window.onload = function() {
initialize();
};
/*********************************************************************\
* *
* epolys.js by Mike Williams *
* updated to API v3 by Larry Ross *
* *
* A Google Maps API Extension *
* *
* Adds various Methods to google.maps.Polygon and google.maps.Polyline *
* *
* .Contains(latlng) returns true is the poly contains the specified *
* GLatLng *
* *
* .Area() returns the approximate area of a poly that is *
* not self-intersecting *
* *
* .Distance() returns the length of the poly path *
* *
* .Bounds() returns a GLatLngBounds that bounds the poly *
* *
* .GetPointAtDistance() returns a GLatLng at the specified distance *
* along the path. *
* The distance is specified in metres *
* Reurns null if the path is shorter than that *
* *
* .GetPointsAtDistance() returns an array of GLatLngs at the *
* specified interval along the path. *
* The distance is specified in metres *
* *
* .GetIndexAtDistance() returns the vertex number at the specified *
* distance along the path. *
* The distance is specified in metres *
* Returns null if the path is shorter than that *
* *
* .Bearing(v1?,v2?) returns the bearing between two vertices *
* if v1 is null, returns bearing from first to last *
* if v2 is null, returns bearing from v1 to next *
* *
* *
***********************************************************************
* *
* This Javascript is provided by Mike Williams *
* Blackpool Community Church Javascript Team *
* http://www.blackpoolchurch.org/ *
* http://econym.org.uk/gmap/ *
* *
* This work is licenced under a Creative Commons Licence *
* http://creativecommons.org/licenses/by/2.0/uk/ *
* *
***********************************************************************
* *
* Version 1.1 6-Jun-2007 *
* Version 1.2 1-Jul-2007 - fix: Bounds was omitting vertex zero *
* add: Bearing *
* Version 1.3 28-Nov-2008 add: GetPointsAtDistance() *
* Version 1.4 12-Jan-2009 fix: GetPointsAtDistance() *
* Version 3.0 11-Aug-2010 update to v3 *
* *
\*********************************************************************/
// === first support methods that don't (yet) exist in v3
google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
var EarthRadiusMeters = 6378137.0; // meters
var lat1 = this.lat();
var lon1 = this.lng();
var lat2 = newLatLng.lat();
var lon2 = newLatLng.lng();
var dLat = (lat2 - lat1) * Math.PI / 180;
var dLon = (lon2 - lon1) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = EarthRadiusMeters * c;
return d;
}
google.maps.LatLng.prototype.latRadians = function() {
return this.lat() * Math.PI / 180;
}
google.maps.LatLng.prototype.lngRadians = function() {
return this.lng() * Math.PI / 180;
}
// === A method which returns the length of a path in metres ===
google.maps.Polygon.prototype.Distance = function() {
var dist = 0;
for (var i = 1; i < this.getPath().getLength(); i++) {
dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1));
}
return dist;
}
// === A method which returns a GLatLng of a point a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polygon.prototype.GetPointAtDistance = function(metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
if (this.getPath().getLength() < 2) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1));
}
if (dist < metres) {
return null;
}
var p1 = this.getPath().getAt(i - 2);
var p2 = this.getPath().getAt(i - 1);
var m = (metres - olddist) / (dist - olddist);
return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m);
}
// === A method which returns an array of GLatLngs of points a given interval along the path ===
google.maps.Polygon.prototype.GetPointsAtDistance = function(metres) {
var next = metres;
var points = [];
// some awkward special cases
if (metres <= 0) return points;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength()); i++) {
olddist = dist;
dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1));
while (dist > next) {
var p1 = this.getPath().getAt(i - 1);
var p2 = this.getPath().getAt(i);
var m = (next - olddist) / (dist - olddist);
points.push(new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m));
next += metres;
}
}
return points;
}
// === A method which returns the Vertex number at a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polygon.prototype.GetIndexAtDistance = function(metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1));
}
if (dist < metres) {
return null;
}
return i;
}
// === Copy all the above functions to GPolyline ===
google.maps.Polyline.prototype.Distance = google.maps.Polygon.prototype.Distance;
google.maps.Polyline.prototype.GetPointAtDistance = google.maps.Polygon.prototype.GetPointAtDistance;
google.maps.Polyline.prototype.GetPointsAtDistance = google.maps.Polygon.prototype.GetPointsAtDistance;
google.maps.Polyline.prototype.GetIndexAtDistance = google.maps.Polygon.prototype.GetIndexAtDistance;
html,
body,
#map,
#container {
height: 100%;
width: 100%;
background: #000;
padding: 0px;
margin: 0px;
}
<div id="container">
<div id="map"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
I am playing around with the nice code from http://paperjs.org/examples/candy-crash/. I want to replace the colors with an image so that instead of showing say a red circle, it should show a circle with an image inside. Here is the snippet I think I need to modify:
function Ball(r, p, v) {
this.radius = r;
this.point = p;
this.vector = v;
this.maxVec = 15;
this.numSegment = Math.floor(r / 3 + 2);
this.boundOffset = [];
this.boundOffsetBuff = [];
this.sidePoints = [];
this.path = new Path({
fillColor: {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
},
blendMode: 'screen'
});
for (var i = 0; i < this.numSegment; i ++) {
this.boundOffset.push(this.radius);
this.boundOffsetBuff.push(this.radius);
this.path.add(new Point());
this.sidePoints.push(new Point({
angle: 360 / this.numSegment * i,
length: 1
}));
}
}
I am reading up on raster as well. But I don't see how to get this code to work with the image. Thanks for any help.
If I simply do this.path = new Path(raster) it does not work. It only shows one static image as opposed to all the circles moving around.
UPDATE
Here is a raster to use
var imgUrl ="http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg";
var raster = new Raster();
raster.scale(0.2)
If you want to clip a raster with a path, you need to create a group that contains both objects, then set group.clipped property to true. Passing a raster as the argument for a path constructor will not work.
It's easiest to do this in the "main" loop.
//--------------------- main ---------------------
var balls = [];
// ADD AN ARRAY TO HOLD SOME RASTERS
var rasters = [];
var raster = new Raster("http://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg");
raster.scale(.05);
var numBalls = 18;
for (var i = 0; i < numBalls; i++) {
var position = Point.random() * view.size;
var vector = new Point({
angle: 360 * Math.random(),
length: Math.random() * 10
});
var radius = Math.random() * 60 + 60;
balls.push(new Ball(radius, position, vector));
// ADD RASTERS AND CLIP TO EACH "BALL"
rasters.push(raster.clone().scale(radius/50));
var group = new Group(balls[i].path, rasters[i]);
group.clipped = true;
}
raster.remove();
function onFrame() {
for (var i = 0; i < balls.length - 1; i++) {
for (var j = i + 1; j < balls.length; j++) {
balls[i].react(balls[j]);
}
}
for (var i = 0, l = balls.length; i < l; i++) {
balls[i].iterate();
rasters[i].position = balls[i].path.position;
}
}