Blog

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

React Native Geolocation – GPS – GIS Mobile App

Geolocation in React Native is the identification or estimation of the real-world geographic location of a mobile phone .

In this post, we will  discuss  how to find Geolocation of mobile phone in react native with one example, but before going to detail of this post I  suggest you to read the official documentation.

React Native Geolocation

React Native Geolocation – GPS – GIS Mobile App

Installation

iOS : installation for ios

Android:

Our App will request  access to location, for this we need to add following line of code in our App’s AndroidManifest.xml which is located at  android/app/src/main/AndroidManifest.xml in our App.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

API Overview

The geolocation api exists on the global navigator object in React Native,  so we would access it via navigator.geolocation.

I will be covering only one method available  on   navigator.geolocation

getCurrentPosition

The getCurrentPosition   method allows us to request a user’s location at any time. This method take three parameter as follow:

geolocation.getCurrentPosition(geo_success, [geo_error], [geo_options]);

parameters of method :

geo_success - a success callback
[geo_error] -an error callback
[geo_options]-a configuration object

The success callback will be passed an object that looks like :

{
    "timestamp": 1484669056399.49,
     "coords": {
           "accuracy": 5,
           "altitude": 0,
           "altitudeAccuracy": -1,
           "heading": -1,
           "latitude": 37.785834,
          "longitude": -122.406417,
          "speed": -1
     }
}

The error callback will be passed a standard error message.

The config object has

  • enableHighAccuracy (boolean)— which allows you to get the most accurate location.
  • timeout (milliseconds)— how long does the API have to return the position before throwing an error?
  • maximumAge (milliseconds) — if a location exists in the device cache, how old can it be before it’s no longer valuable to your app?

Example

Here we are discussing one example in which we will try to find out the current position of mobile( latitude,longitude).In our project there are two file:

  1. index.js
  2. 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 { Container, Header, Content, Card, CardItem, Body, Text } from 'native-base';

class App extends Component {
constructor(props) {
super(props);

this.state = {
latitude: null,
longitude: null,
error: null,
};
}

componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
);
}

render() {
return (
<Container>
<Content>
<Card>
<CardItem style={{backgroundColor:'grey'}}>
<Body>
<Text>Latitude: {this.state.latitude}</Text>
<Text>Longitude: {this.state.longitude}</Text>
{this.state.error ? <Text>Error: {this.state.error}</Text> : null}
</Body>
</CardItem>
</Card>
</Content>
</Container>
);
}
}

export default App;
Explaination of App.js :

In this code we are importing some component from native base ,so we need to add this dependency in our project as follow:

npm install native-base --save

and

react-native link

In App class we have constructor and two function namely  componentDidMount() and render()

constructor
constructor(props) {
super(props);

this.state = {
latitude: null,
longitude: null,
error: null,
};
}

In this constructor initial value of latitude, longitude and error are define to null.

componentDidMount() method:
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
);
}

The componentDidMount() method is  called at the time of  initializing of a component .so when this method is called we find the location of mobile by calling getCurrentPosition() method as shown above in code.

 

navigator.geolocation.getCurrentPosition() has three argument
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
}

This is a  success callback parameter of getCurrentPosition() method ,we are collecting result in position .

and position object look like:

{
    "timestamp": 1484669056399.49,
     "coords": {
           "accuracy": 5,
           "altitude": 0,
           "altitudeAccuracy": -1,
           "heading": -1,
           "latitude": 37.785834,
          "longitude": -122.406417,
          "speed": -1
     }
}

from this position object we collect the latitude and longitude as follow:

position.coords.latitude

position.coords.longitude

These values are assign to latitude and longitude of App class by following code

this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
(error) => this.setState({ error: error.message })

This is the second argument of getCurrentPosition() method ,and this is an error callback parameter of method ,in this we are collecting error in error if it occur. and with the help of setState() method ,we are storing the error message into error of App class.

{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }

This is the third argument of getCurrentPosition() method, a configuration object, in this we are suppling three value   enableHighAccuracy: true, timeout: 20000, maximumAge: 1000.

render() {
return (
<Container>
<Content>
<Card>
<CardItem style={{backgroundColor:'grey'}}>
<Body>
<Text>Latitude: {this.state.latitude}</Text>
<Text>Longitude: {this.state.longitude}</Text>
{this.state.error ? <Text>Error: {this.state.error}</Text> : null}
</Body>
</CardItem>
</Card>
</Content>
</Container>
);
}
}

In this render method we are creating a card and on this card we are printing the location of mobile in terms of latitude and longitude if error is null otherwise we print the error on screen of mobile.

So this about all about React Native Geolocation- GPS. If you phase any  problem in implementing please let us know by commenting below.

Want GIS application – Please contact us at juhi@engineerphilosophy.com

More on GIS –

Create Heat Map – IGISMap Tool Now MAPOG

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 GIS MapOG HeatMAP Tool.

Create Heat Map – GIS MapOG 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 GIS MapOG Heat 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

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.

We have an Online GIS Data Convert Tool Platform

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 converterMAPOG Converter is an online tool to convert GIS data from one format to another format.

MAPOG 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.

MAPOG 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 MAPOG 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 :

Download Indonesia Administrative Boundary Shapefiles – Provinces, Districts, Sub Districts and more

Hello GIS enthusiasts, IGISMAP has now published the latest GIS vector data of Indonesia administrative levels. Links for downloading the shapefiles of the important administrative divisions of Indonesia are provided in the following. You can also download these data in KML, GeoJSON or CSV formats. 

Note:

  • All data available are in GCS datum EPSG:4326 WGS84 CRS (Coordinate Reference System).
  • You need to login for downloading the shapefile.

Download Free Shapefile Data of Indonesia

Indonesia, officially the Republic of Indonesia, is a country in Southeast Asia and Oceania between the Indian and Pacific oceans. It consists of over 17,000 islands, including Sumatra, Java, Sulawesi, and parts of Borneo and New Guinea. Indonesia is the world’s largest island country and the 14th-largest country by area, at 1,904,569 square kilometres (735,358 square miles).

Indonesia National Boundary
Indonesia National Boundary

Download Indonesia National Outline Boundary Shapefile

Download Indonesia Province Shapefile Data

Below Polygon of Indonesia shapefile covers 34 provinces –

  1. Aceh
  2. North Sumatra
  3. West Sumatra
  4. Riau
  5. Riau Archipelago/Islands
  6. Jambi
  7. Bengkulu
  8. South Sumatra
  9. Bangka Belitung Islands
  10. Lampung
  11. Banten
  12. Jakarta
  13. West Java
  14. Central Java
  15. Yogyakarta
  16. East Java
  17. Bali
  18. West Nusa Tenggara
  19. East Nusa Tenggara
  20. West Kalimantan
  21. Central Kalimantan
  22. South Kalimantan
  23. East Kalimantan
  24. North Kalimantan
  25. North Sulawesi
  26. Gorontalo
  27. Central Sulawesi
  28. West Sulawesi
  29. South Sulawesi
  30. Southeast Sulawesi
  31. North Maluku
  32. Maluku (The Moluccas)
  33. West Papua
  34. Papua
Indonesia Province Boundaries
Indonesia Province Boundaries

Download Indonesia Province Boundaries Shapefile

Download Indonesia District Shapefile Data

Indonesia District Boundaries
Indonesia District Boundaries

Download Indonesia District Boundaries Shapefile

Download Indonesia Sub District Shapefile Data

Indonesia Sub District Boundaries
Indonesia Sub District Boundaries

Download Indonesia Sub District Boundaries Shapefile

Other GIS Data:

Convert Indonesia Shapefile SHP to KML

For Indonesia SHP to KML conversion go to MAPOG Tool and follow the steps for Indonesia Shapefile SHP to KML file conversion.

