Develop Reference

Leaflet show coordinate grid

I tried adding a gridlayer, but that obviously scales the grid lines with the tiles rather than being fixed to the coordinate system. I want to add a simple grid of lines based on the coordinate system so it is independent from the zoom levels to show the individual coordinates. Ideally I would want to show the coordinate as well and only present them at lower zoom levels.
Could I just add this to the tiles as overlays? How can I set a zoom level cutoff for that?
Code I already have:
var TileLayer = L.TileLayer.extend({
getTileUrl: function (coords) {
var data = {
r: L.Browser.retina ? '#2x' : '',
s: this._getSubdomain(coords),
z: this._getZoomForUrl()
};
var tilepoints = Math.pow(2, data['z'] - 1);
data['x'] = tilepoints * coords.x;
data['y'] = tilepoints * (Math.abs(coords.y) - 1);
return L.Util.template(this._url, L.extend(data, this.options));
}
});
var tiles = new TileLayer(baseurl + "/{z}-{x}-{y}.png", {
crs: L.CRS.Simple,
minZoom: MIN_ZOOM_LEVEL,
maxZoom: MAX_ZOOM_LEVEL,
zoomOffset: 1,
zoomReverse: true,
bounds: [[0, 0], [1048576, 1048576]],
});
var map = L.map(mapDiv, {
crs: L.CRS.Simple,
minZoom: MIN_ZOOM_LEVEL,
maxZoom: MAX_ZOOM_LEVEL,
maxBounds: [[0, 0], [1048576, 1048576]],
layers: [tiles]
});

Dissolve GeoJSON polygons with Turf using Leaflet

I have one GeoJSON with about 100 polygons. I need a way to filter several polygons and dissolve them to put on a Leaflet map. Instead of creating a new GeoJSON with the dissolve polygons I want to try to use Turf.js, try to follow their examples but result are blank and no errors. What is missing or is it a wrong approach?
var poly = new L.layerGroup();
$.getJSON("/geodata/polygons.geojson", function(json) {
L.geoJson(json, {
turf: function(feature, latlng){
var select = (feature.properties.id >= 65 && feature.properties.id <= 68);
features = turf.featureCollection([select], {combine: 'yes'});
var dissolved = turf.dissolve(features, {propertyName: 'combine'}).addTo(poly);
}
});
});
Example from turf website for dissolve:
var features = turf.featureCollection([
turf.polygon([[[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]]], {combine: 'yes'}),
turf.polygon([[[0, -1], [0, 0], [1, 0], [1, -1], [0,-1]]], {combine: 'yes'}),
turf.polygon([[[1,-1],[1, 0], [2, 0], [2, -1], [1, -1]]], {combine: 'no'}),
]);
var dissolved = turf.dissolve(features, {propertyName: 'combine'});

Openlayers trackline length (include altitude)

I using OpenLayers 4, and I want to get length at the LineString.
My code snippet:
var trackline = new ol.geom.LineString(points); //points an array with coordinates
var featurething = new ol.Feature({geometry: trackline});
var linestyle = new ol.style.Style({
stroke : new ol.style.Stroke({width: 4, color: 'rgba(0, 180, 220, 1)'})
});
featurething.setStyle(linestyle);
vectorSource.addFeature( featurething );
How get the trackline length, include altitude?
Thanks!

How to arrange objects in a straight line in three.js

I'm making a chess board with three.js. I have all of the files rendering properly (stl loader) but I can't seem to make them load on the correct position. I am setting all the pieces in a straight line as far as I thought but they appear staggered.
here is my code:
function renderPiece(loader, piece, coor, color) {
loader.load(piece, function(geometry) {
var material = new THREE.MeshPhongMaterial({color:color})
var mesh = new THREE.Mesh(geometry, material)
chessBoard.objects.push(mesh)
// mesh.position.set(coor[0], coor[1], coor[2])
mesh.position.x = coor[0]
mesh.position.y = coor[1]
mesh.position.z = coor[2]
mesh.scale.set(0.75,0.75, 0.75);
chessBoard.scene.add(mesh)
})
}
and here are the fn calls with coordinates:
var oStlLoader = new THREE.STLLoader()
renderPiece(oStlLoader, pieces.rook, [0, 0, -210], 0x000000)
renderPiece(oStlLoader, pieces.bishop, [0, 0, -140], 0x000000)
renderPiece(oStlLoader, pieces.knight, [0, 0, -70], 0x000000)
renderPiece(oStlLoader, pieces.king, [0, 0, 0], 0x000000)
renderPiece(oStlLoader, pieces.queen, [0, 0, 70], 0x000000)
renderPiece(oStlLoader, pieces.knight, [0, 0, 140], 0x000000)
renderPiece(oStlLoader, pieces.bishop, [0, 0, 210], 0x000000)
renderPiece(oStlLoader, pieces.rook, [0, 0, 280], 0x000000)

You must create 3D models with a XYZ zero vector in the place, where should be center of your chess field.
After that, you can use more simple method to set correct positions, use predefined vector array for that:
var fields = [];
fields['a1'] = new THREE.Vector3(10,0,10);
fields['a2'] = new THREE.Vector3(10,0,20);
fields['b1'] = new THREE.Vector3(20,0,10);
and then set a position of your model:
mymodel.position.set(fields['a2'].x,fields['a2'].y,fields['a2'].z);
//or
mymodel.position = new THREE.Vector3.copy(fields['a2']);

"arrow" image only show half in map in OpenLayers 3

I got a problem in web development with OpenLayers 3. I want to add an arrow image by drawing a lineString, the image can draw and point to the direction along the lineString direction, but the image only displays in half, it cannot go over the the line. An excerpt from the code:
var start = e.feature.getGeometry().getFirstCoordinate();
var end = e.feature.getGeometry().getLastCoordinate();
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
var a = new ol.Feature({
geometry: new ol.geom.Point(end)
});
var b = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 0.5],
anchorOrigin: 'top-left',
offset: [0, 0],
scale: 1,
opacity: 1,
rotateWithView: false,
rotation: -rotation,
src: '//openlayers.org/en/v3.8.2/examples/data/arrow.png',
}))
});
var m = a.setStyle(b);
source.addFeature(a);
Full example replicating the problem can be seen in jsFiddle.

The immediate problem with only part of the image being displayed was caused by you specifying value of offset; as per the documentation:
define the sub-rectangle to use from the original icon image. Default value is [0, 0].
Setting it to [0, 0] fixes the problem.
Another problem is that the anchor point of the image is not in "top-left", it's roughly in the middle of the icon. The value of anchor should be set to [0.5, 0.5]. The last problem is that the arrow head is attached to the start of the arrow, not the end.
var a = new ol.Feature({
geometry: new ol.geom.Point(end)
});
var b = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 0.5],
anchorOrigin: 'top-left',
offset: [0, 0],
scale: 1,
opacity: 1,
rotateWithView: false,
rotation: -rotation,
src: '//openlayers.org/en/v3.8.2/examples/data/arrow.png',
}))
});
I fixed your JSFiddle and posted here.