ruipinge/geofiddle

Geometric conversions between different formats and projections

GeoFiddle

Plot, share, and convert geometries using different formats and projections. Try it at geofiddle.com.

Some of the most notable features:

• Format and Projection auto-detection
• Direct links for easy sharing of geometries and conversions
• Area and distance measurements (under development!)
• Command line utility (node.js) for scripting and batch processing (under development!)

Supported formats:

• GeoJSON
• Well-Known text (WKT)
• Extended Well-Known text (EWKT)
• Polyline
• Delimiter-separated values (DSV)

Supported projections:

• World Geodetic System 1984 (WGS84)
  • Unit: degree
  • Axes: latitude, longitude
  • EPSG:4326
• British National Grid (BNG) aka Ordnance Survey National Grid
  • Unit: metre
  • Axes: easting, northing
  • EPSG:27700

Demo and Examples

Try writing some of the following geometries here:

{
    "coordinates": [
        531473,
        181763
    ],
    "type": "Point"
}

POINT(-9.129814 38.736847)

-0.1068354 51.5114059

200300 200200 200300 200300 200400 200300 200300 200200

Dependencies and Inspiration

• Wicket for WKT and GeoJSON parsing and formatting
• Mapbox Polyline for Polyline encoding and decoding
• Geodesy for projection conversions
• Webpack, Backbone, jQuery, Lodash, Jest
• HTML5 Boilerplate, Material Components
• Google Maps Platform
• GitHub Pages

Development Environment

Dev Server

Using nvmw, a simple nvm wrapper, GeoFiddle can be served locally by running:

geofiddle > ./nvmw npm install
geofiddle > ./nvmw npm test
geofiddle > ./nvmw npm start

Unit Tests

Code can be tested by running:

geofiddle > ./nvmw npm install
geofiddle > ./nvmw npm test

Clean

Downloaded, generated and/or temporary files including node.js modules, nvm node.js versions, coverage reports, etc. can be removed by running:

geofiddle > ./nvmw npm run clean

Google Maps JavaScript API

So that the Google Map can be loaded without warnings and full featured, there's the need to create a file named PRIVATE.json with your Google Maps JavaScript API key and any existing Map ID for custom map styling. Without any costs (but requiring a credit card), an API key can be created here.

The file contents should look like this (although both values are dummy and will not work):

{
  "apiKey": "AIzaSyDg0pS7JeL2uo6IrPQ5FNV--GIrFp1M8CQ",
  "mapId": "aba6eaf2002b017f"
}

geofiddle's Issues

Add Dependabot badge to README.md

Enable parsing of the "properties" field in a GeoJSON feature

Currently does not cope well with the "properties" field of a GeoJSON feature:

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [
      -2.7060302,
      53.7777572
    ]
  },
  "properties": {
    <...props>
  }
}

Migrate textarea input to code editor lib

• https://ace.c9.io/
• https://codemirror.net/
• https://prismjs.com/ (code highlighting)

Show geometry envelope

Preferably as a polygon and as (South-West, North-East) pair of points.

Points from multiple WKT geometries incorrectly being linked

Example:

LINESTRING (270552 45740, 270549.52 45740.45, 270547 45740, 270544 45738, 270542 45735, 270542 45733)
LINESTRING (270563.17 45729.01, 270567.7 45732.27, 270572.73 45736.14, 270579.08 45741.07, 270582 45744)
LINESTRING (270542 45733, 270541 45732, 270541 45731)
LINESTRING (270563.17 45729.01, 270561.96 45727.26, 270560.02 45725.73)

But working with a newline in between each other:

LINESTRING (270552 45740, 270549.52 45740.45, 270547 45740, 270544 45738, 270542 45735, 270542 45733)

LINESTRING (270563.17 45729.01, 270567.7 45732.27, 270572.73 45736.14, 270579.08 45741.07, 270582 45744)

LINESTRING (270542 45733, 270541 45732, 270541 45731)

LINESTRING (270563.17 45729.01, 270561.96 45727.26, 270560.02 45725.73)

Add support for more map providers

• Mapbox
• TomTom
• Apple Maps: https://developer.apple.com/maps/web/