How to draw a polygon from a json file?

I am trying to draw a polygon on google map from a geo json file. i know how can i draw path from few coordinate but i am unable to draw this from google map

I am trying to draw a polygon on google map from a geo json file. i know how can i draw path from few coordinate but i am unable to draw this from google map

Here is my JSON file

 {
"type": "Polygon",
"coordinates": [
    [
        [
            90.35087585449219,
            23.87767555995429
        ],
        [
            90.35293579101562,
            23.877832529038052
        ],
    [
        90.45867919921875,
        23.662449542924175
    ],
    [
        90.45455932617188,
        23.66103447347277
    ],
    [
        90.35053253173828,
        23.872966398925893
    ],
    [
        90.35018920898438,
        23.87516402872517
    ],
    [
        90.35087585449219,
        23.87767555995429
    ]
]

]
}

How can i draw polygon form this json ? i want it dynamic way not static way also for google map

Thanks

GIF Image as Marker in Google Map for iOS (Swift)

I've this gif image:

I've this gif image:

 

I am able to add a custom static image as marker using the following code:

if let location = locationManager.location {
            currentLocationMarker = GMSMarker(position: location.coordinate)
            currentLocationMarker?.icon = UIImage(named: "user")
            currentLocationMarker?.map = mapView
            currentLocationMarker?.rotation = locationManager.location?.course ?? 0
        }

I want to use this gif image as marker. Is there anyway? Though I know static images are encouraged but is there a possibility?

I was thinking of adding a UIView say a 100x100 view and animating this icon in it, haven't tried it but I tried the solution mentioned in this thread: How to load GIF image in Swift? as:

let jeremyGif = UIImage.gifImageWithName("puppy")
let imageView = UIImageView(image: jeremyGif)
imageView.frame = CGRect(x: 0, y: 0, width: jeremyGif?.size.width ?? 100.0, height: jeremyGif?.size.height ?? 100.0)
//view.addSubview(imageView)
//mapView.addSubview(imageView)

if let location = locationManager.location {
currentLocationMarker = GMSMarker(position: location.coordinate)
currentLocationMarker?.icon = imageView.image //UIImage(named: "user")
currentLocationMarker?.map = mapView
currentLocationMarker?.rotation = locationManager.location?.course ?? 0
}

but doing so also doesn't work. I've added this gif image in assets and this is how it appears in it:


React Apps with the Google Maps API and google-maps-react

React Apps with the Google Maps API and google-maps-react

This tutorial aims at integrating the google maps API to your React components and enabling you to display maps on your website.

This tutorial aims at integrating the google maps API to your React components and enabling you to display maps on your website.

Introduction to Google Maps API.

At some point of our lives, we’ve all gotten a chance to use and interact with the google maps, either through finding directions, viewing our current location, ordering cabs or estimating distance and time from one point to another.

Table of Contents

Including the Google maps API in a React App is actually far much easier than expected due to its rich documentation which I highly suggest that you look into, and the npm package by Fullstack React.

Prerequisite:

Go on ahead and grab your API key here.

  1. Simply click on the Get Started button
  2. Tick on the maps checkbox
  3. Click Create A New Project
  4. Once you’ve named your project (whatever you want) you can set up your billing info which will automatically enable your the API and generate the API key.

PS: Do not be hesitant of adding your billing info as the Google cloud platform offers you a 12-month free trial period and will not bill you after the trial period until you give your permission.

Project Setup

For some quick setup, we are going to use facebook’s create-react-app which saves us the hassle of having to configure webpack or babel.

So go on ahead and run this command

npm i -g create-react-app
create-react-app my-googlemap
cd my-googlemap

Before we add any code, let’s go ahead and install our dependency.

npm install --save google-maps-react

Let’s go on and edit our src folder and remove files and imports that we do not need ie

  1. Simply click on the Get Started button
  2. Tick on the maps checkbox
  3. Click Create A New Project
  4. Once you’ve named your project (whatever you want) you can set up your billing info which will automatically enable your the API and generate the API key.

Time to create our component.

We will need to edit our App.js file and instead have our component that will load our google map.

import React, { Component } from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '100%'
};

