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 Singapore Administrative Boundary Shapefiles – Regions, Community Development Councils, Electoral Boundaries and more

Hello GIS enthusiasts, IGISMAP has now published the latest GIS vector data of Singapore administrative levels. Links for downloading the shapefiles of the important administrative divisions of Singapore 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 Singapore

Singapore, officially the Republic of Singapore, is a sovereign island country and city-state in maritime Southeast Asia. It lies about one degree of latitude (137 kilometers or 85 miles) north of the equator, off the southern tip of the Malay Peninsula, bordering the Strait of Malacca to the west, the Singapore Strait to the south, the South China Sea to the east and the Straits of Johor to the north. The country’s territory is composed of one main island, 63 satellite islands and islets, and one outlying islet, the combined area of which has increased by 25% since the country’s independence as a result of extensive land reclamation projects. It has the third highest population density in the world.

Singapore National Boundary
Singapore National Boundary

Download Singapore National Outline Boundary Shapefile

Download Singapore Regions Shapefile Data

The regions of Singapore are urban planning subdivisions demarcated by the Urban Redevelopment Authority of Singapore to aid in its planning efforts. Over time, other governmental organizations have also adopted the five regions in their administrative work. These regions are:

  • West Region
  • North Region
  • North East Region
  • East Region
  • Central Region
Singapore Region Boundary
Singapore Region Boundary

Download Singapore Region Boundaries Shapefile

Download Singapore Community Development Councils Shapefile Data

The Community Development Council or CDC is a government-led program to organize grassroot organizations and community programs into smaller, local units as a bridge between the government and the community in Singapore. It encourages volunteerism from wider community, and organizes community and social assistance programs with the help of a monetary grant from the government.

In 2001, the 9 districts and CDCs were then reformed into 5 CDCs, namely:

  • North East CDC
  • North West CDC
  • South East CDC
  • South West CDC
  • Central Singapore CDC
Singapore CDC Boundaries
Singapore CDC Boundaries

Download Singapore CDC Boundaries Shapefile

Other Administrative Boundaries GIS Data:

You can also do Query on this shapefile (GIS Data) using MAPOG Tool

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.

Convert TAB file to KML file

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. We will help you to convert your TAB file to a KML file online using MapOG Online Tab file to KML file Converter.

IGIS Map Converter

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

IGISMAP to Convert TAB to KML

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

There are three main steps for using GIS Converter:

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

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

Upload TAB
Upload TAB

Once the file is upload is completed, select the output file format that we want to convert it into i.e. KML.

Select KML as Output Format
Select KML as Output Format

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

Download and Publish KML File
Download and Publish KML File

Now click the Convert file button to convert the data file formats And Your TAB file will then gets converted to KML after a few seconds and will be available for downloading.
Now, you can also publish your KML file as map to see the content in the file or to check the conversion.

So, this is all about the TAB to KML conversion. We try our best with pictorial representation of steps of conversion. If still you are facing any problem then contact us or comment below.

IGIS Map Tool Other Conversions

If you are facing any problem in conversion or login then please let us know by mailing at support@igismap.com or drop comment.

Query GIS Data – IGIS Map Tool – Now known as MAPOG

To Query GIS Data easily with IGIS map tool, we can use the Query tool.  A GIS query tool, or selection tool as it is often know, allows us to filter a dataset based on criteria that we define.

Querying in IGIS Map Tool allows user to explore your data with rule based queries. User can discover their features of interest contained within the map by querying. IGIS Map tool allow users to build their own queries that we may not have envisaged when we first created the map. It also query GIS data according to their choice.

Query GIS Data – MapOG Tool

Query tools allow maps users to do more than what the map maker envisioned when they styled the layers. Here are the few steps to be followed for querying the map.

Query GIS data

  • Upload dataset and create a new map project Or Open your existing map project.
  • Or Download GIS data for analysis

Query GIS Data

  • Select the “Query tool” option on the Analysis Section.

  • Select the Layer to query GIS data.

Query GIS Data

All the layers in your map are available in this section, you just need to select the layer in which you want to query in.

  • Confirm a shape i.e. circle , rectangle or polygon to draw a query.

User just need to select the shape and start drawing the shape on the map to query the data. similarly as above image shows the queried data as highlighted which is queried by a rectangle.

  • Click on the Get result button after drawing the shape. You can view the result in as tables and also download them as CSV Format.

Query GIS Data

This is how you can Query GIS Data with the IGIS Map Tool in a minute. Query tools allow maps users to do more than what the map maker envisioned when they styled the layers.

IGIS Map Query Tool can be used in various sectors like Insurance, Banking, Risk Management etc. There are also other query tools available in the market.  mapOG tool however, is a much better choice to Query GIS Data if you want to share your maps with a larger, more distributed audience.

This may help you to Query GIS Data with IGIS Map Tool. If you find any problem in creating one such example do let us know by commenting below.

Download New Zealand Administrative Boundary Shapefiles – Regional Councils, Territorial Authorities, Wards and more

Hello GIS enthusiasts, IGISMAP has now published the latest GIS vector data of New Zealand administrative levels. Links for downloading the shapefiles of the important administrative divisions of New Zealand 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.
  • Most of following administrative GIS data are provided in both digital and cartographic extends
    • Digital boundary – Polygon boundary data covering low level waterbodies
    • Cartographic boundary – Polygon boundary data covering only land areas excluding all levels of waterbodies

Download Free Shapefile Data of New Zealand

New Zealand is an island country in the southwestern Pacific Ocean. It consists of two main landmasses—the North Island and the South Island and over 700 smaller islands. It is the sixth-largest island country by area, covering 268,021 square kilometers (103,500 sq mi). New Zealand is about 2,000 kilometers (1,200 mi) east of Australia across the Tasman Sea and 1,000 kilometers (600 mi) south of the islands of New Caledonia, Fiji, and Tonga. The country’s varied topography and sharp mountain peaks, including the Southern Alps, owe much to tectonic uplift and volcanic eruptions. New Zealand’s capital city is Wellington, and its most populous city is Auckland.

New Zealand National Boundary
New Zealand National Boundary

Download New Zealand National Boundary Shapefile

Download New Zealand National Cartographic Boundary Shapefile

Download New Zealand Regional Councils Shapefile Data

New Zealand is divided into 17 regions for local government purposes.

New Zealand Regional Council Boundaries
New Zealand Regional Council Boundaries

Download New Zealand Regional Council Boundaries Shapefile

Download New Zealand Regional Council Cartographic Boundaries Shapefile

Download New Zealand Territorial Authorities Shapefile Data

Territorial authorities are the second tier of local government in New Zealand, below regional councils. There are 67 territorial authorities: 13 city councils, 53 district councils and the Chatham Islands Council.

New Zealand Territorial Authority Boundaries
New Zealand Territorial Authority Boundaries

Download New Zealand Territorial Authority Boundaries Shapefile

Download New Zealand Territorial Authority Cartographic Boundaries Shapefile

Download New Zealand Wards Shapefile Data

New Zealand Ward Boundaries
New Zealand Ward Boundaries

Download New Zealand Ward Boundaries Shapefile

Download New Zealand Ward Cartographic Boundaries Shapefile

Other Administrative Shapefile Data:

Other GIS Data:

Please note that the New Zealand 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.