Quantcast
Channel: maps for developers - Medium
Viewing all articles
Browse latest Browse all 2230

Mapping the open web using GeoJSON

$
0
0

GeoJSON is an open format for encoding information about geographic features using JSON. It has much in common with older GIS formats, but also a few new twists: GeoJSON is a text format, has a flexible schema, and is specified in a single HTML page. The specification is informed by standards such as OGC Simple Features and Web Feature Service and streamlines them to suit the way web developers actually build software today.

Promoted by GitHub and used in the Twitter API, GeoJSON has become a big deal in the open web. We are huge fans of the little format that could. GeoJSON suits the web and suits us very well; it plays a major part in our libraries, services, and products.

Mapbox.com

Download of your MapBox project markers as GeoJSON is just a single click from the details tab of any project.

MapBox API

You can get the same marker GeoJSON from the MapBox API. The map resources section of the Core API documentation shows the URL template to follow.

URL Description
/:map/markers.geojson api.tiles.mapbox.com/v3/examples.map-zr0njcqy/markers.geojson Markers GeoJSON for :map

Geojson.io

As you might expect from its name, geojson.io reads and writes GeoJSON data. You can load GeoJSON through the UI as shown below,

or pipe it in via data URIs like geojson.io/#data=data:text/x-url,http://api.tiles.mapbox.com/v3/examples.map-zr0njcqy/markers.geojson.

Leaflet and MapBox.js

Leaflet is a JavaScript library for mobile-friendly maps and MapBox.js is a Leaflet plugin. The pair firmly embrace GeoJSON; it is the only data format included in the core of Leaflet. Both of these libraries include excellent GeoJSON examples: Using GeoJSON with Leaflet, GeoJSON Marker from URL (mapbox.js).

GeoJSON support arrived in Leaflet after the the library had settled on latitude, longitude order for coordinates returned from functions like Map.getCenter(). There's a coordinate order partition in Leaflet and MapBox.js: [lng, lat] within L.geoJson() and [lat, lng] outside; respect this partition and you'll have no trouble. If you maintain your GeoJSON data in text, all [lng, lat] ordered coordinates will be isolated there. You can then develop your mapping JavaScript thinking only in terms of [lat, lng].

The functions L.geoJson() and L.mapbox.markerLayer() accept objects that may be serialized to valid GeoJSON Geometry, Feature, or FeatureCollection text. To get GeoJSON text into your map, use markerLayer.loadURL().

MapBox iOS SDK

One of the best parts about using simple, open formats like GeoJSON is that we're not even limited to the open web. For as long as we've had markers available as GeoJSON from our API, we've also supported bringing those markers into native iOS apps. Apple's Cocoa frameworks have supported native JSON parsing with NSJSONSerialization for several years now, and our open source iOS SDK builds atop this in RMMapBoxSource for bringing your MapBox maps and their markers into native apps. We have an example app, Weekend Picks for iOS, that shows this in action, with markers designed in our web editor being automatically turned into first class native objects in iOS code. This could allow simple editing of a web map to translate into updates to a real, native iOS app in the field.

What's more, you can use straight GeoJSON as well, including lines and polygons, as in this example from our code library. Here we iterate the features array directly, parsing out geometry objects and their coordinates. Take note that Apple's convention when building CLLocationCoordinate2D structures, as in Leaflet, is latitude, then longitude.

TileMill

TileMill has long supported GeoJSON as an input format. Add a File type layer and specify a local filesystem path or HTTP URL of a GeoJSON document – such as a raw URLs from a GeoJSON file on GitHub or a MapBox API GeoJSON URL (as mentioned above) – and you have a data source that can be stylishly rendered.

Open formats are healthier formats

In a marketplace crowded with geospatial data formats, GeoJSON has the distinction of being the only one designed with the open web in mind. It's also shown itself to be useful on native device platforms. We are committed to giving you tools to map and share GeoJSON and to helping ensure that the format continues to flourish.


Viewing all articles
Browse latest Browse all 2230

Trending Articles