svg buttons (initial)

removed styled-components
gradient paths

.babelrc

@@ -2,6 +2,7 @@
   "presets": ["env", "react","stage-2"],
   "plugins": [
     "react-hot-loader/babel",
+    "lodash",
     ["transform-runtime", {
       "polyfill": false,
       "regenerator": true

package-lock.json

@@ -969,7 +969,6 @@
       "version": "5.5.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
       "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
-      "dev": true,
       "requires": {
         "co": "^4.6.0",
         "fast-deep-equal": "^1.0.0",
@@ -1141,6 +1140,15 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "optional": true,
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
     "asn1.js": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
@@ -1178,6 +1186,11 @@
         }
       }
     },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+    },
     "assign-symbols": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
@@ -1208,6 +1221,12 @@
       "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=",
       "dev": true
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "optional": true
+    },
     "atob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.1.tgz",
@@ -1240,6 +1259,18 @@
         }
       }
     },
+    "aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+      "optional": true
+    },
+    "aws4": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
+      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
+      "optional": true
+    },
     "axios": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
@@ -1695,6 +1726,19 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-lodash": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-lodash/-/babel-plugin-lodash-3.3.4.tgz",
+      "integrity": "sha512-yDZLjK7TCkWl1gpBeBGmuaDIFhZKmkoL+Cu2MUUjv5VxUZx/z7tBGBCBcQs5RI1Bkz5LLmNdjx7paOyQtMovyg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0-beta.49",
+        "@babel/types": "^7.0.0-beta.49",
+        "glob": "^7.1.1",
+        "lodash": "^4.17.10",
+        "require-package-name": "^2.0.1"
+      }
+    },
     "babel-plugin-syntax-async-functions": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz",
@@ -2512,6 +2556,15 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "optional": true,
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
     "big.js": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
@@ -2978,6 +3031,12 @@
       "integrity": "sha512-h04kV/lcuhItU1CZTJOxUEk/9R+1XeJqgc67E+XC8J9TjPM8kzVgOn27ZtRdDUo8O5F8U4QRCzDWJrVym3w3Cg==",
       "dev": true
     },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "optional": true
+    },
     "chalk": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
@@ -3123,6 +3182,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz",
@@ -3285,8 +3349,7 @@
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
-      "dev": true
     },
     "coa": {
       "version": "1.0.4",
@@ -3365,6 +3428,14 @@
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
       "dev": true
     },
+    "combined-stream": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
+      "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "2.17.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
@@ -3520,8 +3591,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
-      "dev": true
     },
     "create-ecdh": {
       "version": "4.0.3",
@@ -3788,6 +3858,15 @@
       "integrity": "sha1-7H6lDHhWTNNsnV7Bj2Yyn63ieCk=",
       "dev": true
     },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "optional": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
     "date-fns": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
@@ -3933,6 +4012,11 @@
         }
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -4137,6 +4221,16 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "optional": true,
+      "requires": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
     "editions": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/editions/-/editions-1.3.4.tgz",
@@ -4244,7 +4338,6 @@
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
       "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
-      "dev": true,
       "requires": {
         "prr": "~1.0.1"
       }
@@ -4939,6 +5032,12 @@
         }
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "optional": true
+    },
     "extend-shallow": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
@@ -5036,11 +5135,15 @@
         }
       }
     },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
+    },
     "fast-deep-equal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
-      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
+      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
-      "dev": true
     },
     "fast-glob": {
       "version": "2.2.2",
@@ -5059,8 +5162,7 @@
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
-      "dev": true
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -5291,6 +5393,23 @@
       "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=",
       "dev": true
     },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "optional": true
+    },
+    "form-data": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz",
+      "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=",
+      "optional": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "1.0.6",
+        "mime-types": "^2.1.12"
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -5910,6 +6029,15 @@
       "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
       "dev": true
     },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "optional": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
     "gh-got": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gh-got/-/gh-got-6.0.0.tgz",
@@ -6169,8 +6297,7 @@
     "graceful-fs": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
-      "dev": true
     },
     "grouped-queue": {
       "version": "0.3.3",
@@ -6187,6 +6314,22 @@
       "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=",
       "dev": true
     },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+      "optional": true
+    },
+    "har-validator": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.0.tgz",
+      "integrity": "sha512-+qnmNjI4OfH2ipQ9VQOw23bBd/ibtfbVdK2fYbY4acTDqKTW/YDp9McimZdDbG8iV9fZizUqQMD5xvriB146TA==",
+      "optional": true,
+      "requires": {
+        "ajv": "^5.3.0",
+        "har-schema": "^2.0.0"
+      }
+    },
     "harmony-reflect": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.0.tgz",
@@ -6536,6 +6679,17 @@
         "micromatch": "^3.1.9"
       }
     },
+    "http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "optional": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      }
+    },
     "https-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
@@ -6625,6 +6779,12 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "optional": true
+    },
     "import-local": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz",
@@ -7106,6 +7266,12 @@
       "integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=",
       "dev": true
     },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "optional": true
+    },
     "is-unc-path": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz",
@@ -7169,6 +7335,12 @@
         "whatwg-fetch": ">=0.10.0"
       }
     },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "optional": true
+    },
     "istextorbinary": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/istextorbinary/-/istextorbinary-2.2.1.tgz",
@@ -7217,6 +7389,12 @@
         "esprima": "^2.6.0"
       }
     },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "optional": true
+    },
     "jscodeshift": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.5.1.tgz",
