Add Custom CRS projection in QGIS

When do you need to add Custom CRS projection to add in QGIS? After all QGIS supports more than 2700 predefined CRS – Coordinates Reference system. Which is very common and is also installed in PostGIS database. But there are times when you receive a GIS data files in different CRS or projections or when somebody or your clients wants the GIS data files in a different CRS. At this time you may enquire to look into Custom CRS.

I got the same case, when one of my client was trying to convert a GML file to KML file. It would be a different topic to understand or find the CRS of GIS file. When my client asked for the problem they were facing while using the tool, I had jumped over to find the issue to solve it. As the file the user was trying to convert was GML file, which can also be opened in Text editor, I was able to easily figure out the projection the file is in. Which I found is very rarely used and it was not supported by the tool then. Finally we had converted the file from backend and was able to successfully resolve the clients problem.

Let me give you step by step procedure to make a file supports custom CRS and render it accordingly in QGIS.

Steps to Add Custom CRS projection in QGIS

1.) Open up QGIS. On the top Navbar of QGIS, select Settings option and click on Custom CRS or Custom Projection option. (In both version of QGIS 2.x or QGIS 3.x you will be getting this options for Custom CRS projection). This will open up a new Window in QGIS with different options.

Add Custom CRS projection in QGIS
Setting option – Add Custom CRS projection in QGIS

2.) In the window, click on + or plus sign and give a name to the CRS. And under parameter option, put the values in proj4 definition of CRS.

Add Custom CRS projection in QGIS
Option to add – Add Custom CRS projection in QGIS

Most of the time, you will be able to get the projection value in WKT format and not in proj4 format. While to add custom CRS QGIS supports proj4 format to be added.

For example here, in my case, I was know that the GML file is having the PCS_Lambert_Conformal_Conic projection. And for the same to support in QGIS, I wanted get to the proj4 value of PCS_Lambert_Conformal_Conic. So I was able to find out the link to get the wkt of PCS_Lambert_Conformal_Conic. Somehow I was not able to get the proj4 which this website support.

So I converted wkt to proj4 format of CRS with gdalsrsinfo open source tool of GDAL.

gdalsrsinfo -o proj4 example.prj
Example  - Add Custom CRS projection in QGIS
Example – Add Custom CRS in QGIS

Once done save the changes. QGIS also provides a testing tool, where we can provide the WGS 84 coordinates and get the coordinates of newly added custom CRS projection.

3.) Now after adding the custom projection or custom CRS, you can find the option to change the CRS of the layer or file added. That is, right click on layer and click on Set layer CRS. Search and Select the custom CRS or projection Added.

Selection - Add Custom CRS projection in QGIS
Selection – Add Custom projection in QGIS

This would make your file to work properly, as how you want it.Hope this tutorial helps you to Add Custom CRS or Custom Projection in QGIS, and render or display the file properly. If you found any issue while performing the steps please comment below.

Ultimate Carto Alternative – IGISMAP Analysis

IGISMAP Analysis is the Number 1 Alternative of Carto Platform. Carto is one of the GIS Cloud Software as a Service platform, which provides many functionality, but you will get many other reasons for which you might be looking for the alternative of Carto. Either looking for effective pricing and team management without enterprise plan, IGISMAP has many benefits over Carto.com. In General both tends to achieve the same purpose, i.e Either creating and sharing or embedding maps without writing any code or getting it achieved through the use of APIs. But there are few points which you might look into IGISMAP as a preference over carto. Check Alternative of ArcGIS online.

Ultimate Carto Alternative – IGISMAP Analysis

Lets found out all the best possibility reason which stands why IGISMAP can be better choice for you in comparision to Carto Database.

Cost Effective – IGISMAP is 10 times cheaper than Carto:

Yes you read it right. Where carto cost you $299 for a month subscription for 500 MB of data, IGISMAP Analysis cost you just $30 per month for the same 500MB of data. Similarly if you look for annual subscription, carto will cost you $2388 while IGISMAP analysis will cost you just $300 i.e you will save $2088. Making sure that IGISMAP Analysis tool have all features covers which all major GIS cloud as well as desktop application covers.

What else? IGISMAP Analysis provides multiple users add supports i.e adding Administrators, Developers and Business user to access map, which Carto Individual plan misses. Effective Price with more features covered is what IGISMAP USP is.

IGISMAP Supports Raster data as well Vector data upload:

IGISMAP Supports Raster (GeoTiff – Raster geo-referenced image) along with Vector files where carto does not provides the raster files. This makes stand out of Carto. While both tool are capable to supports all kinds of vector data like CSV, Excel, ESRI Shapefile, KMZ, KML, GeoJSON (TopoJOSN which only IGISMAP Supports), MapInfo, GPX and many more.

IGISMAP Data support - Carto alternative - ArcGIS alternative
IGISMAP Data support – Carto alternative

Digitise map by creating point, line and polygon layer – only available feature in IGISMAP Analysis:

IGISMAP Analysis Supports to add and create point, line and polygon layer separately and digitised the data. Unlike Carto and other online mapping system tool. Generally you will get this functionality in GIS desktop application like QGIS, ArcGIS etc. Here at IGISMAP Analysis you will also be able to add the data to existing layer, edit the attribute and delete the layers. You can also create a survey system with the layers you provide so that the your developers can add more data on your layer and can contribute easily.

IGISMAP Analysis provides More Data storage compare to sample plan of Carto:

