Tag: library

Convert Shapefile to TopoJSON

ESRI shapefile are the binary vector data storage format for storing the location, shape, and attributes of geographic features. It is stored as a set of related files and contains one feature class. Whereas TopoJSON (topological geospatial data) is an extension of GeoJSON that encodes topology. The necessity of conversion is to reduce the size of data. While using Shapefile, you have to take care of all its mandatory files such as .shp, .shx, .dbf, .prj etc. Whereas GeoJSON and TopoJSON formats are single file formats.

There are many online and desktop application based solutions to do this conversion. But the method everyone looking forward is an easy way to convert a file to a preferred format. In this article we will see how easy is IGISMAP for the conversion process. Following are the methods to convert Shapefile to TopoJSON using IGISMAP Converter tool.

Use Online Converter Tool – Shapefile to TopoJSON MapOG

IGISMAP (Now MAPOG) to Convert Shapefile to TopoJSON

Go to MAPOG Converter Tool, after logging in with your registered email and password. If you are a new user, click the Sign Up button in the Login popup and register to IGISMAP by filling the details.

There are three main steps for using GIS Converter:

  • Upload the data
  • Choose the format to which it should be converted
  • Download the converted file.

Step one is to upload your Shapefile which you want to convert. You can upload the file from your system or select from the Recent Files.

Converter Tool - Upload Shapefile
Upload Shapefile

Here we using the Shapefile of India state level boundaries with demographic information. You can find this data in IGISMAP GIS Data Collection –

Step two is to select choose the output format of the converted file, in this case its TopoJSON. You can also set the Coordinate Reference System of your preference. As a default CRS will set to WGS 84 (World) [EPSG:4326]. Click on the Convert File button.

Converter Tool - TopoJSON as Output Format
Select TopoJSON as Output Format

Your Shapefile will then get converted to TopoJSON file after a few seconds and will be published in the map canvas. You can download the TopoJSON file of New York state boundary by clicking the Download Converted File button.

Download and Publish TopoJSON File
Download and Publish TopoJSON File

You can also choose to style the layer or continue with further conversion process by clicking the Convert Another File button.

Converted Files section from the dashboard contains the list of the details of all the conversion done in your account, providing both input and output data available for download their corresponding formats.

IGIS Map Converter Tool provides many benefits other then just conversion of data. This tool provides us to generate this published map in PDF or as image format.

Info GIS Map supports most of the commonly used GIS or AutoCAD files like Shapefile SHP, KML, KMZ, CSV, TopoJSON, GeoJSON, GML, DXF, GeoTIFF, NetCDF, GRIB, HDF5, OSM, PBF, and many more raster and vector files, along with that it support more than 4000 Coordinate Reference System.

Here are other two ways to convert shapefile to topojson

Use Online Converter Tool – Shapefile to TopoJSON MapOG

Offline Method : Convert Shapefile to topojson through GDAL and then through geo2topo tool npm:

To convert shape file to topojson format offline you need to download GDAL and Node.js.  First step is to convert shapefile to geojson data format, which is done by using ogr2ogr command available in GDAL package. After successful installation check ogr2ogr availability by typing ogr2ogr in command prompt or by typing dir that will show all available directories.

convert shapefile to topojson

Now you can convert shapefile to geojson data format by using given command

  • Ogr2ogr –f Geojson file_name.json input.shp

Here –f option is used to shows the file format, which shows output file format is geojson. GDAL takes name of output file prior to input file.

Convert geojson to topojson:

Now to convert geojson data to topojson data format you have 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.
convert shapefile to topojson

If not available use

  • npm install -g npm-check

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

  • npm install topojson-server command

Now all setup is ready

Use geo2topo command to convert geojson data to topojson data

  • geo2topo –o geo.json topo.json

Here –o option is used to give the 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. The older versions were having topojson as a command to convert geojson data format to topojson data format. Topojson is named as geo2topo command in new version.

Convert Shapefile to TopoJSON – Online Method

Mapshaper is an online tool that converts shape file to topojson data format directly. You only need to drag the shape file to http://mapshaper.org/ site. Then use export option to convert this data into topojson format. In Mapshaper there are many option are available to simplify the geometry, which you can explore.

convert shapefile to topojson
convert shapefile to topojson

You may also look over converting kml to shapefile and shapefile to kml conversion.

I hope this article helped you in converting the file from Shapefile to TopoJSON. If you find any problem in performing operation do let me know by commenting below.

