How to figure out resolution array from user inputted ArcGIS projection data - leaflet

I have a Leaflet based mapping solution that uses ArcGIS map configuration supplied by a user (I have no idea what it will be, they will customize it with their own ArcGIS services). The issue is that the projection can be pretty much anything, and I will need to use Proj4Leaflet to configure the CRS of the map accordingly. The problem I'm running into is I'm not sure how to calculate the scale/resolution array. The user is inputting these values: projection key, Proj4 string, origin, bounds, zoom levels.
So, for example (yes I know EPSG:3857 is standard and I could just use L.CRS.EPSG3857 but it serves as a good example of how to set the same thing up using Proj4Leaflet):
Projection key = EPSG:3857
Proj4 string = +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=#null +wktext +no_defs
Origin = [0,0]
Bounds = [[-20026376.39, -20048966.10], [20026376.39, 20048966.10]]
Zoom levels = 18
With that I think I have enough to set up a L.Proj.CRS for it:
var crs = new L.Proj.CRS("EPSG:3857", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=#null +wktext +no_defs",
{
resolutions : [?????],
origin : [0,0],
bounds : [[-20026376.39, -20048966.10], [20026376.39, 20048966.10]]
});
I have everything I need apart from the resolutions array, I am not sure exactly how to go about setting that up based on the data given and having a hard time finding answers to get me pointed in the right direction.

So bottom line, the only way I found to calculate resolutions is if it is a mercator projection and we know the longitude extents of it and the tile size. Otherwise the resolutions will need to be looked up at the ArcGIS Server tile server REST endpoint. Thus for my project I will need the user to supply the array themselves and cannot calculate it for them.
In the case of the mercator projection, I came up with this function that does the trick:
function parseResolutionsFromZoomLevels(zoomLevels, tileSize, mapWGS84Extent)
{
var metersPerExtent = 40075008/360;
var mapWGS84Meters = mapWGS84Extent*metersPerExtent;
var resolutionArray = [];
for (var i=0; i<zoomLevels; i++)
{
var tilesAtZoom = Math.pow(2,i);
var pixelsAtZoom = tilesAtZoom*tileSize;
resolutionArray.push(mapWGS84Meters/pixelsAtZoom);
}
return resolutionArray;
}
Hope this helps anyone else that happens to encounter this same situation.

Related

Mapbox - clustering only markers on the same coordinates

Is it possible to cluster only markers on the same coordinates?
When using mapbox marker clustering all markers are grouped depending on map zoom level. What I would like to do is to have all markers independent (non grouped) except markers on the same latitude-longitude coordinates.
Is that possible?
This is not a perfect solution but it will do the job...
I've solved my problem by using two layer groups, one for individual markers and one for clustered markers.
Something like this:
var overlay1 = L.layerGroup().addTo(map);//this one is for single markers
var overlay2 = L.layerGroup().addTo(map);//this one is for clustered
var layers;
//load markers from external source
var featureLayer = L.mapbox.featureLayer()
.loadURL('/my_geojson_script/')
.on('ready', function(e) {
layers = e.target;
//go and do the filtering
doTheThing();
})
function doTheThing()
overlay1.clearLayers();//remove all single markers
overlay2.clearLayers();//remove all clustered
var clusterGroup = new L.MarkerClusterGroup().addTo(overlay2);
layers.eachLayer(function(layer) {
//the number of markers on this layer coordinates (info collected from json property. I calculate this in advance)
var numberOfMarkers = layer.feature.properties.numberOfMarkers;
//if number of markers is greater than 1 add layer to cluster group
if(numberOfMarkers>1){
clusterGroup.addLayer(layer);
}
else{//if number of markers is 1 add layer to individual layer group
overlay1.addLayer(layer);
}
});
}

Check if coordinates are inside a KML polygon

I have a KML file which defines a region (or polygon). I would like to make a function that checks if a given coordinate is inside or outside that polygon.
This is the KML if you want to take a look: http://pastebin.com/LGfn3L8H
I don't want to show any map, I just want to return a boolean.
Point-in-polygon (PiP) is a very well-studied computational geometry problem, so there are lots of algorithms and implementations out there that you can use. Searching SO will probably find several you can copy-paste, even.
There's a catch, though—you're dealing with polygons on the surface of the Earth... which is a sphere, not the infinite Euclidean plane that most PiP algorithms expect to work with. (You can, for example, have triangles whose internal angles add up to greater than π radians.) So naively deploying a PiP algorithm will give you incorrect answers for edge cases.
It's probably easiest to use a library that can account for differences between Euclidean and spherical (or, more precisely, Earth-shaped) geometry—that is, a mapping library like MapKit. There are tricks like the one in this SO answer that let you convert a MKPolygon to a CGPath through map projection, after which you can use the CGPathContainsPoint function to test against the flat 2D polygon corresponding to your Earth-surface polygon.
Of course, to do that you'll also need to get your KML file imported to MapKit. Apple has a sample code project illustrating how to do this.
This can be done with GMSGeometryContainsLocation.
I wrote a method that makes use of the GoogleMapsUtils library's GMUKMLParser.
func findPolygonName(_ location: CLLocationCoordinate2D) {
var name: String?
outerLoop: for placemark in kmlParser.placemarks {
if let polygon = (placemark as? GMUPlacemark)?.geometry as? GMUPolygon {
for path in polygon.paths {
if GMSGeometryContainsLocation(location, path, true) {
name = (placemark as? GMUPlacemark)?.title
break outerLoop
}
}
}
}
if let n = name, !n.isEmpty {
locationLabel.text = n
} else {
locationLabel.text = "We do not deliver here"
}
}
This function iterates over the polygon and its path to determine whether the given coordinates are within the path.