IGISMAP analysis provides 30 times more storage as compare to Carto plan. I.E where carto for $299 per month provides only upto 512 MB of storage, IGISMAP provides 10 GB of data for just $200 plan. Along with such a huge difference in pricing and storage, IGISMAP also makes sure security at its high priority for customer data to access. IGISMAP Analysis Cloud system is hosted on AWS servers with the premium infrastructure used and With 100% uptime and availability of server.

Dedicate Support in IGISMAP while Basic Support in Carto:

IGISMAP support is responsive and make sure to solve each and every query of the customer. Along with that, we at IGISMAP also supports and helps to create Maps for you. A dedicated customer support manager is assigned to every one of the customer and customer will be able to communicate easily if they face any issue. We can be contacted by email or our personalised chat box 24/7. While Carto support basic customer support at specific timing. For a dedicated support you need to be Carto Enterprise customer.

Comparison table between IGISMAP and Carto plans: Alternative of Carto – IGISMAP Analysis Tool

This table will provide only key difference between IGISMAP and Carto which we feel should be highlighted. Rest other major features are supported by both the platform.

IGISMAP $30/month planIGISMAP $200/month planCarto $299/month plan
Storage500 MB10 GB500 MB
MapsUnlimited public/private mapsUnlimited public/private maps10 Public Maps/ Unlimited Private Maps
Raster Data SupportYesYesNo
Additional UsersYes (Admin, Developer, Business User)Yes (Admin, Developer, Business User)No
Access ControlYesYesNo
SupportDedicated Email supportDedicated Email supportBasic Support
Price$30/month$200/month$299/month

IGISMAP Analysis stands as best alternative of Carto – Here are more points to cover:

  • No coding skills required – Just drag and Drop and Few clicks to create Map
  • Simple and Easy User Interface
  • Multiple Base map supports
  • Ultimate Query and Analysis Tool
  • Best Data security and User access control feature
  • Multi roles support – Admin, Developer or Business User
  • User Cloud data security is our first priority – Scalable and reliable

Looking to create maps for your store, analysis of sales data, Your real estate properties behaviour and estimates, store mapping for your customer to get into your physical store easily, Insurance companies to map disaster spatial data and predicting the premium to be costed, generating routes for your logistic business and what else. You can easily create your map with IGISMAP Analysis Cloud platform. And you can do it yourself or ask a team of our expert to help you in consulting for doing the same. You don’t need any other third part GIS Team or in house team to be expert in GIS nor require any developer who is expert with Coding skills.

Try for free – IGISMAP Analysis – Carto Alternative:

Give IGISMAP a try. Evaluate the tool for free without giving credit card details. Also contact with team of IGISMAP if you found any issues or have just an idea for creating map. We at IGISMAP will look forward to help our customer.

Best ArcGIS online Alternative – IGISMap

IGISMAP is number 1 alternative to ArcGIS Online. There are many benefits of using IGISMAP over ArcGIS Online. Likewise both tend to achieve the same purpose, i.e even without GIS Skills you can make a map with your data, share the map and can embed in your website, directly without having external team of GIS specialist. But there are few aspect of which you might be looking for alternative of ArcGIS online and one of those is cost. Check alternative of Carto.

Best ArcGIS online Alternative – IGISMap

Are you looking for an alternative to ArcGIS online? Here are the few reasons why you should choose IGISMap Tool over ArcGIS online.

IGISMAP – Cost Effective and Simple pricing over ArcGIS Online

IGISMAP Pricing and cost can be seen online from here. Price are transparent, fixed and affordable. While we don’t see the pricing directly in ArcGIS online website. As ArcGIS online Didn’t provide any direct cost to view, but we can research the price over the internet and is expected to have the price between $300 to 500 per month or $2500 for annual subscription. Whereas the pricing of IGISMAP starts just from $15 per month.

You see, the Price of ArcGIS online tool is 20 times the price of IGISMAP Analysis Map Tool. Thats a huge sum of amount from ArcGIS online, where IGISMAP Analysis has almost all the important required features that ArcGIS online cover. IGISMap Tool plans typically offer 5x more upload storage than similarly priced ArcGIS plans. This makes a clear win of IGISMAP Analysis Map sharing tool over ArcGIS online.

IGISMAP Supports More set of Spatial Data to Add Compare to ArcGIS Online

ArcGIS Support only :

  • Shapefile (ZIP archive containing all shapefile files)
  • CSV or TXT files with optional address, place or coordinate locations (comma, semi-colon or tab delimited)
  • GPX (GPS Exchange Format)
  • GeoJSON (open standard format for simple geographical features)

IGISMAP Supports Many Multiple files (Vector as well as Raster):

  • Shapefile (Upload Multiple set of shapefile either in Zip format or drag and drop .shp, .shx, .dfb and .prj)
  • CSV /Excel (Should have either Latitude and Longitude Column or Should have WKT Format column)
  • MapInfo (Upload a zip file containing .TAB, .DAT, .ID and .MAP or upload all together Separately)
  • KML / KMZ
  • GML
  • GeoJSON
  • DXF
  • GPS/GPX
  • TopoJSON
  • GeoTiff (Raster Georeferenced image)

IGISMAP – Unlimited number of Maps and Unlimited number of dataset layers compare to ArcGIS online

You can create any number of Maps and any number of dataset in IGISMAP, with broad level of spatial data support. Instead of credit limits here in IGISMAP the limitation is just based on total number of storage space used. If the layers are not used further, you can just delete the layers or maps which free up the space in your account.

