I've made the code so that I get yellow points on my map, the coords and some other facts is loaded from a external file.
Here's the resource file
var sites = [{id:1269209,geometry:{ type:"Point",lat:1,lon: 1},properties:{siteName:"Yttern",parentId:1269209,siteType:2}}];
And here's the script for viewing them
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
$.getScript('test.js',function(){
for(var i = 0; i < sites.length; i++)
{
var site = sites[i];
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(site.geometry.lon,site.geometry.lat));
vectorLayer.addFeatures(feature);
}
map.addLayer(vectorLayer);
});
The thing I woundering about is how do I do to make a hoverable popup for each marker, with the content from the JSON file?
Is it also possible to make the request only when the user have passed zoom level 14?
Now, I've fixed the function that starts when zoom passed 10
map.events.register("moveend", null, function(){
if(map.zoom >= 10)
{
var bounds = map.getExtent();
var ne = new OpenLayers.LonLat(bounds.right,bounds.top).transform(map.getProjectionObject(),new OpenLayers.Projection("EPSG:4326"));
var sw = new OpenLayers.LonLat(bounds.left,bounds.bottom).transform(map.getProjectionObject(),new OpenLayers.Projection("EPSG:4326"));
var vectorLayer = new OpenLayers.Layer.Vector("Layer");
$.getScript('ajax.php?a=markers&type=javascript&sw=('+sw.lon+','+sw.lat+')&ne=('+ne.lon+','+ne.lat+')',function(){
//$.getScript('test.js',function(){
for(var i = 0; i < sites.length; i++)
{
var site = sites[i];
var latlon = new OpenLayers.LonLat(site.geo.lon,site.geo.lat);
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(latlon)
);
vectorLayer.addFeatures(feature);
}
map.addLayer(vectorLayer);
});
}
});
but still I dont get the markers on the map, is something wrong?
One result from markers.php aka ajax.php?a=markers....
var sites = [{siteId:'9',siteName:'Hårleby',geo:{lon:11.641452694427471,lat:58.15782686109065},fact:{parentSiteId:0,county:'Orust'}}];
is it the projection on the result maybe? Please help.
Related
So I used the solution from this thread How to draw a polygon around a polyline in JavaScript? to solve my problem that I needed to have a radius drawn along a path. However it looks lopsided, like an oval when I use this method, even though on the thread the result doesn't look like this. I'm not using directions to generate my points, I already have an array of points that I'm passing to the function
here is what it currently looks like
function drawRadius(map, path, radius, factor)
{
let radial = [];
overviewPathGeo = [];
for (var i = 0; i < path.length; i++) {
overviewPathGeo.push(
[path[i].lng, path[i].lat]
);
}
var distance = (radius/1000.0) / 111.12, // Roughly 10km
geoInput = {
type: "LineString",
coordinates: overviewPathGeo
};
var geoReader = new jsts.io.GeoJSONReader(),
geoWriter = new jsts.io.GeoJSONWriter();
var geometry = geoReader.read(geoInput).buffer(distance);
var polygon = geoWriter.write(geometry);
var oLanLng = [];
var oCoordinates;
oCoordinates = polygon.coordinates[0];
for (i = 0; i < oCoordinates.length; i++) {
var oItem;
oItem = oCoordinates[i];
oLanLng.push(new google.maps.LatLng(oItem[1], oItem[0]));
}
var polygone = new google.maps.Polygon({
paths: oLanLng,
map:map
});
radial.push(polygone);
distance = ((radius*factor)/1000.0) / 111.12, // Roughly 10km
geoInput = {
type: "LineString",
coordinates: overviewPathGeo
};
geoReader = new jsts.io.GeoJSONReader(),
geoWriter = new jsts.io.GeoJSONWriter();
geometry = geoReader.read(geoInput).buffer(distance);
polygon = geoWriter.write(geometry);
oLanLng = [];
oCoordinates;
oCoordinates = polygon.coordinates[0];
for (i = 0; i < oCoordinates.length; i++) {
var oItem;
oItem = oCoordinates[i];
oLanLng.push(new google.maps.LatLng(oItem[1], oItem[0]));
}
polygone = new google.maps.Polygon({
paths: oLanLng,
map:map
});
radial.push(polygone);
return radial;
}
I want to create a simple app in three.js
For this app, I need to subtract two meshes and I have found that ThreeCSG can do this. But somehow I don't get the expected result.
I have copied the code from an example, but even this doesn't work properly.
Trying some other function like the union. But instead of merging two meshes into one it removes it.
link to ThreeCSG: https://github.com/chandlerprall/ThreeCSG/blob/master/ThreeCSG.js
result that I get when subtracting
result that I get when I use union
var materialNormal = new THREE.MeshNormalMaterial( { side: THREE.DoubleSide } );
var diceCube = new THREE.Mesh( new THREE.BoxGeometry(10,10,10), materialNormal);
diceCube.position.x = 0;
diceCube.position.y = 5;
diceCube.position.z = 0;
diceCube.geometry.computeFaceNormals();
diceCube.geometry.computeVertexNormals();
var cubeBSP = new ThreeBSP(diceCube);
var sphereGeometry = new THREE.SphereGeometry(7.5,16,8);
var sphereMesh = new THREE.Mesh(sphereGeometry, materialNormal);
sphereMesh.scale.x = 0.17;
sphereMesh.scale.y = 0.17;
sphereMesh.scale.z = 0.17;
//coords of the spheres
var xPositions = [ 0, 3 ]; // coordinates for xPositions of sphereMesh
var yPositions = [ 10, 10 ];
var zPositions = [ 0, 0 ];
var diceDots = new THREE.Geometry();
for(var i = 0; i < xPositions.length; i++){
sphereMesh.position.x = xPositions[i];
sphereMesh.position.y = yPositions[i];
sphereMesh.position.z = zPositions[i];
sphereMesh.updateMatrix();
diceDots.merge( sphereMesh.geometry, sphereMesh.matrix );
}
var material = new THREE.MeshPhongMaterial( { color: 0xffaa00 });
var dotsMesh = new THREE.Mesh(diceDots);
dotsMesh.geometry.computeFaceNormals();
dotsMesh.geometry.computeVertexNormals();
var dotsBSP = new ThreeBSP(dotsMesh);
var resultBSP = cubeBSP.subtract(dotsBSP);
result = resultBSP.toMesh(material);
scene.add(result);
I have found a solution.
The threeCSG I used was corrupted this one works exactly how it must be done.
Link to working ThreeCSG: https://github.com/oathihs/ThreeCSG/blob/master/dist/THREE.CSG.js
I need to place around 500,000 objects on a map in structure like <div><a><img>.
But if I place only 2,000 objects as overlay my map crashes.
What can I do?
var srcImage = 'img/catalog-6.png';
var b = 1;
var a = 1;
var bounds = [10000];
var overlay = [10000]
var good;
for(i = 1; i < 1000; i++) {
bounds[i] = new google.maps.LatLngBounds(
new google.maps.LatLng(b, b),
new google.maps.LatLng(a, a));
b = 1;
a = 1;
overlay = new firstpixel(bounds[i], srcImage, map);
good++;
console.log(i);
}
The dice looks like a dice only if I use MeshNormalMaterial in the second last line (result = resultBSP.toMesh(materialNormal);). With any other material it just looks like a cube with no subtraction (dots) on it. The ThreeBSP (ThreeCSG upgrade) library I am using is located here.
There is no problem with using the MeshNormalMaterial. It just doesn't have almost any options to modify it. (It doesn't take parameters like other materials).
Here is my function that I am using to create a dice:
function buildDice(){
var materialNormal = new THREE.MeshNormalMaterial();
var diceCube = new THREE.Mesh( new THREE.BoxGeometry(100,100,100), materialNormal);
diceCube.position.x = 0;
diceCube.position.y = 50;
diceCube.position.z = 0;
diceCube.geometry.computeFaceNormals();
diceCube.geometry.computeVertexNormals();
var cubeBSP = new ThreeBSP(diceCube);
var sphereGeometry = new THREE.SphereGeometry(75,16,8);
var sphereMesh = new THREE.Mesh(sphereGeometry, materialNormal);
sphereMesh.scale.x = 0.17;
sphereMesh.scale.y = 0.17;
sphereMesh.scale.z = 0.17;
//coords of the spheres
var xPositions = [....]; // coordinates for xPositions of sphereMesh
var yPositions = [....];
var zPositions = [....];
var diceDots = new THREE.Geometry();
for(var i = 0; i < xPositions.length; i++){
sphereMesh.position.x = xPositions[i];
sphereMesh.position.y = yPositions[i];
sphereMesh.position.z = zPositions[i];
THREE.GeometryUtils.merge(diceDots, sphereMesh);
}
var dotsMesh = new THREE.Mesh(diceDots, materialNormal);
dotsMesh.geometry.computeFaceNormals();
dotsMesh.geometry.computeVertexNormals();
var dotsBSP = new ThreeBSP(dotsMesh);
var resultBSP = cubeBSP.subtract(dotsBSP);
result = resultBSP.toMesh(materialNormal);
scene.add(result);
}
It does work with other Materials, for example with a THREE.MeshPhongMaterial. This jsfiddle using your buildDice()-function may help you:
http://jsfiddle.net/L0rdzbej/152/
You have to update the mesh´s matrix before merging the geometry, and best not to use deprecated functions for this.
Three.js r73
I extend a polygon shape on the client. Please see my question (How to evenly adjust some area to polygon (extend a polygon)?) to understand what I exactly mean. I do all the calculations in browser and then send a result to server and store it in DB. I use this function (from here):
this.extendPolygon = function(polyline, offset) {
var distance = Number(offset) * 1000;
var numPts = polyline.getPath().getLength();
var bounds = new google.maps.LatLngBounds();
for (var i=0; i< numPts; i++) {
bounds.extend(polyline.getPath().getAt(i));
}
var center = bounds.getCenter();
var extendedPolyPts = [];
for (var i=0; i< numPts; i++) {
var heading = google.maps.geometry.spherical.computeHeading(center,polyline.getPath().getAt(i));
var initialDist = google.maps.geometry.spherical.computeDistanceBetween(center,polyline.getPath().getAt(i));
var extendedDist = initialDist + distance;
var extendedPt = google.maps.geometry.spherical.computeOffset(center, extendedDist, heading);
extendedPolyPts.push(extendedPt);
}
extendedPoly = new google.maps.Polygon({
// map: map,
paths:extendedPolyPts,
fillColor:"#00FF00",
strokeWidth:2,
fillOpacity:0.4,
strokeColor:"#0000FF",
strokeOpacity:0.5
});
return extendedPoly;
};
But I'd like to do calculations on a server side. Is it possible to run the function on a server? It uses these functions of GM API:
google.maps.geometry.spherical.computeHeading
google.maps.LatLngBounds
polyline.getPath().getLength()
google.maps.geometry.spherical.computeDistanceBetween
google.maps.geometry.spherical.computeOffset
google.maps.Polygon