rescript-react-simple-maps

    5.0.0 • Public • Published

    Rescript React Simple Maps

    Rescript bindings for React Simple Maps

    Getting Started

    1. Add this to your package.json:
    npm i rescript-react-simple-maps
    1. Add this to you bsconfig.json:
    "bs-dependencies": [
        "@rescript/react",
        "rescript-react-simple-maps"
    ]
    1. Import into your Rescript project
    open RescriptReactSimpleMaps
    1. Access the ReactSimpleMaps module

    Example Usage

    open RescriptReactSimpleMaps
    
    @react.component
    let make = () => {
      open ReactSimpleMaps
    
      let displayPosition = (pos: position) => {
        Js.log("Your position:")
        Js.log(pos)
      }
    
      <div>
        <div className="map-container">
          <ComposableMap>
            <ZoomableGroup
              center={(0., 0.)}
              zoom={2.}
              maxZoom={8.}
              minZoom={1.}
              onMoveStart={displayPosition}
            >
              <Graticule stroke="#F53" />
              <Sphere stroke="#FF5533" strokeWidth={2.} />
              {
                geographyTestData
                |> Array.map((geo) => {
                  <Geography
                    key={geo.rsmKey}
                    geography={geo}
                    fill={"#000000"}
                  />
                })
                |> React.array
              }
    
              <Marker
                coordinates={(-20.13992755570007, 0.6525543036691559)}
              >
                <circle r={"8"} fill="#ff0000" />
              </Marker>
    
              <Line
                coordinates={[
                  (-20.13992755570007, 0.6525543036691559),
                  (-10.13992755570007, 1.7325543036691559),
                  (-5.13992755570007, 6.925543036691559)
                ]}
    
                stroke="#ff0000"
              />
    
              <Annotation
                subject={(20.13992755570007, 20.6525543036691559)}
                dx={-90.}
                dy={-30.}
                connectorProps={{
                  "stroke": "#FF5533",
                  "strokeWidth": 3,
                  "strokeLinecap": "round"
                }}
              >
                <text x="-8" textAnchor="end" alignmentBaseline="middle" fill="#F53">
                  {React.string("Brazil")}
                </text>
              </Annotation>
            </ZoomableGroup>
          </ComposableMap>
        </div>
      </div>
    }

    This snippet of code generates this map: Example Map

    Install

    npm i rescript-react-simple-maps

    DownloadsWeekly Downloads

    0

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    319 kB

    Total Files

    8

    Last publish

    Collaborators

    • benfaerber