@phila/layerboard 2.2.0 → 3.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.md +45 -186
  2. package/dist/favicon.ico +0 -0
  3. package/dist/index.js +2 -0
  4. package/dist/index.mjs +2603 -0
  5. package/dist/layerboard.css +1 -0
  6. package/package.json +79 -39
  7. package/.eslintrc.js +0 -49
  8. package/.github/workflows/node.js.yml +0 -24
  9. package/babel.config.js +0 -5
  10. package/example/index.html +0 -130
  11. package/example/main.js +0 -82
  12. package/example/styles.css +0 -108
  13. package/example/util.js +0 -11
  14. package/src/App.vue +0 -48
  15. package/src/assets/basemap_side_by_side.png +0 -0
  16. package/src/assets/basemap_small.png +0 -0
  17. package/src/assets/blueMarker.png +0 -0
  18. package/src/assets/camera.png +0 -0
  19. package/src/assets/camera2.png +0 -0
  20. package/src/assets/cyclomedia.png +0 -0
  21. package/src/assets/cyclomedia_blue.png +0 -0
  22. package/src/assets/historic_small.png +0 -0
  23. package/src/assets/imagery_small.png +0 -0
  24. package/src/assets/logo.png +0 -0
  25. package/src/assets/markers.png +0 -0
  26. package/src/assets/markers2.png +0 -0
  27. package/src/assets/pictometry.png +0 -0
  28. package/src/components/Layerboard.vue +0 -315
  29. package/src/components/LbFooter.vue +0 -112
  30. package/src/components/MapPanel.vue +0 -1108
  31. package/src/components/TopicPanel.vue +0 -264
  32. package/src/components/markers-mixin.js +0 -58
  33. package/src/fa.js +0 -15
  34. package/src/main.js +0 -93
  35. package/src/store.js +0 -229
  36. package/src/util/config-mixin.js +0 -10
  37. package/src/util/is-mobile-device.js +0 -11
  38. package/src/util/merge-deep.js +0 -25
  39. package/vue.config.js +0 -15
