[GIS] Turfjs default es6 import fails

javascriptmapbox-gl-js

I'm trying to use Turf distance and Turf point with Mapbox GL JS.

I've installed @turf/distance from npm which also installs @turf/helpers.

I see that distance has a default export

exports.default = distance;

So my import is as follows:

import distance from '@turf/distance';
import { point } from '@turf/helpers';

point imports as expected, distance is always empty, whatever I try.
This should be so simple….

Can anybody put me out of my misery, and tell me how they imported distance?

UPDATE: found the problem

I was reassigning the distance variable – what a noob.

let distance = distance(from, to, options);

Best Answer

I'm sorry to say that that should just work.

I have a project with Turf loaded, and just added:

import distance from '@turf/distance'

...

console.log("DISTANCE IS: ", distance)

And I get this logged on the console:

What this means is that it seems to work fine to import that way. Maybe check your code somewhere else.

Related Solutions

[GIS] Leaflet Custom Control Fails

If you want to get buttons displayed on your map, Leaflet has a plugin to attach a new control with a click event in one line: https://github.com/CliffCloud/Leaflet.EasyButton

For help with coding, StackOverflow generally gets better responses. Since the question's already here though, this will get your control clickable:

var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var myMenu = L.Control.extend({
  options: {position: 'topleft'},

  onAdd: function (map) {
          this._div = L.DomUtil.create('div', 'myMenu');
          this._div.innerHTML = "<h2>&equiv;</h2>" ;
          L.DomEvent.on(this._div, "click", this._click )
          return this._div;          
  },

  _click: function(e){
    L.DomEvent.stop(e);
    alert(50)
  },

});

map.addControl(new myMenu());

By the way, clever use of &equiv;!

Mapbox GL JS – Setting Default State of Toggle Layers

Since the layers in the map are all off by default, you can change this:

link.className = 'active';

to:

link.className = '';

If you want the state of your toggle to reflect what's in the map, it's a bit more code and you need to wait for the map to load before building the toggles. Here's a modified example that does this:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
    #menu {
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 10px;
        right: 10px;
        border-radius: 3px;
        width: 120px;
        border: 1px solid rgba(0,0,0,0.4);
        font-family: 'Open Sans', sans-serif;
    }

    #menu a {
        font-size: 13px;
        color: #404040;
        display: block;
        margin: 0;
        padding: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        text-align: center;
    }

    #menu a:last-child {
        border: none;
    }

    #menu a:hover {
        background-color: #f8f8f8;
        color: #404040;
    }

    #menu a.active {
        background-color: #3887be;
        color: #ffffff;
    }

    #menu a.active:hover {
        background: #3074a4;
    }
</style>

<nav id="menu"></nav>
<div id="map"></div>

<script>
   mapboxgl.accessToken = 'pk.eyJ1IjoiY2RyaWNlIiwiYSI6ImNpcDZvMTU2cDAwMGR2MW03aXZ1Y2xpdXAifQ.DIB1RcA8uDyXSVvyz7Skcg';

// Set bounds
var bounds = [
    [5.336040, 47.678506], // Southwest coordinates
    [7.202343, 48.697659]  // Northeast coordinates
];

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/cdrice/cip6vwuus000wdkm3q2adkr24',
    center: [6.95, 48.28],
    zoom: 8.5,
    maxBounds: bounds // Sets bounds as max
});

map.on('load', function() {
  toggleLayer(['reciprocite-gpv', 'reciprocite-gap','reciprocite-gprmv'], '1');
  toggleLayer(['reciprocite-non-recipro','reciprocite-eh3vv'], '2');

  function toggleLayer(ids, name) {
      var link = document.createElement('a');
      link.href = '#';
      // Get the visibility for all layers in the ids argument.
      var visibility = ids.map(function(id) {
        return map.getLayoutProperty(id, 'visibility');
      });
      // Get the unique values.
      var visUnique = visibility.filter(uniques);
      // Default to not visible.
      var visCssClass = '';
      // If all layers are visible, use the 'active' class so the toggle is "on".
      if ( visUnique.length === 1 && visUnique[0] === 'visible' ) {
        visCssClass = 'active';
      }
      link.className = visCssClass;
      link.textContent = name;

      link.onclick = function (e) {
          e.preventDefault();
          e.stopPropagation();
          for (layers in ids){
          var visibility = map.getLayoutProperty(ids[layers], 'visibility');

          if (visibility === 'visible') {
              map.setLayoutProperty(ids[layers], 'visibility', 'none');
              this.className = '';
          } else {
              this.className = 'active';
              map.setLayoutProperty(ids[layers], 'visibility', 'visible');
          }
          }

      };

      var layers = document.getElementById('menu');
      layers.appendChild(link);
  }

  // http://stackoverflow.com/a/14438954/1934
  function uniques(value, index, self) {
    return self.indexOf(value) === index;
  }

})

</script>

</body>
</html>

Best Answer

Related Solutions

[GIS] Leaflet Custom Control Fails

Mapbox GL JS – Setting Default State of Toggle Layers

Related Question