export class MapContainer extends Component {
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={{
         lat: -1.2884,
         lng: 36.8233
        }}
      />
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'YOUR_GOOGLE_API_KEY_GOES_HERE'
})(MapContainer);

For a simple Google Map, this is literally all the code you need. Go ahead and run your app and ensure that the map loads to the browser.

PS: Do not be hesitant of adding your billing info as the Google cloud platform offers you a 12-month free trial period and will not bill you after the trial period until you give your permission.
The GoogleApiWrapper is simply a Higher Order Component(HOC) that provides wrapper around Google APIs. Alternatively, the GoogleApiWrapper HOC can be configured by passing a function that will be called with the wrapped component’s props and should return the configuration object like so.

export default GoogleApiWrapper(
  (props) => ({
    apiKey: props.apiKey
  }
))(MapContainer)

Markers and infoWindow

Wouldn’t it be exciting to have a Marker and an infoWindow on our map showing our set initialCenter position? So let’s add this functionality to our code.

First we need to import Marker and infoWindow components from the google-maps-react library inorder to help us achieve loading of the two.

import { GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';

Notice that our component before was stateless?, We need to add state for state management.

[...]

export class MapContainer extends Component {
   state = {
    showingInfoWindow: false,  //Hides or the shows the infoWindow
    activeMarker: {},          //Shows the active marker upon click
    selectedPlace: {}          //Shows the infoWindow to the selected place upon a marker
  };

Next, we need to add event handlers for when the map and the marker are clicked.

  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });

  onClose = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };

PS: Do not be hesitant of adding your billing info as the Google cloud platform offers you a 12-month free trial period and will not bill you after the trial period until you give your permission.* Prerequisite:

Let’s complete our component by adding our Marker and InfoWindow components to our render method

  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={style}
        initialCenter={{ lat: -1.2884, lng: 36.8233 }
      >
        <Marker
          onClick={this.onMarkerClick}
          name={'Kenyatta International Convention Centre'}
        />
        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            <h4>{this.state.selectedPlace.name}</h4>
          </div>
        </InfoWindow>
      </Map>
    );
  }
}

[...]

Run your app and ensure you have the one marker with the infoWindow upon click.

Browser’s current location

Let’s spice things up by having our map pick our browser’s current location. We will be using navigator which is a read-only property that returns a Geolocation object that gives Web content access to the location of the device.

In our src folder create a new file and name it Map.js and create a component named CurrentLocation this is where all our functionality to pick our browser’s location will lie.

We will begin by adding some default props to our CurrentLocation component, since we will need to set the map with a center incase the current location is not provided.This is handled by the boolean prop centerAroundCurrentLocation

import React from 'react';
import ReactDOM from 'react-dom';

const mapStyles = {
  map: {
    position: 'absolute',
    width: '100%',
    height: '100%'
  }
};

export class CurrentLocation extends React.Component {

[...]

}
export default CurrentLocation;

CurrentLocation.defaultProps = {
  zoom: 14,
  initialCenter: {
    lat: -1.2884,
    lng: 36.8233
  },
  centerAroundCurrentLocation: false,
  visible: true
};

Next, we need to make our component stateful,

[...]

export class CurrentLocation extends React.Component {
  constructor(props) {
    super(props);

    const { lat, lng } = this.props.initialCenter;
    this.state = {
      currentLocation: {
        lat: lat,
        lng: lng
      }
    };
  }

[...]

}

Let’s also update our CurrentLocation component to cater for the instance when the Map is first loaded as we cannot solely depend upon the google API being always available, hence we need to check if it’s loaded. And also check if the browser’s current location is provided and recenter the map to it.

[...]

componentDidUpdate(prevProps, prevState) {
    if (prevProps.google !== this.props.google) {
      this.loadMap();
    }
    if (prevState.currentLocation !== this.state.currentLocation) {
      this.recenterMap();
    }
  }

[...]

Let’s define the recenterMap() function which only gets called when the currentLocation in the component’s state is updated and uses the .panTo() method on the google.maps.Map instance to change the center of the map.

[...]

 recenterMap() {
    const map = this.map;
    const current = this.state.currentLocation;

    const google = this.props.google;
    const maps = google.maps;

    if (map) {
      let center = new maps.LatLng(current.lat, current.lng);
      map.panTo(center);
    }
  }

