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"
}