GeoJSON to Tiff – Gis Data Conversion

GeoJSON is a Javascript Object Notation based GIS format. It is used for encoding a variety of geographic data structures. Tiff is raster type gis format. GeoJSON to Tiff – Gis Data Conversion is done by three steps in IGIS Map Tool.

Create your own GIS file Using IGIS Map 

Add or Load GeoJSON File – Point, Polyline map – Leaflet js

GeoJSON to Tiff – Gis Data Conversion

You can convert GeoJSON to Tiff with just one click. Login to IGIS Map Tool with registered email id and password. After login first step is to upload your gis file for conversion.

GeoJSON to Tiff - Gis Data Conversion

Second step is choose your output file format. You can check the type of input file with the extension. For tiff choose it from the drop down list. You can also change CRS – Coordinate Reference System . Now click on the Convert File button given in the end.

GeoJSON to Tiff - Gis Data Conversion

Step third is your converted file published on map you can check for any distortion. Download the tiff file from download icon in the Action column.

GeoJSON to Tiff - Gis Data Conversion

In the screen you see the Tiff file on map. If you any problem above steps then please contact on mail or comment below .

Adding Multiple Map Layers – Hide Show layer using Leaflet js

This article is about how you can make visible and invisible your layer with the help of checkbox on any base map. The base layer used here is OSM (Open street map), which is open source freely available map. With layers at the same time you can open up multiple data at once and make analysis in view by looking over the overlay layers. Here we will check in Adding Multiple Map Layers – Hide Show layer using leaflet js. You may look over Getting started with leaflet js if you are very new to Leaflet and mapping library.

Adding Multiple Map Layers – Hide Show layer using Leaflet js

Showing multiple layers and making it interactive with hide and show functionality we need checkbox. So, To show two checkboxes on any HTML page the following lines are given. Here checkboxes are taken inside a division, which is denoted by tag <div> and checkboxes take input from user so they define in tag <input>. Every element of HTML can have an id, here we assign for div it is division and for checkboxes it is subunits and places. Outside the tag of checkbox we write name of the checkbox here subunits and places have used.

Some styling is required when it comes to visualisation. In this article the division containing check boxes is shown in the topmost right location. For styling the html element we need to use CSS (cascade sheet style). Using CSS we can define position, background colour font size etc. The z-index property specifies the stack order of an element as two divisions are being used in this article. An element with greater stack order is always in front of an element with a lower stack order. The division of map has lower z index then division of checkboxes.

<body>
<div id=”division” style=”position: absolute; background-color: white; width: 10%; height:10%; float: right; margin: 0.5cm 0cm 0cm 36cm; z-index:999;”>
<input type=”checkbox” id=”subunits” style=”font-size: larger”>Subunits<br>
<input type=”checkbox” id=”places” style=”font-size: larger” > Places
</div>
</body>

Using HTML and CSS we only define how the elements are going to look on the browser. How they will work it is define by the JavaScript or jQuery. Here JQuery has used for checkboxes to work.

Basic syntax is: $(selector).action()

  • A $ sign to define/access jQuery
  • A (selector) to query HTML elements
  • A jQuery action() to be performed on the element.

Here how the code looks like for Adding Multiple Map Layers – Hide Show layer using leaflet js

Before going through code in adding and hide – show multiple layer using leaflet, you should be having a good knowledge of adding point, line and polygon layer using leaflet js along with parsing geojson or topojson layer using leaflet js if you want to add topojson data layers.

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. Here user needs to click on the checkbox to add and hide the layer from OSM. So selector is id of checkbox and action is click() method. In the method we define the function to add or hide the layer. 

$(“#subunits”).click(function() {
if (this.checked) {
console.log(“checked!”);
geo.addTo(newMap);
} else {
console.log(“unchecked!”);
newMap.removeLayer(geo); }; });
In similar way places are added on the map with following lines of code.
$(“#places”).click(function() {
if (this.checked) {
console.log(“checked!”);
var places = topojson.feature(uk,uk.objects.places);
geoP=L.geoJSON(places).addTo(newMap);
} else {
console.log(“unchecked!”);
newMap.removeLayer(geoP);
};
});

Here is how the output will look like for Adding Multiple Map Layers – Hide Show layer using Leaflet js:

Adding Multiple Map Layers - Hide Show layer using Leaflet js
Adding Multiple Map Layers – Hide Show layer using Leaflet js

If else statement shows that if checkbox is clicked and returns checked status then layer is added to map and checked can be seen on console. Else checkbox will return unchecked status then unchecked will be written on console and added layer will be removed from map.

