I am attempting to retrieve the latlng coordinates of both a polyline and polygon. After I complete the drawing of either object I would like to store the latlng in a database, but for now I am merely trying to show the latlng in a textarea. I have done this easily enough for markers, rectangles, and circles, but the terminology for polylines and polygons is baffling me. When I complete the drawing i use an addDomListener(drawingManager, 'polygoncomplete', ... for polyons and then iterate through all the polygons i have drawn. For each polygon I then iterate through its array of coords. I have searched this forums database and tried the Bermuda triangle example on the Google documentation page.
Bermuda Example
I have read over the documentation many times and just cant see what i am missing. Any help is appreciated.
//Save polygons data to text area
var polygons = [];
google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon) {
polygons.push(polygon);
});
google.maps.event.addDomListener(savebutton, 'click', function() {
document.getElementById("savedatapolygon").value = "";
for (var i = 0; i < polygons.length; i++) {
var polygonBounds = polygons[i].getPath();
var xy;
// Iterate over the polygonBounds vertices.
for (var i = 0; i < polygonBounds.length; i++) {
xy = polygonBounds.getAt(i);
contentString += '<br>' + 'Coordinate: ' + i + '<br>' + xy.lat() +',' + xy.lng();
}
document.getElementById("savedatapolygon").value += "polygon(";
document.getElementById("savedatapolygon").value += contentString;
document.getElementById("savedatapolygon").value += ")";
}
});
The Google Maps Polygon class returns a MVCArray. You need to use the forEach method of the MVCArray to loop through it.
var polygonBounds = polygons[i].getPath();
// Iterate over the polygonBounds vertices.
polygonBounds.forEach(function(xy, i) {
contentString += '<br>' + 'Coordinate: ' + i + '<br>' + xy.lat() +',' + xy.lng();
});
document.getElementById("savedatapolygon").value += "polygon(";
document.getElementById("savedatapolygon").value += contentString;
document.getElementById("savedatapolygon").value += ")";
Related
I need to view the segments and handles of the path that defines a SymbolItem. It is a related issue to this one but in reverse (I want the behavior displayed on that jsfiddle).
As per the following example, I can view the bounding box of the SymbolItem, but I cannot select the path itself in order to view its segments/handles. What am I missing?
function onMouseDown(event) {
project.activeLayer.selected = false;
// Check whether there is something on that position already. If there isn't:
// Add a circle centered around the position of the mouse:
if (event.item === null) {
var circle = new Path.Circle(new Point(0, 0), 10);
circle.fillColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
var circleSymbol = new SymbolDefinition(circle);
multiply(circleSymbol, event.point);
}
// If there is an item at that position, select the item.
else {
event.item.selected = true;
}
}
function multiply(item, location) {
for (var i = 0; i < 10; i++) {
var next = item.place(location);
next.position.x = next.position.x + 20 * i;
}
}
Using SymbolDefinition/SymbolItem prevent you from changing properties of each symbol items.
The only thing you can do in this case is select all symbols which share a common definition.
To achieve what you want, you have to use Path directly.
Here is a sketch showing the solution.
function onMouseDown(event) {
project.activeLayer.selected = false;
if (event.item === null) {
var circle = new Path.Circle(new Point(0, 0), 10);
circle.fillColor = Color.random();
// just pass the circle instead of making a symbol definition
multiply(circle, event.point);
}
else {
event.item.selected = true;
}
}
function multiply(item, location) {
for (var i = 0; i < 10; i++) {
// use passed item for first iteration, then use a clone
var next = i === 0 ? item : item.clone();
next.position = location + [20 * i, 0];
}
}
I'm trying to figure out how to extrude an already loaded .obj object to make it "thicker". I think I'm looking for a way to scale my object not from its anchor point but scaling it by each polygon normal.
A classic example would be to take a "ring" object. If you scale it up with just the normal scale methods it just gets bigger from the center but I want the ring to become thicker/thinner. Its called a 'normal scale' in cinema 4d.
Here's some example code of what I currently have, and which isn't giving me the expected result.
var objLoader = new THREE.OBJLoader();
var material = new THREE.MeshLambertMaterial({color:'yellow', shading:THREE.FlatShading});
objLoader.load('objects/gun/M1911.obj', function (obj) {
obj.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.geometry.computeVertexNormals();
child.material = material;
}
});
obj.material = material;
obj.scale.set(7, 7, 7);
scene.add(obj);
});
scaleGeo: function (geo, ratio) {
for (var i = 0; i < geo.faces.length; i++) {
var faceI = geo.faces[i];
var vertexArr = [faceI.a, faceI.b, faceI.c];
for (var j = 0; j < vertexArr.length; j++) {
var vertexJ = geo.vertices[vertexArr[j]];
var normalJ = faceI.vertexNormals[j];
if (vertexJ.hasScale) continue;
vertexJ.x += normalJ.x * ratio;
vertexJ.y += normalJ.y * ratio;
vertexJ.z += normalJ.z * ratio;
vertexJ.hasScale = true;
}
}
return geo;
},
All my markers are placed in the array "markersArray[]". I want to parse through them and retrieve their current individual latitude and longitude so I can add them to a string I then pass to PHP. Here are all the ways I've tried with no luck (getting latitude only for testing purposes).
function test() {
alert("markersArray.length " + markersArray.length)
for( var i = 0, n = markersArray.length; i < n; ++i ) {
var markerLat = parseFloat(markersArray[i].getAttribute("lng"))
//var markerLat = map.markersArray[i].getPoint().lat();
//var markerLat = map.markersArray[i].getPoint().lat();
//var markerLat = map.markersArray[i].latLng.lat().toFixed(3);
//var markerLat = map.markersArray[i].position.lat();
alert("markerLat " + markerLat)
}
}
I have no problem getting other attributes of the markers, I don't understand why this should be so difficult. :(
Why guess? The documentation says google.maps.Marker.getPosition() (assuming your markersArray contains google.maps.Marker objects, you don't provide the code that initializes it).
This is my first post here, hope someone can help.
I am building a mapping website using google maps.
The map shows upto 14 different icons based on a type category
I understand the theory of sprite images and the reduction in server calls these have so I have one image conating all the markers.
Question:
How do I set the position of the sprite, but only call the image once?
I have seen this post
Google map marker sprite image position
but that only shows changing the image for one marker
This is the code
//set the image once
var img = {
url:'images/site/type_sprite.png',
size: new google.maps.Size(32,32),
origin: new google.maps.Point(0,0)
};
idx = 0;
for (var i = 0; i < l; i++) {
lat = parseFloat(markers[i].getAttribute("lt"));
lng = parseFloat(markers[i].getAttribute("ln"));
var type = markers[i].getAttribute("typ");
if ((lat < latUpper && lat > latLower) && (lng < lngUpper && lng > lngLower) && (jQuery.inArray(type,filter_arr)>=0)) {
//change the position of the icon sprite depending on type
switch(type) {
case 'AA':
img(origin, new google.maps.Point(0,0));
break;
case 'AC':
img(origin = new google.maps.Point(0, 42));
break;
case 'ACF':
img(origin= new google.maps.Point(0,84));
break;
default:
img(origin= new google.maps.Point(0,0));
}
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("nme");
//var icon = 'images/pins/' + type + '.png';
var point = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
map: map,
position: point,
title: name,
icon: img
});
//add to valid array
markersArray.push(marker);
//build infowindow string
str = '<div class="iw_h">' + id + ' ' + name + '</div>';
bindInfoWindow(marker, map, infoWindow, str);
bounds.extend(point);
map.fitBounds(bounds);
idx++;
}
} //end of loop
}
If I put the code
var img = {
url:'images/site/type_sprite.png',
size: new google.maps.Size(32,32),
origin: new google.maps.Point(0,0)
};
inside the loop, doesn't that mean the image is repeatedly downloaded (and it will be a bigger image than an individual icon) thus defeating the object of using a sprite?
This is the site btw
http://www.searchforsites.co.uk/full_screen.php
Hi all here's my situation: http://www.tamrielma.ps/skyrim/
I've added a search based on this well know example: https://developers.google.com/fusiontables/docs/samples/autocomplete
But it's not enough :D and I want that the map zooms and centers on the basis of the search results (that's a single markers not a group of, so I imagine that's not a "bound related" solution).
Thanks in advance for any suggestion
Interesting map. :-) I see you are already using the Google.visualization library for your autocompplete set up. I think that the same library (which uses FT JSONP API I believe) could be used to get the location values via a a callback, similar to your getData() callback.
E.g.
function changeQuery(value) {
value = value.replace("'", "\\'");
layerMarkers.setQuery("SELECT Location FROM "+ fusione +" WHERE Name = '" + value + "'");
// ADDED, using same query as above
var queryText = encodeURIComponent( "SELECT Location FROM "+ fusione +" WHERE Name = '" + value + "'");
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(getLocationData);
}
// location may need parsing into LatLng object
function getLocationData(response) {
numRows = response.getDataTable().getNumberOfRows();
if(numRows == 1){
var loc_str = response.getDataTable().getValue(0, 0));
var tmp = loc_str.split(" ");
var lat = parseFloat(tmp[0]);
var lng = parseFloat(tmp[1]);
var zoom_level = 10;
var location = new google.maps.LatLng(lat,lng);
map.setCenter(location);
map.setZoom(zoom_level);
}
}