react-mapfilter
Version:
A React Component for viewing and filtering GeoJSON
506 lines (416 loc) • 44.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _debug = require('debug');
var _debug2 = _interopRequireDefault(_debug);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _mapboxGl = require('mapbox-gl');
var _mapboxGl2 = _interopRequireDefault(_mapboxGl);
var _deepEqual = require('deep-equal');
var _deepEqual2 = _interopRequireDefault(_deepEqual);
var _objectAssign = require('object-assign');
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _featureFilterGeojson = require('feature-filter-geojson');
var _featureFilterGeojson2 = _interopRequireDefault(_featureFilterGeojson);
var _styles = require('@material-ui/core/styles');
var _prop_types = require('../../util/prop_types');
var MFPropTypes = _interopRequireWildcard(_prop_types);
var _map_helpers = require('../../util/map_helpers');
var _config = require('../../../config.json');
var _config2 = _interopRequireDefault(_config);
var _Popup = require('./Popup');
var _Popup2 = _interopRequireDefault(_Popup);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
require('insert-css')('.mapboxgl-map{font:12px/20px \'Helvetica Neue\', Arial, Helvetica, sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}.mapboxgl-map:-webkit-full-screen{width:100%;height:100%;}.mapboxgl-canary{background-color:salmon;}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group > button.mapboxgl-ctrl-compass:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y;}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom;}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none;}.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right{position:absolute;pointer-events:none;z-index:2;}.mapboxgl-ctrl-top-left{top:0;left:0;}.mapboxgl-ctrl-top-right{top:0;right:0;}.mapboxgl-ctrl-bottom-left{bottom:0;left:0;}.mapboxgl-ctrl-bottom-right{right:0;bottom:0;}.mapboxgl-ctrl{clear:both;pointer-events:auto;}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{margin:10px 0 0 10px;float:left;}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{margin:10px 10px 0 0;float:right;}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl{margin:0 0 10px 10px;float:left;}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{margin:0 10px 10px 0;float:right;}.mapboxgl-ctrl-group{border-radius:4px;-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.1);-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.1);box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1);overflow:hidden;background:#fff;}.mapboxgl-ctrl-group > button{width:30px;height:30px;display:block;padding:0;outline:none;border:0;box-sizing:border-box;background-color:transparent;cursor:pointer;}.mapboxgl-ctrl-group > button + button{border-top:1px solid #ddd;}.mapboxgl-ctrl > button::-moz-focus-inner{border:0;padding:0;}.mapboxgl-ctrl > button:hover{background-color:rgba(0, 0, 0, 0.05);}.mapboxgl-ctrl-icon,.mapboxgl-ctrl-icon > .mapboxgl-ctrl-compass-arrow{speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.mapboxgl-ctrl-icon{padding:5px;}.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E %3Cpath style=\'fill:%23333333;\' d=\'m 7,9 c -0.554,0 -1,0.446 -1,1 0,0.554 0.446,1 1,1 l 6,0 c 0.554,0 1,-0.446 1,-1 0,-0.554 -0.446,-1 -1,-1 z\'/%3E %3C/svg%3E");}.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E %3Cpath style=\'fill:%23333333;\' d=\'M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z\'/%3E %3C/svg%3E");}.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23333\'%3E %3Cpath d=\'M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z\'/%3E %3C/svg%3E");}.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate:disabled{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23aaa\'%3E %3Cpath d=\'M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z\'/%3E %3C/svg%3E");}.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\' fill=\'%2333b5e5\'%3E %3Cpath d=\'M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z\'/%3E %3C/svg%3E");}.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23e58978\'%3E %3Cpath d=\'M10 4C9 4 9 5 9 5L9 5.1A5 5 0 0 0 5.1 9L5 9C5 9 4 9 4 10 4 11 5 11 5 11L5.1 11A5 5 0 0 0 9 14.9L9 15C9 15 9 16 10 16 11 16 11 15 11 15L11 14.9A5 5 0 0 0 14.9 11L15 11C15 11 16 11 16 10 16 9 15 9 15 9L14.9 9A5 5 0 0 0 11 5.1L11 5C11 5 11 4 10 4zM10 6.5A3.5 3.5 0 0 1 13.5 10 3.5 3.5 0 0 1 10 13.5 3.5 3.5 0 0 1 6.5 10 3.5 3.5 0 0 1 10 6.5zM10 8.3A1.8 1.8 0 0 0 8.3 10 1.8 1.8 0 0 0 10 11.8 1.8 1.8 0 0 0 11.8 10 1.8 1.8 0 0 0 10 8.3z\'/%3E %3C/svg%3E");}.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\' fill=\'%2333b5e5\'%3E %3Cpath d=\'M 10,4 C 9,4 9,5 9,5 L 9,5.1 C 7.0357113,5.5006048 5.5006048,7.0357113 5.1,9 L 5,9 c 0,0 -1,0 -1,1 0,1 1,1 1,1 l 0.1,0 c 0.4006048,1.964289 1.9357113,3.499395 3.9,3.9 L 9,15 c 0,0 0,1 1,1 1,0 1,-1 1,-1 l 0,-0.1 c 1.964289,-0.400605 3.499395,-1.935711 3.9,-3.9 l 0.1,0 c 0,0 1,0 1,-1 C 16,9 15,9 15,9 L 14.9,9 C 14.499395,7.0357113 12.964289,5.5006048 11,5.1 L 11,5 c 0,0 0,-1 -1,-1 z m 0,2.5 c 1.932997,0 3.5,1.5670034 3.5,3.5 0,1.932997 -1.567003,3.5 -3.5,3.5 C 8.0670034,13.5 6.5,11.932997 6.5,10 6.5,8.0670034 8.0670034,6.5 10,6.5 Z\'/%3E %3C/svg%3E");}.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23e54e33\'%3E %3Cpath d=\'M 10,4 C 9,4 9,5 9,5 L 9,5.1 C 7.0357113,5.5006048 5.5006048,7.0357113 5.1,9 L 5,9 c 0,0 -1,0 -1,1 0,1 1,1 1,1 l 0.1,0 c 0.4006048,1.964289 1.9357113,3.499395 3.9,3.9 L 9,15 c 0,0 0,1 1,1 1,0 1,-1 1,-1 l 0,-0.1 c 1.964289,-0.400605 3.499395,-1.935711 3.9,-3.9 l 0.1,0 c 0,0 1,0 1,-1 C 16,9 15,9 15,9 L 14.9,9 C 14.499395,7.0357113 12.964289,5.5006048 11,5.1 L 11,5 c 0,0 0,-1 -1,-1 z m 0,2.5 c 1.932997,0 3.5,1.5670034 3.5,3.5 0,1.932997 -1.567003,3.5 -3.5,3.5 C 8.0670034,13.5 6.5,11.932997 6.5,10 6.5,8.0670034 8.0670034,6.5 10,6.5 Z\'/%3E %3C/svg%3E");}.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting{-webkit-animation:mapboxgl-spin 2s infinite linear;-moz-animation:mapboxgl-spin 2s infinite linear;-o-animation:mapboxgl-spin 2s infinite linear;-ms-animation:mapboxgl-spin 2s infinite linear;animation:mapboxgl-spin 2s infinite linear;}@-webkit-keyframes mapboxgl-spin{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}@-moz-keyframes mapboxgl-spin{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}@-o-keyframes mapboxgl-spin{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}@-ms-keyframes mapboxgl-spin{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.mapboxgl-ctrl-icon.mapboxgl-ctrl-fullscreen{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E %3Cpath d=\'M 5 4 C 4.5 4 4 4.5 4 5 L 4 6 L 4 9 L 4.5 9 L 5.7773438 7.296875 C 6.7771319 8.0602131 7.835765 8.9565728 8.890625 10 C 7.8257121 11.0633 6.7761791 11.951675 5.78125 12.707031 L 4.5 11 L 4 11 L 4 15 C 4 15.5 4.5 16 5 16 L 9 16 L 9 15.5 L 7.2734375 14.205078 C 8.0428931 13.187886 8.9395441 12.133481 9.9609375 11.068359 C 11.042371 12.14699 11.942093 13.2112 12.707031 14.21875 L 11 15.5 L 11 16 L 14 16 L 15 16 C 15.5 16 16 15.5 16 15 L 16 14 L 16 11 L 15.5 11 L 14.205078 12.726562 C 13.177985 11.949617 12.112718 11.043577 11.037109 10.009766 C 12.151856 8.981061 13.224345 8.0798624 14.228516 7.3046875 L 15.5 9 L 16 9 L 16 5 C 16 4.5 15.5 4 15 4 L 11 4 L 11 4.5 L 12.703125 5.7773438 C 11.932647 6.7864834 11.026693 7.8554712 9.9707031 8.9199219 C 8.9584739 7.8204943 8.0698767 6.7627188 7.3046875 5.7714844 L 9 4.5 L 9 4 L 6 4 L 5 4 z \'/%3E %3C/svg%3E");}.mapboxgl-ctrl-icon.mapboxgl-ctrl-shrink{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E %3Cpath style=\'fill:%23000000;\' d=\'M 4.2421875 3.4921875 A 0.750075 0.750075 0 0 0 3.71875 4.78125 L 5.9648438 7.0273438 L 4 8.5 L 4 9 L 8 9 C 8.500001 8.9999988 9 8.4999992 9 8 L 9 4 L 8.5 4 L 7.0175781 5.9550781 L 4.78125 3.71875 A 0.750075 0.750075 0 0 0 4.2421875 3.4921875 z M 15.734375 3.4921875 A 0.750075 0.750075 0 0 0 15.21875 3.71875 L 12.984375 5.953125 L 11.5 4 L 11 4 L 11 8 C 11 8.4999992 11.499999 8.9999988 12 9 L 16 9 L 16 8.5 L 14.035156 7.0273438 L 16.28125 4.78125 A 0.750075 0.750075 0 0 0 15.734375 3.4921875 z M 4 11 L 4 11.5 L 5.9648438 12.972656 L 3.71875 15.21875 A 0.75130096 0.75130096 0 1 0 4.78125 16.28125 L 7.0273438 14.035156 L 8.5 16 L 9 16 L 9 12 C 9 11.500001 8.500001 11.000001 8 11 L 4 11 z M 12 11 C 11.499999 11.000001 11 11.500001 11 12 L 11 16 L 11.5 16 L 12.972656 14.035156 L 15.21875 16.28125 A 0.75130096 0.75130096 0 1 0 16.28125 15.21875 L 14.035156 12.972656 L 16 11.5 L 16 11 L 12 11 z \'/%3E %3C/svg%3E");}.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > .mapboxgl-ctrl-compass-arrow{width:20px;height:20px;margin:5px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E %3Cpolygon fill=\'%23333333\' points=\'6,9 10,1 14,9\'/%3E %3Cpolygon fill=\'%23CCCCCC\' points=\'6,11 10,19 14,11 \'/%3E %3C/svg%3E");background-repeat:no-repeat;display:inline-block;}a.mapboxgl-ctrl-logo{width:85px;height:21px;margin:0 0 -3px -3px;display:block;background-repeat:no-repeat;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3C?xml version=\'1.0\' encoding=\'utf-8\'?%3E%3Csvg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 84.49 21\' style=\'enable-background:new 0 0 84.49 21;\' xml:space=\'preserve\'%3E%3Cg%3E %3Cpath class=\'st0\' style=\'opacity:0.9; fill: %23FFFFFF; enable-background: new;\' d=\'M83.25,14.26c0,0.12-0.09,0.21-0.21,0.21h-1.61c-0.13,0-0.24-0.06-0.3-0.17l-1.44-2.39l-1.44,2.39 c-0.06,0.11-0.18,0.17-0.3,0.17h-1.61c-0.04,0-0.08-0.01-0.12-0.03c-0.09-0.06-0.13-0.19-0.06-0.28l0,0l2.43-3.68L76.2,6.84 c-0.02-0.03-0.03-0.07-0.03-0.12c0-0.12,0.09-0.21,0.21-0.21h1.61c0.13,0,0.24,0.06,0.3,0.17l1.41,2.36l1.4-2.35 c0.06-0.11,0.18-0.17,0.3-0.17H83c0.04,0,0.08,0.01,0.12,0.03c0.09,0.06,0.13,0.19,0.06,0.28l0,0l-2.37,3.63l2.43,3.67 C83.24,14.18,83.25,14.22,83.25,14.26z\'/%3E %3Cpath class=\'st0\' style=\'opacity:0.9; fill: %23FFFFFF; enable-background: new;\' d=\'M66.24,9.59c-0.39-1.88-1.96-3.28-3.84-3.28c-1.03,0-2.03,0.42-2.73,1.18V3.51c0-0.13-0.1-0.23-0.23-0.23h-1.4 c-0.13,0-0.23,0.11-0.23,0.23v10.72c0,0.13,0.1,0.23,0.23,0.23h1.4c0.13,0,0.23-0.11,0.23-0.23V13.5c0.71,0.75,1.7,1.18,2.73,1.18 c1.88,0,3.45-1.41,3.84-3.29C66.37,10.79,66.37,10.18,66.24,9.59L66.24,9.59z M62.08,13c-1.32,0-2.39-1.11-2.41-2.48v-0.06 c0.02-1.38,1.09-2.48,2.41-2.48s2.42,1.12,2.42,2.51S63.41,13,62.08,13z\'/%3E %3Cpath class=\'st0\' style=\'opacity:0.9; fill: %23FFFFFF; enable-background: new;\' d=\'M71.67,6.32c-1.98-0.01-3.72,1.35-4.16,3.29c-0.13,0.59-0.13,1.19,0,1.77c0.44,1.94,2.17,3.32,4.17,3.3 c2.35,0,4.26-1.87,4.26-4.19S74.04,6.32,71.67,6.32z M71.65,13.01c-1.33,0-2.42-1.12-2.42-2.51s1.08-2.52,2.42-2.52 c1.33,0,2.42,1.12,2.42,2.51S72.99,13,71.65,13.01L71.65,13.01z\'/%3E %3Cpath class=\'st1\' style=\'opacity:0.35; enable-background:new;\' d=\'M62.08,7.98c-1.32,0-2.39,1.11-2.41,2.48v0.06C59.68,11.9,60.75,13,62.08,13s2.42-1.12,2.42-2.51 S63.41,7.98,62.08,7.98z M62.08,11.76c-0.63,0-1.14-0.56-1.17-1.25v-0.04c0.01-0.69,0.54-1.25,1.17-1.25 c0.63,0,1.17,0.57,1.17,1.27C63.24,11.2,62.73,11.76,62.08,11.76z\'/%3E %3Cpath class=\'st1\' style=\'opacity:0.35; enable-background:new;\' d=\'M71.65,7.98c-1.33,0-2.42,1.12-2.42,2.51S70.32,13,71.65,13s2.42-1.12,2.42-2.51S72.99,7.98,71.65,7.98z M71.65,11.76c-0.64,0-1.17-0.57-1.17-1.27c0-0.7,0.53-1.26,1.17-1.26s1.17,0.57,1.17,1.27C72.82,11.21,72.29,11.76,71.65,11.76z\'/%3E %3Cpath class=\'st0\' style=\'opacity:0.9; fill: %23FFFFFF; enable-background: new;\' d=\'M45.74,6.53h-1.4c-0.13,0-0.23,0.11-0.23,0.23v0.73c-0.71-0.75-1.7-1.18-2.73-1.18 c-2.17,0-3.94,1.87-3.94,4.19s1.77,4.19,3.94,4.19c1.04,0,2.03-0.43,2.73-1.19v0.73c0,0.13,0.1,0.23,0.23,0.23h1.4 c0.13,0,0.23-0.11,0.23-0.23V6.74c0-0.12-0.09-0.22-0.22-0.22C45.75,6.53,45.75,6.53,45.74,6.53z M44.12,10.53 C44.11,11.9,43.03,13,41.71,13s-2.42-1.12-2.42-2.51s1.08-2.52,2.4-2.52c1.33,0,2.39,1.11,2.41,2.48L44.12,10.53z\'/%3E %3Cpath class=\'st1\' style=\'opacity:0.35; enable-background:new;\' d=\'M41.71,7.98c-1.33,0-2.42,1.12-2.42,2.51S40.37,13,41.71,13s2.39-1.11,2.41-2.48v-0.06 C44.1,9.09,43.03,7.98,41.71,7.98z M40.55,10.49c0-0.7,0.52-1.27,1.17-1.27c0.64,0,1.14,0.56,1.17,1.25v0.04 c-0.01,0.68-0.53,1.24-1.17,1.24C41.08,11.75,40.55,11.19,40.55,10.49z\'/%3E %3Cpath class=\'st0\' style=\'opacity:0.9; fill: %23FFFFFF; enable-background: new;\' d=\'M52.41,6.32c-1.03,0-2.03,0.42-2.73,1.18V6.75c0-0.13-0.1-0.23-0.23-0.23h-1.4c-0.13,0-0.23,0.11-0.23,0.23 v10.72c0,0.13,0.1,0.23,0.23,0.23h1.4c0.13,0,0.23-0.1,0.23-0.23V13.5c0.71,0.75,1.7,1.18,2.74,1.18c2.17,0,3.94-1.87,3.94-4.19 S54.58,6.32,52.41,6.32z M52.08,13.01c-1.32,0-2.39-1.11-2.42-2.48v-0.07c0.02-1.38,1.09-2.49,2.4-2.49c1.32,0,2.41,1.12,2.41,2.51 S53.4,13,52.08,13.01L52.08,13.01z\'/%3E %3Cpath class=\'st1\' style=\'opacity:0.35; enable-background:new;\' d=\'M52.08,7.98c-1.32,0-2.39,1.11-2.42,2.48v0.06c0.03,1.38,1.1,2.48,2.42,2.48s2.41-1.12,2.41-2.51 S53.4,7.98,52.08,7.98z M52.08,11.76c-0.63,0-1.14-0.56-1.17-1.25v-0.04c0.01-0.69,0.54-1.25,1.17-1.25c0.63,0,1.17,0.58,1.17,1.27 S52.72,11.76,52.08,11.76z\'/%3E %3Cpath class=\'st0\' style=\'opacity:0.9; fill: %23FFFFFF; enable-background: new;\' d=\'M36.08,14.24c0,0.13-0.1,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68c0-0.98-0.74-1.71-1.62-1.71 c-0.8,0-1.46,0.7-1.59,1.62l0.01,4.66c0,0.13-0.11,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68 c0-0.98-0.74-1.71-1.62-1.71c-0.85,0-1.54,0.79-1.6,1.8v4.48c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V6.74 c0.01-0.13,0.1-0.22,0.23-0.22h1.4c0.13,0,0.22,0.11,0.23,0.22V7.4c0.5-0.68,1.3-1.09,2.16-1.1h0.03c1.09,0,2.09,0.6,2.6,1.55 c0.45-0.95,1.4-1.55,2.44-1.56c1.62,0,2.93,1.25,2.9,2.78L36.08,14.24z\'/%3E %3Cpath class=\'st1\' style=\'opacity:0.35; enable-background:new;\' d=\'M84.34,13.59l-0.07-0.13l-1.96-2.99l1.94-2.95c0.44-0.67,0.26-1.56-0.41-2.02c-0.02,0-0.03,0-0.04-0.01 c-0.23-0.15-0.5-0.22-0.78-0.22h-1.61c-0.56,0-1.08,0.29-1.37,0.78L79.72,6.6l-0.34-0.56C79.09,5.56,78.57,5.27,78,5.27h-1.6 c-0.6,0-1.13,0.37-1.35,0.92c-2.19-1.66-5.28-1.47-7.26,0.45c-0.35,0.34-0.65,0.72-0.89,1.14c-0.9-1.62-2.58-2.72-4.5-2.72 c-0.5,0-1.01,0.07-1.48,0.23V3.51c0-0.82-0.66-1.48-1.47-1.48h-1.4c-0.81,0-1.47,0.66-1.47,1.47v3.75 c-0.95-1.36-2.5-2.18-4.17-2.19c-0.74,0-1.46,0.16-2.12,0.47c-0.24-0.17-0.54-0.26-0.84-0.26h-1.4c-0.45,0-0.87,0.21-1.15,0.56 c-0.02-0.03-0.04-0.05-0.07-0.08c-0.28-0.3-0.68-0.47-1.09-0.47h-1.39c-0.3,0-0.6,0.09-0.84,0.26c-0.67-0.3-1.39-0.46-2.12-0.46 c-1.83,0-3.43,1-4.37,2.5c-0.2-0.46-0.48-0.89-0.83-1.25c-0.8-0.81-1.89-1.25-3.02-1.25h-0.01c-0.89,0.01-1.75,0.33-2.46,0.88 c-0.74-0.57-1.64-0.88-2.57-0.88H28.1c-0.29,0-0.58,0.03-0.86,0.11c-0.28,0.06-0.56,0.16-0.82,0.28c-0.21-0.12-0.45-0.18-0.7-0.18 h-1.4c-0.82,0-1.47,0.66-1.47,1.47v7.5c0,0.82,0.66,1.47,1.47,1.47h1.4c0.82,0,1.48-0.66,1.48-1.48l0,0V9.79 c0.03-0.36,0.23-0.59,0.36-0.59c0.18,0,0.38,0.18,0.38,0.47v4.57c0,0.82,0.66,1.47,1.47,1.47h1.41c0.82,0,1.47-0.66,1.47-1.47 l-0.01-4.57c0.06-0.32,0.25-0.47,0.35-0.47c0.18,0,0.38,0.18,0.38,0.47v4.57c0,0.82,0.66,1.47,1.47,1.47h1.41 c0.82,0,1.47-0.66,1.47-1.47v-0.38c0.96,1.29,2.46,2.06,4.06,2.06c0.74,0,1.46-0.16,2.12-0.47c0.24,0.17,0.54,0.26,0.84,0.26h1.39 c0.3,0,0.6-0.09,0.84-0.26v2.01c0,0.82,0.66,1.47,1.47,1.47h1.4c0.82,0,1.47-0.66,1.47-1.47v-1.77c0.48,0.15,0.99,0.23,1.49,0.22 c1.7,0,3.22-0.87,4.17-2.2v0.52c0,0.82,0.66,1.47,1.47,1.47h1.4c0.3,0,0.6-0.09,0.84-0.26c0.66,0.31,1.39,0.47,2.12,0.47 c1.92,0,3.6-1.1,4.49-2.73c1.54,2.65,4.95,3.53,7.58,1.98c0.18-0.11,0.36-0.22,0.53-0.36c0.22,0.55,0.76,0.91,1.35,0.9H78 c0.56,0,1.08-0.29,1.37-0.78l0.37-0.61l0.37,0.61c0.29,0.48,0.81,0.78,1.38,0.78h1.6c0.81,0,1.46-0.66,1.45-1.46 C84.49,14.02,84.44,13.8,84.34,13.59L84.34,13.59z M35.86,14.47h-1.41c-0.13,0-0.23-0.11-0.23-0.23V9.68 c0-0.98-0.74-1.71-1.62-1.71c-0.8,0-1.46,0.7-1.59,1.62l0.01,4.66c0,0.13-0.1,0.23-0.23,0.23h-1.41c-0.13,0-0.23-0.11-0.23-0.23 V9.68c0-0.98-0.74-1.71-1.62-1.71c-0.85,0-1.54,0.79-1.6,1.8v4.48c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23 V6.74c0.01-0.13,0.11-0.22,0.23-0.22h1.4c0.13,0,0.22,0.11,0.23,0.22V7.4c0.5-0.68,1.3-1.09,2.16-1.1h0.03 c1.09,0,2.09,0.6,2.6,1.55c0.45-0.95,1.4-1.55,2.44-1.56c1.62,0,2.93,1.25,2.9,2.78l0.01,5.16C36.09,14.36,35.98,14.46,35.86,14.47 L35.86,14.47z M45.97,14.24c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V13.5c-0.7,0.76-1.69,1.18-2.72,1.18 c-2.17,0-3.94-1.87-3.94-4.19s1.77-4.19,3.94-4.19c1.03,0,2.02,0.43,2.73,1.18V6.74c0-0.13,0.1-0.23,0.23-0.23h1.4 c0.12-0.01,0.22,0.08,0.23,0.21c0,0.01,0,0.01,0,0.02v7.51h-0.01V14.24z M52.41,14.67c-1.03,0-2.02-0.43-2.73-1.18v3.97 c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.1-0.23-0.23V6.75c0-0.13,0.1-0.22,0.23-0.22h1.4c0.13,0,0.23,0.11,0.23,0.23v0.73 c0.71-0.76,1.7-1.18,2.73-1.18c2.17,0,3.94,1.86,3.94,4.18S54.58,14.67,52.41,14.67z M66.24,11.39c-0.39,1.87-1.96,3.29-3.84,3.29 c-1.03,0-2.02-0.43-2.73-1.18v0.73c0,0.13-0.1,0.23-0.23,0.23h-1.4c-0.13,0-0.23-0.11-0.23-0.23V3.51c0-0.13,0.1-0.23,0.23-0.23 h1.4c0.13,0,0.23,0.11,0.23,0.23v3.97c0.71-0.75,1.7-1.18,2.73-1.17c1.88,0,3.45,1.4,3.84,3.28C66.37,10.19,66.37,10.8,66.24,11.39 L66.24,11.39L66.24,11.39z M71.67,14.68c-2,0.01-3.73-1.35-4.17-3.3c-0.13-0.59-0.13-1.19,0-1.77c0.44-1.94,2.17-3.31,4.17-3.3 c2.36,0,4.26,1.87,4.26,4.19S74.03,14.68,71.67,14.68L71.67,14.68z M83.04,14.47h-1.61c-0.13,0-0.24-0.06-0.3-0.17l-1.44-2.39 l-1.44,2.39c-0.06,0.11-0.18,0.17-0.3,0.17h-1.61c-0.04,0-0.08-0.01-0.12-0.03c-0.09-0.06-0.13-0.19-0.06-0.28l0,0l2.43-3.68 L76.2,6.84c-0.02-0.03-0.03-0.07-0.03-0.12c0-0.12,0.09-0.21,0.21-0.21h1.61c0.13,0,0.24,0.06,0.3,0.17l1.41,2.36l1.41-2.36 c0.06-0.11,0.18-0.17,0.3-0.17h1.61c0.04,0,0.08,0.01,0.12,0.03c0.09,0.06,0.13,0.19,0.06,0.28l0,0l-2.38,3.64l2.43,3.67 c0.02,0.03,0.03,0.07,0.03,0.12C83.25,14.38,83.16,14.47,83.04,14.47L83.04,14.47L83.04,14.47z\'/%3E %3Cpath class=\'st0\' style=\'opacity:0.9; fill: %23FFFFFF; enable-background: new;\' d=\'M10.5,1.24c-5.11,0-9.25,4.15-9.25,9.25s4.15,9.25,9.25,9.25s9.25-4.15,9.25-9.25 C19.75,5.38,15.61,1.24,10.5,1.24z M14.89,12.77c-1.93,1.93-4.78,2.31-6.7,2.31c-0.7,0-1.41-0.05-2.1-0.16c0,0-1.02-5.64,2.14-8.81 c0.83-0.83,1.95-1.28,3.13-1.28c1.27,0,2.49,0.51,3.39,1.42C16.59,8.09,16.64,11,14.89,12.77z\'/%3E %3Cpath class=\'st1\' style=\'opacity:0.35; enable-background:new;\' d=\'M10.5-0.01C4.7-0.01,0,4.7,0,10.49s4.7,10.5,10.5,10.5S21,16.29,21,10.49C20.99,4.7,16.3-0.01,10.5-0.01z M10.5,19.74c-5.11,0-9.25-4.15-9.25-9.25s4.14-9.26,9.25-9.26s9.25,4.15,9.25,9.25C19.75,15.61,15.61,19.74,10.5,19.74z\'/%3E %3Cpath class=\'st1\' style=\'opacity:0.35; enable-background:new;\' d=\'M14.74,6.25C12.9,4.41,9.98,4.35,8.23,6.1c-3.16,3.17-2.14,8.81-2.14,8.81s5.64,1.02,8.81-2.14 C16.64,11,16.59,8.09,14.74,6.25z M12.47,10.34l-0.91,1.87l-0.9-1.87L8.8,9.43l1.86-0.9l0.9-1.87l0.91,1.87l1.86,0.9L12.47,10.34z\'/%3E %3Cpolygon class=\'st0\' style=\'opacity:0.9; fill: %23FFFFFF; enable-background: new;\' points=\'14.33,9.43 12.47,10.34 11.56,12.21 10.66,10.34 8.8,9.43 10.66,8.53 11.56,6.66 12.47,8.53 \'/%3E%3C/g%3E%3C/svg%3E");}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:21px;height:21px;background-image:url("data:image/svg+xml;charset=utf-8,%3C?xml version=\'1.0\' encoding=\'utf-8\'?%3E %3Csvg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 21 21\' style=\'enable-background:new 0 0 21 21;\' xml:space=\'preserve\'%3E%3Cg transform=\'translate(0,0.01)\'%3E%3Cpath d=\'m 10.5,1.24 c -5.11,0 -9.25,4.15 -9.25,9.25 0,5.1 4.15,9.25 9.25,9.25 5.1,0 9.25,-4.15 9.25,-9.25 0,-5.11 -4.14,-9.25 -9.25,-9.25 z m 4.39,11.53 c -1.93,1.93 -4.78,2.31 -6.7,2.31 -0.7,0 -1.41,-0.05 -2.1,-0.16 0,0 -1.02,-5.64 2.14,-8.81 0.83,-0.83 1.95,-1.28 3.13,-1.28 1.27,0 2.49,0.51 3.39,1.42 1.84,1.84 1.89,4.75 0.14,6.52 z\' style=\'opacity:0.9;fill:%23ffffff;enable-background:new\' class=\'st0\'/%3E%3Cpath d=\'M 10.5,-0.01 C 4.7,-0.01 0,4.7 0,10.49 c 0,5.79 4.7,10.5 10.5,10.5 5.8,0 10.5,-4.7 10.5,-10.5 C 20.99,4.7 16.3,-0.01 10.5,-0.01 Z m 0,19.75 c -5.11,0 -9.25,-4.15 -9.25,-9.25 0,-5.1 4.14,-9.26 9.25,-9.26 5.11,0 9.25,4.15 9.25,9.25 0,5.13 -4.14,9.26 -9.25,9.26 z\' style=\'opacity:0.35;enable-background:new\' class=\'st1\'/%3E%3Cpath d=\'M 14.74,6.25 C 12.9,4.41 9.98,4.35 8.23,6.1 5.07,9.27 6.09,14.91 6.09,14.91 c 0,0 5.64,1.02 8.81,-2.14 C 16.64,11 16.59,8.09 14.74,6.25 Z m -2.27,4.09 -0.91,1.87 -0.9,-1.87 -1.86,-0.91 1.86,-0.9 0.9,-1.87 0.91,1.87 1.86,0.9 z\' style=\'opacity:0.35;enable-background:new\' class=\'st1\'/%3E%3Cpolygon points=\'11.56,12.21 10.66,10.34 8.8,9.43 10.66,8.53 11.56,6.66 12.47,8.53 14.33,9.43 12.47,10.34 \' style=\'opacity:0.9;fill:%23ffffff;enable-background:new\' class=\'st0\'/%3E%3C/g%3E%3C/svg%3E");}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{padding:0 5px;background-color:rgba(255, 255, 255, 0.5);margin:0;}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{padding-top:2px;padding-bottom:2px;margin:0 10px 10px;position:relative;padding-right:24px;background-color:#fff;border-radius:3px 12px 12px 3px;visibility:hidden;}.mapboxgl-ctrl-attrib.mapboxgl-compact:hover{visibility:visible;}.mapboxgl-ctrl-attrib.mapboxgl-compact::after{content:\'\';cursor:pointer;position:absolute;bottom:0;right:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'%3E %3Cpath fill=\'%23333333\' fill-rule=\'evenodd\' d=\'M4,10a6,6 0 1,0 12,0a6,6 0 1,0 -12,0 M9,7a1,1 0 1,0 2,0a1,1 0 1,0 -2,0 M9,10a1,1 0 1,1 2,0l0,3a1,1 0 1,1 -2,0\'/%3E %3C/svg%3E");background-color:rgba(255, 255, 255, 0.5);width:24px;height:24px;box-sizing:border-box;visibility:visible;border-radius:12px;}}.mapboxgl-ctrl-attrib a{color:rgba(0, 0, 0, 0.75);text-decoration:none;}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline;}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:bold;margin-left:2px;}.mapboxgl-attrib-empty{display:none;}.mapboxgl-ctrl-scale{background-color:rgba(255, 255, 255, 0.75);font-size:10px;border-width:medium 2px 2px;border-style:none solid solid;border-color:#333;padding:0 5px;color:#333;box-sizing:border-box;}.mapboxgl-popup{position:absolute;top:0;left:0;display:-webkit-flex;display:flex;will-change:transform;pointer-events:none;}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{-webkit-flex-direction:column;flex-direction:column;}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{-webkit-flex-direction:column-reverse;flex-direction:column-reverse;}.mapboxgl-popup-anchor-left{-webkit-flex-direction:row;flex-direction:row;}.mapboxgl-popup-anchor-right{-webkit-flex-direction:row-reverse;flex-direction:row-reverse;}.mapboxgl-popup-tip{width:0;height:0;border:10px solid transparent;z-index:1;}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{-webkit-align-self:center;align-self:center;border-top:none;border-bottom-color:#fff;}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{-webkit-align-self:flex-start;align-self:flex-start;border-top:none;border-left:none;border-bottom-color:#fff;}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{-webkit-align-self:flex-end;align-self:flex-end;border-top:none;border-right:none;border-bottom-color:#fff;}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{-webkit-align-self:center;align-self:center;border-bottom:none;border-top-color:#fff;}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{-webkit-align-self:flex-start;align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff;}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{-webkit-align-self:flex-end;align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff;}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{-webkit-align-self:center;align-self:center;border-left:none;border-right-color:#fff;}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{-webkit-align-self:center;align-self:center;border-right:none;border-left-color:#fff;}.mapboxgl-popup-close-button{position:absolute;right:0;top:0;border:0;border-radius:0 3px 0 0;cursor:pointer;background-color:transparent;}.mapboxgl-popup-close-button:hover{background-color:rgba(0, 0, 0, 0.05);}.mapboxgl-popup-content{position:relative;background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);padding:10px 10px 15px;pointer-events:auto;}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0;}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0;}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0;}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0;}.mapboxgl-marker{position:absolute;top:0;left:0;will-change:transform;}.mapboxgl-user-location-dot{background-color:#1da1f2;width:15px;height:15px;border-radius:50%;box-shadow:0 0 2px rgba(0, 0, 0, 0.25);}.mapboxgl-user-location-dot::before{background-color:#1da1f2;content:\'\';width:15px;height:15px;border-radius:50%;position:absolute;-webkit-animation:mapboxgl-user-location-dot-pulse 2s infinite;-moz-animation:mapboxgl-user-location-dot-pulse 2s infinite;-ms-animation:mapboxgl-user-location-dot-pulse 2s infinite;animation:mapboxgl-user-location-dot-pulse 2s infinite;}.mapboxgl-user-location-dot::after{border-radius:50%;border:2px solid #fff;content:\'\';height:19px;left:-2px;position:absolute;top:-2px;width:19px;box-sizing:border-box;}@-webkit-keyframes mapboxgl-user-location-dot-pulse{0%{-webkit-transform:scale(1);opacity:1;}70%{-webkit-transform:scale(3);opacity:0;}100%{-webkit-transform:scale(1);opacity:0;}}@-ms-keyframes mapboxgl-user-location-dot-pulse{0%{-ms-transform:scale(1);opacity:1;}70%{-ms-transform:scale(3);opacity:0;}100%{-ms-transform:scale(1);opacity:0;}}@keyframes mapboxgl-user-location-dot-pulse{0%{transform:scale(1);opacity:1;}70%{transform:scale(3);opacity:0;}100%{transform:scale(1);opacity:0;}}.mapboxgl-user-location-dot-stale{background-color:#aaa;}.mapboxgl-user-location-dot-stale::after{display:none;}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair;}.mapboxgl-boxzoom{position:absolute;top:0;left:0;width:0;height:0;background:#fff;border:2px dotted #202020;opacity:0.5;}@media print{.mapbox-improve-map{display:none;}}');
/* Mapbox [API access token](https://www.mapbox.com/help/create-api-access-token/) */
_mapboxGl2.default.accessToken = _config2.default.mapboxToken;
var log = (0, _debug2.default)('mf:mapview');
var styles = {
root: {
width: '100%',
height: '100%',
position: 'absolute'
},
map: {
width: '100%',
height: '100%'
}
};
var emptyGeoJson = {
type: 'FeatureCollection',
features: []
};
var labelStyleLayer = {
id: 'labels',
type: 'symbol',
source: 'features',
layout: {
'text-field': '',
'text-allow-overlap': true,
'text-ignore-placement': true,
'text-size': 9,
'text-font': ['DIN Offc Pro Bold', 'Arial Unicode MS Bold']
},
paint: {
'text-color': '#fff',
'text-halo-color': 'rgba(100,100,100, 0.3)',
'text-halo-width': 0.3
}
};
var pointStyleLayer = {
id: 'points',
type: 'circle',
source: 'features',
paint: {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.5,
'stops': [[7, 5], [18, 25]]
},
'circle-color': {
'property': '__mf_color',
'type': 'identity'
},
'circle-opacity': 0.75,
'circle-stroke-width': 1.5,
'circle-stroke-color': '#ffffff',
'circle-stroke-opacity': 0.9
}
};
var pointHoverStyleLayer = {
id: 'points-hover',
type: 'circle',
source: 'hover',
paint: (0, _objectAssign2.default)({}, pointStyleLayer.paint, {
'circle-opacity': 1,
'circle-stroke-width': 2.5,
'circle-stroke-color': '#ffffff',
'circle-stroke-opacity': 1
})
};
var noop = function noop(x) {
return x;
};
var MapView = function (_React$Component) {
(0, _inherits3.default)(MapView, _React$Component);
function MapView() {
var _ref;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, MapView);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = MapView.__proto__ || (0, _getPrototypeOf2.default)(MapView)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.handleMapMoveOrZoom = function (e) {
if (e.internal) return;
_this.props.moveMap({
center: _this.map.getCenter().toArray(),
zoom: _this.map.getZoom(),
bearing: _this.map.getBearing()
});
}, _this.handleMapClick = function (e) {
// if (!this.map.loaded()) return
var features = _this.map.queryRenderedFeatures(e.point, { layers: ['points-hover'] });
if (!features.length) return;
_this.setState({ lngLat: null });
_this.props.showFeatureDetail(features[0].properties.__mf_id);
}, _this.handleMouseMove = function (e) {
if (!_this.map.loaded()) return;
var features = _this.map.queryRenderedFeatures(e.point, { layers: ['points', 'points-hover'] });
_this.map.getCanvas().style.cursor = features.length ? 'pointer' : '';
if (!features.length) {
_this.setState({ lngLat: null });
_this.map.getSource('hover').setData(emptyGeoJson);
return;
}
_this.map.getSource('hover').setData(features[0]);
_this.setState({ lngLat: features[0].geometry.coordinates });
_this.setState({ id: features[0].properties.__mf_id });
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(MapView, [{
key: 'ready',
value: function ready(fn) {
var _this2 = this;
if (this.map.loaded() && !this._styleDirty) {
fn();
} else {
this.map.once('load', function () {
return fn.call(_this2);
});
}
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
var classes = this.props.classes;
return _react2.default.createElement(
'div',
{ className: classes.root },
_react2.default.createElement('div', {
ref: function ref(el) {
return _this3.mapContainer = el;
},
className: classes.map
}),
this.state.lngLat && _react2.default.createElement(_Popup2.default, (0, _extends3.default)({ map: this.map }, this.state))
);
}
}, {
key: 'centerMap',
value: function centerMap(geojson) {
this.map.fitBounds((0, _map_helpers.getBoundsOrWorld)(geojson), { padding: 15, duration: 0 });
if (this.map.getZoom() > 13) {
this.map.setZoom(13);
}
}
// The first time our component mounts, render a new map into `mapDiv`
// with settings from props.
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _this4 = this;
var _props = this.props,
center = _props.center,
interactive = _props.interactive,
mapStyle = _props.mapStyle,
zoom = _props.zoom,
mapControls = _props.mapControls;
var mapDiv = document.createElement('div');
mapDiv.style.height = '100%';
mapDiv.style.width = '100%';
this.mapContainer.appendChild(mapDiv);
var map = window.map = this.map = new _mapboxGl2.default.Map({
style: mapStyle,
container: mapDiv,
center: center || [0, 0],
zoom: zoom || 0
});
map._prevStyle = mapStyle;
if (!interactive) {
map.scrollZoom.disable();
}
// Add zoom and rotation controls to the map.
map.addControl(new _mapboxGl2.default.NavigationControl());
map.dragRotate.disable();
map.touchZoomRotate.disableRotation();
this.geojson = this.getGeoJson(this.props);
map.once('load', function () {
if (interactive) {
map.on('moveend', _this4.handleMapMoveOrZoom);
map.on('click', _this4.handleMapClick);
map.on('mousemove', _this4.handleMouseMove);
}
_this4.setupLayers(_this4.props);
});
map.once('style.load', function () {
mapControls.forEach(function (control) {
map.addControl.bind(map)(control);
});
});
// If no map center or zoom passed, set map extent to extent of marker layer
if (!center || !zoom) {
this.centerMap(this.geojson);
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
this.updateIfNeeded(nextProps, this.props);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.map.off('moveend', this.handleMapMoveOrZoom);
this.map.off('click', this.handleMapClick);
this.map.off('mousemove', this.handleMouseMove);
this.map.remove();
}
}, {
key: 'setupLayers',
value: function setupLayers(props) {
var filter = props.filter,
labelPoints = props.labelPoints;
this.map.addSource('features', { type: 'geojson', data: this.geojson });
// TODO: Should choose style based on whether features are point, line or polygon
this.map.addSource('hover', { type: 'geojson', data: emptyGeoJson });
this.map.addLayer(pointStyleLayer);
this.map.addLayer(pointHoverStyleLayer);
this.map.addLayer(labelStyleLayer);
this.map.setFilter('points', filter);
this.map.setFilter('labels', filter);
if (labelPoints) {
this.map.setLayoutProperty('labels', 'text-field', '{__mf_label}');
this.map.setPaintProperty('points', 'circle-radius', 7);
}
}
}, {
key: 'updateIfNeeded',
value: function updateIfNeeded(nextProps) {
var _this5 = this;
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var disableScrollToZoom = props.disableScrollToZoom;
if (this.map._prevStyle !== nextProps.mapStyle) {
log('updating style');
this._styleDirty = true;
this.map.setStyle(nextProps.mapStyle);
this.map._prevStyle = nextProps.mapStyle;
this.map.once('style.load', function () {
_this5.setupLayers(nextProps);
_this5._styleDirty = false;
if (!_this5.map._loaded) return;
_this5.map.fire('load');
});
}
var shouldMapZoom = this.map.getZoom() !== nextProps.zoom;
var shouldMapMove = !(0, _deepEqual2.default)(this.map.getCenter().toArray(), nextProps.center);
if (shouldMapZoom || shouldMapMove) {
this.map.flyTo({ center: nextProps.center, zoom: nextProps.zoom }, { internal: true });
}
var shouldDataUpdate = nextProps.features !== props.features || nextProps.fieldMapping !== props.fieldMapping || nextProps.colorIndex !== props.colorIndex || nextProps.filter !== props.filter && props.labelPoints;
this.ready(function () {
if (shouldDataUpdate) {
_this5.geojson = _this5.getGeoJson(nextProps);
log('updating source', _this5.geojson);
_this5.map.getSource('features').setData(_this5.geojson);
_this5.centerMap(_this5.geojson);
}
_this5.updateFilterIfNeeded(nextProps.filter);
if (disableScrollToZoom !== nextProps.disableScrollToZoom) {
nextProps.disableScrollToZoom ? _this5.map.scrollZoom.disable() : _this5.map.scrollZoom.enable();
}
var textField = nextProps.labelPoints ? '{__mf_label}' : '';
if (_this5.map.getLayoutProperty('labels', 'text-field') !== textField) {
log('updating labels "' + textField + '"');
_this5.map.setLayoutProperty('labels', 'text-field', textField);
}
});
}
/**
* Moves the map to a new position if it is different from the current position
* @param {array} center new coordinates for center of map
* @param {number} zoom new zoom level for map
* @return {boolean} true if map has moved, otherwise false
*/
}, {
key: 'moveIfNeeded',
value: function moveIfNeeded(center, zoom) {
var currentPosition = {
center: this.map.getCenter().toArray(),
zoom: this.map.getZoom()
};
var newMapPosition = {
center: center,
zoom: zoom
};
var shouldMapMove = center && zoom && !(0, _deepEqual2.default)(currentPosition, newMapPosition);
if (shouldMapMove) {
log('Moving map');
this.map.jumpTo(newMapPosition);
return true;
}
return false;
}
}, {
key: 'updateFilterIfNeeded',
value: function updateFilterIfNeeded(filter) {
if (filter !== this.props.filter && filter) {
log('updating filter');
this.map.setFilter('points', filter);
this.map.setFilter('labels', filter);
}
}
// Construct GeoJSON for map
}, {
key: 'getGeoJson',
value: function getGeoJson(_ref2) {
var _ref2$features = _ref2.features,
features = _ref2$features === undefined ? [] : _ref2$features,
_ref2$fieldMapping = _ref2.fieldMapping,
fieldMapping = _ref2$fieldMapping === undefined ? {} : _ref2$fieldMapping,
_ref2$colorIndex = _ref2.colorIndex,
colorIndex = _ref2$colorIndex === undefined ? {} : _ref2$colorIndex,
_ref2$filter = _ref2.filter,
filter = _ref2$filter === undefined ? [] : _ref2$filter;
var i = 0;
var ff = (0, _featureFilterGeojson2.default)(filter);
return {
type: 'FeatureCollection',
features: features.filter(function (f) {
return f.geometry;
}).map(function (f) {
var newFeature = {
type: 'feature',
geometry: f.geometry,
properties: (0, _objectAssign2.default)({}, f.properties, {
__mf_id: f.id,
__mf_color: colorIndex[f.properties[fieldMapping.color] || f.properties[fieldMapping.color + '.0']]
})
};
if (ff(f)) newFeature.properties.__mf_label = _config2.default.labelChars.charAt(i++);
return newFeature;
})
};
}
}]);
return MapView;
}(_react2.default.Component);
MapView.defaultProps = {
center: [0, 0],
zoom: 0,
features: [],
showFeatureDetail: noop,
moveMap: noop,
interactive: true,
labelPoints: false,
mapControls: []
};
MapView.propTypes = {
/* map center point [lon, lat] */
center: _propTypes2.default.array,
/* Geojson FeatureCollection of features to show on map */
features: _propTypes2.default.arrayOf(MFPropTypes.mapViewFeature).isRequired,
/* Current filter (See https://www.mapbox.com/mapbox-gl-style-spec/#types-filter) */
filter: MFPropTypes.mapboxFilter,
/**
* - NOT yet dynamic e.g. if you change it the map won't change
* Map style. This must be an an object conforming to the schema described in the [style reference](https://mapbox.com/mapbox-gl-style-spec/), or a URL to a JSON style. To load a style from the Mapbox API, you can use a URL of the form `mapbox://styles/:owner/:style`, where `:owner` is your Mapbox account name and `:style` is the style ID. Or you can use one of the predefined Mapbox styles.
*/
mapStyle: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
labelPoints: _propTypes2.default.bool,
/**
* Triggered when a marker is clicked. Called with a (cloned) GeoJson feature
* object of the marker that was clicked.
*/
showFeatureDetail: _propTypes2.default.func,
/* Triggered when map is moved, called with map center [lng, lat] */
moveMap: _propTypes2.default.func.isRequired,
fieldMapping: MFPropTypes.fieldMapping,
/* map zoom */
zoom: _propTypes2.default.number,
interactive: _propTypes2.default.bool,
mapControls: _propTypes2.default.arrayOf(_propTypes2.default.shape({
onAdd: _propTypes2.default.func.isRequired,
onRemove: _propTypes2.default.func.isRequired
}))
};
MapView.MfViewId = 'map';
exports.default = (0, _styles.withStyles)(styles)(MapView);
//# sourceMappingURL=MapView.js.map