Convert Indonesia KML to Indonesia Shapefile

For Indonesia KML conversion login at mapanalysis.mapog.com and follow the steps for KML to Shapefile SHP.

Download Free Shapefile for the following:

  1. World Countries Shapefile
  2. Australia
  3. Argentina
  4. Austria
  5. Belgium
  6. Brazil
  7. Canada
  8. Denmark
  9. Fiji
  10. Finland
  11. Germany
  12. Greece
  13. India
  14. Indonesia
  15. Ireland
  16. Italy
  17. Japan
  18. Kenya
  19. Lebanon
  20. Madagascar
  21. Malaysia
  22. Mexico
  23. Mongolia
  24. Netherlands
  25. New Zealand
  26. Nigeria
  27. Papua New Guinea
  28. Philippines
  29. Poland
  30. Russia
  31. Singapore
  32. South Africa
  33. South Korea
  34. Spain
  35. Switzerland
  36. Tunisia
  37. United Kingdom Shapefile
  38. United States of America
  39. Vietnam
  40. Croatia
  41. Chile
  42. Norway

Disclaimer : If you find any shapefile data of country provided is in correct do contact us or comment below, so that we will correct the same in our system.

Download Argentina Administrative Boundary Shapefiles – Provinces, Departmentos, Municipalities and more

Hello GIS enthusiasts, IGISMAP has now published the latest GIS vector data of Argentina administrative levels. Links for downloading the shapefiles of the important administrative divisions of Argentina are provided in the following. You can also download these data in KML, GeoJSON or CSV formats. 

Note:

  • All data available are in GCS datum EPSG:4326 WGS84 CRS (Coordinate Reference System).
  • You need to login for downloading the shapefile.

Download Free Shapefile Data of Argentina

Argentina, officially the Argentine Republic, is a country in the southern half of South America. Argentina covers an area of 2,780,400 km2 (1,073,500 sq mi), making it the largest Spanish-speaking nation in the world by area. It is the second-largest country in South America after Brazil, the fourth-largest country in the Americas, and the eighth-largest country in the world. It shares the bulk of the Southern Cone with Chile to the west, and is also bordered by Bolivia and Paraguay to the north, Brazil to the northeast, Uruguay and the South Atlantic Ocean to the east, and the Drake Passage to the south. Argentina is a federal state subdivided into twenty-three provinces, and one autonomous city, which is the federal capital and largest city of the nation, Buenos Aires. The provinces and the capital have their own constitutions, but exist under a federal system. Argentina claims sovereignty over a part of Antarctica, the Falkland Islands and South Georgia and the South Sandwich Islands.

Argentina National Boundary
Argentina National Boundary

Download Argentina National Outline Boundary Shapefile

Download Argentina Province Shapefile Data

Polygon Shapefile of Argentina Covers – Autonomous City of Buenos Aires, Buenos Aires, Buenos Aires, Santa Fe, Mendoza, Tucumán, Salta, Entre Ríos, Misiones, Chaco, Corrientes, Santiago del Estero, San Juan, Jujuy, Río Negro, Neuquén, Formosa, Chubut, San Luis, Catamarca, La Rioja, La Pampa, Santa Cruz, Tierra del Fuego.

Argentina Province Boundaries
Argentina Province Boundaries

Download Argentina Province Boundaries Shapefile

Download Argentina Departmentos Shapefile Data

Argentina Departmento Boundaries
Argentina Departmento Boundaries

Download Argentina Departmento Boundaries Shapefile

Download Argentina Municipality Shapefile Data

Argentina Municipality Boundaries
Argentina Municipality Boundaries

Download Argentina Municipality Boundaries Shapefile

Please note that the Argentina data provided here is license under Open Data Commons Open Database License (ODbL). Please review the same before using it. If you want data under different license you can also look over to the post : Download Free Shapefile Maps – Country Boundary Polygon, Rail-Road, Water polyline etc.

Download GIS Data for other countries From Here