Point, Line, Polygon layer creation and Digitising the Map

IGISMAP Supports to add and create point, line and polygon layer separately and digitised the data. Unlike ArcGIS onlilne and other online mapping system tool, we at IGISMAP tend to provide the same functionality as provided in Other Desktop GIS tools like QGIS and ArcGIS. You can also create a survey system with the layers you provide so that the your developers can add more data on your layer and can contribute easily.

IGISMap Tool provides Responsive and Dedicated customer support experience

We at IGISMAP make sure, that every one of our clients is entertained by a dedicated customer support manager. Also let know IGISMap Tool inside out. We can be contacted by email or our personalised chat box 24/7. Products such as ArcGIS can only be contacted via email or telephones at specific timing to provide product and server support.

IGISMAP allows unlimited transactions with Quering and Analysis Tool along with Map loading, freeing you from credit limits and additional charges

IGISMAP Analysis tool, delivers a multiple tools to add to your map application with a single click. Under Map tools you will be able to get in a single click customised ways to change the BaseMap or remove Base Map, or Querying the Database query or Proximity tool over single layer or multiple layers or it could be print or search on map. And It provides unlimited spatial analysis queries per month which is way ahead then ArcGIS online

Here is the video Demonstrating the Query Tool and proximity Tool in IGISMAP.

Simple and Easy to Use User Interface – Simple and Quick Map Creation

User Interactivity is one of the base motive at IGISMap Tool. Our developers have reached at all extends to create the tool quick and as simple as possible for the user. User can easily create interactive and beautiful web maps quickly within a few clicks. There are no such complex functions while uploading data sets or publishing your web maps.

What Else makes IGISMAP Analysis Tool to be Best Alternative ArcGIS Online

  • Zero coding skills required
  • Data security and User access control
  • Easy to work for everyone
  • Multi roles support – Admin, Developer or Business User
  • User Cloud data security is our first priority
  • Scalable and reliable

Do whatever you want to create. IGISMAP is flexible enough to create a mapping project like Store mapping, Real Estate properties Mapping, Analysing the property Behaviour, Checking the value of property for insurance assistance by mapping disaster spatial data through raster or vector data, mapping your own customer through your CMS or by general Excel file, Creating routes for your logistic business from your vehicle to warehouse to the delivery addresses. You don’t need to have a GIS team sitting with you, neither you need a Developer or Designer.
Manage add and assign different roles to users in your organisation, so as to make proper and secure access to your data and maps. IGISMAP is accessible to All and can be operated very easily and all the tools and features are available right in front of you.

Try it for free, Enjoy for Yourself!

Go to the IGIS Map Tool and try it once for free, no obligation 30 days trial of Our Free service plan. You will not be looking back once you used IGIS Map Tool.

Switching between Google Maps and OpenStreetMap in React Native

Switching between Google Maps and OpenStreetMap in React Native : In this post I am going to discuss about Google Maps and OpenStreetMap in react native with one example.This example code  will just show the Google Maps and OpenStreetMap on the screen of mobile ,but before going to detail of this article I  suggest you to read the following page:

react-native-maps

Switching between Google Maps and OpenStreetMap in React Native

Installation :

First create a react native project by following command :

react-native init MyProject

Install React Native Map components  in your React Native project:

cd MyProject

npm install react-native-maps --save

Build configuration on iOS :

For this go to Link

Build configuration on Android:

Define the react-native-maps project in android/settings.gradle:

...
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

Add the react-native-maps as an dependency of your app in android/app/build.gradle:

...
dependencies {
  ...
  implementation project(':react-native-maps')
}

In build.gradle of android(If you’ve defined project-wide properties ):

buildscript {...}
allprojects {...}

/**
 + Project-wide Gradle configuration properties
 */
ext {
    compileSdkVersion   = 26
    targetSdkVersion    = 26
    buildToolsVersion   = "26.0.2"
    supportLibVersion   = "26.1.0"
    googlePlayServicesVersion = "11.8.0"
    androidMapsUtilsVersion = "0.5+"
}

If you do not have project-wide properties defined and have a different play-services version then use the following instead :

...
dependencies {
   ...
   implementation(project(':react-native-maps')){
       exclude group: 'com.google.android.gms', module: 'play-services-base'
       exclude group: 'com.google.android.gms', module: 'play-services-maps'
   }
   implementation 'com.google.android.gms:play-services-base:10.0.1'
   implementation 'com.google.android.gms:play-services-maps:10.0.1'
}

Specify your Google Maps API Key:

Add your API key to your manifest file (android/app/src/main/AndroidManifest.xml):

<application>
   <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/>
</application>

To get API key:

Google maps API Key

Add import com.airbnb.android.react.maps.MapsPackage;and new MapsPackage() in your MainApplication.java:

import com.airbnb.android.react.maps.MapsPackage;
...
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new MapsPackage()
        );
    }

Example: 

In our example ,there are four java script file as follow:

  • index.js
  • App.js
  • GoogleMapScreen.js
  • OpenStreetMapScreen.js

index.js:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js :

import React, { Component } from 'react';
import {View,Text ,ScrollView} from 'react-native';
import { createDrawerNavigator,createAppContainer,DrawerItems, SafeAreaView } from 'react-navigation'
import {Container} from 'native-base';
import GoogleMapScreen from './src/GoogleMapScreen';
import OpenStreetMapScreen from './src/OpenStreetMapScreen';