@@ -7355,11 +7533,16 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "optional": true
+    },
     "json-schema-traverse": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
+      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
-      "dev": true
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -7367,6 +7550,12 @@
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "optional": true
+    },
     "json3": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -7379,6 +7568,18 @@
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
       "dev": true
     },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "optional": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz",
@@ -7429,15 +7630,62 @@
       "integrity": "sha1-93dZekCoGic/KHtIn9D+XM1gyNA="
     },
     "leaflet-routing-machine": {
-      "version": "3.2.8",
+      "version": "github:muerwre/leaflet-routing-machine#4be3c24db31b7c2e9750f5894e538969e953a093",
-      "resolved": "https://registry.npmjs.org/leaflet-routing-machine/-/leaflet-routing-machine-3.2.8.tgz",
+      "from": "github:muerwre/leaflet-routing-machine#no-osrm-text",
-      "integrity": "sha512-cJPN//kMu6J7L7M/apfjx3SEAt7TFSFGj285To4vLTnq4h9uPo5u6Rd8JdIipyBJXED/UvUVG7LlpguQ+G7gqA==",
       "requires": {
         "@mapbox/corslite": "0.0.7",
         "@mapbox/polyline": "^0.2.0",
         "osrm-text-instructions": "^0.11.5"
       }
     },
+    "less": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/less/-/less-3.8.1.tgz",
+      "integrity": "sha512-8HFGuWmL3FhQR0aH89escFNBQH/nEiYPP2ltDFdQw2chE28Yx2E3lhAIq9Y2saYwLSwa699s4dBVEfCY8Drf7Q==",
+      "requires": {
+        "clone": "^2.1.2",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "mime": "^1.4.1",
+        "mkdirp": "^0.5.0",
+        "promise": "^7.1.1",
+        "request": "^2.83.0",
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.1.0.tgz",
+      "integrity": "sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^3.0.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        }
+      }
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -7776,8 +8024,7 @@
     "lodash": {
       "version": "4.17.10",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
-      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
+      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
-      "dev": true
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -8237,20 +8484,17 @@
     "mime": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
-      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
+      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
-      "dev": true
     },
     "mime-db": {
       "version": "1.35.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.35.0.tgz",
-      "integrity": "sha512-JWT/IcCTsB0Io3AhWUMjRqucrHSPsSf2xKLaRldJVULioggvkJvggZ3VXNNSRkCddE6D+BUI4HEIZIA2OjwIvg==",
+      "integrity": "sha512-JWT/IcCTsB0Io3AhWUMjRqucrHSPsSf2xKLaRldJVULioggvkJvggZ3VXNNSRkCddE6D+BUI4HEIZIA2OjwIvg=="
-      "dev": true
     },
     "mime-types": {
       "version": "2.1.19",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.19.tgz",
       "integrity": "sha512-P1tKYHVSZ6uFo26mtnve4HQFE3koh1UWVkp8YUC+ESBHe945xWSoXuHHiGarDqcEZ+whpCDnlNw5LON0kLo+sw==",
-      "dev": true,
       "requires": {
         "mime-db": "~1.35.0"
       }
@@ -8298,8 +8542,7 @@
     "minimist": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
-      "dev": true
     },
     "mississippi": {
       "version": "2.0.0",
@@ -8344,7 +8587,6 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       }
@@ -8640,6 +8882,12 @@
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
       "dev": true
     },
+    "oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "optional": true
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -9167,6 +9415,12 @@
         "sha.js": "^2.4.8"
       }
     },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+      "optional": true
+    },
     "pify": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
@@ -9849,8 +10103,7 @@
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
-      "dev": true
     },
     "pseudomap": {
       "version": "1.0.2",
@@ -9858,6 +10111,12 @@
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
       "dev": true
     },
+    "psl": {
+      "version": "1.1.29",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.29.tgz",
+      "integrity": "sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ==",
+      "optional": true
+    },
     "public-encrypt": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.2.tgz",
@@ -9895,8 +10154,7 @@
     "punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
-      "dev": true
     },
     "q": {
       "version": "1.5.1",
@@ -10361,6 +10619,42 @@
       "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=",
       "dev": true
     },
+    "request": {
+      "version": "2.88.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+      "optional": true,
+      "requires": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.0",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.4.3",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "optional": true
+        }
+      }
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -10373,6 +10667,12 @@
       "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
       "dev": true
     },
+    "require-package-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz",
+      "integrity": "sha1-wR6XJ2tluOKSP3Xav1+y7ww4Qbk=",
+      "dev": true
+    },
     "require-uncached": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz",
@@ -10530,8 +10830,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-      "dev": true
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -11127,6 +11426,23 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "sshpk": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz",
+      "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=",
+      "optional": true,
+      "requires": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      }
+    },
     "ssri": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz",
@@ -11533,6 +11849,16 @@
       "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
       "dev": true
     },
+    "tough-cookie": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
+      "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+      "optional": true,
+      "requires": {
+        "psl": "^1.1.24",
+        "punycode": "^1.4.1"
+      }
+    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
@@ -11557,6 +11883,21 @@
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
       "dev": true
     },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "optional": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "optional": true
+    },
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
@@ -11946,8 +12287,7 @@
     "uuid": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
-      "dev": true
     },
     "v8-compile-cache": {
       "version": "2.0.2",
@@ -11982,6 +12322,17 @@
       "integrity": "sha512-w/hry/368nO21AN9QljsaIhb9ZiZtZARoVH5f3CsFbawdLdayCgKRPup7CggujvySMxx0I91NOyxdVENohprLQ==",
       "dev": true
     },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "optional": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
     "vinyl": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-1.2.0.tgz",