Display points when there's great distance between them (GWT-Openlayers)

The case is the following: I have a layer and there are two points on it. The first is in Australia, the second is in the USA. The continent or the exact position of the points doesn't count. The essential part is the great distance between the points. When the application starts, the first point appears (zoomlevel is 18). The second point isn't displayed because it is far away from here and the zoomlevel is high. Then i call the panTo function with the location of the second point. The map jumps to the right location but the second point doesn't appear. The point appears only if i zoom in/out or resize the browser window. The GWT code:
LonLat center = new LonLat(151.304485, -33.807831);
final LonLat usaPoint = new LonLat(-106.356183, 35.842721);
MapOptions defaultMapOptions = new MapOptions();
defaultMapOptions.setNumZoomLevels(20);
// mapWidget
final MapWidget mapWidget = new MapWidget("100%", "100%", defaultMapOptions);
// google maps layer
GoogleV3Options gSatelliteOptions = new GoogleV3Options();
gSatelliteOptions.setIsBaseLayer(true);
gSatelliteOptions.setDisplayOutsideMaxExtent(true);
gSatelliteOptions.setSmoothDragPan(true);
gSatelliteOptions.setType(GoogleV3MapType.G_SATELLITE_MAP);
GoogleV3 gSatellite = new GoogleV3("Google Satellite", gSatelliteOptions);
mapWidget.getMap().addLayer(gSatellite);
// pointLayer
VectorOptions options = new VectorOptions();
options.setDisplayOutsideMaxExtent(true);
Vector vector = new Vector("layer1", options);
mapWidget.getMap().addLayer(vector);
mapWidget.getMap().addControl(new LayerSwitcher());
mapWidget.getMap().addControl(new MousePosition());
mapWidget.getMap().addControl(new ScaleLine());
mapWidget.getMap().addControl(new Scale());
// two points are added to the layer
center.transform(new Projection("EPSG:4326").getProjectionCode(), mapWidget.getMap().getProjection());
vector.addFeature(new VectorFeature(new Point(center.lon(), center.lat())));
usaPoint.transform(new Projection("EPSG:4326").getProjectionCode(), mapWidget.getMap().getProjection());
vector.addFeature(new VectorFeature(new Point(usaPoint.lon(), usaPoint.lat())));
// the center of the map is the first point
mapWidget.getMap().setCenter(center, 18);
// 3 sec later panTo second point
Timer t = new Timer() {
#Override
public void run() {
mapWidget.getMap().panTo(usaPoint);
}
};
t.schedule(3000);
I tried to reproduce this situation with pure Openlayers, but it worked fine. Here is the link
So i think the problem is with GWT-Openlayers. Has anybody experienced such behaviour? Or has anybody got a solution to this problem?
What a strange problem.
For now I did only found a way around it, but not a real fix. Seems to be a bug in GWT-OL as you say, but I can't imagine where.
What you can do is add the following 3 lines to your code :
mapWidget.getMap().panTo(usaPoint);
int zoom = mapWidget.getMap().getZoom();
mapWidget.getMap().setCenter(usaPoint, 0);
mapWidget.getMap().setCenter(usaPoint, zoom);
(note : I am a contributor to the GWT-OL project, I also informed other contributors of this problem, maybe they can find a better solution)
Edit : Another GWT-OL contributor looked into this but also couldn't find a real solution
but another workaround is to use zoomToExtend for the requested point :
Bounds b = new Bounds();
b.extend(new LonLat(usaPoint.getX(), usaPoint.getY()));
mapWidget.getMap().zoomToExtent(b);

three.js merging geometry with ShaderMaterials

