Giter VIP home page Giter VIP logo

procedural-gl-react's Introduction

Procedural GL React component

Procedural GL JS is a library for creating 3D map experiences on the web, written in JavaScript and WebGL. It is built on top of THREE.js.

It provides an easy-to-use, but powerful framework to allow beautiful landscapes of the outdoors to be embedded into web pages. It loads super-fast and is optimized for mobile devices.

Demo | Docs | Overlay playground | Elevation data | Source

For more information see the project page.

React component

This repository contains a React wrapper for the library allowing it to be easily included into projects built with React.

Install

This component does not bundle React, nor Procedural GL JS but instead expects them as peer dependencies. As such you will need to install them if they are not part of your project already.

npm install react
npm install react-dom
npm install procedural-gl
npm install procedural-gl-react

Usage

import ProceduralMap from 'procedural-gl-react';

// Configure library as usual (see main project)
<ProceduralMap
  datasource={datasource}
  compassVisible={true}
  displayLocation={{
    latitude: 47.5,
    longitude: 13.55
  }}/>

Example

An more complete example of how to integrate this library with React can be found here.

procedural-gl-react's People

Contributors

felixpalmer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

procedural-gl-react's Issues

Can't addOverlay

Hi,

Using create-react-app with hooks. Map loads well, but calling addOverlay doesn't seem to work. The blue-fot.png is on public folder root.

  const aref = useRef();

  const featureCollection = {
    type: 'FeatureCollection',
    features: [
      {
        geometry: {
          type: 'Point',
          coordinates: [13.6, 47.23, 2500],
        },
        type: 'Feature',
        id: 0,
        properties: {
          image: './blue-dot.png',
        },
      },
    ],
  };

  useEffect(() => {
    console.log(aref);
    if (aref.current) {
      // @ts-ignore
      aref.current.addOverlay(featureCollection);
      console.log('addd');
      // @ts-ignore
      // aref.current.onOverlayAdded = function (name) {
      //   console.log('Overlay added:', name);
      // };
    }
  }, [aref]);

...

 <ProceduralMap
        ref={aref}
        datasource={datasource}
        compassVisible={false}
        displayLocation={{
          latitude: 47.23,
          longitude: 13.6,
        }}
      />

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.