How to display Popups on a Mapbox Map — Mapbox/React Tutorial Part 3

This is part 3 (and the last one) of a multi-part React tutorial on Mapbox.

In part 1, we simply focus on displaying a map and adding a geocoder to look up addresses. We even managed to re-center our map to the selected address.

In part 2, we learned how to display markers.

Part 3 will be focusing on popups and removing markers from a map.

_Note: Here is the link to Part 1 in case you missed it. And here is part 2

Let’s get started!

Display a Popup

Once again, we will be using the react-map-gl library which offers a nice Popup component. So I will go ahead and create a CustomPopup component to display the address after clicking on a marker.

import ReactMapGL, {Marker, Popup } from 'react-map-gl';

const CustomPopup = ({index, marker, closePopup}) => {
  return (
    <Popup
      latitude={marker.latitude}
      longitude={marker.longitude}
      onClose={closePopup}
      closeButton={true}
      closeOnClick={false}
      offsetTop={-30}
     >
      <p>{marker.name}</p>
    </Popup>
  )};

Again, thanks to react-map-gl, we get a Popup component which takes lat/long, but also offsetTop (meaning, in this case, I want the popup to appear on top of the marker).

To make it work, we add need an onClick on our markers called openPopup. This function will set which marker was clicked thanks to its unique index.

const CustomMarker = ({index, marker, openPopup}) => {
  return (
    <Marker
      longitude={marker.longitude}
      latitude={marker.latitude}>
      <div className="marker" onClick={() => openPopup(index)}>
        <span><b>{index + 1}</b></span>
      </div>
    </Marker>
)};

And back to our parent component:

constructor(props) {
    super(props);
    this.state = {
      ...,
      selectedIndex: null,
      ...
    };
}
setSelectedMarker = (index) => {
    this.setState({ selectedIndex: index })
}
closePopup = () => {
    this.setSelectedMarker(null)
};
openPopup = (index) => {
    this.setSelectedMarker(index)
}
render() {
  return(
    ...
        {
         this.state.markers.map((marker, index) => {
           return(
             <CustomMarker
               key={`marker-${index}`}
               index={index}
               marker={marker}
               openPopup={this.openPopup}
              />
             )
          })
         }
    ...
  )
}

#javascript #mapbox #reactjs #react

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

Performance: It delivers optimal performance.
Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
UI design: React Native enables you to design simple and responsive UI for your mobile app.
3rd party plugins: This framework supports 3rd party plugins.
Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
Near-native user experience: React Native provides several native components, and these are platform agnostic.
The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Trinity Kub

1594739112

How to display a Mapbox Map and Geocoder — Mapbox/React Tutorial Part 1

This multi-part React tutorial will be covering how to use Mapbox to:

display a map
search an address
add markers
display a popup when clicking on a marker

and even removing a marker.

We will be using create-react-app for our base React app and using the react-map-gl and react-mapbox-gl-geocoder libraries for our map and geocoder respectively. As an option, I will be using reactstrap for styling (in case you are unfamiliar, reactstrap is Bootstrap for React).

1. Create project and install dependencies

First, we will start by setting up our project.

npx create-react-app mapbox-project
cd mapbox-project
npm i react-map-gl react-mapbox-gl-geocoder bootstrap reactstrap
npm start

2. Mapbox key

In order to use Mapbox, you will need an API key. Go to https://www.mapbox.com/ and click on Sign In.

Under the signin form, click on Sign Up for Mapbox. Once you are done signing up, you should be taken to your dashboard. If you weren’t automatically given a token, you can create one by clicking Create a token.

Image for post

#react #programming #tutorial #mapping #mapbox

Trinity Kub

1594912380

How to display Popups on a Mapbox Map — Mapbox/React Tutorial Part 3

This is part 3 (and the last one) of a multi-part React tutorial on Mapbox.

In part 1, we simply focus on displaying a map and adding a geocoder to look up addresses. We even managed to re-center our map to the selected address.

In part 2, we learned how to display markers.

Part 3 will be focusing on popups and removing markers from a map.

_Note: Here is the link to Part 1 in case you missed it. And here is part 2

Let’s get started!

Display a Popup

Once again, we will be using the react-map-gl library which offers a nice Popup component. So I will go ahead and create a CustomPopup component to display the address after clicking on a marker.

import ReactMapGL, {Marker, Popup } from 'react-map-gl';

const CustomPopup = ({index, marker, closePopup}) => {
  return (
    <Popup
      latitude={marker.latitude}
      longitude={marker.longitude}
      onClose={closePopup}
      closeButton={true}
      closeOnClick={false}
      offsetTop={-30}
     >
      <p>{marker.name}</p>
    </Popup>
  )};

Again, thanks to react-map-gl, we get a Popup component which takes lat/long, but also offsetTop (meaning, in this case, I want the popup to appear on top of the marker).

To make it work, we add need an onClick on our markers called openPopup. This function will set which marker was clicked thanks to its unique index.

const CustomMarker = ({index, marker, openPopup}) => {
  return (
    <Marker
      longitude={marker.longitude}
      latitude={marker.latitude}>
      <div className="marker" onClick={() => openPopup(index)}>
        <span><b>{index + 1}</b></span>
      </div>
    </Marker>
)};

And back to our parent component:

constructor(props) {
    super(props);
    this.state = {
      ...,
      selectedIndex: null,
      ...
    };
}
setSelectedMarker = (index) => {
    this.setState({ selectedIndex: index })
}
closePopup = () => {
    this.setSelectedMarker(null)
};
openPopup = (index) => {
    this.setSelectedMarker(index)
}
render() {
  return(
    ...
        {
         this.state.markers.map((marker, index) => {
           return(
             <CustomMarker
               key={`marker-${index}`}
               index={index}
               marker={marker}
               openPopup={this.openPopup}
              />
             )
          })
         }
    ...
  )
}

#javascript #mapbox #reactjs #react

Trinity Kub

1594825860

How to display Markers on a Mapbox Map — Mapbox/React Tutorial Part 2

This is part 2 of a multi-part React tutorial on Mapbox.

In part 1, we simply focus on displaying a map and adding a geocoder to look up addresses. We even managed to re-center our map to the selected address. Note: Here is the link to Part 1 in case you missed it.

While very nice, a map doesn’t quite feel as complete without markers to show us what’s important.

So let’s get started!

Display a marker

We have our map and our geocoder. We can look up addresses and select one.

Let’s now display a marker on that particular address. Our react-map-gl library also comes with a handy Marker component.

import ReactMapGL, { Marker } from 'react-map-gl';

This component will allow us to display a marker if we have selected an address. In our state, we will add a tempMarker set to null and in our onSelected function, we will set tempMarker to the latitude/longitude it returned.

onSelected = (viewport, item) => {
      this.setState({
        viewport,
        tempMarker: {
          name: item.place_name,
          longitude: item.center[0],
          latitude: item.center[1]
        }
      })
}

Then inside our ReactMapGL component, we can display our Marker component:

{ tempMarker &&
    <Marker
      longitude={tempMarker.longitude}
      latitude={tempMarker.latitude}>
      <div className="marker temporary-marker"><span></span></div>
    </Marker>
}

Our Marker component takes a latitude and a longitude along with its content. You can style your marker however you want. I am simply going to use an empty div with some CSS to make it look like a normal marker.

#react #tutorial #programming #mapbox #javascript