DEV Community: dqunbp

Using mapbox-gl in React with Next.js

dqunbp — Thu, 01 Jul 2021 12:41:01 +0000

Introduction

In this article I want to describe the ways I know of embedding mapbox-gl in aReact application, using the example of creating a simple web application containing a map on Next.js using Typescript, the map component code can also be used in any React application

This article is part of a series of articles

Managing mapbox-gl state in React app

I will consider several implementation options using the example of creating a functional map component:

Implementation with keep the map instance inside the React component
Keeping the map instance outside of React

Code snippets info

For comfortable reading of this article, you need to have
basic knowledge of React,Typescript and CSS

All code snippets will be using Typescript, using typing
in javascript is the best practice, so I basically stick to
it where possible, I apologize if you are not familiar with
it, here is a great course from egghead.io where you can read it

I prefer to import React as import * as React from "react" you can read more about this in
great article by Kent C. Dodds

If // ... is encountered in the code, it must be read as
places with missing duplicate code

Preparing the environment

First of all, let's create a new project in Next.js using the Typescript template.



npx create-next-app --typescript my-awesome-app

Let's open the project folder and install the mapbox-gl with types for Typescript



cd my-awesome-app

npm install --save mapbox-gl && npm install -D @type/mapbox-gl

We also need accessToken for mapbox-gl, from environment variable so as not to store it directly in the source code



touch .env.local
echo NEXT_PUBLIC_MAPBOX_TOKEN=<your_token> >> .env.local

This is how your file should look like with environment variable for Next.js

.env.local



NEXT_PUBLIC_MAPBOX_TOKEN=<your_token>

Implementation as a functional `React` component

Preparing styles

Remove unnecessary styles and update the global stylesheet



rm styles/Home.module.css

styles / global.css



html,
body,
#__next {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

To make the height of the application equal to 100% of the window height, set the properties width and height to 100% for html and body

The height must also be specified for the element with the css selector#__ next because in the Next.js application the root element is<div id = "__ next"> ... </div>

Preparing a map component

components/mapbox-map.tsx



import * as React from "react";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css"; 
// import the mapbox-gl styles so that the map is displayed correctly

function MapboxMap() {
    // this is where the map instance will be stored after initialization
  const [map, setMap] = React.useState<mapboxgl.Map>();

    // React ref to store a reference to the DOM node that will be used
  // as a required parameter `container` when initializing the mapbox-gl
  // will contain `null` by default
    const mapNode = React.useRef(null);

  React.useEffect(() => {
    const node = mapNode.current;
        // if the window object is not found, that means
        // the component is rendered on the server
        // or the dom node is not initialized, then return early
    if (typeof window === "undefined" || node === null) return;

        // otherwise, create a map instance
    const mapboxMap = new mapboxgl.Map({
      container: node,
            accessToken: process.env.NEXT_PUBLIC_MAPBOX_TOKEN,
            style: "mapbox://styles/mapbox/streets-v11",
      center: [-74.5, 40],
      zoom: 9,
    });

        // save the map object to React.useState
    setMap(mapboxMap);

        return () => {
      mapboxMap.remove();
    };
  }, []);

    return <div ref={mapNode} style={{ width: "100%", height: "100%" }} />;
}

export default MapboxMap

Description of the mapbox-gl init parameters can be found in the documentation

Map | Mapbox GL JS

Next, we import it to the main page of the application and launch the project

pages/index.tsx



import MapboxMap from "../components/mapbox-map";

function App() {
  return <MapboxMap />;
}

export default App;



npm run dev

Opening http://localhost:3000 we see a full-screen web map

What Can Be Done Better

The proposed implementation is missing several useful features.

Map initialization parameters - when using a map component, it seems useful to be able to pass initial map options through the props
Access to the map instance from other components - the application usually contains other components for which you need to have access directly to the map instance
Map ready callback - loading the map takes some time, while the user is waiting for the opening of the map, to improve the user experience, you can show a skeleton or loading screen with a spinner. For these purposes, it would be convenient to have a callback triggered after the map is fully loaded.

An example with loading a map in my application https://app.mapflow.ai

Improving map component

Let's implement all these features, first add the props for the MapboxMap component

