Giter Club home page Giter Club logo

bs-react-simple-maps's Introduction

bs-react-simple-maps

BuckleScript bindings for react-simple-maps

npm

Installation

npm install --save bs-simple-maps

In your bsconfig.json, include "bs-simple-maps" in the bs-dependencies.

Examples

<ComposableMap
  projectionConfig=(ComposableMap.projectionConfig(~scale=200, ()))
  width=1000
  height=600>
  <ZoomableGroup center=(0., 0.)>
    <Geographies geography="/examples/world-50m.json">
      (
        (geographies, projection) =>
          Array.map(
            geography =>
              <Geography
                key=(Geography.id(geography))
                geography
                projection
                style=(
                  Types.style(
                    ~default=ReactDOMRe.Style.make(~fill="#ECEFF1", ()),
                    (),
                  )
                )
              />,
            geographies,
          )
      )
    </Geographies>
  </ZoomableGroup>
</ComposableMap>

To run other examples:

npm run start
# and in a separate tab
npm run examples
# then open localhost:3000

Usage

The API follows react-simple-maps rather closely, with a few exceptions:

  • Marker takes a prop coordinates instead of a nested {marker: {coordinates}} object.
  • Line takes props start and stop instead of a nested {line: {coordinates: {start, end}}} object.

Limitations

  • Geographies only supports a string for its geographies (i.e. a JSON file path).
  • Geography and Marker don't support any events yet.
  • ZoomableGlobe is not supported yet.

Development

npm run start

Tests

There will be some tests using bs-jest.

npm run test

For now, we just test by looking at the examples.

Thanks

These bindings started as a joint effort of Ali, Jan, Patrick, and Timo at the Reason-Dojo organized by Ben and Sean.

Right now, there are similar (yet less complete) bindings published as bs-react-simple-maps maintained at DeFuex's repo. We will try to unify these in the future.

bs-react-simple-maps's People

Contributors

poeschko avatar

Watchers

James Cloos avatar Glenn Slotte avatar

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.