const CustomDrawerContentComponent = (props) => (
     <ScrollView>
        <View style={{height:80,backgroundColor:'#1a8cff',alignItems:'center',justifyContent:'center'}}>
         <Text style={{ color:'white',fontSize:30}}>Maps</Text>
        </View>
        <SafeAreaView style={{flex:1}} forceInset={{ top: 'always', horizontal: 'never' }}>
        <DrawerItems {...props} />
       </SafeAreaView>
     </ScrollView>
);

const MyDrawerNavigator = createDrawerNavigator(
   {
    GoogleMap:GoogleMapScreen,
    OpenStreetMap:OpenStreetMapScreen,
   },
   {
    contentComponent:CustomDrawerContentComponent
   }
);

const MyApp = createAppContainer(MyDrawerNavigator);

class App extends React.Component{
   render(){
      return(
        <Container>
          <MyApp />
        </Container>
     );
   }
}

export default App;

Explaination of App.js : 

In App.js java script file,we are importing component from native-base and React-Navigation 3.x ,we need to install:

Install NativeBase

npm install native-base --save

Install Peer Dependencies

react-native link

Install the react-navigation package

npm install --save react-navigation

install react-native-gesture-handler :

npm install --save react-native-gesture-handler

Link all native dependencies:

react-native link

In this code , one drawer is created for two screen namely GoogleMapScreen and OpenStreetMapScreen , for more detail on drawer in react-navigation 3.x ,you can refer to following post:

drawer in react-navigation 3.x

GoogleMapScreen.js

import React, { Component } from 'react';
import {
StyleSheet,
View,
Dimensions,
ScrollView,
Image
} from 'react-native';
import {Button,Container,Header,Left,Right,Icon,Text,Body } from 'native-base';
import MapView from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height; //,
const LATITUDE = 22.720555;
const LONGITUDE = 75.858633;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

class GoogleMapScreen extends React.Component {
   static navigationOptions = {
     drawerLabel: 'Google Maps',
     drawerIcon: ({ tintColor }) => (
           <Image
                 source={require('../image/icons8-google-maps-48.png')}
            />
     ),
};
constructor(props) {
  super(props);
  this.state = {
    region: {
      latitude: LATITUDE,
      longitude: LONGITUDE,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    },
  };
}
render() {
  return (
   <Container>
    <Header>
     <Left style={{ flexDirection: 'row' }}>
      <Icon onPress={() => this.props.navigation.openDrawer()} name="md-menu" style={{ color: 'white', marginRight: 15 }} />
     </Left>
     <View style={{alignItems:'center',justifyContent:'center'}}>
       <Text style={{ color: 'white' }} >Google Maps</Text>
     </View>
     <Right>
       <Icon name="md-cart" style={{ color: 'white' }} />
     </Right>
    </Header>
    <View >
     <MapView
        provider={this.props.provider}
        style={styles.map}
        scrollEnabled={true}
        zoomEnabled={true}
        pitchEnabled={true}
        rotateEnabled={true}
        initialRegion={this.state.region}
     />
    </View>
  </Container>
  );
 }
}// End of MyHomeScreen class
export default GoogleMapScreen;

const styles = StyleSheet.create({
   map: {
    width: 400,
    height: 800,
   },
});

Explaination of GoogleMapScreen.js: 

This code is going to show google maps on the screen of mobile. These constants are define :

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 22.720555;
const LONGITUDE = 75.858633;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

In constructor ,region object is initialize as follow:

this.state = {
  region: {
    latitude: LATITUDE,
    longitude: LONGITUDE,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  },
};

The following MapView tag  will shaow Google Maps on screen:

<MapView
   provider={this.props.provider}
   style={styles.map}
   scrollEnabled={true}
   zoomEnabled={true}
   pitchEnabled={true}
   rotateEnabled={true}
   initialRegion={this.state.region}
/>

OpenStreetMap.js

import React, { Component } from 'react';
import {View,StyleSheet,StatusBar,Image,Dimensions} from 'react-native';
import {Button,Container,Header,Left,Right,Icon,Text,Radio } from 'native-base';
import MapView ,{ MAP_TYPES, PROVIDER_DEFAULT,UrlTile } from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 22.720555;
const LONGITUDE = 75.858633;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

class OpenStreetMapScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'OpenStreetMap',
    drawerIcon: ({ tintColor }) => (
    <Image
         source={require('../image/Openstreetmap_logo.png')}
         style={{width:40,height:40}}
    />
   ),
};
constructor(props) {
   super(props);
     this.state = {
       region: {
         latitude: LATITUDE,
         longitude: LONGITUDE,
         latitudeDelta: LATITUDE_DELTA,
         longitudeDelta: LONGITUDE_DELTA,
       },
     };
 }
get mapType() {
   return this.props.provider === PROVIDER_DEFAULT ? MAP_TYPES.STANDARD : MAP_TYPES.NONE;
}
render() {
  return (
   <Container>
    <Header>
     <Left style={{ flexDirection: 'row' }}>
      <Icon onPress={() => this.props.navigation.openDrawer()} name="md-menu" style={{ color: 'white', marginRight: 15 }} />
     </Left>
     <View style={{alignItems:'center',justifyContent:'center'}}>
      <Text style={{ color: 'white' }} >OpenStreetMap</Text>
     </View>
     <Right>
      <Icon name="md-cart" style={{ color: 'white' }} />
     </Right>
    </Header>
    <View >
     <MapView
       region={this.state.region}
       provider={null}
       mapType={this.mapType}
       rotateEnabled={false}
       style={{flex: 1}}
       style={styles.map}
       showsUserLocation>
       <UrlTile
urlTemplate="http://a.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
maximumZ={19}
/>
      </MapView>
     </View>
    </Container>
   );
  }
}
export default OpenStreetMapScreen