Here addTo() and removeLayer() methods are from leaflet javascript library, which adds and removes layer from map. To see the console on browser right click on browser and click to inspect option.

Hope this article might help you in Adding Multiple Map Layer using Leaflet js library. If you are facing any problem in implementing, then do comment below with the problem text you are facing. So that we can discuss over it.

Convert GeoJSON to TopoJSON – GIS

Convert GeoJSON to TopoJSON. GeoJSON is an open standard format designed for representing simple geographical features, along with their non-spatial attributes, based on JavaScript Object Notation. The need of conversion is to reduce the size of data, so that rendering of data on browser can be made faster. TopoJSON (topological geospatial data) is an extension of GeoJSON that encodes topology. Here we have explored two methods for conversion of GeoJSON to TopoJSON (i.e. online and offline).

Offline Method to Convert GeoJSON to TopoJSON:

You can directly convert GeoJSON to TopoJSON with the help of topojoson-server node package manager. For using this package you need to first install node js in your system (can be installed in windows, linux based operating system or Mac).

If you have Shapefile or KML file, then you can refere this articles i.e convert kml to shapefile, convert shapefile to GeoJSON and converting shapefile to kml, so that you can generate new GeoJSON file out of other GIS format files.

Convert GeoJSON to TopoJSON – NPM method

NPM (Node Package Manager) is a command-line utility that aids in package installation, version management, and dependency management or can be considered npm as a tool that helps to install another tools like topojson-server.

For this method you need to download node.js which is available https://nodejs.org/en/ here. After successful installation you need to check npm availability using command

  • npm –check.

If not available use

  • npm install -g npm-check
convert geojson to topojson
convert geojson to topojson

After this you need to install topojson-server for conversion of data that can be done by using

  • npm install -g topojson-server

Now all setup is ready

Use geo2topo command to convert geojson data to topojson data

  • geo2topo –o geo.json topo.json

Where geo.json is the geojson file i.e input file and topo.json is the file we are creating with the name topo as topo.json file i.e output file.

Here –o is output. If command doesn’t run and gives error as no such file or directory. Then specify full path for file for both input and output. It is recommended that you run this command from the same directory where geo.json file is stored.

If you don’t have any input files ready or any geojson or shapefile then you can download free GIS data fromat for testing this article.

Online method: Convert GeoJson to TopoJson

This is the simple and fast method. For the conversion you just need to drag the geojson file in http://mapshaper.org/ site. Then use export option to convert this data into topojson format. Map shaper website render and convert the file in the browser itself, but it you might face problem while converting a big geojson file. 

I hope that this methods listed above to convert geojson to topojson would have helped you in achieving result. If you find any problem or know any other method to perform this operation and want to share with us, then do let us know by commenting below, in the box provided.

Add or Load GeoJSON file – Point, Polyline or Polygon map – Leaflet js

Are you looking to create a map interactive application to locate markers with points, or to highlight an area by polygon or to draw or show a river or roads line with polyline? With Leafletjs library and GeoJSON as GIS data, we can easily create a map which we are looking for and render the output in browser. Leaflet js is an opensource small library to create interactive map. GeoJSON is one of the GIS data structure which stores geographic data in JSON format. GeoJSON supports point, line, polygon, multipolyline, multipolygon and Geometry collection which can represent a geometry, feature or a collection of features. A detailed structure of GeoJSON would be written in separate article.

Add or Load GeoJSON file

This Article would let you know how to render and load geoJSON file with the help of leaflet js library. Also you would also get an idea by this article to implement a click event over a GeoJSON file and fetch information associated with the feature of GeoJOSN data loaded as map.

If you are not familiar with Leaflet, I would recommend you to read first the Getting Started tutorial with Leaflet js Library to create map application.

Lets setup a Base Map First i.e loading openstreetmap or osm in leaflet, in a html file:


<!DOCTYPE html>
<html>
<head>
<title>Getting Started - Leaflet js Map interactive library</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 1000px; height: 600px;"></div>
<script>
var newMap = L.map('map').setView([38.9188702,-77.0708398], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href=”http://osm.org/copyright”>OpenStreetMap</a> contributors'
}).addTo(newMap);
</script>
</body>
</html>

Above script would output and render an osm base map. Now lets start adding different features on map one by one with GeoJSON file.

Add or Load GeoJSON file – Load Polygon with leaflet on Map:

Add following script, and replace the ‘usa_adm.geojson’ to the file you are want to render.