[...]

Next, we need to handle the instance when the map has already loaded.This will be handled by the componentDidMount() Lifecycle method which will set a call back to fetch the current location.

[...]

 componentDidMount() {
    if (this.props.centerAroundCurrentLocation) {
      if (navigator && navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(pos => {
          const coords = pos.coords;
          this.setState({
            currentLocation: {
              lat: coords.latitude,
              lng: coords.longitude
            }
          });
        });
      }
    }
    this.loadMap();
  }

[...]

Notice the loadMap() function? Let’s go on ahead and define it.

[...]

loadMap() {
    if (this.props && this.props.google) {
      // checks if google is available
      const { google } = this.props;
      const maps = google.maps;

      const mapRef = this.refs.map;

      // reference to the actual DOM element
      const node = ReactDOM.findDOMNode(mapRef);

      let { zoom } = this.props;
      const { lat, lng } = this.state.currentLocation;
      const center = new maps.LatLng(lat, lng);
      const mapConfig = Object.assign(
        {},
        {
          center: center,
          zoom: zoom
        }
      );

      // maps.Map() is constructor that instantiates the map
      this.map = new maps.Map(node, mapConfig);
    }
  }

Basically, the loadMap() function is only called after the component has been rendered and grabs a reference to the DOM component to where we want our map to be placed.

Our CurrentLocation component is almost looking up, But we need to ensure that our previous Marker picks our currenct location ie the browsers current location and so we need to introduce Parent-Child concept through the renderChildren() method which will be responsible for actually calling the method on the child component.

Read more about Parent-Child communication here

[...]

 renderChildren() {
    const { children } = this.props;

    if (!children) return;

    return React.Children.map(children, c => {
      if (!c) return;
      return React.cloneElement(c, {
        map: this.map,
        google: this.props.google,
        mapCenter: this.state.currentLocation
      });
    });
  }

[...]

And finally, let’s add our render() method

[...]

render() {
     const style = Object.assign({}, mapStyles.map);
    return (
      <div>
        <div style={style} ref="map">
          Loading map...
        </div>
        {this.renderChildren()}
      </div>
    );
  }

[...]

Lastly, before we wind up we need to update our MapContainer component to include our new changes. So let’s change it to this

import React, { Component } from 'react';
import { GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';

import CurrentLocation from './Map';

export class MapContainer extends Component {
  state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {}
  };

  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });

  onClose = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };

  render() {
    return (
      <CurrentLocation
        centerAroundCurrentLocation
        google={this.props.google}
      >
        <Marker onClick={this.onMarkerClick} name={'current location'} />
        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            <h4>{this.state.selectedPlace.name}</h4>
          </div>
        </InfoWindow>
      </CurrentLocation>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'YOUR_GOOGLE_API_KEY_GOES_HERE'
})(MapContainer);

Run your app; heading over to our browser, our map should first load with our initialCenter then reload to pick our browser’s current location with the marker positioned to this location and Voilà we are done.

Conclusion

In this article we’ve been able to load our google maps React component, add a marker and have an infoWindow onto it and also have the map pick our current location. While we did not dive into adding more functionalities to our map such as, having polylines and polygons or adding event listeners, I highly recommend that you look into them

Learn More

Full Stack Developers: Everything You Need to Know

React Hooks Tutorial for Beginners: Getting Started With React Hooks

Learn React.js for Beginners

Learn React - React Crash Course 2019 - React Tutorial with Examples

React Router: Add the Power of Navigation

React - The Complete Guide (incl Hooks, React Router, Redux)

Modern React with Redux [2019 Update]

React Native - The Practical Guide

iOS App Development: How Apple's iOS 13 & Swift 5 Will Change App Development Industry

iOS App Development: How Apple's iOS 13 & Swift 5 Will Change App Development Industry

Want to know how Apple's iOS 13 & Swift 5 will change the iOS app development industry? Refer to this blog that contains in-detail information on it.

In June this year, Apple announced the release of iOS 13 during the annual WWDC event along with a bunch of other releases and launches. The new iOS version- iOS 13, was discussed in detail, and the developer community was given reasons to be excited about the new release.

Dark Mode was one of the most awaited updates that the iPhone users were deprived of. Know more about how to enable dark mode for your iOS application.

