How to use MapBox with ReasonReact

reasonreact

#1

Hello,
Today I started with new project (ReasonReact + MapBox) and I have some problems right now.
The problem is:

We’ve found a bug for you!
(…) 4:6-13

2 │ open Document;
3 │ open Belt;
4 │ open MapboxGL; // <-- the error
5 │
6 │ // set accessToken from environment variable

package.json:

{
  (...)
  "dependencies": {
    "babel-core": "6.26.3",
    "babel-preset-env": "1.7.0",
    "bs-mapbox-gl": "^0.1.0",
    "bs-platform": "5.2.1",
    "bs-webapi": "0.15.6",
    "bsb-js": "^1.1.7",
    "mapbox-gl": "^1.5.0",
    "parcel-bundler": "1.12.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "reason-react": ">=0.7.0"
  },
  "devDependencies": {
    "bs-platform": "^5.2.1",
    "moduleserve": "^0.9.0"
  }
}

bsconfig.json:

{
  "name": "reason-react-examples",
  "reason": {
    "react-jsx": 3
  },
  "sources": {
    "dir" : "src",
    "subdirs" : true
  },
  "bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
  "package-specs": [{
    "module": "commonjs",
    "in-source": true
  }],
  "suffix": ".bs.js",
  "namespace": true,
  "bs-dependencies": [
    "reason-react",
    "bs-webapi",
    "bs-mapbox-gl",
    "mapbox-gl"
  ],
  "refmt": 3
}

And the file with “bad” code:

open Webapi.Dom;
open Document;
open Belt;
open MapboxGL;

// set accessToken from environment variable
[@bs.val] external accessToken: string = "process.env.MAPBOX_ACCESS_TOKEN";
setAccessToken(mapboxGL, accessToken);

// get map container
let container = Option.getExn(getElementById("map", document));

// set map options
let map_options = {
  "container": container,
  "style": "mapbox://styles/mapbox/streets-v9",
  "center": LngLat.make(~lng=-74.50, ~lat=40.),
  "zoom": 9.,
};

// create and display map
let map = MapGL.make(map_options);

// MapGL center getter
let center = MapGL.getCenter(map);

// LngLat getters
let lng = LngLat.lng(center);
let lat = LngLat.lat(center);

// LngLat constructor
let center = LngLat.make(~lng=-74.50, ~lat=40.);

// MapGL center setter
MapGL.setCenter(map, center);

let onLoad = () => {
  let source = {"type": "vector", "url": "mapbox://mapbox.mapbox-terrain-v2"};

  let layer = {
    "id": "terrain-data",
    "type": "line",
    "source": "contour",
    "source-layer": "contour",
    "layout": {
      "line-join": "round",
      "line-cap": "round",
    },
    "paint": {
      "line-color": "#ff69b4",
      "line-width": 1,
    },
  };

  MapGL.addSource(map, "contour", source);
  MapGL.addLayer(map, layer);

  ();
};

MapGL.on(map, "load", onLoad);

I used the sample from the page: https://github.com/stepankuzmin/bs-mapbox-gl

I’m just starting to learn a reasonml language and I need help :slight_smile: .


#2

Can you paste the full error message?