// loading GeoJSON file - Here my html and usa_adm.geojson file resides in same folder
$.getJSON("usa_adm.geojson",function(data){
// L.geoJson function is used to parse geojson file and load on to map
L.geoJson(data).addTo(newMap);
});

After adding the polygon layer you may want to view or load the map area covered or extended by the polygon GeoJSON file. i.e On Map load you want to zoom and pan according to the extent or to fit layer bounds. For this, Leafletjs provided a function to calculate the bounding box of the geojson file or layer i.e layer.getBounds(). And also with leaflet map fitBounds function i.e map.fitBounds(“bounding coordinates”). Here is the line which you needs to add to script:


newMap.fitBounds(datalayer.getBounds());

Finally, we are left only adding a click event to get the features data. With the help of Leaflet L.geoJson optional object parameter with key “onEachFeature“, we can add and define click event on every feature of the layer.

Here we would be fetching the attribute data of the feature clicked on Polygon GeoJOSN file. So before writing any script, we need to list out the feature properties list. You can get those properties key name easily if you are familiar with JSON files and structure.

So lets define a function named as onEachFeature and replace the ‘key’ keyword with your actual feature properties key of GeoJSON file:


onEachFeature: function(feature, featureLayer) {
featureLayer.bindPopup(feature.properties.key);
}

So your final leaflet geojson code combines as i.e For adding polygon GeoJSON file on map, with click event and fit to extent functionality.


$.getJSON("usa_adm.geojson",function(data){
// add GeoJSON layer to the map once the file is loaded
var datalayer = L.geoJson(data ,{
onEachFeature: function(feature, featureLayer) {
featureLayer.bindPopup(feature.properties.NAME_1);
}
}).addTo(newMap);
newMap.fitBounds(datalayer.getBounds());
});

As I have loaded a US administrative polygon GeoJSON here, we can see following output as :

Add or Load GeoJSON file - polygon
Add or Load GeoJSON file – polygon

Add or Load GeoJSON file – polyline on Leaflet Map:

Adding polyline Geojson with leaflet library is same as adding polygon file. So the above code would work for loading polyline GeoJSON file. Just you need to replace the file name with your polyline GeoJSON file and features properties key have to replaced by the actual key name, of which you want to retrive information.

Add or Load GeoJSON file - polyline
Add or Load GeoJSON file – polyline

Add or Load GeoJSON file – point with Leaflet js on Map:

Adding Point GeoJSON file is same as loading Polygon GeoJSON file. Here is the output you can see for the famous world Cities.

Add or Load GeoJSON file - point
Add or Load GeoJSON file – point

If you find any difficulty in adding or loading GeoJSON file on map with leaflet library, do comment below with your queries.

Different ways to convert Shapefile to GeoJSON – Online or Offline or API

Convert Shapefile to GeoJSON. Shapefile, ESRI made a standard vector file format which is largely adopted in the field of GIS by programmers and geographers . While GeoJSON is also an open standard format designed for Web which largely supported with GIS JavaScript API, other programming API and with GIS (Geographic Information System) software tools too, for easily rendering. GeoJSON is based on JavaScript Object Notation. Here we will explore different methods to convert the files online, or offline or with the help of API which programmers can make use of.

Convert shapefile to geojson

You may be interested to refer following articles:

Different ways to convert Shapefile to GeoJSON

I.) Online Method : Convert Shapefile to GeoJSON:

The simplest and fast way to access the internet is through the online method, as you don’t need to install and configure any tool on your PC. Just drag the Shapefile files, one click on button and convert to GeoJSON. There are many website which provides the tool to convert the files by browsing them to server side and convert and also some client side conversion too. Lets explore the list, which is only client side as client side conversion will secure your file and doesn’t take your data pack for uploading the file:

A.) IGIS Map Tool :

IGIS Map tool is one stop solution for all GIS data analysis and conversion.

 Shapefile to Geojson Conversion

  •  Go to the tool IGIS Map Tool.
  •  If you are already registered then login otherwise sign up.
  • Once get register tap on Converter Button Shown in figure.

Convert shapefile to geojson

  • Upload the Shapefile from data set or Google Drive or Drop Box or already added in drive then choose the file. Lets we want to convert already uploaded file from My Drive then select the file.

Convert shapefile to geojson

  • Tap the file and new window will appear shown below.

Convert shapefile to geojson

  • Select the desired Output in our case choose Geojson. You can also change CRS. Now tap on Convert file button.

Convert shapefile to geojson

  • It will so the table in the next step. You can directly download the converted file or you can check it through clicking on publish button.

Convert shapefile to geojson

  • Below is the screen of published Geojson file.

