NOTE: This feature has changed since 2015 and this blog post is out of date.
The Fulcrum platform is built on top of several excellent open source components, including Leaflet and Mapbox.js, and we support the open GeoJSON format as the de facto data standard for web mapping. Your Fulcrum data is always available in GeoJSON format as an export or via data shares, and the web map allows you to view GeoJSON files as additional map overlays.
Since switching our web mapping engine from pure Leaflet to Mapbox.js, we’ve been able to take advantage of the open source simplestyle specification for styling GeoJSON data. Any GeoJSON layer containing style properties, such as “marker-color”: “#7e7e7e”, will be styled correctly in Fulcrum. Additionally, we’ve added the basic “marker-color” style property to our GeoJSON exports and data shares, so that these features will maintain their color, as defined by the status field, when viewed on any Mapbox map.
Contributing Back to the Community
Mapbox’s geojson.io is one of the coolest web mapping tools available! Geojson.io is a simple web application for quickly creating, viewing, and sharing maps and geodata. Built on Mapbox.js, D3, and GitHub, it supports working with a variety of common geospatial data formats, which can be imported, edited, exported, or saved to a GitHub repo or simple Gist file.
While geojson.io has supported rendering GeoJSON files with simplestyle spec properties for a while, it was lacking an interface to help users build out these properties in an easy way. I decided to dig into the source code and see if I could contribute by adding some of this functionality via HTML5 input types.
Many of the newer HTML5 input types provide advanced functionality which is only supported by a subset of modern web browsers. Fortunately, on unsupported browsers, these inputs fall back to the standard text type, so they can still be used without breaking anything. The latest updates to geojson.io now utilize color, number, and datalist inputs for defining feature styles.
The color input, used for stroke, fill, and marker colors, launches the native color picker, allowing you to visually select values via the color wheel, sliders, color & image palettes.
The number input, used for width and opacity properties, defines min, max, and step attributes, providing the user with a spinbox for incrementally ticking through the number range.
The datalist tag, used for marker-size and marker-symbol, specifies a list of pre-defined options that can be associated with <input> elements. For marker-symbol, we are loading all 117 maki icons into a datalist, so the user sees a nice filtered drop-down list as they begin typing.
After becoming more familiar with the project and having my pull requests successfully merged, I was confident enough to propose a few additional enhancements, including a “Zoom to features” tool and user interface for adding custom map layers. One of the great joys of working on open source projects is the instant gratification that comes with being able to contribute something useful back to a project that you yourself find incredibly useful.
Beyond the Smoke & Mirrors of Traditional GIS
If you are looking for a simple tool to view GIS data or make an interactive map, head over to geojson.io and see just how far web mapping tools have progressed! You can learn more about the project from Tom MacWright on the Mapbox blog, or follow @geojsonio to keep up with the latest features.
I also highly recommend checking out this 2014 FOSS4G presentation from GitHub’s Ben Balter on the potential of GeoJSON, GitHub, and tools like geojson.io to enable more mappers: Open source, open standards and 50 lines of code: A look behind GitHub’s GeoJSON rendering and diffing.