Leaflet js – Getting Started – create Map Application

Leaflet is small Javascript BSD Open Source license Map library, which helps in creating interactive map applications. Leaflet js Javascript library provides pre defined functions and variables which can be reused to add map layer, base map, points, line and polygon, where you can easily zoom in and zoom out. Also with the help of library you will be able to catch the events and define a function on it, for example, You can fetch all attributes or detailed information on a click over a polygon features which will be displayed in a popup.

Leaflet js – Getting started Create Map application

With leaflet you can compute the features bounding box, create a layer group, remove or add as many marker or different layer as you want on a map. Adding vector layers, raster layers, adding wms or wfs layer (can be used to serve and render geoserver or map server layers), selecting and hovering over lat-long are some of the functionality which can be easily grabbed by leaflet js map library.

Leaflet map library can be used in different platform like web app, mobile app or can be used in creating desktop application.

CREATE INTERACTIVE MAP WITH LEAFLET JS

Also this small Map library so called as leafletjs is one of the easy to use and well documented library which is widely used by many GIS developers all over the world. Upon leaflet many developers have created different plugins which adds on the functionality to create an interactive map. Most of the plugins are available for free and can be used or recoded and integrated in your application. I found and used many plugins when required to do my clients work, as it save lots of time to do the same piece of work.

Here is the Github link of Lealfet and leaflet docs link:

Lets get started with code section of Leaflet js library:

Firstly you need to setup a Local Server. You can easily install and find either wamp or xammp server or any http server. Once installed or setup, we will first create a project folder in root www or public directory.  Thereafter we will get started by creating one html file which we will use to code in leaflet js map example.

Once the html file created, under the head section paste following css and js cdn link of leafletjs map library:

<link rel=”stylesheet” href=”http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css” />

 

<script src=”http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js”></script>

Or you can either save and link those files directly in your local server. Under the body section create a division element with “map” as id:

<div id=“map” style=“height:300px”></div>

This division will render and display the map with the help of leaflet library. Lets initialize the map by adding a tile base map layer or either openstreetmap or mapbox or any other map provider tiles.

var newMap = L.map(‘map’).setView([38.9188702,-77.0708398], 13);  //initiating the view providing the latitude and longitude with zoom layer as 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);

Above code will render openstreetmap tile layer. Proper attributes to the contributors can be easily added, which will be displayed at the bottom right corner of map screen in  a descent way.

Finally we can add a marker and bind a click event, which will open up a popup with the message:

//binding popup event with leaflet marker and map L.marker([38.9188702,-77.0708398]).addTo(newMap) .bindPopup(“<b>Click cross button to dismiss!</b><br />I am a popup.”).openPopup();

Now we are all done with setup. Lets see how the leaflet getting started simple map example look like:


<!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);

// ******* OR YOU CAN USE BELOW CODE TO ADD MAPBOX TILE LAYER WITH LEAFLETJS ******
// L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=<YOUR_API_TOKEN>', {
// maxZoom: 18,
// attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
// '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
// 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
// id: 'mapbox.streets'
// }).addTo(newMap);

//binding popup event with leaflet marker and map
L.marker([38.9188702,-77.0708398]).addTo(newMap)
.bindPopup("<b>Click cross button to dismiss!</b><br />I am a popup.").openPopup();
</script>
</body>
</html>

Above leaflet code will provide a output in browser as provided below:

Output - Leaflet js - Getting Started to create Map Application
Output – Leaflet js – Getting Started to create Map Application

Geojson or topojson are two of the most common files which can be easily added as vector layer map with the help of leaflet.  Interactive Choropleth map is the best example which you can imagine to create in few hours or minutes of code with this library map.

Next you can check for loading GeoJSON file on Map with Leaflet Library.

In simple words you can take leaflet js as a library which will helps you to display and render your vector or raster layer data over browser or client side with some events handling over it. Unlike Google map library it does not provide geocoding or direction api or a basemap layer, but if you have geographical data or GIS data set, then with the help of provided data, your algorithm and leaflet library you can create and display the map as you want.

I hope this tutorial of getting started with leaflet would helped you to kick start with leaflet js library. Do subscribe to our blog, to get all latest updates, tutorials and news of map and GIS. Your comments are welcome either as question, comment or suggestion.

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.) MAPOG Converter Tool :

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

 Shapefile to Geojson Conversion

  •  Go to the tool MapOG Converter 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.