Commit 3dd8de67 authored by Adrien Pavie's avatar Adrien Pavie
Browse files

Doc, logo, search bar and share links implemented

parent c536535b
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
## Next version (to be released)
## 0.1.0 - 2020-02-11
### Added
- Initial release (UI, backend)
This diff is collapsed.
# Gribrouillon
![Logo](src/website/img/logo.400.png)
Gribrouillon makes drawing over web maps easy. You can create sketchy maps in seconds, on mobile or desktop. [Give it a try !](https://gribrouillon.pavie.info/)
## Deploy your own instance
If you want to have your own Gribrouillon server running, you can follow these instructions.
### Requirements
To run properly, Gribrouillon needs following software to be available :
......@@ -34,3 +40,18 @@ Edit `config.json` file according to your PostgreSQL setup.
```bash
npm run start
```
## Contributors
Gribrouillon exists and is everyday improving thanks to the __amazing people__ following :
* Adrien Pavie, main developer
* Florian Lainez, user experience expert
* And all users, for using the tool and sharing their ideas !
## License
Copyright (c) Adrien Pavie 2020
Released under AGPL 3 license, see [LICENSE](LICENSE.txt) for complete license text.
......@@ -4700,6 +4700,11 @@
"integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
"dev": true
},
"qrcode-svg": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/qrcode-svg/-/qrcode-svg-1.1.0.tgz",
"integrity": "sha512-XyQCIXux1zEIA3NPb0AeR8UMYvXZzWEhgdBgBjH9gO7M48H9uoHzviNz8pXw3UzrAcxRRRn9gxHewAVK7bn9qw=="
},
"qs": {
"version": "6.7.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
......
......@@ -7,7 +7,7 @@
"start": "npm run build && node src/index.js",
"start:prod": "npm run build && while [ true ]; do node src/index.js; sleep 5; done",
"build": "npm run build:assets && npm run build:js",
"build:assets": "mkdir -p build && cp -r src/website/*.html src/website/*.css node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery-slim/dist/jquery.slim.min.js node_modules/leaflet/dist/leaflet.js node_modules/leaflet/dist/leaflet.css node_modules/leaflet-hash/leaflet-hash.js node_modules/font-awesome/css/font-awesome.min.css node_modules/font-awesome/fonts build/",
"build:assets": "mkdir -p build && cp -r src/website/*.html src/website/*.css src/website/img node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery-slim/dist/jquery.slim.min.js node_modules/leaflet/dist/leaflet.js node_modules/leaflet/dist/leaflet.css node_modules/leaflet-hash/leaflet-hash.js node_modules/font-awesome/css/font-awesome.min.css node_modules/font-awesome/fonts node_modules/qrcode-svg/dist/qrcode.min.js build/",
"build:js": "simplifyify --minify --outfile \"build/*.min.js\" src/website/*.js",
"clean": "rm -rf ./build"
},
......@@ -34,6 +34,7 @@
"leaflet": "^1.6.0",
"leaflet-hash": "^0.2.1",
"pg": "^7.14.0",
"qrcode-svg": "^1.1.0",
"socket.io": "^2.3.0"
},
"devDependencies": {
......
......@@ -12,24 +12,25 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/png" href="img/badge.128.png" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Gribrouillon</a>
<a class="navbar-brand" href="index.html"><img src="img/logo_white.svg" alt="Gribrouillon" style="height: 60px" /></a>
</nav>
<div class="jumbotron jumbotron-fluid">
<div class="jumbotron jumbotron-fluid mb-0">
<div class="container">
<h1 class="display-4">Make sketchy maps everywhere</h1>
<p class="lead">Draw whatever you need over web maps or aerial imagery, and share it with your friends and family !</p>
<p class="text-center"><a class="btn btn-primary btn-lg" href="#create" role="button">Create a sketchy map</a></p>
<p class="text-center"><a class="btn btn-primary btn-lg" href="/" role="button">Create a sketchy map</a></p>
</div>
</div>
<div class="container-fluid footer-dark">
<div class="container-fluid footer-dark mt-0">
<div class="container">
<h2>About</h2>
<p>Gribrouillon is an open source software developed by <a href="https://pavie.info">Adrien Pavie</a> based on an original idea of Florian Lainez and the <a href="https://osmontrouge.fr/">Montrouge local group</a>. It aims to make web maps easily sketchable for everyone. We use community-made background map named <a href="https://openstreetmap.org">OpenStreetMap</a>.<br />Want to help us improve this tool ? Contact us or start contributing on the source code repository.</p>
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg8"
version="1.1"
viewBox="0 0 33.866667 33.866668"
height="128"
width="128"
sodipodi:docname="badge.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
inkscape:export-filename="/home/adrien/Stockage/Code/gribrouillon/src/website/img/badge.128.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview22"
showgrid="false"
fit-margin-top="5"
fit-margin-left="5"
fit-margin-right="5"
fit-margin-bottom="5"
inkscape:zoom="1.0319545"
inkscape:cx="99.830645"
inkscape:cy="65.755589"
inkscape:window-x="0"
inkscape:window-y="452"
inkscape:window-maximized="1"
inkscape:current-layer="svg8" />
<defs
id="defs2" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="g1036"
transform="translate(-2.5324026,-4.8998861)">
<path
inkscape:connector-curvature="0"
id="rect856-5"
d="M 14.526761,5.7583036 4.6493286,8.5801576 V 36.054466 l 9.8774324,-2.82143 9.87795,4.6751 9.877433,-2.82143 V 7.6119746 l -9.877433,2.8214224 z"
style="opacity:1;vector-effect:none;fill:#242424;fill-opacity:1;stroke:none;stroke-width:1.43061364;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
<path
inkscape:connector-curvature="0"
id="path2"
d="m 10.632908,15.687612 c 0.843518,-0.855566 1.68703,-1.626775 2.060588,-1.470126 0.602512,0.241016 0,1.241166 -0.361484,1.831631 -0.301273,0.506108 -3.4463571,4.687514 -3.4463571,7.603698 0,1.542398 0.5784099,2.819723 1.6147231,3.590931 0.90377,0.674814 2.096737,0.879674 3.181256,0.554314 1.28937,-0.373469 2.349793,-1.687008 3.687364,-3.337886 1.458076,-1.795483 3.410209,-4.145286 4.916485,-4.145286 1.964184,0 1.988287,1.21708 2.120837,2.156969 -4.554978,0.771242 -6.48301,4.422474 -6.48301,6.470994 0,2.04852 1.73523,3.723508 3.868115,3.723508 1.964184,0 5.169541,-1.602698 5.651547,-7.350646 h 2.964352 V 22.30316 h -2.976402 c -0.180764,-1.988272 -1.313474,-5.061083 -4.856234,-5.061083 -2.711295,0 -5.036986,2.30162 -5.952801,3.422271 -0.698915,0.879684 -2.482343,2.988467 -2.759497,3.277671 -0.301275,0.361623 -0.819416,1.01222 -1.337576,1.01222 -0.542258,0 -0.867614,-1.000197 -0.433808,-2.313643 0.421739,-1.313484 1.687031,-3.446365 2.229289,-4.241702 0.939915,-1.373695 1.56653,-2.313627 1.56653,-3.952457 0,-2.614894 -1.976237,-3.446356 -3.024602,-3.446356 -1.590627,0 -2.9764029,1.205022 -3.2776585,1.506274 -0.4338078,0.433807 -0.7953132,0.795312 -1.0604163,1.120675 z m 11.194647,14.05054 c -0.373553,0 -0.891717,-0.313353 -0.891717,-0.867628 0,-0.723011 0.879666,-2.651032 3.45841,-3.325858 -0.361484,3.241509 -1.72318,4.193486 -2.566693,4.193486 z"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.20502067" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg8"
version="1.1"
viewBox="0 0 142.55312 42.733169"
height="161.51118"
width="538.78345"
sodipodi:docname="logo.svg"
inkscape:export-filename="/home/adrien/Stockage/Code/gribrouillon/src/website/img/logo.400.png"
inkscape:export-xdpi="71.269997"
inkscape:export-ydpi="71.269997"
inkscape:version="0.92.4 5da689c313, 2019-01-14">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview22"
showgrid="false"
inkscape:zoom="1.0319545"
inkscape:cx="114.83064"
inkscape:cy="80.755592"
inkscape:window-x="0"
inkscape:window-y="452"
inkscape:window-maximized="1"
inkscape:current-layer="svg8" />
<defs
id="defs2" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0.64233807,-0.46663693)"
id="layer1">
<g
id="g1036">
<path
style="opacity:1;vector-effect:none;fill:#242424;fill-opacity:1;stroke:none;stroke-width:1.43061364;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
d="M 14.526761,5.7583036 4.6493286,8.5801576 V 36.054466 l 9.8774324,-2.82143 9.87795,4.6751 9.877433,-2.82143 V 7.6119746 l -9.877433,2.8214224 z"
id="rect856-5" />
<path
style="fill:#ffffff;fill-opacity:1;stroke-width:1.20502067"
d="m 10.632908,15.687612 c 0.843518,-0.855566 1.68703,-1.626775 2.060588,-1.470126 0.602512,0.241016 0,1.241166 -0.361484,1.831631 -0.301273,0.506108 -3.4463571,4.687514 -3.4463571,7.603698 0,1.542398 0.5784099,2.819723 1.6147231,3.590931 0.90377,0.674814 2.096737,0.879674 3.181256,0.554314 1.28937,-0.373469 2.349793,-1.687008 3.687364,-3.337886 1.458076,-1.795483 3.410209,-4.145286 4.916485,-4.145286 1.964184,0 1.988287,1.21708 2.120837,2.156969 -4.554978,0.771242 -6.48301,4.422474 -6.48301,6.470994 0,2.04852 1.73523,3.723508 3.868115,3.723508 1.964184,0 5.169541,-1.602698 5.651547,-7.350646 h 2.964352 V 22.30316 h -2.976402 c -0.180764,-1.988272 -1.313474,-5.061083 -4.856234,-5.061083 -2.711295,0 -5.036986,2.30162 -5.952801,3.422271 -0.698915,0.879684 -2.482343,2.988467 -2.759497,3.277671 -0.301275,0.361623 -0.819416,1.01222 -1.337576,1.01222 -0.542258,0 -0.867614,-1.000197 -0.433808,-2.313643 0.421739,-1.313484 1.687031,-3.446365 2.229289,-4.241702 0.939915,-1.373695 1.56653,-2.313627 1.56653,-3.952457 0,-2.614894 -1.976237,-3.446356 -3.024602,-3.446356 -1.590627,0 -2.9764029,1.205022 -3.2776585,1.506274 -0.4338078,0.433807 -0.7953132,0.795312 -1.0604163,1.120675 z m 11.194647,14.05054 c -0.373553,0 -0.891717,-0.313353 -0.891717,-0.867628 0,-0.723011 0.879666,-2.651032 3.45841,-3.325858 -0.361484,3.241509 -1.72318,4.193486 -2.566693,4.193486 z"
id="path2" />
</g>
<g
id="flowRoot1026"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#242424;fill-opacity:1;stroke:none"
transform="matrix(0.46724212,0,0,0.46724212,-30.254759,-0.29213721)"
aria-label="Gribrouillon">
<path
id="path1038"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 173.61133,58.564025 q -1.58203,1.894531 -4.47266,2.949219 -2.89062,1.035156 -6.40625,1.035156 -3.6914,0 -6.48437,-1.601562 -2.77344,-1.621094 -4.29688,-4.6875 -1.5039,-3.066407 -1.54297,-7.207032 v -1.933593 q 0,-4.257813 1.42578,-7.363282 1.44532,-3.125 4.14063,-4.765625 2.71484,-1.660156 6.34766,-1.660156 5.05859,0 7.91015,2.421875 2.85156,2.402344 3.37891,7.011719 h -5.70313 q -0.39062,-2.441406 -1.73828,-3.574219 -1.32812,-1.132812 -3.67187,-1.132812 -2.98828,0 -4.55078,2.246093 -1.5625,2.246094 -1.58204,6.679688 V 48.7984 q 0,4.472656 1.69922,6.757813 1.69922,2.285156 4.98047,2.285156 3.30078,0 4.70703,-1.40625 v -4.902344 h -5.33203 v -4.316406 h 11.19141 z" />
<path
id="path1040"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 189.86133,46.317931 q -1.15235,-0.15625 -2.03125,-0.15625 -3.20313,0 -4.19922,2.167969 v 13.828125 h -5.64453 V 41.024963 h 5.33203 l 0.15625,2.519531 q 1.69922,-2.910156 4.70703,-2.910156 0.9375,0 1.75781,0.253906 z" />
<path
id="path1042"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 198.5332,62.157775 h -5.66406 V 41.024963 h 5.66406 z m -5.99609,-26.601562 q 0,-1.269532 0.83984,-2.089844 0.85938,-0.820313 2.32422,-0.820313 1.44531,0 2.30469,0.820313 0.85937,0.820312 0.85937,2.089844 0,1.289062 -0.8789,2.109375 -0.85938,0.820312 -2.28516,0.820312 -1.42578,0 -2.30469,-0.820312 -0.85937,-0.820313 -0.85937,-2.109375 z" />
<path
id="path1044"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 222.22461,51.786681 q 0,5.078125 -2.16797,7.929688 -2.16797,2.832031 -6.05469,2.832031 -3.4375,0 -5.48828,-2.636719 l -0.2539,2.246094 h -5.07813 v -30 h 5.64453 v 10.761719 q 1.95313,-2.285156 5.13672,-2.285156 3.86719,0 6.05469,2.851562 2.20703,2.832031 2.20703,7.988281 z m -5.64453,-0.410156 q 0,-3.203125 -1.01563,-4.667969 -1.01562,-1.484375 -3.02734,-1.484375 -2.69531,0 -3.71094,2.207032 v 8.339843 q 1.03516,2.226563 3.75,2.226563 2.73438,0 3.59375,-2.695313 0.41016,-1.289062 0.41016,-3.925781 z" />
<path
id="path1046"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 237.57617,46.317931 q -1.15234,-0.15625 -2.03125,-0.15625 -3.20312,0 -4.19922,2.167969 v 13.828125 h -5.64453 V 41.024963 h 5.33203 l 0.15625,2.519531 q 1.69922,-2.910156 4.70703,-2.910156 0.9375,0 1.75782,0.253906 z" />
<path
id="path1048"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 238.70898,51.396056 q 0,-3.144531 1.21094,-5.605468 1.21094,-2.460938 3.47656,-3.808594 2.28516,-1.347656 5.29297,-1.347656 4.27735,0 6.97266,2.617187 2.71484,2.617188 3.02734,7.109375 l 0.0391,1.445313 q 0,4.863281 -2.71485,7.8125 -2.71484,2.929687 -7.28515,2.929687 -4.57032,0 -7.30469,-2.929687 -2.71485,-2.929688 -2.71485,-7.96875 z m 5.64454,0.410157 q 0,3.007812 1.13281,4.609375 1.13281,1.582031 3.24219,1.582031 2.05078,0 3.20312,-1.5625 1.15234,-1.582031 1.15234,-5.039063 0,-2.949218 -1.15234,-4.570312 -1.15234,-1.621094 -3.24219,-1.621094 -2.07031,0 -3.20312,1.621094 -1.13281,1.601562 -1.13281,4.980469 z" />
<path
id="path1050"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 274.86133,60.009338 q -2.08985,2.539062 -5.78125,2.539062 -3.39844,0 -5.19531,-1.953125 -1.77735,-1.953125 -1.81641,-5.722656 V 41.024963 h 5.64453 v 13.652343 q 0,3.300782 3.00781,3.300782 2.8711,0 3.94532,-1.992188 V 41.024963 h 5.66406 v 21.132812 h -5.3125 z" />
<path
id="path1052"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 290.54492,62.157775 h -5.66406 V 41.024963 h 5.66406 z m -5.99609,-26.601562 q 0,-1.269532 0.83984,-2.089844 0.85938,-0.820313 2.32422,-0.820313 1.44531,0 2.30469,0.820313 0.85937,0.820312 0.85937,2.089844 0,1.289062 -0.8789,2.109375 -0.85938,0.820312 -2.28516,0.820312 -1.42578,0 -2.30469,-0.820312 -0.85937,-0.820313 -0.85937,-2.109375 z" />
<path
id="path1054"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 301.15039,62.157775 h -5.66406 v -30 h 5.66406 z" />
<path
id="path1056"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 311.75586,62.157775 h -5.66406 v -30 h 5.66406 z" />
<path
id="path1058"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 315.52539,51.396056 q 0,-3.144531 1.21094,-5.605468 1.21094,-2.460938 3.47656,-3.808594 2.28516,-1.347656 5.29297,-1.347656 4.27734,0 6.97266,2.617187 2.71484,2.617188 3.02734,7.109375 l 0.0391,1.445313 q 0,4.863281 -2.71484,7.8125 -2.71485,2.929687 -7.28516,2.929687 -4.57031,0 -7.30469,-2.929687 -2.71484,-2.929688 -2.71484,-7.96875 z m 5.64453,0.410157 q 0,3.007812 1.13281,4.609375 1.13282,1.582031 3.24219,1.582031 2.05078,0 3.20313,-1.5625 1.15234,-1.582031 1.15234,-5.039063 0,-2.949218 -1.15234,-4.570312 -1.15235,-1.621094 -3.24219,-1.621094 -2.07031,0 -3.20313,1.621094 -1.13281,1.601562 -1.13281,4.980469 z" />
<path
id="path1060"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#242424;fill-opacity:1"
d="m 344.2168,41.024963 0.17578,2.441406 q 2.26562,-2.832031 6.07422,-2.832031 3.35937,0 5,1.972656 1.64062,1.972656 1.67968,5.898437 v 13.652344 h -5.64453 V 48.64215 q 0,-1.796875 -0.78125,-2.597656 -0.78125,-0.820313 -2.59765,-0.820313 -2.38282,0 -3.57422,2.03125 V 62.157775 H 338.9043 V 41.024963 Z" />
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg8"
version="1.1"
viewBox="0 0 142.55312 42.733169"
height="161.51118"
width="538.78345">
<defs
id="defs2" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0.64233807,-0.46663693)"
id="layer1">
<path
id="rect856-5"
d="M 14.526761,5.7583036 4.6493286,8.5801576 V 36.054466 l 9.8774324,-2.82143 9.87795,4.6751 9.877433,-2.82143 V 7.6119746 l -9.877433,2.8214224 z"
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.43061364;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
<path
id="path2"
d="m 10.632908,15.687612 c 0.843518,-0.855566 1.68703,-1.626775 2.060588,-1.470126 0.602512,0.241016 0,1.241166 -0.361484,1.831631 -0.301273,0.506108 -3.4463571,4.687514 -3.4463571,7.603698 0,1.542398 0.5784099,2.819723 1.6147231,3.590931 0.90377,0.674814 2.096737,0.879674 3.181256,0.554314 1.28937,-0.373469 2.349793,-1.687008 3.687364,-3.337886 1.458076,-1.795483 3.410209,-4.145286 4.916485,-4.145286 1.964184,0 1.988287,1.21708 2.120837,2.156969 -4.554978,0.771242 -6.48301,4.422474 -6.48301,6.470994 0,2.04852 1.73523,3.723508 3.868115,3.723508 1.964184,0 5.169541,-1.602698 5.651547,-7.350646 h 2.964352 V 22.30316 h -2.976402 c -0.180764,-1.988272 -1.313474,-5.061083 -4.856234,-5.061083 -2.711295,0 -5.036986,2.30162 -5.952801,3.422271 -0.698915,0.879684 -2.482343,2.988467 -2.759497,3.277671 -0.301275,0.361623 -0.819416,1.01222 -1.337576,1.01222 -0.542258,0 -0.867614,-1.000197 -0.433808,-2.313643 0.421739,-1.313484 1.687031,-3.446365 2.229289,-4.241702 0.939915,-1.373695 1.56653,-2.313627 1.56653,-3.952457 0,-2.614894 -1.976237,-3.446356 -3.024602,-3.446356 -1.590627,0 -2.9764029,1.205022 -3.2776585,1.506274 -0.4338078,0.433807 -0.7953132,0.795312 -1.0604163,1.120675 z m 11.194647,14.05054 c -0.373553,0 -0.891717,-0.313353 -0.891717,-0.867628 0,-0.723011 0.879666,-2.651032 3.45841,-3.325858 -0.361484,3.241509 -1.72318,4.193486 -2.566693,4.193486 z"
style="fill:#242424;fill-opacity:1;stroke-width:1.20502067" />
<g
id="flowRoot1026"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none"
transform="matrix(0.46724212,0,0,0.46724212,-30.254759,-0.29213721)"
aria-label="Gribrouillon">
<path
id="path1038"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 173.61133,58.564025 q -1.58203,1.894531 -4.47266,2.949219 -2.89062,1.035156 -6.40625,1.035156 -3.6914,0 -6.48437,-1.601562 -2.77344,-1.621094 -4.29688,-4.6875 -1.5039,-3.066407 -1.54297,-7.207032 v -1.933593 q 0,-4.257813 1.42578,-7.363282 1.44532,-3.125 4.14063,-4.765625 2.71484,-1.660156 6.34766,-1.660156 5.05859,0 7.91015,2.421875 2.85156,2.402344 3.37891,7.011719 h -5.70313 q -0.39062,-2.441406 -1.73828,-3.574219 -1.32812,-1.132812 -3.67187,-1.132812 -2.98828,0 -4.55078,2.246093 -1.5625,2.246094 -1.58204,6.679688 V 48.7984 q 0,4.472656 1.69922,6.757813 1.69922,2.285156 4.98047,2.285156 3.30078,0 4.70703,-1.40625 v -4.902344 h -5.33203 v -4.316406 h 11.19141 z" />
<path
id="path1040"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 189.86133,46.317931 q -1.15235,-0.15625 -2.03125,-0.15625 -3.20313,0 -4.19922,2.167969 v 13.828125 h -5.64453 V 41.024963 h 5.33203 l 0.15625,2.519531 q 1.69922,-2.910156 4.70703,-2.910156 0.9375,0 1.75781,0.253906 z" />
<path
id="path1042"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 198.5332,62.157775 h -5.66406 V 41.024963 h 5.66406 z m -5.99609,-26.601562 q 0,-1.269532 0.83984,-2.089844 0.85938,-0.820313 2.32422,-0.820313 1.44531,0 2.30469,0.820313 0.85937,0.820312 0.85937,2.089844 0,1.289062 -0.8789,2.109375 -0.85938,0.820312 -2.28516,0.820312 -1.42578,0 -2.30469,-0.820312 -0.85937,-0.820313 -0.85937,-2.109375 z" />
<path
id="path1044"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 222.22461,51.786681 q 0,5.078125 -2.16797,7.929688 -2.16797,2.832031 -6.05469,2.832031 -3.4375,0 -5.48828,-2.636719 l -0.2539,2.246094 h -5.07813 v -30 h 5.64453 v 10.761719 q 1.95313,-2.285156 5.13672,-2.285156 3.86719,0 6.05469,2.851562 2.20703,2.832031 2.20703,7.988281 z m -5.64453,-0.410156 q 0,-3.203125 -1.01563,-4.667969 -1.01562,-1.484375 -3.02734,-1.484375 -2.69531,0 -3.71094,2.207032 v 8.339843 q 1.03516,2.226563 3.75,2.226563 2.73438,0 3.59375,-2.695313 0.41016,-1.289062 0.41016,-3.925781 z" />
<path
id="path1046"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 237.57617,46.317931 q -1.15234,-0.15625 -2.03125,-0.15625 -3.20312,0 -4.19922,2.167969 v 13.828125 h -5.64453 V 41.024963 h 5.33203 l 0.15625,2.519531 q 1.69922,-2.910156 4.70703,-2.910156 0.9375,0 1.75782,0.253906 z" />
<path
id="path1048"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 238.70898,51.396056 q 0,-3.144531 1.21094,-5.605468 1.21094,-2.460938 3.47656,-3.808594 2.28516,-1.347656 5.29297,-1.347656 4.27735,0 6.97266,2.617187 2.71484,2.617188 3.02734,7.109375 l 0.0391,1.445313 q 0,4.863281 -2.71485,7.8125 -2.71484,2.929687 -7.28515,2.929687 -4.57032,0 -7.30469,-2.929687 -2.71485,-2.929688 -2.71485,-7.96875 z m 5.64454,0.410157 q 0,3.007812 1.13281,4.609375 1.13281,1.582031 3.24219,1.582031 2.05078,0 3.20312,-1.5625 1.15234,-1.582031 1.15234,-5.039063 0,-2.949218 -1.15234,-4.570312 -1.15234,-1.621094 -3.24219,-1.621094 -2.07031,0 -3.20312,1.621094 -1.13281,1.601562 -1.13281,4.980469 z" />
<path
id="path1050"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 274.86133,60.009338 q -2.08985,2.539062 -5.78125,2.539062 -3.39844,0 -5.19531,-1.953125 -1.77735,-1.953125 -1.81641,-5.722656 V 41.024963 h 5.64453 v 13.652343 q 0,3.300782 3.00781,3.300782 2.8711,0 3.94532,-1.992188 V 41.024963 h 5.66406 v 21.132812 h -5.3125 z" />
<path
id="path1052"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 290.54492,62.157775 h -5.66406 V 41.024963 h 5.66406 z m -5.99609,-26.601562 q 0,-1.269532 0.83984,-2.089844 0.85938,-0.820313 2.32422,-0.820313 1.44531,0 2.30469,0.820313 0.85937,0.820312 0.85937,2.089844 0,1.289062 -0.8789,2.109375 -0.85938,0.820312 -2.28516,0.820312 -1.42578,0 -2.30469,-0.820312 -0.85937,-0.820313 -0.85937,-2.109375 z" />
<path
id="path1054"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 301.15039,62.157775 h -5.66406 v -30 h 5.66406 z" />
<path
id="path1056"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 311.75586,62.157775 h -5.66406 v -30 h 5.66406 z" />
<path
id="path1058"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 315.52539,51.396056 q 0,-3.144531 1.21094,-5.605468 1.21094,-2.460938 3.47656,-3.808594 2.28516,-1.347656 5.29297,-1.347656 4.27734,0 6.97266,2.617187 2.71484,2.617188 3.02734,7.109375 l 0.0391,1.445313 q 0,4.863281 -2.71484,7.8125 -2.71485,2.929687 -7.28516,2.929687 -4.57031,0 -7.30469,-2.929687 -2.71484,-2.929688 -2.71484,-7.96875 z m 5.64453,0.410157 q 0,3.007812 1.13281,4.609375 1.13282,1.582031 3.24219,1.582031 2.05078,0 3.20313,-1.5625 1.15234,-1.582031 1.15234,-5.039063 0,-2.949218 -1.15234,-4.570312 -1.15235,-1.621094 -3.24219,-1.621094 -2.07031,0 -3.20313,1.621094 -1.13281,1.601562 -1.13281,4.980469 z" />
<path
id="path1060"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Roboto;-inkscape-font-specification:'Roboto Bold';fill:#ffffff;fill-opacity:1"
d="m 344.2168,41.024963 0.17578,2.441406 q 2.26562,-2.832031 6.07422,-2.832031 3.35937,0 5,1.972656 1.64062,1.972656 1.67968,5.898437 v 13.652344 h -5.64453 V 48.64215 q 0,-1.796875 -0.78125,-2.597656 -0.78125,-0.820313 -2.59765,-0.820313 -2.38282,0 -3.57422,2.03125 V 62.157775 H 338.9043 V 41.024963 Z" />
</g>
</g>
</svg>
......@@ -12,6 +12,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/png" href="img/badge.128.png" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="leaflet.css" />
......@@ -28,13 +29,14 @@
<div id="left-menu" class="d-none">
<div id="left-menu-mask" class="menu-mask"></div>
<nav>
<h1>Gribrouillon</h1>
<img src="img/logo.svg" alt="Gribrouillon" style="width: 90%" />
<hr />
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
<a class="nav-link" href="about.html"><i class="fa fa-question-circle" aria-hidden="true"></i> About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://framagit.org/PanierAvide/gribrouillon">Source code</a>
<a class="nav-link" href="https://framagit.org/PanierAvide/gribrouillon"><i class="fa fa-code" aria-hidden="true"></i>Source code</a>
</li>
</ul>
......@@ -47,28 +49,20 @@
<i class="fa fa-bars" title="Menu"></i>
</button>
<div class="input-group input-group-sm ml-2 mr-2 mode-nav-only" style="max-width: 300px">
<img src="img/logo_white.svg" class="mode-draw-only" alt="Gribrouillon" style="height: 90%" />
<div class="input-group ml-2 mr-2 mode-nav-only" style="max-width: 300px">
<div class="input-group-prepend">
<span class="input-group-text" id="search-bar-icon">
<i class="fa fa-search" title="Search"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="Search your street, city, country..." aria-describedby="search-bar-icon">
<input id="searchbar" type="text" class="form-control" placeholder="Search your street, city, country..." aria-describedby="search-bar-icon">
</div>
<button class="btn-permalink btn btn-dark mode-nav-only btn-lg" type="button">
<i class="fa fa-share-alt" title="Share your sketch"></i>
<button class="btn-permalink btn btn-dark btn-lg" type="button" data-toggle="modal" data-target="#sharingModal">
<i class="fa fa-send" title="Share your sketch"></i>
</button>
<div class="btn-group mode-draw-only btn-group-lg" role="group">
<button class="btn-permalink btn btn-dark" type="button">
<i class="fa fa-share-alt" title="Share your sketch"></i>
</button>
<button id="btn-valid" class="btn btn-dark" type="button">
<i class="fa fa-check" title="Stop drawing"></i>
</button>
</div>
</div>
<div id="map" class="map-no-bottom"></div>
......@@ -89,10 +83,14 @@
</div>
</div>
<button id="btn-edit" class="btn btn-primary btn-lg mode-nav-only" type="button">
<button id="btn-edit" class="btn btn-primary btn-lg btn-action mode-nav-only" type="button">
<i class="fa fa-paint-brush" title="Start drawing"></i>
</button>
<button id="btn-valid" class="btn btn-primary btn-lg btn-action mode-draw-only" type="button">
<i class="fa fa-check" title="Stop drawing"></i>
</button>
<div class="modal fade" id="colorModal" tabindex="-1" role="dialog" aria-labelledby="colorModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
......@@ -108,10 +106,48 @@
</div>
</div>
<div class="modal fade" id="sharingModal" tabindex="-1" role="dialog" aria-labelledby="sharingModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="sharingModalLabel"><i class="fa fa-send" aria-hidden="true"></i> Share your map</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="share-qrcode" class="text-center"></div>
<div class="input-group mb-3 mt-3">
<div class="input-group-prepend">
<span class="input-group-text">URL</span>
</div>
<input id="share-url" type="text" class="form-control" />
<div class="input-group-append">
<button id="share-url-copy" class="btn btn-secondary" type="button">
<i class="fa fa-clipboard" title="Copy"></i>
</button>
</div>
</div>
<div class="d-flex flex-nowrap">
<a id="share-email" href="" role="button" class="btn btn-primary flex-grow-1 mr-1">
<i class="fa fa-envelope" aria-hidden="true"></i> By email
</a>
<a id="share-sms" href="" role="button" class="btn btn-primary flex-grow-1 ml-1">
<i class="fa fa-phone" aria-hidden="true"></i> By SMS
</a>
</div>
</div>
</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="leaflet.js"></script>
<script src="leaflet-hash.js"></script>
<script src="qrcode.min.js"></script>
<script src="socket.io/socket.io.js"></script>
<script src="index.min.js"></script>
</body>
......
// Constants
const GEOCODER_URL = "https://nominatim.openstreetmap.org";
const COLORS = [
["white", "#d2d7d3", "#bfbfbf", "#67809f", "rgb(111, 111, 111)", "black"],
["#ffffcc", "#f2d984", "#f0ff00", "#f5e51b", "#f4d03f", "#f7ca18"],
......@@ -10,7 +11,8 @@ const COLORS = [
];
// Script-wide variables
let map, sid, shapesLayer, tmpShapeCoordinates, tmpShapeLayer, lastCreatedShape;
let map, sid, shapesLayer, tmpShapeCoordinates,
tmpShapeLayer, lastCreatedShape, timerGeocoder;
const drawOpts = {
color: "red",
penSize: 20,
......@@ -21,6 +23,7 @@ const domLoader = document.getElementById("loader");
const domInputPenSize = document.getElementById("pensize");
const domColorPicker = document.getElementById("color-picker");
const domBtnColor = document.getElementById("btn-color");
const domSearchAddress = document.getElementById("searchbar");
......@@ -99,6 +102,57 @@ function listenAPIChanges() {
socket.on("shape_creation_done", fid => lastCreatedShape = fid);
}
/**
* Ajax HTTP Get request
*/
function request(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", () => {
resolve(xhr.responseText);
});
xhr.addEventListener("error", reject);
xhr.addEventListener("abort", reject);
xhr.open("GET", url);
xhr.send();
});
}
/**
* Geocoding address
*/
function searchAddress(e, now) {
if(timerGeocoder) {
clearTimeout(timerGeocoder);
}
if(!now) {
timerGeocoder = setTimeout(() => searchAddress(e, true), 1000);
}
else {
showLoader(true);
const url = GEOCODER_URL + `/search?q=${encodeURIComponent(e.target.value)}&format=json&limit=1`
request(url)
.then(txt => JSON.parse(txt))
.then(data => {
showLoader(false);
if(data.length === 1 && data[0].boundingbox && data[0].boundingbox.length === 4) {
const [ south, north, west, east ] = data[0].boundingbox.map(v => parseFloat(v));
map.fitBounds([[ south, west ], [ north, east ]]);
}
else {
alert("No result for your search, please check given address");
}
})
.catch(e => {
showLoader(false);
console.error(e);
alert("Search service is unavailable. Please retry later");
});
}
}
/***********************************************************************************
......@@ -192,7 +246,7 @@ function enableDrawing() {
map.on("mousemove", continueTmpShape);
map.on("zoomanim", removeTmpShape);
map.on("mouseup", finishShapeDrawing);
$(document).mouseleave(finishShapeDrawing);
$("#map").mouseleave(finishShapeDrawing);