Other GIS Data:

Download Free Shapefile for the following:

  1. World Countries Shapefile
  2. Australia
  3. Argentina
  4. Austria
  5. Belgium
  6. Brazil
  7. Canada
  8. Denmark
  9. Fiji
  10. Finland
  11. Germany
  12. Greece
  13. India
  14. Indonesia
  15. Ireland
  16. Italy
  17. Japan
  18. Kenya
  19. Lebanon
  20. Madagascar
  21. Malaysia
  22. Mexico
  23. Mongolia
  24. Netherlands
  25. New Zealand
  26. Nigeria
  27. Papua New Guinea
  28. Philippines
  29. Poland
  30. Russia
  31. Singapore
  32. South Africa
  33. South Korea
  34. Spain
  35. Switzerland
  36. Tunisia
  37. United Kingdom Shapefile
  38. United States of America
  39. Vietnam
  40. Croatia
  41. Chile
  42. Norway

Disclaimer : If you find any shapefile data of country provided is in correct do contact us or comment below, so that we will correct the same in our system.

Download Tunisia GIS Data – Provinces, Highway Lines, Airport Locations and More

Hello GIS enthusiasts, IGISMAP has now published the latest GIS vector data of Tunisia administrative levels. Links for downloading the shapefiles of the important administrative divisions of Tunisia are provided in the following. You can also download these data in KML, GeoJSON or CSV formats. 

Note:

  • All data available are in GCS datum EPSG:4326 WGS84 CRS (Coordinate Reference System).
  • You need to login for downloading the shapefile.

Download Free Shapefile Data of Tunisia

Tunisia, officially the Republic of Tunisia, is the northernmost country in Africa. It is a part of the Maghreb region of North Africa, and is bordered by Algeria to the west and southwest, Libya to the southeast, and the Mediterranean Sea to the north and east, covering 163,610 km2 (63,170 sq mi), with a population of 11 million. It contains the eastern end of the Atlas Mountains and the northern reaches of the Sahara desert, with much of its remaining territory being arable land. Its 1,300 km (810 mi) of coastline include the African conjunction of the western and eastern parts of the Mediterranean Basin. Tunisia is home to Africa’s northernmost point, Cape Angela; and its capital and largest city is Tunis, located on its northeastern coast, which lends the country its name.

Tunisia National Boundary
Tunisia National Boundary

Download Tunisia National Outline Boundary Shapefile

Download Tunisia Province Shapefile Data

It Covers Ariana, Beja, Ben Arous, Bizerte, El Kef, Gabes, Gafsa, Jendouba, Kairouan, Kasserine, Kebili, Mahdia, Manouba, Medenine, Monastir, Nabeul, Sfax, Sidi Bouzid, Siliana, Sousse, Tataouine, Tozeur, Tunis and Zaghouan.

Tunisia Province Boundaries
Tunisia Province Boundaries

Download Tunisia Province Boundaries Shapefile

Download Tunisia Highway Lines Shapefile Data

Tunisia Highway Lines
Tunisia Highway Lines

Download Tunisia Highway Line Shapefile

Above shown image is the zoomed in image of the highway line vector data of Tunisia

Download Tunisia Airport Points Shapefile Data

Tunisia Airport Locations
Tunisia Airport Locations

Download Tunisia Airport Locations Shapefile

Please note that the Tunisia data provided here is license under Open Data Commons Open Database License (ODbL). Please review the same before using it. If you want data under different license you can also look over to the post : Download Free Shapefile Maps – Country Boundary Polygon, Rail-Road, Water polyline etc

