There are some lines in the plan, which are orthogonal to other lines.
However, when i convert the plan to geojson and display it in leaflet, the angles on the polylines in the first picture stay the same, but the angles on the second picture are not orthogonal anymore. I am using the default leaflet projection EPSG:4326, with the geojson converted from EPSG:2278 using ogr2ogr via commandline.
gist.github.com/pungiish/73fd38b372047364cb602e5c323b6 Here, if you zoom to Houston, you see the control lines, which don't look orthogonal either.
Here is a demo with the 2 features I measured in the screenshots, which are already converted from EPSG:2278 to EPSG:4326 via http://ogre.adc4gis.com/.
I uploaded the "original" CAD file with other features stripped here: https://www.dropbox.com/s/xthw1iafnt4zkkx/Objects.dwg.dxf?dl=0
I've not added anything with which one could measure the angle in the demo, but you can see it looks a bit off.
So my question is, why are some of the features "distorted", which causes the angle between them not to be 90° anymore. I convert the coordinates correctly,..
Also, the rotation of the map ( features ) is not the same as when i open the dxf in autocad. In the picture, you can see the first object is rotated differently than when i open the geojson in leaflet ( reproduced in the demo ) and I don't understand why.
Related
I'm trying to move a geoJSON polygon (the outline of a city's administrative borders) from it's original location to another arbitrary one, maintaining its shape while respecting the Mercator projection. Much like how this site does it: https://thetruesize.com/
I've experimented with moving images around the map and those do respect the mercator projection when moved north, but this isn't ideal as the geoJSON would have to be converted to an image on the fly...
Is there an easy way to do this in mapbox without modifying the entire geoJSON to new coordinates?
Thanks!
transformTranslate from Turf.js can help you to translate GeoJSON features or geometries.
I sometimes had some problems when moving polygons across the globe with transformTranslate, so I wrote some function (repl.it) that behaves a bit differently.
Creating a map similar to the one found here:
https://www.plantmaps.com/interactive-california-2012-usda-plant-zone-hardiness-map.php
Have all the data needed.
Create polygons around each one without distance inbetween. No overlapping or similar.
Drawing it all by hand on geojson.io, seems impossible.
I want to create polygons around each [point] and make sure there is no distance between them.
What you're describing here is a tessellation. Depending on your data, you might opt for a regular tessellation (i.e. creating a grid of squares or hexagons, paying a modicum of attention to the units of your coordinate system) or the well-known-among-GIS-people Voronoi tessellation. Note that a Voronoi tessellation created over a regular grid of points will result in a regular grid of polygons.
There are plenty of tools for Voronoi tessellations. For javascript and GeoJSON, my tool of choice would be turf.js's voronoi module.
Here are some things to consider:
creating polygon from a point is simple enough. For example you use the point as the center of a regular polygon and devide 2PI by the number of sides and step through the points to create the polygon. But, what is the radius? That depends on the projection you are using. I happen to use OpenLayers and really like this map control. It's default projection it EPSG:3857. So, the coordinates are already in meters - so easy. But if your points are in long/lat then you have to do some math. it may be easier to transform to a different projection temporarily. An opensource library that is really nice for gis calculations if you need one is Turf.
You mentioned also about having non-overlapping polygons? Well, in this case you will have a lot of gaps if you use regular polygons. To have non-overlapping polygons with, as you put it no distance between them is an interesting constraint. Now you are dealing with different shaped polygons. And an algorithm for handling that is pretty intense. I know that MapInfo GIS has a feature for adjusting polygons to be non-overlapping. But, in a JavaScript environment with GeoJSON, you are probably talking about server side logic for this.
That map you are looking at looks like it is using Leaflet with svg overlays.
Using geojson.io page I want to draw some districts/countries.
I'm drawing each district separately as there is no multipolygons in Leaflet Draw. However when I'm drawing the borders even with maximum zoom - the borders will never be exactly the same. Coordinates will differ to some extend which is natural. Hence when I am downloading the data in topojson , the data are not valid to display meshes between different districts
How to achieve the goal to have the borders always with the same coordinates?
For example it could be achieved by having the markers visible during drawing and just picking up the one I'm interested in(on a same border) by mouse click - the same way the shape is finished.
I have downloaded the source code, read it (it is nice), searched through docs and thinking how to adjust it for my goal but I'm lost :/
Leaflet.Snap did the trick.
I was afraid that snapping will be not exact for the borders but it is :)
We're building an interactive visualization of various formats of geospatial data.
We've loaded GeoJSON of country borders onto our map, as well as linestring and point data - all works well and is spatially accurate.
How do we accurately overlay a georeferenced raster image on top of our vector basemap?
We've found and looked at these resources, but they're either not perfectly relevant or too complex to pick out specifically what we need:
http://bl.ocks.org/mbostock/5342063
Properly scale a vector to fit a raster layer
I am working on trying to create a basic, grid-based, but performant weather-arrow visualization system.
EDIT 2:
Up-to-date version here: ( Mapbox Tracker ) of the system using the workflow which is described below
Usage Instructions:
- Click on Wind icon (on the left)
- Wait for triangles to occupy screen
- Pan time-slider (at the bottom)
As you will observe (especially on larger resolutions or when panning time slider quickly) there is quite a performance hit when drawing the triangles.
I would greatly appreciate any advice on where to start with either using something in the current API which would help, or any ideas on how to tap into the current graphics pipeline with some type of custom buffer where I would only need to rotate, scale, change color of triangles already populated in screen space.
I feel as though my specific use-case would greatly benefit from something like this, I really just don't know how to approach it.
I have a naive implementation running using this workflow:
Create a geojson FeatureCollection source
Create a fill layer
Using Data Driven property: fill-color
Data function:
Get map bounds
Project sw & ne into screen points (map.project(LatLng))
Divide height and width into portions
Loop through width and height portions
Lookup data
Access data rotation property
Create vertices based on center point + size
Rotate vertices
Create Point objects for vertices
Unproject Point Object and wrap map.unproject(Point).wrap()
Create Feature Object, assign Data driven Color
Assign unprojected LatLng as Coordinates to Polygon geometry
Add to Feature Array for Collection
Call setData on layer
So while this works, I'm looking for advice for a more performance friendly approach.
What I'm thinking here is whether I can somehow create a custom layer, one where I only need to draw to screen co-ordinates to represent the data relative to its LatLng point. So that I can draw colored, scaled, rotated triangles in screen space, and then have them update to relevant data from the new relative LatLng position.
E.g. Update some type of Mesh on screen instead of having to: unproject, then update feature collection source using map.getSource('arrows').setData(d), requestAnimationFrame(function) etc.
I've done similar in three.js in other projects but I would much rather use something that is more mapbox native. Does this sound feasible? Am I going to see a decent performance boost if so?
I've not dealt with raw gl calls before etc so I might need a pointer or two in the right direction if its going to need to get as low level as that.
EDIT:
Previous Implementation using gmaps / three.js : volvooceanrace
(wait for button on left to go from grey to black) click on top button which shows a 'wind' label when hovered over, slide red time bar underneath to change data.
Added screenshot of current working implementation
Mapbox GL Arrows
Not sure what was available in 2016, but a reasonable approach these days might be to use symbol layers, and the icon-rotate data-driven property to rotate each icon based on the property of its data point.