package.json

@@ -6,17 +6,19 @@
   "main": "./src/js/index.js",
   "scripts": {
     "start": "NODE_ENV=development webpack-dev-server --mode development --hot --open --inline --progress",
-    "build": "NODE_ENV=production webpack --env production --config=webpack.config.js --progress"
+    "build": "NODE_ENV=production webpack --env production --config=webpack.config.js --progress -p",
+    "profile": "webpack --json > stats.json"
   },
   "author": "Grigory Chervoplyas",
   "license": "ISC",
   "keywords": [],
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.54",
+    "@babel/cli": "^7.0.0-rc.1",
-    "@babel/preset-env": "^7.0.0-beta.54",
+    "@babel/preset-env": "^7.0.0-rc.1",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
+    "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
@@ -36,7 +38,9 @@
     "flow-bin": "^0.73.0",
     "html-webpack-plugin": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
+    "less-loader": "^4.1.0",
     "style-loader": "^0.21.0",
+    "uglifyjs-webpack-plugin": "^1.3.0",
     "webpack": "^4.6.0",
     "webpack-cli": "^2.0.15",
     "webpack-dev-server": "^3.1.3"
@@ -44,11 +48,14 @@
   "dependencies": {
     "axios": "^0.18.0",
     "babel-runtime": "^6.26.0",
+    "classnames": "^2.2.6",
     "clean-webpack-plugin": "^0.1.9",
     "history": "^4.7.2",
     "leaflet": "^1.3.3",
     "leaflet-editable": "^1.1.0",
-    "leaflet-routing-machine": "^3.2.8",
+    "leaflet-routing-machine": "muerwre/leaflet-routing-machine#no-osrm-text",
+    "less": "^3.8.1",
+    "lodash": "^4.17.10",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-hot-loader": "^4.1.1",

src/components/Fills.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Fills = () => (
+  <svg>
+    <defs>
+      <linearGradient id="activeButtonGradient" x1="-20%" x2="50%" y1="0%" y2="140%">
+        <stop offset="0%" stopColor="#55ddff" />
+        <stop offset="100%" stopColor="#7137c8" />
+      </linearGradient>
+    </defs>
+
+    <defs>
+      <linearGradient id="activePathGradient" x1="-20%" x2="50%" y1="0%" y2="140%">
+        <stop offset="0%" stopColor="#ff9900" />
+        <stop offset="100%" stopColor="#ff3344" />
+      </linearGradient>
+    </defs>
+  </svg>
+)

src/components/Icon.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import sprite from '$sprites/icon.svg';
+
+export const Icon = ({ icon, size = 32 }) => (
+  <svg width={size} height={size} viewBox="0 0 32 32" preserveAspectRatio="midXmidY meet">
+    <use xlinkHref={`${sprite}#${icon}`} x={0} y={0} />
+  </svg>
+);
+

src/components/panels/EditorPanel.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { MODES } from '$constants/modes';
+import classnames from 'classnames';
+
+import { Icon } from '$components/Icon';
+
+export class EditorPanel extends React.PureComponent {
+  startPolyMode = () => this.props.editor.changeMode(MODES.POLY);
+
+  startStickerMode = () => this.props.editor.changeMode(MODES.STICKERS);
+
+  startRouterMode = () => this.props.editor.changeMode(MODES.ROUTER);
+
+  startShotterMode = () => this.props.editor.changeMode(MODES.SHOTTER);
+
+  render() {
+    const { mode } = this.props;
+
+    return (
+      <div id="control-screen">
+        <button
+          className={classnames({ active: mode === MODES.ROUTER })}
+          onClick={this.startRouterMode}
+        >
+          <Icon icon="icon-router" />
+        </button>
+        <button
+          className={classnames({ active: mode === MODES.POLY })}
+          onClick={this.startPolyMode}
+        >
+          <Icon icon="icon-poly" />
+        </button>
+        <button
+          className={classnames({ active: mode === MODES.STICKERS })}
+          onClick={this.startStickerMode}
+        >
+          <Icon icon="icon-sticker" />
+        </button>
+
+        <button
+          className={classnames({ active: mode === MODES.SHOTTER })}
+          onClick={this.startShotterMode}
+        >
+          <Icon icon="icon-shooter" />
+        </button>
+      </div>
+    );
+  }
+};

src/constants/modes.js

@@ -2,5 +2,6 @@ export const MODES = {
   POLY: 'POLY',
   STICKERS: 'STICKERS',
   ROUTER: 'ROUTER',
+  SHOTTER: 'SHOTTER',
   NONE: 'NONE',
 };

src/containers/App.jsx

@@ -1,54 +1,43 @@
 import React from 'react';
 
 import { Editor } from '$modules/Editor';
-
+import { EditorPanel } from '$components/panels/EditorPanel';
-import { MapScreen } from '$styles/mapScreen';
+import { Fills } from '$components/Fills';
-import { ControlsScreen } from '$styles/controlsScreen';
-import { MODES } from '$constants/modes';
 
 export class App extends React.Component {
   state = {
     mode: 'none',
+    editor: null,
   };
 
   componentDidMount() {
     const container = 'map';
     const { mode } = this.state;
 
-    this.editor = new Editor({
+    const editor = new Editor({
       container,
       mode,
       setMode: this.setMode,
     });
+
+    this.setState({ editor })
   }
 
   setMode = mode => {
     this.setState({ mode });
   };
 
-  startPolyMode = () => this.editor.changeMode(MODES.POLY);
-
-  startStickerMode = () => this.editor.changeMode(MODES.STICKERS);
-
-  startRouterMode = () => this.editor.changeMode(MODES.ROUTER);
-
   render() {
-    const { mode } = this.state;
+    const {
+      state: { mode, editor },
+    } = this;
+
 
     return (
       <div>
-        <MapScreen />
+        <Fills />
-        <ControlsScreen>
+        <div id="map" />
-          <button onClick={this.startPolyMode}>
+        <EditorPanel editor={editor} mode={mode} />
-            {mode === MODES.POLY && '-->'}{MODES.POLY}
-          </button>
-          <button onClick={this.startStickerMode}>
-            {mode === MODES.STICKERS && '-->'}{MODES.STICKERS}
-          </button>
-          <button onClick={this.startRouterMode}>
-            {mode === MODES.ROUTER && '-->'}{MODES.ROUTER}
-          </button>
-        </ControlsScreen>
       </div>
     );
   }

src/index.html

@@ -4,7 +4,7 @@
   <meta name="viewport" content="initial-scale=1, maximum-scale=0.8">
   <link rel="icon" href="favicon.png?d" type="image/png" />
 
-  <title>@MAP</title>
+  <title>@ORCHID</title>
 
   <link rel="shortcut icon" href="/favicon.png?wd" type="image/png">
   <meta property="og:image" content="/misc/vk_preview.png" />

src/index.js

@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom';
 
 import { App } from '$containers/App';
 
+import '$styles/map.less';
+import '$styles/controls.less';
+
 export const Index = () => (
   <App />
 );

src/modules/Editor.js

@@ -3,6 +3,7 @@ import { Poly } from '$modules/Poly';
 import { MODES } from '$constants/modes';
 import { Stickers } from '$modules/Stickers';
 import { Router } from '$modules/Router';
+import { Shotter } from '$modules/Shotter';
 
 export class Editor {
   constructor({
@@ -14,9 +15,10 @@ export class Editor {
 
     const { lockMapClicks, routerMoveStart, map: { map } } = this;
 
-    this.poly = new Poly({ map, routerMoveStart });
+    this.poly = new Poly({ map, routerMoveStart, lockMapClicks });
     this.stickers = new Stickers({ map, lockMapClicks });
     this.router = new Router({ map, lockMapClicks });
+    this.shotter = new Shotter({ map });
 
     this.setMode = setMode;
     this.mode = mode;
@@ -28,6 +30,9 @@ export class Editor {
       },
       [MODES.ROUTER]: {
         start: this.routerSetStart,
+      },
+      [MODES.SHOTTER]: {
+        start: this.shotter.makeShot,
       }
     };
 

src/modules/Map.js

@@ -1,4 +1,4 @@
-import L from 'leaflet';
+import { map, tileLayer } from 'leaflet';
 import { providers } from '$constants/providers';
 
 import 'leaflet/dist/leaflet.css';
@@ -6,9 +6,9 @@ import 'leaflet-editable';
 
 export class Map {
   constructor({ container }) {
-    this.map = L.map(container, { editable: true }).setView([55.0153275, 82.9071235], 13);
+    this.map = map(container, { editable: true }).setView([55.0153275, 82.9071235], 13);
 
-    this.tileLayer = L.tileLayer(providers.default, {
+    this.tileLayer = tileLayer(providers.default, {
       attribution: 'Независимое Велосообщество',
       maxNativeZoom: 18,
       maxZoom: 18,

src/modules/Poly.js

@@ -1,19 +1,21 @@
-import L from "leaflet";
+import { polyline } from "leaflet";
 
-const polyStyle = { color: '#ff3333', weight: '5' };
+const polyStyle = { color: 'url(#activePathGradient)', weight: '5' };
 
 export class Poly {
-  constructor({ map, routerMoveStart }) {
+  constructor({ map, routerMoveStart, lockMapClicks }) {
-    this.poly = L.polyline([], polyStyle);
+    this.poly = polyline([], polyStyle);
     this.latlngs = [];
     this.poly.addTo(map);
     this.map = map;
 
     this.routerMoveStart = routerMoveStart;
+    this.lockMapClicks = lockMapClicks;
     this.bindEvents();
   }
 
   updateMarks = () => {
+    console.log('upd');
     const coords = this.poly.toGeoJSON().geometry.coordinates;
     this.latlngs = (coords && coords.length && coords.map(([lng, lat]) => ({ lng, lat }))) || [];
 
@@ -28,6 +30,8 @@ export class Poly {
     this.map.editTools.addEventListener('editable:vertex:deleted', this.updateMarks);
     this.map.editTools.addEventListener('editable:vertex:new', this.updateMarks);
 
+    this.map.editTools.addEventListener('editable:vertex:dragstart', this.lockMap);
+
     // После удаления точки - продолжить рисование
     this.map.editTools.addEventListener('editable:vertex:deleted', this.continueForward);
     //
@@ -70,4 +74,8 @@ export class Poly {
     if (!this.poly.editor) return;
     this.poly.editor.continueForward();
   };
+
+  lockMap = () => {
+    this.lockMapClicks(true);
+  }
 }

src/modules/Router.js

@@ -1,11 +1,11 @@
 import L from 'leaflet';
-import 'leaflet-routing-machine';
+import Routing from 'leaflet-routing-machine/src/index';
 import { CONFIG } from '$config';
 import { DomMarker } from '$utils/DomMarker';
 
 export class Router {
   constructor({ map, lockMapClicks }) {
-    const routeLine = r => L.Routing.line(r, {
+    const routeLine = r => Routing.line(r, {
       styles: [
         { color: 'white', opacity: 0.8, weight: 6 },
         { color: '#4597d0', opacity: 1, weight: 4, dashArray: '15,10' }
@@ -13,7 +13,7 @@ export class Router {
       addWaypoints: true,
     }).on('linetouched', this.lockPropagations);
 
-    this.router = L.Routing.control({
+    this.router = Routing.control({
       serviceUrl: CONFIG.OSRM_URL,
       profile: 'bike',
       fitSelectedRoutes: false,
@@ -22,7 +22,7 @@ export class Router {
         styles: [{ color: '#4597d0', opacity: 1, weight: 3 }]
       },
       show: false,
-      plan: L.Routing.plan([], {
+      plan: Routing.plan([], {
         createMarker: (i, wp) => L.marker(wp.latLng, {
           draggable: true,
           icon: this.createWaypointMarker(),
@@ -38,9 +38,7 @@ export class Router {
     this.waypoints = [];
     this.lockMapClicks = lockMapClicks;
 
-    console.log('router', this.router);
     // this.router._line.on('mousedown', console.log);
-    console.log('map', map);
   }
   //
   pushWaypointOnClick = ({ latlng: { lat, lng } }) => {
@@ -83,9 +81,7 @@ export class Router {
   };
   //
   unlockPropagations = e => {
-    console.log('unlock');
     if (e && e.preventPropagations) {
-      console.log('stop');
       e.preventDefault();
       e.preventPropagations();
     }

src/modules/Shotter.js

@@ -0,0 +1,66 @@
+import axios from 'axios';
+
+export class Shotter {
+  constructor({ map }) {
+    this.tiles = [];
+    this.tilesLoaded = 0;
+    this.map = map;
+  }
+
+  latLngToTile = latlng => {
+    const z = this.map.getZoom();
+    const x = parseInt(Math.floor(((latlng.lng + 180) / 360) * (1 << z)), 10);
+    const y = parseInt(Math.floor((1 - (Math.log(Math.tan((latlng.lat * Math.PI) / 180)
+      + 1 / Math.cos((latlng.lat * Math.PI) / 180)) / Math.PI)) / 2 * (1 << z)), 10);
+    return { x, y, z };
+  };
+
+  tileToLatLng = point => {
+    const z = this.map.getZoom();
+    const lng = (((point.x / (2 ** z)) * 360) - 180);
+
+    const n = Math.PI - ((2 * Math.PI * point.y) / (2 ** z));
+    const lat = (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))));
+
+    return { lat, lng };
+  };
+
+  getTilePlacement() {
+    const { innerHeight, innerWidth } = window;
+    const { _southWest, _northEast } = this.map.getBounds();
+
+    const sw = this.latLngToTile(_southWest);
+    const ne = this.latLngToTile(_northEast);
+
+    const zsw = this.tileToLatLng(sw);
+    const zne = this.tileToLatLng(ne);
+
+    const rsw = this.map.latLngToContainerPoint(zsw);
+    const msw = this.map.latLngToContainerPoint(_southWest);
+
+    return {
+      min_x: sw.x,
+      min_y: ne.y,
+      max_x: ne.x,
+      max_y: sw.y,
+      sh_x: (rsw.x - msw.x),
+      sh_y: ((innerHeight + rsw.y) - msw.y),
+      size: 256,
+      width: innerWidth,
+      height: innerHeight,
+      zoom: this.map.getZoom(),
+      provider: 'dgis',
+    };
+  }
+
+  makeShot = () => {
+    // console.log('shot', this.getTilePlacement());
+    const placement = this.getTilePlacement();
+
+    axios.get('http://alpha-map.vault48.org/engine/composerOrchid.php', {
+      params: { placement, mode: 'test' }
+    })
+      .then(console.log)
+      .catch(console.warn);
+  }
+}

src/modules/Sticker.js

@@ -1,4 +1,4 @@
-import L from 'leaflet';
+import { marker } from 'leaflet';
 import 'leaflet-editable';
 
 import { DomMarker } from '$utils/DomMarker';
@@ -28,12 +28,12 @@ export class Sticker {
     this.element.appendChild(this.stickerImage);
     this.element.appendChild(this.stickerDelete);
 
-    const marker = new DomMarker({
+    const mark = new DomMarker({
       element: this.element,
       className: 'sticker-container',
     });
 
-    this.sticker = L.marker(latlng, { icon: marker });
+    this.sticker = marker(latlng, { icon: mark });
 
     this.setAngle(this.angle);
 

src/modules/Stickers.js

@@ -1,10 +1,10 @@
-import L from 'leaflet';
+import { layerGroup } from 'leaflet';
 import { Sticker } from '$modules/Sticker';
 
 export class Stickers {
   constructor({ map, lockMapClicks }) {
     this.map = map;
-    this.layer = L.layerGroup();
+    this.layer = layerGroup();
 
     this.lockMapClicks = lockMapClicks;
     this.stickers = [];

src/sprites/icon.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
+    <defs>
+        <g id="icon-router">
+            <rect x="0" y="0" width="32" height="32" fill="none" stroke="none" />
+            <g transform="translate(-680 -226)">
+                <path d="M693.047 229.072c-2.105-.003-3.587 1.238-4.3 2.354a6.454 6.454 0 0 0-.888 2.226l-.02.123v12.137h3v-11.814c.01-.045.098-.531.434-1.057.352-.549.722-.97 1.77-.969 1.073.001 1.547.446 1.945.983.367.493.47.894.49.966v12.45s-.003 1.326.624 2.723c.626 1.396 2.196 3.019 4.627 3.068 2.45.05 4.063-1.603 4.689-3.022.626-1.418.621-2.77.621-2.77v-10.949h-3v10.913s-.032.84-.365 1.595c-.334.756-.61 1.259-1.885 1.233-1.295-.027-1.617-.557-1.95-1.297a4.623 4.623 0 0 1-.36-1.526v-12.873l-.045-.177s-.256-1.071-1.035-2.121c-.78-1.05-2.273-2.193-4.352-2.196z" stroke="none" />
+                <path d="M704.367 229.072a2.795 2.795 0 0 0-2.781 2.782 2.795 2.795 0 0 0 2.781 2.78 2.795 2.795 0 0 0 2.781-2.78 2.795 2.795 0 0 0-2.78-2.782zm0 1.782c.563 0 .998.437.998 1a.984.984 0 0 1-.998.998c-.562 0-1-.436-1-.998 0-.563.438-1 1-1z" stroke="none" />
+                <path d="M689.34 246.7a2.796 2.796 0 0 0-2.781 2.782 2.795 2.795 0 0 0 2.78 2.782 2.796 2.796 0 0 0 2.784-2.782 2.798 2.798 0 0 0-2.783-2.783zm0 1.782c.562 0 1 .438 1 1a.986.986 0 0 1-1 .998.984.984 0 0 1-.998-.998c0-.562.435-1 .998-1z" stroke="none" />
+
+                <path d="M693.047 229.072c-2.105-.003-3.587 1.238-4.3 2.354a6.454 6.454 0 0 0-.888 2.226l-.02.123v12.137h3v-11.814c.01-.045.098-.531.434-1.057.352-.549.722-.97 1.77-.969 1.073.001 1.547.446 1.945.983.367.493.47.894.49.966v12.45s-.003 1.326.624 2.723c.626 1.396 2.196 3.019 4.627 3.068 2.45.05 4.063-1.603 4.689-3.022.626-1.418.621-2.77.621-2.77v-10.949h-3v10.913s-.032.84-.365 1.595c-.334.756-.61 1.259-1.885 1.233-1.295-.027-1.617-.557-1.95-1.297a4.623 4.623 0 0 1-.36-1.526v-12.873l-.045-.177s-.256-1.071-1.035-2.121c-.78-1.05-2.273-2.193-4.352-2.196z" stroke="none" />
+                <path d="M704.367 229.072a2.795 2.795 0 0 0-2.781 2.782 2.795 2.795 0 0 0 2.781 2.78 2.795 2.795 0 0 0 2.781-2.78 2.795 2.795 0 0 0-2.78-2.782zm0 1.782c.563 0 .998.437.998 1a.984.984 0 0 1-.998.998c-.562 0-1-.436-1-.998 0-.563.438-1 1-1z" id="path1471" overflow="visible" stroke="none" />
+                <path d="M689.34 246.7a2.796 2.796 0 0 0-2.781 2.782 2.795 2.795 0 0 0 2.78 2.782 2.796 2.796 0 0 0 2.784-2.782 2.798 2.798 0 0 0-2.783-2.783zm0 1.782c.562 0 1 .438 1 1a.986.986 0 0 1-1 .998.984.984 0 0 1-.998-.998c0-.562.435-1 .998-1z" id="path1473" overflow="visible" stroke="none" />
+            </g>
+        </g>
+
+        <g id="icon-sticker">
+            <rect x="0" y="0" width="32" height="32" fill="none" stroke="none" />
+            <g transform="translate(-680 -285)">
+                <path d="M690.764 306.811l5.71 7.913 5.014-7.694z" stroke="none" />
+                <path transform="matrix(.88332 0 0 .88132 81.246 35.954)" d="M702.328 307.792l-6.02-.026-6.02.026-2.986-5.226-3.033-5.2 3.033-5.2 2.987-5.227 6.02.026 6.02-.026 2.986 5.226 3.033 5.2-3.033 5.2z" fill="none" stroke-width="3"/>
+            </g>
+        </g>
+
+        <g id="icon-poly">
+            <rect x="0" y="0" width="32" height="32" fill="none" stroke="none" />
+            <g transform="translate(-680 -228.5)">
+                <path d="m 696.0049,231.55643 c -1.64501,0 -3,1.35499 -3,3 0,0.29055 0.0541,0.5674 0.13281,0.83399 l -5.8164,4.13281 c -0.21393,-0.0492 -0.43422,-0.082 -0.66211,-0.082 -1.64501,0 -3,1.35499 -3,3 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.28194 -0.0527,-0.54906 -0.12695,-0.8086 l 3.34179,-2.375 c -0.51555,3.11587 -1.37236,8.36742 -2.01172,11.50391 -1.61147,0.0399 -2.92773,1.37189 -2.92773,2.99219 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.21144 -0.0259,-0.41564 -0.0684,-0.61524 l 9.0918,-6.7539 -0.91016,3.81445 c -1.24757,0.36364 -2.17578,1.50927 -2.17578,2.86719 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.83682 -0.35298,-1.5941 -0.91406,-2.14063 l 1.58398,-6.64257 c 1.55126,-0.10673 2.79883,-1.4042 2.79883,-2.98047 0,-1.64501 -1.35499,-3 -3,-3 -1.64501,0 -3,1.35499 -3,3 0,0.32848 0.0664,0.64062 0.16602,0.9375 l -9.36915,6.96093 c 0.84795,-4.50286 1.78434,-9.8666 2.09766,-11.66796 1.53745,-0.12126 2.76953,-1.41034 2.76953,-2.97657 0,-1.64501 -1.35499,-3 -3,-3 z m 0,2 c 0.56413,0 1,0.43587 1,1 0,0.56413 -0.43587,1 -1,1 -0.56413,0 -1,-0.43587 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m 10.33594,6.7461 c 0.56413,0 1,0.43587 1,1 0,0.56413 -0.43587,1 -1,1 -0.56413,0 -1,-0.43587 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m -19.68164,1.13867 c 0.56413,0 1,0.43587 1,1 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m 16.13477,10.64062 0.58984,0.14063 c 0.28935,0.1726 0.48828,0.47288 0.48828,0.84375 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.53619 0.39847,-0.94406 0.92188,-0.98438 z m -11.85938,0.67188 c 0.56413,0 1,0.43587 1,1 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.56413 0.43587,-1 1,-1 z" stroke="none" />
+                <path d="m 696.00488,230.26355 c -1.64501,0 -3,1.35499 -3,3 0,0.29055 0.0541,0.5674 0.13281,0.83399 l -5.8164,4.13281 c -0.21393,-0.0492 -0.43422,-0.082 -0.66211,-0.082 -1.64501,0 -3,1.35499 -3,3 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.28194 -0.0527,-0.54906 -0.12695,-0.8086 l 3.34179,-2.375 c -0.51555,3.11587 -1.37236,8.36742 -2.01172,11.50391 -1.61147,0.0399 -2.92773,1.37189 -2.92773,2.99219 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.21144 -0.0258,-0.41564 -0.0684,-0.61524 l 9.0918,-6.7539 -0.91016,3.81445 c -1.24757,0.36364 -2.17578,1.50927 -2.17578,2.86719 0,1.645 1.35499,3 3,3 1.64501,0 3,-1.355 3,-3 0,-0.83682 -0.35298,-1.5941 -0.91406,-2.14063 l 1.58398,-6.64257 c 1.55126,-0.10673 2.79883,-1.4042 2.79883,-2.98047 0,-1.64501 -1.35499,-3 -3,-3 -1.64501,0 -3,1.35499 -3,3 0,0.32848 0.0664,0.64062 0.16602,0.9375 l -9.36915,6.96093 c 0.84795,-4.50286 1.78434,-9.8666 2.09766,-11.66796 1.53745,-0.12126 2.76953,-1.41034 2.76953,-2.97657 0,-1.64501 -1.35499,-3 -3,-3 z m 0,2 c 0.56413,0 1,0.43587 1,1 0,0.56413 -0.43587,1 -1,1 -0.56413,0 -1,-0.43587 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m 10.33594,6.7461 c 0.56413,0 1,0.43587 1,1 0,0.56413 -0.43587,1 -1,1 -0.56413,0 -1,-0.43587 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m -19.68164,1.13867 c 0.56413,0 1,0.43587 1,1 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.56413 0.43587,-1 1,-1 z m 16.13477,10.64062 0.58984,0.14063 c 0.28935,0.1726 0.48828,0.47288 0.48828,0.84375 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.53619 0.39847,-0.94406 0.92188,-0.98438 z m -11.85938,0.67188 c 0.56413,0 1,0.43587 1,1 0,0.56412 -0.43587,0.99999 -1,1 -0.56413,0 -1,-0.43588 -1,-1 0,-0.56413 0.43587,-1 1,-1 z" stroke="none" />
+            </g>
+        </g>
+
+        <g id="icon-shooter">
+        <rect x="0" y="0" width="32" height="32" fill="none" stroke="none" />
+            <g transform="translate(18 6)">
+                <path d="m0 0l-4.391.054c-1.418.531-2.34 1.756-3.176 3.102h-5.178c-.68.317-1.351.655-1.455 2.584v11.49c.17 1.001.58 1.765 1.455 2.06h22.537c.746-.044 1.288-.426 1.68-1.06v-13.517c-.185-1.643-.916-1.65-1.68-1.557h-6.62c-.326-1.26-1.91-2.247-3.172-3.156zm-2.122 5.289c3.227 0 5.87 2.626 5.87 5.846s-2.643 5.845-5.87 5.845c-3.227 0-5.869-2.626-5.869-5.845 0-3.22 2.642-5.846 5.87-5.846zm0 1.998a3.844 3.844 0 0 0-3.869 3.848 3.842 3.842 0 0 0 3.87 3.845 3.84 3.84 0 0 0 3.866-3.845 3.842 3.842 0 0 0-3.867-3.848z" />
+            </g>
+    </defs>
+</svg>

src/styles/controls.less

@@ -0,0 +1,35 @@
+
+#control-screen {
+  position: fixed;
+  right: 10px;
+  bottom: 0px;
+  height: 48px;
+  min-width: 120px;
+  background: #333333;
+  z-index: 2;
+  color: white;
+  border-radius: 4px 4px 0 0;
+  padding: 0 4px 0 4px;
+
+  button {
+    border: none;
+    background: transparent;
+    width: 48px;
+    height: 48px;
+    padding: 8px;
+    outline: none;
+    cursor: pointer;
+
+    &.active {
+      svg {
+        fill: url(#activeButtonGradient);
+        stroke: url(#activeButtonGradient);
+      }
+    }
+
+    svg {
+      fill: white;
+      stroke: white;
+    }
+  }
+}

src/styles/map.less

@@ -0,0 +1,176 @@
+#map {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+
+  cursor: crosshair;
+}
+
+.leaflet-vertex-icon, .leaflet-middle-icon {
+  border-radius: 10px;
+  opacity :1;
+  border: none;
+  width: 16px !important;
+  height: 16px !important;margin-left:-8px !important;margin-top:-8px !important;
+  background: transparent;
+}
+
+.leaflet-vertex-icon::after, .leaflet-middle-icon::after {
+  content: ' ';
+  position:absolute;top:4px;left:4px;width:8px;height:8px;
+  background:white;border-radius: 8px;transform:scale(1);
+  transition:transform 150ms;
+}
+
+.leaflet-vertex-icon:hover, .leaflet-middle-icon:hover {
+  opacity: 1 !important;
+}
+
+.leaflet-vertex-icon:hover::after, .leaflet-middle-icon:hover::after,
+.leaflet-vertex-icon:active::after, .leaflet-middle-icon:active::after  {
+  transform: scale(2);
+  box-shadow: #999 0 0 5px 2px;
+}
+
+.leaflet-control-container .leaflet-routing-container-hide {
+    display: none;
+}
+
+.router-waypoint {
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  outline: none;
+  z-index: 10001;
+
+  &:after {
+    content: ' ';
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 0 2px #4597d0;
+    margin-left: 10px;
+    margin-top: 10px;
+  }
+}
+
+.sticker-container {
+  outline: none;
+  position: relative;
+
+  &:before {
+    content: ' ';
+    box-shadow: 0 0 10px 1px #ff3344;
+    background: #ff334422;
+    width: 48px;
+    height: 48px;
+    left: -24px;
+    top: -24px;
+    position: absolute;
+    border-radius: 40px;
+    opacity: 0;
+    transition: opacity 250ms, transform 500ms;
+    transform: scale(0);
+  }
+
+  &:hover, &:active {
+    .sticker-delete {
+      transform: scale(1);
+      pointer-events: all;
+    }
+
+    &:before {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+.sticker-label {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  background: white;
+  border-radius: 32px;
+  left: 0;
+  top: 0;
+  outline: none;
+
+  &:after {
+    content: ' ';
+    box-shadow: 0 0 0 1px #ff3344;
+    width: 80px;
+    height: 80px;
+    left: -16px;
+    top: -16px;
+    position: absolute;
+    border-radius: 40px;
+    pointer-events: none;
+    opacity: 0;
+  }
+}
+
+.sticker-arrow {
+  position: absolute;
+  background: red;
+  transform-origin: 0 0;
+  left: 0;
+  top: 0;
+
+  &:after {
+    content: ' ';
+    background: #ff3344;
+    width: 24px;
+    height: 24px;
+    transform-origin: 0 0;
+    transform: rotate(-45deg);
+    left: 0;
+    top: 0;
+    position: absolute;
+  }
+}
+
+.sticker-delete {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  background: red;
+  border-radius: 24px;
+  transition: transform 500ms;
+  transform: scale(0);
+  opacity: 1;
+  pointer-events: none;
+
+  &:hover {
+    transform: scale(1.2) !important;
+  }
+}
+
+.leaflet-control-container .leaflet-routing-container-hide {
+  display: none;
+}
+
+.router-waypoint {
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  outline: none;
+  z-index: 10001;
+
+  &:after {
+    content: ' ';
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 0 2px #4597d0;
+    margin-left: 10px;
+    margin-top: 10px;
+  }
+}

src/utils/DomMarker.js

@@ -1,6 +1,6 @@
-import L from 'leaflet';
+import { DivIcon } from 'leaflet';
 
-export const DomMarker = L.DivIcon.extend({
+export const DomMarker = DivIcon.extend({
   initialize: function (options) {
     this.options = options;
   },

webpack.config.js

@@ -10,11 +10,13 @@ const { join } = require('path');
 
 /* Plugins */
 
+const concatPlugin = new webpack.optimize.ModuleConcatenationPlugin();
 const htmlPlugin = new HtmlWebPackPlugin({
   template: './src/index.html',
   filename: './index.html',
   title: 'Map',
   hash: false,
+  favicon: 'src/sprites/favicon.png',
 });
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
@@ -48,10 +50,11 @@ const resolve = {
 module.exports = () => {
   /* Export */
   const plugins = [
+    concatPlugin,
     htmlPlugin,
     // flowPlugin,
     gitPlugin,
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+    new webpack.IgnorePlugin(/^osrm-text-instructions$/, /leaflet-routing-machine$/)
   ];
 
   return {
@@ -64,6 +67,14 @@ module.exports = () => {
             { loader: 'css-loader' }
           ]
         },
+        {
+          test: /\.less$/,
+          use: [
+            { loader: 'style-loader' },
+            { loader: 'css-loader' },
+            { loader: 'less-loader' }
+          ]
+        },
         {
           test: /\.(js|jsx)$/,
           exclude: /node_modules/,
@@ -82,7 +93,7 @@ module.exports = () => {
           }
         },
         {
-          test: /\.(png)$/,
+          test: /\.(png|svg)$/,
           use: {
             loader: 'file-loader',
             options: {}