The container property of the MapboxOptions interface is not required in this case, to exclude it we use the utility type Omit

Let's pass initialOptions to the web map init options using spread syntax, we will also set a callback for the map load event



// ...
    const mapboxMap = new mapboxgl.Map({
      container: node,
      accessToken: process.env.NEXT_PUBLIC_MAPBOX_TOKEN,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-74.5, 40],
      zoom: 9,
      ...initialOptions,
    });

    setMap(mapboxMap);

        // if onMapLoaded is specified it will be called once
    // by "load" map event
    if (onMapLoaded) mapboxMap.once("load", onMapLoaded);

        // removing map object and calling onMapRemoved callback
    // when component will unmout 
        return () => {
      mapboxMap.remove();
      if (onMapRemoved) onMapRemoved();
    };

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

// ...

Here you can see a special comment for the linter



// eslint-disable-next-line react-hooks/exhaustive-deps

According to react-hooks/exhaustive-deps rule we had to specify in the list of dependencies for React.useEffect variables added to the hook [initialOptions, onMapLoaded]

In this case, it is important to leave dependency list empty, this will allow you not to re-create the map instance if initialOptions or onMapLoaded was changed, you can read more about using React.useEffect at the link below

A Complete Guide to useEffect

Final component version will look like this

components/mapbox-map.tsx



import * as React from "react";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

interface MapboxMapProps {
  initialOptions?: Omit<mapboxgl.MapboxOptions, "container">;
  onMapLoaded?(map: mapboxgl.Map): void;
    onMapRemoved?(): void;
}