const styles = StyleSheet.create({
   map: {
    width: 400,
    height: 800,
   },
});

Explaination of OpenStreetMap.js :

Code of OpenStreetMap.js is  similar to GoogleMapScreen.js  only difference is in MapView tag as follow:

<MapView
  region={this.state.region}
  provider={null}
  mapType={this.mapType}
  rotateEnabled={false}
  style={{flex: 1}}
  style={styles.map}
  showsUserLocation>
  <UrlTile
urlTemplate="http://a.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
maximumZ={19}
/>
</MapView>

Here MapView has one child tag <UrlTile> and prop of this tag is set to url as shown above in code which will print OpenStreetMap.

prop

mapType={this.mapType}

Here mapType function is called ,and return of this function is assign to mapType  prop.

mapType function:

get mapType() {
    return this.props.provider === PROVIDER_DEFAULT ? MAP_TYPES.STANDARD : MAP_TYPES.NONE;
}

When you will run above Project ,following output will come:

Switching between Google Maps and OpenStreetMap in React Native

In the header ,we are having menu on left side. On the click of this menu,a drawer will open as shown below:

Switching between Google Maps and OpenStreetMap in React Native

We are having two option in drawer 1)Google Maps 2)OpenStreetMap. When we will click Google Maps ,Google Map will be on screen  as shown by first ScreenShot  , now when we will click second option of OpenStreetMap then output will be as shown below:

Switching between Google Maps and OpenStreetMap in React Native

 

So, this all about switch from Google Map to OpenStreetMap in react native. Please do comment if something’s missing.

Check out more on GIS Apps –

If you want to hire our team then visit Hire us

 

Drawer React Navigation 3.x – react native

Drawer React Navigation 3.x – react native: In this post we are going to learn about drawer navigation of React Navigation 3.x with one example,, but before going to detail of this article I  suggest you to read the official documentation of React navigation 3.x as follow:

React Navigation 3.x

Drawer React Navigation 3.x – react native

In the below example  we are going to learn basics of drawer and how to implement  it in our application.

Installation :

First create a react native project by following command :

react-native init MyProject

Install the react-navigation package in your React Native project.

cd MyProject
npm install --save react-navigation

# or with yarn 
# yarn add react-navigation

install react-native-gesture-handler :

npm install --save react-native-gesture-handler

# or with yarn
# yarn add react-native-gesture-handler

Link all native dependencies:

react-native link

After all this my project’s package.json file is as follow:

{
  "name": "MyProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
      "test": "jest"
   },
   "dependencies": {
   "react": "16.6.1",
   "react-native": "0.57.7",
   "react-native-gesture-handler": "^1.0.10",
   "react-navigation": "^3.0.5"
  },
  "devDependencies": {
  "babel-jest": "23.6.0",
  "jest": "23.6.0",
  "metro-react-native-babel-preset": "0.50.0",
  "react-test-renderer": "16.6.1"
  },
 "jest": {
   "preset": "react-native"
  }
}

In our Project we are having two java script file as follow:

  • index.js
  • App.js

index.js :

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js :

import React, { Component } from 'react';
import { View } from 'react-native';
import { createDrawerNavigator,createAppContainer } from 'react-navigation'
import { Button,Container,Header,Left,Right,Icon,Text } from 'native-base';

class MyHomeScreen extends React.Component {
  render() {
    return (
      <Container>
        <Header>
          <Left style={{ flexDirection: 'row'}}>
           <Icon onPress={() => this.props.navigation.openDrawer()} name="md-menu" style={{ color: 'white', marginRight: 15 }} />
          </Left>
          <Right>
           <Icon name="md-cart" style={{ color: 'white' }} />
          </Right>
        </Header>
       <View style={{ marginTop:100,marginLeft:100}}>
         <Button onPress={() => this.props.navigation.navigate('Notifications')} >
           <Text>Go to notifications</Text>
         </Button>
        </View>
       </Container>
     );
   }
 }// End of MyHomeScreen class

class MyNotificationsScreen extends React.Component {
   render() {
     return (
       <View style={{ marginTop:100,marginLeft:100}}>
         <Button onPress={() => this.props.navigation.goBack()} >
           <Text>Go back home</Text>
         </Button>
       </View>
     );
    }
}//End of MyNotificationsScreen class

const MyDrawerNavigator = createDrawerNavigator({
   Home:{ 
      screen: MyHomeScreen,
   },
   Notifications: {
      screen: MyNotificationsScreen,
   },
 });
 
const MyApp = createAppContainer(MyDrawerNavigator);

class App extends React.Component{
    render(){
      return(
        <Container>
          <MyApp >
            </MyApp >
        </Container>
      );
    }
}//End of App class

export default App;

In above code of App.js file we have used component of native base ,and therefore we will install native base as follow :

Install NativeBase

npm install native-base --save

Install Peer Dependencies

react-native link

Explaination of App.js :

In this file App.js, we have define three class namely as follow:

  • MyHomeScreen
  • MyNotificationsScreen
  • App