package/.eslintrc.js DELETED
@@ -1,49 +0,0 @@
1
- module.exports = {
2
- root: true,
3
- env: {
4
- node: true,
5
- },
6
- "extends": [
7
- "eslint:recommended",
8
- "plugin:vue/essential",
9
- "plugin:vue/recommended",
10
- ],
11
- rules: {
12
- // Disabled only on development
13
- "no-console": "off",
14
- "no-debugger": "off",
15
- "no-unused-vars": "off",
16
- // "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
17
- // "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
18
- // "no-unused-vars": process.env.NODE_ENV === "production" ? "error" : "off",
19
-
20
- // Eslint Rules
21
- "brace-style": "error",
22
- "nonblock-statement-body-position": [ "error", "below" ],
23
- "curly": [ "error", "all" ],
24
- "indent": [ "error", 2 ],
25
- "no-else-return": "error",
26
- "object-curly-spacing": [ "error", "always", {
27
- arraysInObjects: false,
28
- objectsInObjects: false,
29
- }],
30
- "array-bracket-spacing": [ "error", "always", {
31
- objectsInArrays: false,
32
- arraysInArrays: false,
33
- }],
34
- "comma-dangle": [ "error", "always-multiline" ],
35
- "semi": [ "error", "always" ],
36
-
37
- // Vue Rules
38
- "vue/no-v-html": "off",
39
- "vue/order-in-components": "error",
40
- "vue/attributes-order": "error",
41
- "vue/require-prop-types": "off",
42
- "vue/no-use-v-if-with-v-for": "off",
43
- "no-useless-escape": "off",
44
- "vue/no-unused-components": "off",
45
- },
46
- parserOptions: {
47
- parser: "babel-eslint",
48
- },
49
- };
package/.github/workflows/node.js.yml DELETED
@@ -1,24 +0,0 @@
1
- # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
2
- # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3
-
4
- name: Publish to npmjs
5
-
6
- on:
7
- push:
8
- tags:
9
- - '*'
10
-
11
- jobs:
12
- build:
13
-
14
- runs-on: ubuntu-latest
15
-
16
- steps:
17
- - uses: actions/checkout@v1
18
- - uses: actions/setup-node@v1
19
- with:
20
- node-version: 12
21
- registry-url: https://registry.npmjs.org/
22
- - run: npm publish --access public
23
- env:
24
- NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
package/babel.config.js DELETED
@@ -1,5 +0,0 @@
1
- module.exports = {
2
- presets: [
3
- '@vue/app',
4
- ],
5
- };
package/example/index.html DELETED
@@ -1,130 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <!-- Google Tag Manager -->
5
- <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
6
- new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
7
- j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
8
- 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
9
- })(window,document,'script','dataLayer','GTM-NKCTSVS');</script>
10
- <meta charset="utf-8">
11
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
12
- <meta name="viewport" content="width=device-width, initial-scale=1">
13
-
14
- <meta charset="UTF-8" />
15
- <meta http-equiv="x-ua-compatible" content="ie=edge">
16
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17
- <title>Layerboard Example | phila.gov</title>
18
- <link rel="canonical" href="">
19
- <meta name="description" content="">
20
- <link rel="shortcut icon" type="image/x-icon" href="http://standards.phila.gov/img/favicon.png">
21
-
22
- <!-- CSS -->
23
- <!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css"> -->
24
- <link rel="stylesheet" href="//unpkg.com/phila-standards@0.12.0/dist/css/phila-app.min.css">
25
- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
26
- <link rel="stylesheet" href="//unpkg.com/leaflet@1.1.0/dist/leaflet.css">
27
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
28
- <link rel="stylesheet" href="//unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.css">
29
- <link rel="stylesheet" href="//unpkg.com/Leaflet.vector-markers@0.0.6/dist/leaflet-vector-markers.css">
30
- <link rel="stylesheet" href="//s3.amazonaws.com/leaflet-measure-flatfiles/leaflet-measure-openmaps.css">
31
- <link rel="stylesheet" href="styles.css">
32
- </head>
33
-
34
- <body>
35
- <div class="grid-y medium-grid-frame" id="application">
36
- <!-- Begin header -->
37
- <header class="site-header app group">
38
- <div class="row expanded">
39
- <div class="columns">
40
- <a href="//beta.phila.gov" class="logo">
41
- <img src="http://standards.phila.gov/img/logo/city-of-philadelphia-yellow-white.png" alt="City of Philadelphia">
42
- </a>
43
- <div class="app-divide"></div>
44
- <div class="page-title-container">
45
- <a href="#/">
46
- <h1 class="page-title">Layerboard Example
47
- <!-- <span id="demo-badge">DEMO</span> -->
48
- </h1>
49
- </a>
50
- </div>
51
- </div>
52
- </div>
53
- </header>
54
-
55
- <!-- Layerboard -->
56
- <div id="layerboard"></div>
57
-
58
- <!-- Footer -->
59
- <div class="app-footer">
60
- <!-- remove the anchor class if you want to handle footer placement yourself, otherwise it will be postion: fixed -->
61
- <footer>
62
- <div class="row expanded">
63
- <div class="columns">
64
- <nav>
65
- <ul class="inline-list">
66
- <li>
67
- <a class="bold-a" onclick="openHelp()">Help</a>
68
- </li>
69
- <li>
70
- <a href="//philagsg.typeform.com/to/GQOPjW">Feedback</a>
71
- </li>
72
- </ul>
73
- </nav>
74
- </div>
75
- </div>
76
- </footer>
77
- </div>
78
-
79
- </div><!-- end of application div -->
80
-
81
- <!-- JS: Foundation -->
82
- <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
83
- <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
84
-
85
- <!-- JS: Layerboard dependencies -->
86
- <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
87
- <script src="//cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
88
- <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
89
- <script src="//unpkg.com/axios@0.16.2/dist/axios.min.js"></script>
90
- <script src="//cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
91
- <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
92
- <script src="//unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
93
- <script src="//unpkg.com/esri-leaflet@2.1.4"></script>
94
- <script src="//unpkg.com/Leaflet.vector-markers@0.0.6"></script>
95
- <script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
96
- <script src="//unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.js"></script>
97
- <script src="//s3.amazonaws.com/leaflet-measure-flatfiles/leaflet-measure.js"></script>
98
-
99
- <!-- Load Leaflet Label from GitHub -->
100
- <script src="https://leaflet.github.io/Leaflet.label/leaflet.label.js"></script>
101
- <!-- Load Leaflet Heat from CDN -->
102
- <script src="https://cdn.rawgit.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js"></script>
103
- <!-- Load Heatmap Feature Layer from CDN -->
104
- <script src="https://cdn.jsdelivr.net/leaflet.esri.heatmap-feature-layer/2.0.0-beta.1/esri-leaflet-heatmap-feature-layer.js"></script>
105
- <!-- Load Esri Leaflet Renderers from CDN -->
106
- <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script>
107
- <!-- Load Vector Icon from GitHub -->
108
- <script src="https://muxlab.github.io/Leaflet.VectorIcon/L.VectorIcon.js"></script>
109
- <!-- Load Leaflet Omnivore -->
110
- <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
111
-
112
- <script src="//cdn.rawgit.com/hayeswise/Leaflet.PointInPolygon/v1.0.0/wise-leaflet-pip.js"></script>
113
- <script src="//cdn.rawgit.com/CityOfPhiladelphia/L.esri.WebMap/5849bfa6248a886d8675eeff98fa9dff4949f12a/dist/esri-leaflet-webmap.js"></script>
114
-
115
- <!-- JS: Cyclomedia -->
116
- <script src="//cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
117
- <script src="//cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
118
- <script src="//cdnjs.cloudflare.com/ajax/libs/ol3/4.1.0/ol.js"></script>
119
- <script src="//s3.amazonaws.com/cyclomedia-mapboard/cyclomedia-mapboard.js"></script>
120
-
121
- <!-- JS: Pictometry (optional) -->
122
- <script src="//unpkg.com/blueimp-md5@2.10.0/js/md5.min.js"></script>
123
-
124
- <script src="//cdn.rawgit.com/ajrothwell/esri-leaflet-legend/2fca1eed2eda8b951ed21fe05350b79101e604a7/dist/esri-leaflet-legend-compat-src-edit.js"></script>
125
-
126
- <!-- <script src="util.js"></script> -->
127
- <script src="bundle.js"></script>
128
-
129
- </body>
130
- </html>
package/example/main.js DELETED
@@ -1,82 +0,0 @@
1
- /*
2
- _ _ _
3
- | | | | | |
4
- | | __ _ _ _ ___ _ __| |__ ___ __ _ _ __ __| |
5
- | |/ _` | | | |/ _ \ '__| '_ \ / _ \ / _` | '__/ _` |
6
- | | (_| | |_| | __/ | | |_) | (_) | (_| | | | (_| |
7
- |_|\__,_|\__, |\___|_| |_.__/ \___/ \__,_|_| \__,_|
8
- __/ |
9
- |___/
10
- */
11
-
12
- import accounting from 'accounting';
13
- import axios from 'axios';
14
- import moment from 'moment';
15
- import layerboard from '../dist/layerboard';
16
-
17
- // import 'leaflet/dist/leaflet.css';
18
- // import 'leaflet-easybutton/src/easy-button.css';
19
- // import 'leaflet-measure/dist/leaflet-measure.css';
20
-
21
- // turn off console logging in production
22
- // TODO come up with better way of doing this with webpack + env vars
23
- const { hostname='' } = location;
24
- if (hostname !== 'localhost' && !hostname.match(/(\d+\.){3}\d+/)) {
25
- console.log = console.info = console.debug = console.error = function () {};
26
- }
27
-
28
- function openHelp() {
29
- var firstHash = window.location.hash;
30
- // console.log('setHash is running, firstHash:', firstHash);
31
- var firstHashArr = firstHash.split('/').slice(2);
32
- console.log('firstHashArr:', firstHashArr);
33
- var finalHash = '#/help';
34
- for (var i=0; i < firstHashArr.length; i++) {
35
- finalHash = finalHash + '/' + firstHashArr[i];
36
- }
37
- window.location.hash = finalHash;
38
- }
39
-
40
- console.log('openHelp:', openHelp);
41
-
42
- var BASE_CONFIG_URL = 'https://rawgit.com/ajrothwell/openmaps-base-config/f7a091508316694767f24fd68ab07af38ddad163/config.js';
43
- var GATEKEEPER_KEY = 'ec8681f792812d7e3ff15e9094bfd4ad';
44
- var WEBMAP_ID = '4c3ed877199c402895b7fa45ce6409b6';
45
-
46
- layerboard({
47
- bundled: true,
48
- router: {
49
- enabled: true
50
- },
51
- geolocation: {
52
- enabled: true
53
- },
54
- addressAutocomplete: {
55
- enabled: true
56
- },
57
- map: {
58
- // possibly should move to base config
59
- defaultBasemap: 'pwd',
60
- defaultIdentifyFeature: 'address-marker',
61
- imagery: {
62
- enabled: true
63
- },
64
- historicBasemaps: {
65
- enabled: true
66
- },
67
- center: [-75.16347348690034, 39.952562122622254],
68
- clickToIdentifyFeatures: true,
69
- containerClass: 'map-container-type3',
70
- },
71
- cyclomedia: {
72
- enabled: true,
73
- measurementAllowed: false,
74
- popoutAble: true,
75
- },
76
- pictometry: {
77
- enabled: false,
78
- },
79
- gatekeeperKey: GATEKEEPER_KEY,
80
- baseConfig: BASE_CONFIG_URL,
81
- webmapId: WEBMAP_ID,
82
- });
package/example/styles.css DELETED
@@ -1,108 +0,0 @@
1
- /* header.site-header > .row:last-of-type {
2
- background: #2176d2;
3
- } */
4
- body {
5
- overflow-y: hidden;
6
- }
7
-
8
- .bold-a {
9
- font-weight: bold;
10
- color: white;
11
- }
12
-
13
- .grid-y {
14
- overflow-y: hidden;
15
- }
16
-
17
- .greeting > h2 {
18
- margin-bottom: 30px;
19
- }
20
-
21
- .greeting > .callout {
22
- border-color: #58c04d;
23
- background: #fff;
24
- /*margin: 0 0 1rem 0;*/
25
- padding: 1rem;
26
- }
27
-
28
- .greeting > .callout > ul {
29
- margin: 0 0 0 1.42857rem;
30
- padding: 0 0 0 1.42857rem;
31
- }
32
-
33
- #application .site-header, #application .app-footer {
34
- background: #2176d2;
35
- }
36
-
37
- #application .site-header .page-title-container h1 {
38
- font-size: 2.14286rem;
39
- }
40
-
41
- /*this fixes an issue with the topic panel scrolling over the footer padding*/
42
- #application .app-footer {
43
- position: relative;
44
- }
45
-
46
- /*small*/
47
- @media screen and (max-width: 750px) {
48
- .logo {
49
- float: left;
50
- }
51
-
52
- #application .site-header .logo img {
53
- max-width: 100px;
54
- height: auto;
55
- }
56
-
57
- #application .site-header .page-title-container h1 {
58
- font-size: 1.75rem;
59
- }
60
-
61
- .page-title
62
-
63
- .page-title-container {
64
- float: right;
65
- }
66
- }
67
-
68
- #demo-badge {
69
- /*text-transform: capitalize;*/
70
- font-size: 14px;
71
- vertical-align: top;
72
- /*color: #eee;*/
73
- margin-left: 4px;
74
- line-height: 35px;
75
- padding: 4px;
76
- border-radius: 8px;
77
- background: #f3c613;
78
- }
79
-
80
- .tour-tip{
81
- border-left: 3px solid color(dark-ben-franklin);
82
- padding-left: 10px;
83
- display: flex;
84
- align-items: center;
85
- margin-bottom: 15px;
86
- &:hover{
87
- cursor: pointer;
88
- cursor: hand;
89
- background: color(ghost-gray);
90
- }
91
- }
92
-
93
- .tour-tip__action{
94
- color: color(dark-ben-franklin);
95
- @include rem(font-size, 1.75);
96
- margin:0;
97
- padding:0;
98
- }
99
-
100
- .tour-tip__result{
101
- // padding-left: 30px;
102
- }
103
-
104
- .tour-tip__icon {
105
- margin-right: 10px;
106
- @include rem(font-size, 3)
107
- color: color(electric-blue);
108
- }
package/example/util.js DELETED
@@ -1,11 +0,0 @@
1
- function openHelp() {
2
- var firstHash = window.location.hash;
3
- // console.log('setHash is running, firstHash:', firstHash);
4
- var firstHashArr = firstHash.split('/').slice(2);
5
- console.log('firstHashArr:', firstHashArr);
6
- var finalHash = '#/help';
7
- for (var i=0; i < firstHashArr.length; i++) {
8
- finalHash = finalHash + '/' + firstHashArr[i];
9
- }
10
- window.location.hash = finalHash;
11
- }
package/src/App.vue DELETED
@@ -1,48 +0,0 @@
1
- <template>
2
- <div>
3
- <layerboard />
4
- <lb-footer />
5
- </div>
6
- </template>
7
-
8
- <script>
9
-
10
- import Layerboard from './components/Layerboard.vue';
11
- import LbFooter from './components/LbFooter.vue';
12
-
13
- export default {
14
- name: 'App',
15
- components: {
16
- Layerboard,
17
- LbFooter,
18
- },
19
- mounted() {
20
- window.addEventListener('resize', this.handleWindowResize);
21
- this.handleWindowResize();
22
- },
23
- methods: {
24
- handleWindowResize() {
25
- const windowHeight = window.innerHeight;
26
- const rootElement = document.getElementById('mb-root');
27
- const rootStyle = window.getComputedStyle(rootElement);
28
- // const rootHeight = rootStyle.getPropertyValue('height');
29
- // const rootHeightNum = parseInt(rootHeight.replace('px', ''));
30
- // const rootHeightNum = 100;
31
- const rootWidth = rootStyle.getPropertyValue('width');
32
- const rootHeight = rootStyle.getPropertyValue('height');
33
- const rootWidthNum = parseInt(rootWidth.replace('px', ''));
34
- const rootHeightNum = parseInt(rootHeight.replace('px', ''));
35
-
36
- const dim = {
37
- width: rootWidthNum,
38
- height: rootHeightNum,
39
- };
40
-
41
- // console.log('App handleWindowResize is running, dim:', dim);
42
- // this.$store.commit('setWindowWidth', rootWidthNum);
43
- this.$store.commit('setWindowDimensions', dim);
44
- },
45
- },
46
-
47
- };
48
- </script>
package/src/assets/basemap_side_by_side.png DELETED
Binary file
package/src/assets/basemap_small.png DELETED
Binary file
package/src/assets/blueMarker.png DELETED
Binary file
package/src/assets/camera.png DELETED
Binary file
package/src/assets/camera2.png DELETED
Binary file
package/src/assets/cyclomedia.png DELETED
Binary file
package/src/assets/cyclomedia_blue.png DELETED
Binary file
package/src/assets/historic_small.png DELETED
Binary file
package/src/assets/imagery_small.png DELETED
Binary file
package/src/assets/logo.png DELETED
Binary file
package/src/assets/markers.png DELETED
Binary file
package/src/assets/markers2.png DELETED
Binary file
package/src/assets/pictometry.png DELETED
Binary file