Convert shapefile to geojson

Whole process is same from new uploaded file from data set or from google drive or from drop box. If you face any problem ping us at website.

You might be interested in Query on Geojson data file then try our tool IGIS Map tool.

This is presented by Engineer Philosophy pvt. ltd, working in GIS Sector an IT company. What you need to do is to just Register, login and upload only .shp and .dbf file and then export the uploaded layer to GeoJSON file by just selecting the option which appear at upper right corner in Navigation bar. You can also explore the attribute table from the website directly and filter the same which no other online tool provides.

different ways to convert Shapefile to Geojson - Online or Offline or API
different ways to convert Shapefile to Geojson – Online or Offline or API

Not only this, but you can classify the Map according to the shapefile dbf attributes and automatically classify and color it. The classified map can be exported as Scalable Vector Graphics i.e svg file.

Disclaimer: The above project is handled by me and my team and the project is in beta phase while you can definetly convert the shapefile to GeoJSON at client side securing your shapefile data. I would welcome your suggestion to improve the tool by commenting below or contacting me.

B.) Map Shapper : 

Map Shapper is the best tool which we should refer first. It is the best online tool which also handles large shapefiles and renders it quickly. Its an open source project and is licensed under MPL 2.0. Just drag the shapefile or zipped shapefile which will render the shapefile on map and can be further exported as geojson file with the option provided in tool itself.

different ways to convert Shapefile to Geojson - Online or Offline or API

With No doubt Map Shaper is much more better than any other tool for now, while the only reason why I placed this tool in second place just because the first tool was my own tool which provides more option for classifying the map, see all attributes in the data table and also exported as svg file.

2.) Offline Method – Convert Shapefile to GeoJSON in QGIS:

You must have installed QGIS  (Quantum GIS) before performing the provided steps. You may also look over other tutorial in QGIS.

1.) Open QGIS Desktop and Select Layer -> Add Layer -> Add Vector Layer or click on Add Vector layer icon appears at the upper left in the application.

different ways to convert Shapefile to Geojson - Online or Offline or API
different ways to convert Shapefile to Geojson – Online or Offline or API

2.) Select the zipped shapefile or any of file i.e .shp or .dbf or .shx by browing the folder. Note, that all the three files i.e .shp, .dbf and .shx file should be present in the same foder with same name.

3.) Once uploaded, the map will be rendered and showed in QGIS application. Now navigate to Layer menu and select Save As option or just from the layers panel select the layer and right click from it to select Save As option.

4.) A window pop up will opne up. From the window just select the GeoJSON format and provide the name of the file in the input box as shown in the image provided below. Save the file. It will export the file in GeoJSON format.

different ways to convert Shapefile to Geojson - Online or Offline or API

3.) Offline Method – Convert Shapefile to GeoJSON with command line ogr2ogr tool:

Firstly you need to install an ogr2ogr tool of GDAL which is a GIS utlitly command line tool so as to convert one file to another. Now if the ogr2ogr is installed globally check by simple tying the ogr2ogr in command line if it is working or not. Or if it residing in some file system you need to navigate to ogr2ogr file and type in the same in command line. Now Just type in the following:

  • “ogr2ogr -f GeoJSON -t_srs crs:84 [name].geojson [name].shp”

To get more option list and format you may see this gdal org link.

This tool will be helpful if you want to convert bulk files from shapefile to geojson. You can refer the .sh script found at github.

4.) Convert Shapefile to GeoJSON -API or library:

Shapefile is a binary file and cannot be viewed directly in notepad or textpad as like with GeoJSON file. So if you want to create your own API, to convert Shapefile to GeoJSON you should first have a knowledge of how to read the binary shapefile. You may refer to some of the articles which I have written some post which would help you to get the basic knowledge to know the format of files and read.

You may further refer to some of the best Shapefile to GeoJSON converter API which is open source project:

https://github.com/wavded/js-shapefile-to-geojson :  This is dedicated library to convert to GeoJSON, created by Marc Harter and Licensed with MIT.

https://github.com/gipong/shp2geojson.js : This library is also MIT Licensed and is inspired by the above wavded library which uploads zipped file of shapefile. The library provided an example to use with leaflet js.

https://github.com/mbloch/mapshaper : Map Shaper as desricbed above is licensed under MPL 2.0 and can be very useful if you want to convert to GeoJSON as well as TopoJSON.

Hope this article helped you. If are facing some problem in converting the shapefile to geojson do comment below with the problem statement. We will definitely look over that. Also you can provide your valuable comment below if you are using any other library or tool to cover the same.