Download Free Shapefile for the following:

  1. World Countries Shapefile
  2. Australia
  3. Argentina
  4. Austria
  5. Belgium
  6. Brazil
  7. Canada
  8. Denmark
  9. Fiji
  10. Finland
  11. Germany
  12. Greece
  13. India
  14. Indonesia
  15. Ireland
  16. Italy
  17. Japan
  18. Kenya
  19. Lebanon
  20. Madagascar
  21. Malaysia
  22. Mexico
  23. Mongolia
  24. Netherlands
  25. New Zealand
  26. Nigeria
  27. Papua New Guinea
  28. Philippines
  29. Poland
  30. Russia
  31. Singapore
  32. South Africa
  33. South Korea
  34. Spain
  35. Switzerland
  36. Tunisia
  37. United Kingdom Shapefile
  38. United States of America
  39. Vietnam
  40. Croatia
  41. Chile
  42. Norway

Disclaimer : If you find any shapefile data of country provided is in correct do contact us or comment below, so that we will correct the same in our system as well we will try to correct the same in openstreetmap.

Download Lebanon Administrative Boundary Shapefiles – Governorates, Districts, Municipalities and more

Hello GIS enthusiasts, IGISMAP has now published the latest GIS vector data of Lebanon administrative levels. Links for downloading the shapefiles of the important administrative divisions of Lebanon are provided in the following. You can also download these data in KML, GeoJSON or CSV formats. 

Note:

  • All data available are in GCS datum EPSG:4326 WGS84 CRS (Coordinate Reference System).
  • You need to login for downloading the shapefile.

Download Free Shapefile Data of Lebanon

Lebanon, officially the Republic of Lebanon or the Lebanese Republic, is a country in Western Asia. It is located between Syria to the north and east and Israel to the south, while Cyprus lies to its west across the Mediterranean Sea; its location at the crossroads of the Mediterranean Basin and the Arabian hinterland has contributed to its rich history and shaped a cultural identity of religious diversity. It is part of the Levant region of the Middle East. Lebanon is home to roughly six million people and covers an area of 10,452 square kilometres (4,036 sq mi), making it one of the smallest countries in the world.

Lebanon National Boundary
Lebanon National Boundary

Download Lebanon National Outline Boundary Shapefile

Download Lebanon Governorates Shapefile Data

Lebanon is divided into 8 Governorates; Akkar, Baalbeck-Hermel, Beirut, Bekaa, Mount Lebanon, North Lebanon, Nabatiyeh, and South Lebanon. The Governorate (Muhafazah) is considered an administrative division of the country.

Lebanon Governorates Boundaries
Lebanon Governorates Boundaries

Download Lebanon Governorates Boundaries Shapefile

Download Lebanon Districts Shapefile Data

Lebanon District Boundaries
Lebanon District Boundaries

Download Lebanon District Boundaries Shapefile

Download Lebanon Sub Districts Shapefile Data

Lebanon Sub Districts

Download Lebanon Sub District Boundaries Shapefile

Please note that the Lebanon data provided here is license under Open Data Commons Open Database License (ODbL). Please review the same before using it. If you want data under different license you can also look over to the post : Download Free Shapefile Maps – Country Boundary Polygon, Rail-Road, Water polyline etc

Other GIS Data:

Download Free Shapefile for the following:

  1. World Countries Shapefile
  2. Australia
  3. Argentina
  4. Austria
  5. Belgium
  6. Brazil
  7. Canada
  8. Denmark
  9. Fiji
  10. Finland
  11. Germany
  12. Greece
  13. India
  14. Indonesia
  15. Ireland
  16. Italy
  17. Japan
  18. Kenya
  19. Lebanon
  20. Madagascar
  21. Malaysia
  22. Mexico
  23. Mongolia
  24. Netherlands
  25. New Zealand
  26. Nigeria
  27. Papua New Guinea
  28. Philippines
  29. Poland
  30. Russia
  31. Singapore
  32. South Africa
  33. South Korea
  34. Spain
  35. Switzerland
  36. Tunisia
  37. United Kingdom Shapefile
  38. United States of America
  39. Vietnam
  40. Croatia
  41. Chile
  42. Norway

Disclaimer : If you find any shapefile data of country provided is in correct do contact us or comment below, so that we will correct the same in our system.