Sign in with Apple and updates in background tasks kept the developers counting days. As with every new Apple product, whether it is software or hardware, we all look forward to what’s new in it. The release of iOS13 redefines the way mobile app development occurred today. In fact, the powerful combination of Apple’s iOS 13 and Swift 5 will be akin to Batman and Robin when developing mobile apps for the millennials in a demanding market.

If you have been viewing this space, and looking for an answer to the question – how iOS 13 will change the app development space, then here are some clues.

How iOS 13 and Swift 5 Will Change iOS App Development

  1. Augmented Reality Apps Development with ARKit 2
    Augmented Reality is redefining customer experiences. Remember how Pokemon Go became a rage a few years back? Almost everyone had it installed on their phones. They played it day and night, on the streets, competing to catch virtual Pokemon. In fact, it is the same with all the AR-based app solutions. Apple is making progress with its AR technology and has redefined the ARkit to match the needs of the future.

While the ARKit is getting a refined look, Apple has also announced a new AR technology known as Realitykit which will help the creators of AR apps render photorealistic digital material along with incorporating the right type of animation for the same. The best part of the new AR technology is that it works with Swift 5, which means you can develop AR apps for Mac, iPhone, and iPad with ease.

The company had earlier released headsets for AR app solutions, but the headsets were not connected with iPhone or iPad, however, they were linked to the camera app alone. Things have gradually changed in this department. The announcement of this new technology comes at a time when AR has not only picked up but has also been commanding several applications. This new development technique will enhance how mobile apps were creating experiences until now.

  1. Car Play Apps Development
    This combination will give your car the much-needed upgrade. The new version of CarPlay released with iOS 13 will definitely redefine your in-car experience.

The dashboard is the biggest overhaul this feature has received where you can easily view the current music being played by the stereo, the map showing the route to the destination as well as insights into your destination, all in one place. In fact, the dark/light theme is also available for the car plays dashboard. Basically, the new car play ends an era of switching between two screens and helps enjoy the drive.

The maps have also been revamped for the new version of iOS. You also get a better Siri interface with Carplay, which makes your connection with Siri interesting. Carplay also integrates the calendar app thus, allowing you a quick glance into your day’s appointment. The best part of the upgrade is that your car play screen is independent of the phone screen, which means you can read two different things at the same time.

  1. Machine Learning with Core ML
    The advancements made with CoreML are worth knowing, as it will improve the way you integrate machine learning into your iOS-based mobile apps. The new Core ML 3 will expand the horizons of development and will make it easy for you as a developer to introduce machine learning to the apps.

Apart from ease of development, the next big thing introduced in this version of CoreML is the on-device training. The server side training was done using frameworks such as PyTorch and then these applications were converted to Core ML for better predictions. CoreML3 is the new version that supports both inference and on-device training.

  1. Cloud-Based Apps
    You cannot be slow and demand to become successful at the same time. You ought to accelerate not only your app development process but also how your apps work irrespective of the environment. The cloud-based app solutions are the new feature devised by iOS13 that will work in favour of app developers.

From operations to storage flexibility, the cloud proves to be a brilliant way of getting apps to download faster and improve user experience. iOS13’s introduction of cloud-based apps will not only make app development economical by offering flexible pricing but also improve the functionality of the app solutions.

The new cloud-based app solutions offer an exceptional dashboard thus making data accessible, and pave ways for easy monitoring of the app solutions.

  1. watchOS 6
    With the release of iOS13, the watchOS6 will also be released. The new watchOS will come with shortcuts, custom controls, an upgraded Siri and an audio app. The new OS is also set to launch new health features for the fitness apps that you may develop.

The app store has already defined app solutions that can be used with watchOS6. One is the cycle tracking app which helps women track their menstrual cycles while the other app solution is the noise app which measures the level of noise in your environment.

  1. Increased security
    App developers are always concerned about security within the apps. There is always a fear of user accounts getting hacked or their data being stolen. They want to ensure that there is enough security so that the users feel safe when connecting with the apps. The new version of iOS has strengthened app security. The company will be using App Transport Security to incorporate new security standards whenever they are releasing a new app. The app developers will need to ensure that there is a single channel for all interactions with the mobile app.