I have a project built on a tileset, which I currently map to CubeGeometries via a number of ShaderMaterials.
When the cubes are rendered, there is bleeding and flickering around the edges of the cubes. Also, it seems to be an awfully bad way to do it, performance-wise.
So I looked up THREE.GeometryUtils.merge that apparently merges my cubes to one geometry, vertices and all.
Is it possible to make the merged mesh keep the materials I used on each of the cubes?
Is there a better way to accomplish what I'm trying to do?
Edit:
This is an example of what is not working.
http://jsfiddle.net/CpQ77/3/
var shaderMat1 = new THREE.ShaderMaterial({
fragmentShader: document.getElementById("red-fragment").innerText,
vertexShader: document.getElementById("vertex").innerText
});
var shaderMat2 = new THREE.ShaderMaterial({
fragmentShader: document.getElementById("blue-fragment").innerText,
vertexShader: document.getElementById("vertex").innerText
});
var cube1 = new THREE.Mesh(new THREE.CubeGeometry(64, 64, 64), new THREE.MeshFaceMaterial([shaderMat1, shaderMat1, shaderMat1, shaderMat1, shaderMat1, shaderMat1]));
cube1.position.x = 0;
cube1.position.y = 300;
var cube2 = new THREE.Mesh(new THREE.CubeGeometry(64, 64, 64), new THREE.MeshFaceMaterial([shaderMat2, shaderMat2, shaderMat2, shaderMat2, shaderMat2, shaderMat2]));
cube2.position.x = 64;
cube2.position.y = 300;
var geo = new THREE.Geometry();
THREE.GeometryUtils.merge(geo, cube1);
THREE.GeometryUtils.merge(geo, cube2);
var mergedMesh = new THREE.Mesh(geo, new THREE.MeshFaceMaterial());
scene.add(mergedMesh);
It gives an error saying, "Uncaught TypeError: Cannot read property 'map' of undefined", when trying to use the MeshFaceMaterial as used in a couple of places around the web.
I can't figure out what I'm missing though.
Edit2:
One workaround I found was to loop through all the faces of the new geometry, and applying a materialIndex to it before calling geometry.mergeVertices().
Thanks for this post, the comments were helpful in finding a solution. Instead of supplying the materials array to the Geometry, you should supply it as the only argument to MeshFaceMaterial.
Example in CoffeeScript:
materials = []
for i in [0...6]
texture = window["texture_" + i] # This is a Texture that has already been loaded
materials.push new THREE.MeshBasicMaterial(
color : color
map : texture
)
size = 1
geometry = new THREE.CubeGeometry size, size, size
cube = new THREE.Mesh geometry, new THREE.MeshFaceMaterial materials
cube.position.x = x
cube.position.y = y
cube.position.z = z
scene.add cube
return cube

Google Earth API - drawing lines that curve?

I've been playing with the google earth API. I thought it would be neat to draw some lines between places from a relative 3D viewpoint. I've searched through the GE documentation and searched on google for answers but didn't find anything that led me down the correct path, so I thought I'd post some code and perhaps get some insight.
The following code plots two places and then draws a line between those places. Unfortunately the line that gets drawn splices the earth. Is there a method to make it wrap to the contour of the earth when drawn in 3D like this? I've attempted to vary the line height placement with a varying degree of success, but at the cost of accuracy and overall visual appeal when the line doesn't appear to connect the places.
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
//---------------------------------PLACES
// Create the placemark.
var placemark = ge.createPlacemark('');
placemark.setName("Location 1");
// Set the placemark's location.
var point = ge.createPoint('');
point.setLatitude(39.96028);
point.setLongitude(-82.979736);
placemark.setGeometry(point);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
// Create the placemark.
var placemark2 = ge.createPlacemark('');
placemark2.setName("Hop #2");
// Set the placemark's location.
var point2 = ge.createPoint('');
point2.setLatitude(25.7615);
point2.setLongitude(-80.2939);
placemark2.setGeometry(point2);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark2);
//---------------------------------FOCUS
var lookAt = ge.createLookAt('');
lookAt.setLatitude(39.96028);
lookAt.setLongitude(-82.979736);
lookAt.setRange(1000000.0);
lookAt.setAltitude(0);
lookAt.setTilt(45);
ge.getView().setAbstractView(lookAt);
//---------------------------------LINES
// Create the placemark
var lineStringPlacemark = ge.createPlacemark('');
// Create the LineString
var lineString = ge.createLineString('');
lineStringPlacemark.setGeometry(lineString);
// Add LineString points
lineString.getCoordinates().pushLatLngAlt(39.96028, -82.979736, 0);
lineString.getCoordinates().pushLatLngAlt(25.7615, -80.2939, 0);
//lineString.setAltitudeMode(ge.ALTITUDE_CLAMP_TO_GROUND);
//lineString.setAltitudeMode(ge.ALTITUDE_RELATIVE_TO_GROUND);
lineString.setAltitudeMode(ge.absolute);
// Create a style and set width and color of line
lineStringPlacemark.setStyleSelector(ge.createStyle(''));
var lineStyle = lineStringPlacemark.getStyleSelector().getLineStyle();
lineStyle.setWidth(2);
lineStyle.getColor().set('9900ffff'); // aabbggrr format
// Add the feature to Earth
ge.getFeatures().appendChild(lineStringPlacemark);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
You will want to set tesselation, and optionally extrude, on your linestring to true.
See https://developers.google.com/kml/documentation/kmlreference#tessellate and https://developers.google.com/kml/documentation/kmlreference#extrude for details
For the API, your syntax would be something like
lineStringPlacemark.setTessellate(true);
lineStringPlacemark.setExtrude(true);
There's some additional API examples on this at https://developers.google.com/earth/documentation/geometries