Skip to content

Instantly share code, notes, and snippets.

@hhkaos
Last active November 5, 2019 05:39
Show Gist options
  • Save hhkaos/8e9aa354b4b6ba9ede5f3f41d7c3281b to your computer and use it in GitHub Desktop.
Save hhkaos/8e9aa354b4b6ba9ede5f3f41d7c3281b to your computer and use it in GitHub Desktop.
Esri DevSummit Berlin 2019 - https://bit.ly/DevSummitEU19

koop-provider-remote-geojson

This project can be used to transform GeoJSON files into ArcGIS Feature Services on the fly.

Live demo with a dataset of City Shops from opendata.villanuevadelaserena.es.

Note in case it doesn't work try with this local copy: live demo using a copy of the dataset

How does it works?

  1. You need a geojson dataset accesible though a public URL, for example: the City Shops

  2. Then, you need to do a Base64 encode of the URL and replace any remaining character '/' for '_'. With JavaScript it can be done using the btoa function (check this JS snippet).

  3. Then you just need to replace the result of the encoding here: https://esri-es-etl-crgjcqnzug.now.sh/koop-provider-geojson/<ENCODED_URL>/FeatureServer/0

  4. Now you are ready to load it using the ArcGIS Web Map Viewer it allows you to "Add Layer from Web"

Why did we did this?

"Add Layer from Web" allow you to reference and load layers of types: WMS, WMTS, WFS, Tile layers, KML files, GeoRSS files, CSV and Bing Maps, but it still doesn't support to load GeoJSON directly inside a Web Map without hosting and transforming it on ArcGIS. So this way you can do it.

Note: we are aware that the JavaScript 4.x already support GeoJSON layers, but this is not the same use case because we are trying to load the data on a Web Map.

Snippet JS to encode the URL

You can run this within the JS console to

// Change set a value for `targetUrl` or leave it blank to use location.href
let targetUrl = '';

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

(function(targetUrl){
    url = targetUrl? targetUrl: location.href;
    url = btoa(url)
    path = `${url.replaceAll('/','_')}/FeatureServer/0`

    console.log(`https://esri-es-etl-crgjcqnzug.now.sh/koop-provider-geojson/${path}`)
    console.log(`http://localhost:8080/koop-provider-geojson/${path}`)
})(targetUrl)

Contributions

This is only a sketch of how to solve this issue, we would love to improve this project adding support to other formats like Shapefiles, so any issues and pull requests are more than welcome.

Credits

Original code base on the koop-provider-sample

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment