3 easy steps to publish raster data to the web
This tutorial shows you how you can create a web map of your own raster files. This tutorial will for simplicity focus on raster data, but a similar approach is possible for vector data as well.
Creating a web map has become rather easy. For example with leaflet and Flask you can create an online map in just a few lines of code. As this medium article explains. With other tools like map box or react-leaflet it is not much more difficult.
So creating web maps has been become easier than ever before. However where things usually get a lot trickier is when you want to create your own custom layers within your map. That is to say aside from open street map you want to display some raster or vector data of your own that you have stored in some file somewhere. I used to spent days, sometimes even weeks to display data in an app that I had received form a colleague or client as a file.
In tutorial I’m using Ellipsis Drive to get data from a file (of any format) into an app in just 3 simple steps, each taking about 2 minutes to complete.
The first step is to simply register an account at Ellipsis Drive. As long as your file is under 5Gb you can host your file here for free. Go to https://app.ellipsis-drive.com/register and validate your account via your email. Once this is done you are ready for step 2.
The second step is to place your file into your Drive. Go to https://app.ellipsis-drive.com/drive/me and click new layer, choose for type vector and give the layer some name.
Once the layer is created you upload your raster file to this layer.
When the upload is completed you are ready for the last step!
Ellipsis Drive will create a web map from your uploaded file. The last step is now to point to this web map from our application. To this end we get the url of our layer from the Ellipsis Drive app. We can find this url by clicking the context menu and choosing ‘integrate’
From the dialog we choose the XYZ protocol
Now use this url where you previously used the open street map url.
https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
(Just ctrl-f in a web map building tutorial and you are likely to find this link somewhere).
And voila you have have a web map of your very own raster file.
If you wish to create many of these web maps it might be worth to automate the second step above. This is actually pretty easy to do. The first thing you should do is installing the ‘ellipsis’ package using the following command:
pip3 install ellipsisOnce you installed the ‘ellipsis’ package you can run the following script which will automate the uploading of your raster files:
import ellipsis as el
#login
#token = el.account.logIn('your username', 'your password')file = 'path to your file'#create the layer
pathId = el.path.add(name = 'test layer', pathType = 'raster', token=token )['id']#create the timestamp
timestampId = el.path.raster.timestamp.add(pathId = pathId, token = token)['id']#upload the file
el.path.raster.timestamp.upload.add(pathId = pathId, timestampId = timestampId, filePath= file, fileType = 'tif', token=token)#activate the layer
el.path.raster.timestamp.activate(pathId = pathId, timestampid = timestampId, token = token)
Easy to use packages to create web maps are many, think of R shiny with leaflet, or Python Flask with leaflet, or Mapbox GL and many others. However publishing your own data in these tools has long been an enormous hassle. This however does not need to be, using the steps above I myself spent less then 2 minutes in getting my raster files into a web app, without adding any technical depth.