and two constants as follow:

  • MyDrawerNavigator
  • MyApp

We are creating two screen with the help of two class MyHomeScreen and MyNotificationsScreen 

class MyHomeScreen :

class MyHomeScreen extends React.Component {
  render() {
    return (
      <Container>
       <Header>
        <Left style={{ flexDirection: 'row' }}>
         <Icon onPress={() => this.props.navigation.openDrawer()} name="md-menu" style={{ color: 'white', marginRight: 15 }} />
        </Left>
        <Right>
         <Icon name="md-cart" style={{ color: 'white' }} />
        </Right>
       </Header>
       <View style={{ marginTop:100,marginLeft:100}}>
        <Button onPress={() => this.props.navigation.navigate('Notifications')} >
         <Text>Go to notifications</Text>
        </Button>
       </View>
      </Container>
    );
  }
}// End of MyHomeScreen class

Explaination of MyHomeScreen class :

In this class we are creating header of screen ,on left side of header we are creating Icon of “md-menu”,and onPress of this Icon we have open the drawer with the help of this code :

onPress={() => this.props.navigation.openDrawer()}

In this home screen one button is also given ,on press of this button MyNotificationsScreen is called with following code :

onPress={() => this.props.navigation.navigate('Notifications')}

class MyNotificationsScreen :

class MyNotificationsScreen extends React.Component {
  render() {
   return (
     <View style={{ marginTop:100,marginLeft:100}}>
      <Button onPress={() => this.props.navigation.goBack()} >
       <Text>Go back home</Text>
      </Button>
     </View>
   );
  }
}//End of MyNotificationsScreen class

Explaination of MyNotificationsScreen class :

In this class we are creating a button ,and on press of this button we are going back to home screen from this notification screen ,for this we are using following code:

onPress={() => this.props.navigation.goBack()}

Constant MyDrawerNavigator :

const MyDrawerNavigator = createDrawerNavigator({
   Home: {
      screen: MyHomeScreen,
   },
   Notifications: {
      screen: MyNotificationsScreen,
   },
});

Constant MyApp :

const MyApp = createAppContainer(MyDrawerNavigator);

Class App :

class App extends React.Component{
  render(){
    return(
      <Container>
        <MyApp />
      </Container>
    );
  }
}

Explaination of App class:

In this class we are using <MyApp /> tag .

When you will run the above code,  following output will come

Drawer React Navigation 3.x - react native
On Left side of Header we are having menu ,on press of this drawer will be open as follow:

Drawer React Navigation 3.x - react native

If you face any problem during implementing this tutorial, please let us know. Feel free to comment in given comment box.

You might be interested React Native Geolocation

Create Heat Map – IGIS Map Tool

Using Heat map is very effective way of visualizing points data. To create Heat map, first of all you must know what is heat map. When map visual of a location data is so dense and tightly packed that it does not make much sense a heat map is used. Heat maps are ordinarily used when mapping “points”. In this article we are providing pictorial tutorial of Create Heat Map using IGIS Map Tool

To create Heat map with IGIS Map Tool, you also need to  look over the IGIS Map Tool.

Create Heat Map – IGIS Map Tool

Heat Map allows user to display the density of the geographic points in a map. Heat map uses geographic points as a gradient color layer to style the map.

To create  Heat Map with IGIS Map Tool you need to follow some steps as follows:

  • Go To IGIS Map Tool and login to your account or register if you are new user with name, email id, Organization name and role in examination.
  • Click on Create New Map and fill the tittle of map with its description.
  • Next screen will be redirected to the canvas where you can create, upload or use sample data for your heat map creation.
  • Upload a layer from data set.

Create Heat Map

  • Once the map is uploaded click on publish layer.
  • Select style layer by right click on the layer in side bar.

Create Heat Map

  • Now click on the Heat map section to create Heat map.

Create Heat Map

  • The distance between points for clustering is the merge radius here. The greater the number of points that fall within the radius, the greater the intensity of the heat map. While a radius set too small will generate isolated spots; a radius set to large will show no detail.
  • Now fill the opacity in the fill section to set the transparency of the heat map layer between 100% and 0%.

Create Heat Map

Heat map use red color to show high density of points and blue color for the low density of point area.

Below is the heat map of disaster management using sample data.

Create Heat Map

Use of Heat Map

This type of identification and visualization is useful for visualizing density of the geographic points and also used for business analysis and demographics mapping.

Heat Map serves in following industries:

For example, Heat Map can be used by Disaster Management Firm. As when a DM needs to calculate the flood  disaster data it uses the heat map.

While data and business analysis is the main reason to Create Heat Map, but it can also helps in understanding and comparing the data easily. It is also very common practice to use the Heat Map in Disaster and Risk management.

I hope this may help you in develop and Create Heat map with IGIS Map Tool. So if you find any problem in creating one such example do let us know by commenting below.

 

PHP connection with pgRouting for shortest path

Here in this post we do PHP connection with pgRouting for shortest path. Here we have explained how we can add source and destination point in table and how can we query for shortest route. In this demo we have made a connection between pgrouting and PHP using code igniter using code igniter framework.
Here we have uploaded shape file in postgis. For doing this you need to  install postgres and create a database. Everything is already explained in earlier tutorial.
You can also check Postgres with QGIS.
Now the same procedure is implemented using PHP in code igniter framework. As we have an idea about code igniter, which has three main component as view, model and controller.

VIEW-

In view section  we will be adding PHP code for presenting the shapefile and the output shortest route.

