Why does GeoJSON map looks stretched in Highmaps for WSG84? - javascript

I am trying to migrate a map (used Polymaps so far) to Highmaps. If I use the world map provided from the Highmaps collection (which is EPSG: 102014, unusual coordinates), everything looks fine. If I use a GeoJSON file that comes in the WSG84 (EPSG: 4326) format, then all the shapes look horizontally stretched.
The solution that I used for some maps was to simply grab a GeoJSON file in the format that Highmaps likes, but for this particular case it's not possible.
Expected result
What I actually get
What I tried so far is converting the original GeoJSON from EPSG 4326 to EPSG 102014, but it still looked bad. Is there any way I can make that original GeoJSON look good on Highmaps?

I had the same problem with the EPGS4326 (WGS84) so I reprojected my geojson to EPGS3857 (web mercator) and in highmaps looks right.
In their web they have an example that use the proj4js library to reproject on the fly, but I not been able to make it work to transform from 4326 to 3857, so I reproject the original geojson.
The transform is supposed to work including this on the geojson:
"hc-transform": {
"default": {
"crs": "Your map projection in proj4 string format, as supported by pro4js"
}
}

Related

features in GeoJson layer at a different angle as in Autocad

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.

Translate a geojson polygon to different coordinates

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.

Plot geometry of longitude and latitude coordinates using javascript

I have longitude and latitude coordinates which represent different types of geometry shapes (point, multi-point, polygon, multi-polygon and line string etc) that are stored in MongoDB. I'd like plot them (say each shape as a layer) using JavaScript. Map is not needed as a background although these coordinates represent building etc in the real world. I understand there are calculations as such are involved to convert coordinates to x and y on graph/canvas but not sure where to begin tbh. I'm very new to GIS and JavaScript so go easy on me please. I know this question sounds a bit vague but bottom line is I have coordinates that represent real world elements and want to plot them without a map background. I'd appreciate advises and suggestions. Many thanks.
The easiest way to do it is to use a Javascript mapping library such as OpenLayers or Leaflet. You could also do it with D3, although should you want to make your map more full-featured later, it will be much easier with a library that was designed for that type of thing.
If you are storing your data in Mongo as GeoJSON (GeoJSON website), you can add it to OpenLayers as a GeoJSON layer.
Disclaimer- My opinions might be slightly biased because I used to work for Boundless

how save leaflet draw 's data custom toGeoJSON?

leaflet use FeatureGroup() for edit. and I want to save data use toGeoJSON.but circle,marker... have point info only.
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[118.49561691284181,31.87595414652557]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[118.5268591952,31.848500597]}}]}
I need save more info.how?
Strictly speaking saving this kind of data "to GeoJSON" is not possible because simply GeoJSON does not support circles.
GeoJSON supports the following geometry types:
Point, LineString, Polygon, MultiPoint, MultiLineString,
MultiPolygon, and GeometryCollection.
The old 2008 GeoJSON spec says nothing about circles http://geojson.org/geojson-spec.html
and neither the new one (august 2016) https://www.rfc-editor.org/rfc/rfc7946
If you want to save a point and its radius to represent a circle you need to make a format of your own, but this of course will not work out-of-the-box with leaflet's geojson layergroup.
Edit: seems some people went down that road already so you may wanna check this out:
https://github.com/Leaflet/Leaflet.draw/issues/390
They saving the radius in the properties of GeoJSON and extended the GeoJSON layergroup to work with that. A bit hacky, geojson spec goes down the drain, but it seems to accomplish what you want.
Another possibility is to convert your circles to polygons with an acceptable amount of nodes, then saving that polygon in GeoJSON.

Import a point in geoJson format into mapbox map with different coordinate system

I'm using the mapbox.js API for building some kind of spatial-data-viewer.
In my (spatial) MySQL database, I have a table with 'geometry' elements in it (POINTS). These geometry elements are defined in the Lambert 72 coordinate system (EPSG:31370).
My (mapbox) map has the default wgs84 coordinate system.
I succeeded into importing my data from the db into a mapbox-geojson layer (using AJAX with JQuery) with this mysql-to-geojson php script based on geoPHP.
However, the elements still have the coordinates of the lambert72 system, so markers won't be positioned correctly. I know I could use a script to transform these coordinates, but isn't there a 'cleaner' way to get the correct geoJson data (in wgs84 system, instead of lambert72) into my map?
Thanks.
You can use proj4leaflet to reproject your lambert72 coordinates to WGS84.

Categories