alaframboise-esristaff

New GeoJSON Capabilities for Developers

Blog Post created by alaframboise-esristaff Employee on Dec 10, 2014

There’s a lot of cool things available with the December release of ArcGIS Online, but if you are a dev, here’s something you are not going to want to miss: The enhanced interop (data) support for GeoJSON!  At this release, you can now import, export and access data from ArcGIS Online hosted feature services via GeoJSON.

 

Here’s what you can do:

 

  1. Import GeoJSON: Using the Add Item button you can simply import GeoJSON to create a new ArcGIS Online hosted feature service.



  1. Export GeoJSON: For all feature services, you can also export features out as GeoJSON.
  2. Access Directly:  And lastly, you can access all hosted feature services as GeoJSON simply by adding the f=geojson query parameter.  You can even change the outSR if you happen to need the GeoJSON in a different spatial reference.

 

 

Accessing GeoJSON from other Applications

 

View it live

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=1024, user-scalable=no">
    <style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0;}
      #map{ height: 100% }
    </style>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->

  <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
  <script type="text/javascript" src="https://rawgit.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.js"></script>
    <title>Leaflet AJAX</title>
    </head>
    <body>
    <div id="map"></div>

    <script type="text/javascript">
      var m = L.map('map').setView([45.52, -122.6819], 13);
      var osmDataAttr = 'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
      var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:osmDataAttr});
      osm.addTo(m);

      var geojson = new L.GeoJSON.AJAX("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/Portland_Coffee_Shops/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=geojson", {});

      geojson.addTo(m);
    </script>
       
    </body>
</html>

 

NOTE:  Special thanks to Calvin Metcalf's L.GeoJSON.AJAX plug-in that gives you direct access GeoJSON resources.

 

So there you have it.  But what about ArcGIS Server?  Well, the team says it’s coming soon, so keep your eyes peeled!

 

Happy interoping!

Outcomes