diff --git a/.eslintrc.yml b/.eslintrc.yml index a98291e1..48d886e3 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -29,7 +29,7 @@ rules: class-methods-use-this: "off" import/no-extraneous-dependencies: - - "error" + - "warn" - devDependencies: - "**/*.spec.js" - "**/test_helpers/**/*.js" diff --git a/assets/css/leaflet.css b/assets/css/leaflet.css index 6d72222c..8fbef507 100644 --- a/assets/css/leaflet.css +++ b/assets/css/leaflet.css @@ -5,6 +5,7 @@ .geosearch.leaflet-bar.active form { display: block; + box-shadow: none; } .geosearch a.leaflet-bar-part { @@ -24,6 +25,9 @@ background-image: url(../img/alert.png); background-size: 18px 18px; } +.geosearch.active a.leaflet-bar-part { + border-radius: 4px 0 0 4px +} .leaflet-control-geosearch { position: relative; @@ -31,12 +35,13 @@ .leaflet-control-geosearch form { position: absolute; - top: 0; - left: 22px; - box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65); + top: -2px; + left: 30px; border-radius: 0 4px 4px 0; + border: 2px solid rgba(0,0,0,0.2); + border-left: none; + background-clip: padding-box; z-index: -1; - background: #FFF; height: auto; margin: 0; padding: 0; @@ -51,7 +56,7 @@ font-size: 12px; height: 30px; border-radius: 0 4px 4px 0; - + text-indent: 0; } .leaflet-control-geosearch .message { diff --git a/example/components/Code.js b/example/components/Code.js new file mode 100644 index 00000000..6e563eb2 --- /dev/null +++ b/example/components/Code.js @@ -0,0 +1,31 @@ +import preact, { Component } from 'preact'; +import microlight from 'microlight'; +window.microlight = microlight; + +class Code extends Component { + componentDidMount() { + microlight.reset('code'); + } + + componentDidUpdate(prevProps) { + const { children } = this.props; + this.container.innerHTML = children.join('\n\n'); + microlight.reset('code'); + } + + defineContainer = (ref) => { + this.container = ref; + }; + + render() { + const { children } = this.props; + + return ( +
+ {children} +
+ ); + } +} + +export default Code; diff --git a/example/components/Layout.js b/example/components/Layout.js index 6cc8e74c..f944f358 100644 --- a/example/components/Layout.js +++ b/example/components/Layout.js @@ -1,4 +1,5 @@ import preact, { Component } from 'preact'; +import Code from './Code'; class Layout extends Component { constructor(props) { @@ -45,6 +46,12 @@ class Layout extends Component {
{page && page.view()}
+ + {page.code && ( + + {page.code} + + )} ); } diff --git a/example/components/Map.js b/example/components/Map.js index b7f12bf4..83d2cd03 100644 --- a/example/components/Map.js +++ b/example/components/Map.js @@ -1,12 +1,13 @@ import preact, { Component } from 'preact'; import merge from 'lodash.merge'; +import L from 'leaflet'; + import { GeoSearchControl, OpenStreetMapProvider, Provider as BaseProvider, } from '../../src'; -const L = window.L; // eslint-disable-next-line no-confusing-arrow const ensureInstance = Provider => Provider instanceof BaseProvider ? Provider : new Provider(); diff --git a/example/index.html b/example/index.html index 30f31acc..eb92babc 100644 --- a/example/index.html +++ b/example/index.html @@ -13,6 +13,6 @@
- + diff --git a/example/pages.js b/example/pages.js index 8e390208..666bd55f 100644 --- a/example/pages.js +++ b/example/pages.js @@ -11,16 +11,19 @@ import { const BING_KEY = 'AtUDjSVEBxo8BwgYUPdfnzHpznaYwDdjjS27jyFDj18nhTUDUjrhc0NwMndZvrXs'; const GOOGLE_KEY = 'AIzaSyDigZ5WMPoTj_gnkUn3p1waYPDa5oE8WOw'; +/* eslint-disable import/no-webpack-loader-syntax, global-require, import/no-unresolved */ export default [ { slug: 'search', title: 'Search', view: () => (), + code: require('!!raw!./snippets/search'), }, { slug: 'openstreetmap', title: 'OpenStreetMap', view: () => (), + code: require('!!raw!./snippets/openstreetmap'), }, { slug: 'google', @@ -32,6 +35,7 @@ export default [ return ; }, + code: require('!!raw!./snippets/google'), }, { slug: 'bing', @@ -43,10 +47,12 @@ export default [ return ; }, + code: require('!!raw!./snippets/bing'), }, { slug: 'esri', title: 'Esri', view: () => (), + code: require('!!raw!./snippets/esri'), }, ]; diff --git a/example/snippets/bing.js b/example/snippets/bing.js new file mode 100644 index 00000000..4e27c757 --- /dev/null +++ b/example/snippets/bing.js @@ -0,0 +1,16 @@ +import L from 'leaflet'; +import { + GeoSearchControl, + BingProvider, +} from 'leaflet-geosearch'; + +const provider = new BingProvider({ params: { + key: '__YOUR_BING_KEY__' +} }); + +const searchControl = new GeoSearchControl({ + provider: provider, +}); + +const map = new L.Map('map'); +map.addControl(searchControl); diff --git a/example/snippets/esri.js b/example/snippets/esri.js new file mode 100644 index 00000000..54472b90 --- /dev/null +++ b/example/snippets/esri.js @@ -0,0 +1,14 @@ +import L from 'leaflet'; +import { + GeoSearchControl, + EsriProvider, +} from 'leaflet-geosearch'; + +const provider = new EsriProvider(); + +const searchControl = new GeoSearchControl({ + provider: provider, +}); + +const map = new L.Map('map'); +map.addControl(searchControl); diff --git a/example/snippets/google.js b/example/snippets/google.js new file mode 100644 index 00000000..0d0c2c09 --- /dev/null +++ b/example/snippets/google.js @@ -0,0 +1,16 @@ +import L from 'leaflet'; +import { + GeoSearchControl, + GoogleProvider, +} from 'leaflet-geosearch'; + +const provider = new GoogleProvider({ params: { + key: '__YOUR_GOOGLE_KEY__', +} }); + +const searchControl = new GeoSearchControl({ + provider: provider, +}); + +const map = new L.Map('map'); +map.addControl(searchControl); diff --git a/example/snippets/openstreetmap.js b/example/snippets/openstreetmap.js new file mode 100644 index 00000000..6265bba4 --- /dev/null +++ b/example/snippets/openstreetmap.js @@ -0,0 +1,14 @@ +import L from 'leaflet'; +import { + GeoSearchControl, + OpenStreetMapProvider, +} from 'leaflet-geosearch'; + +const provider = new OpenStreetMapProvider(); + +const searchControl = new GeoSearchControl({ + provider: provider, +}); + +const map = new L.Map('map'); +map.addControl(searchControl); diff --git a/example/snippets/search.js b/example/snippets/search.js new file mode 100644 index 00000000..ab294a6b --- /dev/null +++ b/example/snippets/search.js @@ -0,0 +1,16 @@ +import { + OpenStreetMapProvider, +} from 'leaflet-geosearch'; + +const provider = new OpenStreetMapProvider(); + +const form = document.querySelector('form'); +const input = form.querySelector('input[type="text"]'); + +form.addEventListener('submit', (event) => { + event.preventDefault(); + + provider.search({ query: input.value }).then(((results) => { + console.log(results); + })); +}); diff --git a/example/style.css b/example/style.css index 5979884c..d09c8a78 100644 --- a/example/style.css +++ b/example/style.css @@ -4,6 +4,11 @@ html, body { padding: 0; height: 100%; width: 100%; + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; } #app, #app > .container { @@ -18,6 +23,11 @@ html, body { position: relative; } +.content.search { + width: calc(80% - 325px); + margin: 0 0 0 10%; +} + #app .header { height: 100px; } @@ -126,3 +136,21 @@ form button { width: 100%; height: 100%; } + +.code { + position: absolute; + top: 120px; + right: 20px; + bottom: 20px; + width: 425px; + + background: rgba(0, 0, 0, .7); + color: #fff; + border-radius: 4px; + padding: 24px; + font-family: Roboto, monospace; + white-space: pre; + + font-size: 14px; + line-height: 22px; +} diff --git a/package.json b/package.json index 89665d74..4fa841c5 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "leaflet": "^1.0.2", "lodash.debounce": "^4.0.8", "lodash.merge": "^4.6.0", + "microlight": "0.0.7", "node-fetch": "^1.6.3", "power-assert": "^1.4.2", "preact": "^7.1.0", diff --git a/webpack.config.babel.js b/webpack.config.babel.js index aa14d073..25b1e612 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -42,6 +42,7 @@ export default { library: 'GeoSearch', libraryTarget: 'umd', }, + devTool: 'inline-source-map', devServer: { // contentBase: './example', inline: true,