Model-

In model section will be writing query for getting two end points and shortest path.

Controller-

In controller section we will make function for registration, login and distance.

First of all you need to render your shape file on map. The map can be Google map, Open street map or any other map. For rendering the shape file using leaflet you need to add plugin in your script, which can be downloaded from https://github.com/calvinmetcalf/leaflet.shapefile link. Passing shapefile in L.Shapefile() method and calling addTo(map) method we can add the shapefile on map. After that we need to create input boxes for user to enter end points latitude and longitude. Using ajax we have send these latitude and longitude of both start and end point to model and got the result back in view.

$.ajax({
type: 'POST',
url: "<?php echo base_url('index.php/User_Authentication/distance');?>",
data:{dlat1:lat1,dlong1:long1,dlat2:lat2,dlong2:long2},
dataType: 'JSON',
success: function (response) {
var data= response;
var latitude= parseFloat(response['latitude']);
var longitude= parseFloat(response['longitude']);
var geodata= GeoJSON.parse(data, {Point: ['longitude','latitude']});
geojsonLayer = L.geoJson(geodata).addTo(map);
},
error: function (errorThrown){
check_status= 0;
console.log(errorThrown);
}
});

Write Query in Model

In model section we have written an insert function, which will help us to insert the obtained latitude longitude points from user in query. The query takes latitude longitude as input. As given

insertLatLong($dlat1,$dlat2,$dlong1,$dlong2){}

Then take out the id for given source and destination point and saved them as result in variable start and end.
$start = $this->db->query("SELECT source FROM network1 ORDER BY geom <-> ST_SetSRID(ST_Point ($dlong1,$dlat1),4326) LIMIT 1")->result();
$end= $this->db->query("SELECT source FROM network1 ORDER BY geom <->  ST_SetSRID(ST_Point ($dlong2,$dlat2),4326) LIMIT 1")->result();

After completing this wrote query using pgr_dijsktra method. This is an algorithm to find out the shortest path. This takes shape file table, start point , end point, boolean result for directed/undirected route and boolean result for having/not having route cost. To get the geometry column from network table applied join. Take this result in calculation variable.
After this check for the number of row i.e. the result of query is not empty and take result in distance variable and return is to controller.