function MapboxMap({ initialOptions = {}, onMapLoaded }: MapboxMapProps) {
  const [map, setMap] = React.useState<mapboxgl.Map>();

  const mapNode = React.useRef(null);

  React.useEffect(() => {
    const node = mapNode.current;

    if (typeof window === "undefined" || node === null) return;

    const mapboxMap = new mapboxgl.Map({
      container: node,
      accessToken: process.env.NEXT_PUBLIC_MAPBOX_TOKEN,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-74.5, 40],
      zoom: 9,
      ...initialOptions,
    });

    setMap(mapboxMap);

    if (onMapLoaded) mapboxMap.once("load", onMapLoaded);

        return () => {
      mapboxMap.remove();
      if (onMapRemoved) onMapRemoved();
    };

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return <div ref={mapNode} style={{ width: "100%", height: "100%" }} />;
}

export default MapboxMap;

Now we can override the initial map properties and use the onMapLoaded callback when it is loaded. We can also use onMapLoaded to store a link to the map instance in the parent component, for example. We can also use onMapRemoved if we need to know that the map instance has been removed.

We will use this, to define the coordinates of the center of the map, and also add the initial screen for loading the map.

First, let's prepare a MapLoadingHolder component that will be displayed on top of the map until it is loaded.

Let's use a svg icon for the loading screen. I have it from https://www.freepik.com, and then converted it to jsx format using https://svg2jsx.com/

components/world-icon.tsx



function WorldIcon({ className = "" }: { className?: string }) {
  return (
    <svg
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      width="48.625"
      height="48.625"
      x="0"
      y="0"
      enableBackground="new 0 0 48.625 48.625"
      version="1.1"
      viewBox="0 0 48.625 48.625"
      xmlSpace="preserve"
    >
      <path d="M35.432 10.815L35.479 11.176 34.938 11.288 34.866 12.057 35.514 12.057 36.376 11.974 36.821 11.445 36.348 11.261 36.089 10.963 35.7 10.333 35.514 9.442 34.783 9.591 34.578 9.905 34.578 10.259 34.93 10.5z"></path>
      <path d="M34.809 11.111L34.848 10.629 34.419 10.444 33.819 10.583 33.374 11.297 33.374 11.76 33.893 11.76z"></path>
      <path d="M22.459 13.158l-.132.34h-.639v.33h.152l.022.162.392-.033.245-.152.064-.307.317-.027.125-.258-.291-.06-.255.005z"></path>
      <path d="M20.812 13.757L20.787 14.08 21.25 14.041 21.298 13.717 21.02 13.498z"></path>
      <path d="M48.619 24.061a24.552 24.552 0 00-.11-2.112 24.165 24.165 0 00-1.609-6.62c-.062-.155-.119-.312-.185-.465a24.341 24.341 0 00-4.939-7.441 24.19 24.19 0 00-1.11-1.086A24.22 24.22 0 0024.312 0c-6.345 0-12.126 2.445-16.46 6.44a24.6 24.6 0 00-2.78 3.035A24.18 24.18 0 000 24.312c0 13.407 10.907 24.313 24.313 24.313 9.43 0 17.617-5.4 21.647-13.268a24.081 24.081 0 002.285-6.795c.245-1.381.379-2.801.379-4.25.001-.084-.004-.167-.005-.251zm-4.576-9.717l.141-.158c.185.359.358.724.523 1.094l-.23-.009-.434.06v-.987zm-3.513-4.242l.004-1.086c.382.405.75.822 1.102 1.254l-.438.652-1.531-.014-.096-.319.959-.487zM11.202 7.403v-.041h.487l.042-.167h.797v.348l-.229.306h-1.098l.001-.446zm.778 1.085s.487-.083.529-.083 0 .486 0 .486l-1.098.069-.209-.25.778-.222zm33.612 9.651h-1.779l-1.084-.807-1.141.111v.696h-.361l-.39-.278-1.976-.501v-1.28l-2.504.195-.776.417h-.994l-.487-.049-1.207.67v1.261l-2.467 1.78.205.76h.5l-.131.724-.352.129-.019 1.892 2.132 2.428h.928l.056-.148h1.668l.481-.445h.946l.519.52 1.41.146-.187 1.875 1.565 2.763-.824 1.575.056.742.649.647v1.784l.852 1.146v1.482h.736c-4.096 5.029-10.33 8.25-17.305 8.25C12.009 46.625 2 36.615 2 24.312c0-3.097.636-6.049 1.781-8.732v-.696l.798-.969c.277-.523.574-1.033.891-1.53l.036.405-.926 1.125a22.14 22.14 0 00-.798 1.665v1.27l.927.446v1.765l.889 1.517.723.111.093-.52-.853-1.316-.167-1.279h.5l.211 1.316 1.233 1.799-.318.581.784 1.199 1.947.482v-.315l.779.111-.074.556.612.112.945.258 1.335 1.521 1.705.129.167 1.391-1.167.816-.055 1.242-.167.76 1.688 2.113.129.724s.612.166.687.166c.074 0 1.372.983 1.372.983v3.819l.463.13-.315 1.762.779 1.039-.144 1.746 1.029 1.809 1.321 1.154 1.328.024.13-.427-.976-.822.056-.408.175-.5.037-.51-.66-.02-.333-.418.548-.527.074-.398-.612-.175.036-.37.872-.132 1.326-.637.445-.816 1.391-1.78-.316-1.392.427-.741 1.279.039.861-.682.278-2.686.955-1.213.167-.779-.871-.279-.575-.943-1.965-.02-1.558-.594-.074-1.111-.52-.909-1.409-.021-.814-1.278-.723-.353-.037.39-1.316.078-.482-.671-1.373-.279-1.131 1.307-1.78-.302-.129-2.006-1.299-.222.521-.984-.149-.565-1.707 1.141-1.074-.131-.383-.839.234-.865.592-1.091 1.363-.69 2.632-.001-.007.803.946.44-.075-1.372.682-.686 1.376-.904.094-.636 1.372-1.428 1.459-.808-.129-.106.988-.93.362.096.166.208.375-.416.092-.041-.411-.058-.417-.139v-.4l.221-.181h.487l.223.098.193.39.236-.036v-.034l.068.023.684-.105.097-.334.39.098v.362l-.362.249h.001l.053.397 1.239.382.003.015.285-.024.019-.537-.982-.447-.056-.258.815-.278.036-.78-.852-.519-.056-1.315-1.168.574h-.426l.112-1.001-1.59-.375-.658.497v1.516l-1.183.375-.474.988-.514.083v-1.264l-1.112-.154-.556-.362-.224-.819 1.989-1.164.973-.296.098.654.542-.028.042-.329.567-.081.01-.115-.244-.101-.056-.348.697-.059.421-.438.023-.032.005.002.128-.132 1.465-.185.648.55-1.699.905 2.162.51.28-.723h.945l.334-.63-.668-.167v-.797l-2.095-.928-1.446.167-.816.427.056 1.038-.853-.13-.131-.574.817-.742-1.483-.074-.426.129-.185.5.556.094-.111.556-.945.056-.148.37-1.371.038s-.038-.778-.093-.778l1.075-.019.817-.798-.446-.223-.593.576-.984-.056-.593-.816h-1.261l-1.316.983h1.206l.11.353-.313.291 1.335.037.204.482-1.503-.056-.073-.371-.945-.204-.501-.278-1.125.009A22.188 22.188 0 0124.312 2c5.642 0 10.797 2.109 14.73 5.574l-.265.474-1.029.403-.434.471.1.549.531.074.32.8.916-.369.151 1.07h-.276l-.752-.111-.834.14-.807 1.14-1.154.181-.167.988.487.115-.141.635-1.146-.23-1.051.23-.223.585.182 1.228.617.289 1.035-.006.699-.063.213-.556 1.092-1.419.719.147.708-.64.132.5 1.742 1.175-.213.286-.785-.042.302.428.483.106.566-.236-.012-.682.251-.126-.202-.214-1.162-.648-.306-.861h.966l.309.306.832.717.035.867.862.918.321-1.258.597-.326.112 1.029.583.64 1.163-.02c.225.579.427 1.168.604 1.769l-.121.112zm-32.331-7.093l.584-.278.528.126-.182.709-.57.181-.36-.738zm3.099 1.669v.459h-1.334l-.5-.139.125-.32.641-.265h.876v.265h.192zm.614.64v.445l-.334.215-.416.077v-.737h.75zm-.376-.181v-.529l.459.418-.459.111zm.209 1.07v.433l-.319.32h-.709l.111-.486.335-.029.069-.167.513-.071zm-1.766-.889h.737l-.945 1.321-.39-.209.084-.556.514-.556zm3.018.737v.432h-.709l-.194-.28v-.402h.056l.847.25zm-.655-.594l.202-.212.341.212-.273.225-.27-.225zm28.55 5.767l.07-.082c.029.126.06.252.088.38l-.158-.298z"></path>
      <path d="M3.782 14.884v.696c.243-.568.511-1.122.798-1.665l-.798.969z"></path>
    </svg>
  );
}

export default WorldIcon;

components/map-loading-holder.tsx



import WorldIcon from "../components/world-icon";

function MapLoadingHolder() {
  return (
    <div className="loading-holder">
      <WorldIcon className="icon" />
      <h1>Initializing the map</h1>
      <div className="icon-attribute">
        Icons made by{" "}
        <a href="https://www.freepik.com" title="Freepik">
          Freepik
        </a>{" "}
        from{" "}
        <a href="https://www.flaticon.com/" title="Flaticon">
          www.flaticon.com
        </a>
      </div>
    </div>
  );
}

export default MapLoadingHolder;

Now, putting everything together, put the application in an .app-container element, inside which there will be an absolutely positioned map element placed in a map-wrapper and a MapLoadingHolder component

Let's also add the <Head> ... </Head> component, you can specify meta tags and title for the site with it

Let's make the changes to the styles, add a nice background for the .loading-holder, also align its content in the center, add a pulsing animation for the icon, since the background is semi-transparent, add a colored shadow text-shadow: 0px 0px 10px rgba (152, 207, 195 , 0.7); to the element <h1>Initializing the map</h1>

Now when we open the map we will see a nice loading screen

Links to source code and running application

dqunbp/using-mapbox-gl-with-react

Using mapbox-gl with React and Next.js

Storing the map instance outside of `React`

I will explain how to store and use the mapbox-gl instance outside of React in my next article.

Managing mapbox-gl state in React app

dqunbp — Fri, 25 Jun 2021 11:11:05 +0000

Description of the problem

In the course of my work at geoalert.io, I have repeatedly encountered the problem of managing the state of an application in React with a built-in mapbox-gl

I plan to cover the topic in a series of articles, including this one:

Managing mapbox-gl state in React app
Using mapbox-gl in React with Next.js
Managing the state of a React application with mapbox-gl using XState

The last two articles mentioned correspond to the 2 main problems I encountered while using mapbox-gl in React

Embedding mapbox-gl in React - storing the built-in mapbox-gl instance and making it accessible from other app components
Managing the state of a React app with mapbox-gl - since mapbox-gl has an internal state, you need to synchronize it with the state of the app itself

Embedding `mapbox-gl`in `React`

There are several options for solving this problem, here are the most popular among them:

Using ready-made wrapper libraries
Self-native integration, for this option I would highlight 2 cases
- Implementing as a React Component
- Storing the map instance outside of React

Using ready-made wrapper libraries

The most popular among them

react-map-gl - is a solution from uber, perhaps the most sophisticated among others, one of the main drawbacks:
- Steep learning curve, having sufficiently rich functionality, including for managing state, it is rather difficult to understand the library api
- Has almost 1MB bundle size, which is quite a lot
react-mapbox-gl - ranks second in popularity, has an order of magnitude smaller bundle size and more concise and easy-to-understand api
@urbica/react-map-gl - the size of the bundle and api is about the same as react-mapbox-gl
use-mapbox-gl - I will use the opportunity to attach my solution, this is a lightweight React hook wrapping mapbox-gl

Self-service native integration

Implementing as a `React Component`

The main idea of this approach is to create a web map component, which must contain a DOM node for initializing the map, initialization logic, and it must also store an instance of the created map

The mapbox-gl documentation contains instructions on how to do this for a new React application.

Continuation and more detailed consideration of this issue, with various examples of implementation, wait in the next article

Using mapbox-gl in React with Next.js

dqunbp ・ Jul 1 '21 ・ 11 min read

#react #nextjs #typescript #mapbox

Storing the map instance outside of `React`

An example of such an implementation will also be considered in the next article

Managing state of `React` app with `mapbox-gl`using `XState`

As a rule, tutorials on using mapbox-gl in React end after the method of integrating the first into the second is described, articles about state management in such applications are rare, most articles on this topic are outdated at the moment

Here's an example of a nice article from @Cole Beese

This article describes an example of state management with Redux using React class components

As mentioned above mapbox-gl has internal state for example properties such as

Map center coordinates
Zoom
Bearing
Current map style
Vector or raster user layers
etc.

Usually in the application interface, in addition to the map itself, there are elements whose display depends on the internal state of the map, for example, an element that displays the current coordinates and zoom, as in the above example

In addition to the state inside the map instance, the application can also have its own internal state, in our case, XState will be used for this

I'll cover this in more detail with an example of using XState in my next post

Useful links:

Store state in cookies with use-cookie-state React hook

dqunbp — Wed, 28 Oct 2020 17:24:54 +0000

🤔 Sometimes it becomes necessary to keep the state of the application between reloads of the web page.
The most common use for this is localStorage.

When developing an application on Next.js, I needed to receive this data during page rendering on the server-side(SSR), localStorage is not suitable for this purpose, so I decided to use cookies.

☝️ A cookie can contain data upto a maximum of 4096 Bytes. If you want to support most browsers, then do not exceed 50 cookies per domain, and 4093 bytes per domain. The size of all cookies together should not exceed 4096 bytes.

🐜 Therefore, this solution is well suited for storing small data such as language or theme.

When opening a web application page, cookies are sent to the server along with Http request, then I can get their value and use it in SSR.

To work with cookies, I decided to use an existing solution,
choosing the most popular cookies library for reading and writing cookie values.

👏 First, let's create a helper function, to read and write cookie values - getCookieValue

import cookie from "cookie";

function getCookieValue({
  key,
  cookies,
  options,
  defaultValue,
} {
  const value = cookie.parse(cookies || "", options);

  return value[key] ?? defaultValue;
}

⚙️ Function arguments:

key - a unique key with which our value will be stored in browser cookies
cookies - the cookies themselves
options - cookie parse options from cookies library
defaultValue - default value, in case a value was not found for the specified key

ℹ️ If you are not familiar with ?? operator, don't worry.
It's called nullish coalescing operator and is similar to || but only returns the right side when the left side is null or undefined. You can read more about this here

The matter is small; it remains to implement the React Hook itself

function useCookieState(
  key,
  initialValue,
  options
) {
  const getInitialValue = () => {
    // if we on the server just use an initial value
    if (typeof window === "undefined") return initialValue;

    // otherwise get initial cookie value from `document.cookies`
    return getCookieValue({
      key,
      cookies: document.cookie,
      options: options?.decodeOps,
      defaultValue: initialValue,
    });
  };

  // get initial state value on component mounts
  const [value, setValue] = useState(getInitialValue); 

  // encode and save the new cookie value
  const setNextValue = (value) => {
    document.cookie = cookie.serialize(key, value, options?.encodeOps);
    setValue(value);
  };

  return [value, setNextValue];
}

⚙️ Here we have a hook with three arguments:

key - the same as in the previous function
initialValue - the initial value for the state, the same as the default value
options - an object with shape:
- decodeOps - parse cookies parameters
- encodeOps - serialize cookies parameters

ℹ️ As you can see, there is another ?. operator here, called the ʻoptional chaining operator. It avoids errors like ʻUncaught TypeError: Cannot read property 'prop_name' of undefined, returning simply ʻundefined` in this case, you can read more about it here

🎆 That's all! 🎆

Oh yeah, I almost forgot.
For your convenience, I put the hook in a tiny library, with TypeScript support, enjoy! ✨

😊 Thank you for your attention!

🍪 https://github.com/dqunbp/use-cookie-state 🍪

Effectively switching mapbox-gl styles

dqunbp — Fri, 11 Sep 2020 14:53:26 +0000

Hi there!

I wish write about known common problem with mapbox-gl.
At the moment there are some proposals for a solution and some workarounds.

In this article, we see the typical scenario and going to go to implement it.

Conditions of the problem

Let's describe a simple case:

We need to add to the map our own GeoJSON source and corresponding layer, before the text labels.
When switching the base style, our layer should remain on the map.

We use a straightforward approach with mapbox-gl events.

Define the source

// constants.js
const GEOJSON_FEATURE = {
  type: "Feature",
  properties: {},
  geometry: {
    type: "Polygon",
    coordinates: [
      [
        [-66.96466, 44.8097],
        [-67.79035274928509, 47.066248887716995],
        [-69.23708614772835, 47.44777598732787],
        [-71.08482, 45.3052400000002],
        [-70.64573401557249, 43.090083319667144],
        [-66.96466, 44.8097],
      ],
    ],
  },
};

Create the map

// index.js
mapboxgl.accessToken = <your token here>;
var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
  center: [-68.13734351262877, 45.137451890638886],
  zoom: 5,
});

Improve `addLayer` function

If we use beforeId that not exists already on the map, we get an error
Let's create addLayerBefore function to escape this

function addLayerBefore(addLayerFn, layer, beforeId) {
// check beforeId defined and exists on the map
const beforeLayer = Boolean(beforeId) && map.getLayer(beforeId);
  if (beforeLayer && beforeId === beforeLayer.id) addLayerFn(layer, beforeId);
  else {
    console.warn(
      `Not found layer with id '${beforeId}'.\nLayer '${layer.id}' added without before.`
    );
    addLayerFn(layer);
  }
}

Define add data function

Add's GeoJSON source with fill layer, before waterway-label in current example it places polygon before the map text labels

function addMaineLayer() {
  map.addSource("maine", {
    type: "geojson",
    data: {
      type: "Feature",
      geometry: GEOJSON_FEATURE
  });

  // define the function to add layer
  const addLayer = (layer, beforeId) => map.addLayer(layer, beforeId);

  addLayerBefore(
    addLayer,
    {
      id: "maine",
      type: "fill",
      source: "maine",
      layout: {},
      paint: {
        "fill-color": "#088",
        "fill-opacity": 0.8
      }
    },
    "waterway-label"
  );
}

Setup events

We should call addMaineLayer function when:

map initially loads with load event
map changes the style with styledata event

map.on("load", function () {
  // add layer to the map on load
  addMaineLayer();

  const layerList = document.getElementById("menu");
  const inputs = layerList.getElementsByTagName("input");

  function switchLayer(layer) {
    // addMaineLayer fn will be called once on layer switched
    map.once("styledata", addMaineLayer);
    const layerId = layer.target.id;
    map.setStyle("mapbox://styles/mapbox/" + layerId);
  }

  // set toggle base style events
  for (let i = 0; i < inputs.length; i++) {
    inputs[i].onclick = switchLayer;
  }
});

Let's check the result

That is!
In the next article we going to go implement this with RxJS!

Window resize observer based on RxJS combineLatest operator

dqunbp — Sat, 01 Aug 2020 09:19:37 +0000

To better understand how rxjs/combineLatest works, I'm going to create a simple window resize observer function.

Some requirements:

The function should accept a callback that will be called whenever the window is resized.

function createWindowResizeObserver(callback) {
  ...
}

The callback function will takes an object with dimensions:

function resizeCallback(dimensions) {
  const { width, height } = dimensions;
  console.log({ width, height });
}

Finally, createWindowResizeObserver must return an unsubscribe function to unsubscribe from these events later, if necessary.

const unsubscribe = createWindowResizeObserver(resizeCallback);

// unsubscribe later if necessary 
unsubscribe();

Let's implement this!

First, create a stream of window width and height changes

import { fromEvent } from "rxjs";
import { map } from "rxjs/operators";

// Create a stream from `window` resize events
// and map it to get width of window
const width = fromEvent(window, "resize").pipe(
  map(() => window.innerWidth)
);

// Do the same with height
const height = fromEvent(window, "resize").pipe(
  map(() => window.innerHeight)
);

Then create a dimensions stream.
To do that I need to combine each change of width with latest value of height and vice versa :)
And then map result to the required shape

// add combineLatest to imports
import { fromEvent, combineLatest } from "rxjs";

// combine here
const combined = combineLatest(width, height);
// `combined` produces an array of width and height values
const dimensions = combined.pipe(
  map(([width, height]) => ({ width, height }))
);

It will be good to add little throttling to prevent high cpu utilization

import { map, throttleTime } from "rxjs/operators";

const dimensions = combined.pipe(
  throttleTime(100),
  map(([width, height]) => ({ width, height }))
);

To subscribe on dimensions stream use subscribe method

// subscribe method returns the unsubscribe function
const unsubscribe = dimensions.subscribe(callback);

Finally wrap up all stuff to single function:

import { fromEvent, combineLatest } from "rxjs";
import { map, throttleTime } from "rxjs/operators";

function createWindowResizeObserver(callback) {
  const width = fromEvent(window, "resize").pipe(
    map(() => window.innerWidth)
  );

  const height = fromEvent(window, "resize").pipe(
    map(() => window.innerHeight)
  );

  const combined = combineLatest(width, height);

  const dimensions = combined.pipe(
    throttleTime(100),
    map(([width, height]) => ({ width, height }))
  );

  const unsubscribe = dimensions.subscribe(callback);

  return unsubscribe;
}

And that's all!
Let's check the result

Open the Console and change preview window with or height

DEV Community: dqunbp

Using mapbox-gl in React with Next.js

Introduction

Code snippets info

Preparing the environment

Implementation as a functional React component

Preparing styles

Preparing a map component

What Can Be Done Better

Improving map component

Storing the map instance outside of React

Managing mapbox-gl state in React app

Description of the problem

Embedding mapbox-glin React

Using ready-made wrapper libraries

Self-service native integration

Implementing as a React Component

Using mapbox-gl in React with Next.js

dqunbp ・ Jul 1 '21 ・ 11 min read

Storing the map instance outside of React

Managing state of React app with mapbox-glusing XState

Store state in cookies with use-cookie-state React hook

Effectively switching mapbox-gl styles

Conditions of the problem

Define the source

Create the map

Improve addLayer function

Define add data function

Setup events

Let's check the result

Window resize observer based on RxJS combineLatest operator

Implementation as a functional `React` component

Storing the map instance outside of `React`

Embedding `mapbox-gl`in `React`

Implementing as a `React Component`

Storing the map instance outside of `React`

Managing state of `React` app with `mapbox-gl`using `XState`

Improve `addLayer` function