public function insertLatLong($dlat1,$dlat2,$dlong1,$dlong2) {
$calculation= $this->db->query("select seq, id1, id2, cost, geom, ST_X(ST_AsText(ST_StartPoint((ST_AsText(ST_LineMerge(ST_GeomFromText(ST_AsText(geom)))))))) as latitude, ST_Y(ST_AsText(ST_StartPoint((ST_AsText(ST_LineMerge(ST_GeomFromText(ST_AsText(geom)))))))) as longitude
from pgr_dijkstra('Select gid as id, source, target, st_length(geom::geography)/1000 as cost from network1',
$start ,$end ,false, false) as di JOIN network1 pt ON (di.id2 = pt.gid)");

if($calculation->num_rows()>0) {
$distance= $try->result();

return $distance;

} else {

return false;
}
}

Call Function in Controller

In the controller, we can call the insert function and pass the required input to called function and also can load the view. Here for this article we have made login session and registration of user. This distance function takes the data in variable in sends to insertLatLong function in Login_Database model.

public function distance() {
$dlat1 = $this->input->post('dlat1');
$dlong1 = $this->input->post('dlong1');
$dlat2 = $this->input->post('dlat2');
$dlong2 = $this->input->post('dlong2');
$res= $this->Login_Database->insertLatLong($dlat1,$dlat2,$dlong1,$dlong2);
echo json_encode($res);
}

After writing everything properly you can run the project in browser. See the shortest path as given-

Export shapefile from postgreSQL - pgsql2shp
Export shapefile from postgreSQL – pgsql2shp

Hope you enjoyed the tutorial. If you face any problem in working with pgRouting please let us know.

GIS Data Conversion

Hey guys, in this post we are going to focus on one of the important topic of GIS world, which is the “DATA CONVERSION”. Data Conversion means converting computer data into another format. With huge amounts of GIS data available for use, it is more cost-efficient and effective to convert the GIS data from one format to another than recreating all of it.

GIS Data Conversion

There are many ways to convert GIS data and the conversion may use special conversion programs. Simply, it may involve complex data exporting or importing procedures. As we  know there are many data file formats used in GIS, this time we will be converting them from one format to another.

To get the list of the various data file formats you can visit our previous posts.

Vector data file formats in GIS and Raster data file formats in GIS.

To make datasets usable together in GIS, it is necessary to convert the both vector and raster geospatial file from one format to another. And for doing the Conversion we already have posts about the data conversion from GeoJSON to Shapefile and KML to shapefile and many more, but they all have a long way to convert the GIS data. The Alternative to that is some free and commercial converter  software or tools available on the web. There are a Lots’s of tools available on the web, but I recommend you to use  IGisMap converter.  IGisMAP Converter is an online tool to convert GIS data from one format to another format.

IGisMap converter provides On-line conversion and transformation of both vector and raster geospatial data.  In this on-line converter tool the uploaded data file is allowed to convert into various GIS data format.

IGisMAP converter can convert bulk amount of data into another format using any coordinates reference systems. And then you can download the converted data or store it into MyMapData.

This all about IGisMap Converter tool hope it will make your spatial study easy. If you face any problem in data conversion then please comment or chat with us.

Futhermore, You can also check :

TAB to KML – Conversion

Are you looking for converting your TAB data file into KML format for using it in your GIS project? Have you extracted and downloaded TAB file from Map Info, MID or MIF and want to render it with your Geo library which support KML format?  If so, here is an article to convert TAB to KML format using this amazing online conversion tool.

You can use any of the tools to convert your TAB data file to any other format available in market, but If you don’t want to spend so much time just on conversions and want an easy way for conversions. Here is an amazing tool for converting your data files within a minute, i.e. IGIS Map Converter.

IGIS Map Converter

IGIS Map converter is an incredible tool for data file conversions. It will translate an MapInfo file (in TAB format) to a shapefile or KML format. Even it can also convert from KML format to shapefile, or KML to TAB, or Shapefile to DXF.  It Convert GIS files online without using complex and Enterprise Software like ArcGIS, QGIS, AutoCAD etc. IGIS Map converter is much easier to use then any other conversion software or tool.

How to convert TAB to KML format

  • Now just drag or upload your TAB file from your system or access the file from Google Drive or Dropbox. Don’t Forget to upload all the related files with it.

    tab to kml
  • Once the file is upload is completed, select the output file format that we want to convert it into i.e. KML.
    tab to kml
  • Now for setting up the conversion process we have to set the CRS (Coordinate reference system), as KML converter strictly transforms input dataset to WGS 84 coordinate reference system (if needed). Please make sure that coordinate reference system of your input dataset is assigned correctly – otherwise the resulting KML file may be spatially shifted or wrong. KML converter strictly transforms input dataset to WGS 84 coordinate reference system (if needed).

tab to kml-3

  • Now click the Convert file button to convert the data file formats  And you see a new dashboard with two partition, One for downloading or deleting your new KML file format. and other one which shows the file content area i.e bounding box area of TAB file.
    tab to kml
  • You can Download your converted file here or delete it whatever you want, When you scroll down you can see My drive section where all of your converted data files stored. Here you can publish or delete them according to your requirement.
  • Now, you can also publish your KML file as map to see the content in the file or to check the conversion.tab to kml
  • 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.
  • You can also search locations, add new datasets, edit layers and style the map according to your choice and requirements.

IGIS Map Tool Other Conversions

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, TAB and many more raster and vector files, along with that it support more than 4000 Coordinate Reference System.

IGIS Map Converter is a online tool for converting GIS data files from one format to another. which helps you in easy data conversion and beautiful and incredible map creation in no time. IGIS Map converter online tool is recommended for better and easy conversions.  If you want you can also use ogr2ogr offline conversion tool for convert TAB to KML format.

If you face any problem during implementing this tutorial, please let us know. Feel free to comment in given comment box.

 

Marker Cluster With Leaflet

Places to visit in India:

In India there are many beautiful places to visit. Some of them are used here as information on map. In this demo we have shown only famous place in states but we have also show banks, hotels, companies or hospitals etc. and can have their information. This demo gives information of availability of sources around us.

Data Preparation:

Very first task to prepare any map is the data preparation. This demo shows various places in various state in India. For that we downloaded the data from various sites, arranged the images in folders with states name. Prepared one table with column names as States name, Place Name, Latitude, Longitude and Description. The folder name is same as first column of the table. All image names are same as second column of table. This is done so that data can be used in effective way.

Also can check Leaflet Js Plugin Basics Tutorial

Map Preparation:

Map has been shown using Leaflet java Script library. For using MarkerCluster in article added the leaflet Marker cluster plugin, which can be downloaded from https://github.com/Leaflet/Leaflet.markercluster website. getAllChildMarkers returns the array of total markers contained within that cluster.

<script src="leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="MarkerCluster.css" />
var map = L.map('map').setView([23.259933,77.412615],3);
	var searchLayer ;
	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href=”http://osm.org/copyright”>OpenStreetMap</a> contributors'
	}).addTo(map);
var markers = L.markerClusterGroup({
			maxClusterRadius: 120,
			iconCreateFunction: function (cluster) {
				var markers = cluster.getAllChildMarkers();
				var n = 0;
				for (var i = 0; i < markers.length; i++) {
					n += markers[i].number;	
				}
				//console.log("done");
				return L.divIcon({ html: n, className: 'mycluster', iconSize: L.point(40, 40) });
				}
			});
			
			
		for (var i = 0; i < addressPoints.length; i++) {
			
			var a = addressPoints[i];
			var s=a[0];
			//console.log(a);
			var n=a[1];
			var gcon =  L.icon({iconUrl: 'image/'+s+'/'+n+'.JPG', iconSize: [40,40]});
		var title = a[4];
			var marker = L.marker(new L.LatLng(a[2], a[3]),{ icon: gcon });
		marker.bindPopup('<h2>'+n+'</h2><strong>'+s+'</strong><br><img src="image/'+s+'/'+n+'.JPG" height="150" width="300"><br>'+title);
			markers.addLayer(marker);
		}
	map.addLayer(markers);	
		
		
		markers.on('clustermouseover', function(c) {
              var popup = L.popup()
                  .setLatLng(c.layer.getLatLng())
                  .setContent('click to Zoom')
                  .openOn(map);
              })

If you need to add any images or style in cluster icon so you should not add the default CSS. Add the MarkerCluster.css file in your document. Here in popup we have shown place name, image with description.

Marker Cluster map

So its all about Markercluster with Leaflet if you face any problem in implementing this then comment below.

Furthermore, you can check :