Vite App

- -

+ +

+ + +

+ +

Pubs

diff --git a/public/images/new-window.svg b/public/images/new-window.svg new file mode 100644 index 0000000..cf21fa0 --- /dev/null +++ b/public/images/new-window.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/public/images/pin.svg b/public/images/pin.svg new file mode 100644 index 0000000..3fd7da7 --- /dev/null +++ b/public/images/pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/polygon.svg b/public/images/polygon.svg new file mode 100644 index 0000000..e58ec6f --- /dev/null +++ b/public/images/polygon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/images/rectangle.svg b/public/images/rectangle.svg new file mode 100644 index 0000000..1c59a85 --- /dev/null +++ b/public/images/rectangle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.css b/src/index.css index c5ad895..8f861f0 100644 --- a/src/index.css +++ b/src/index.css @@ -4,13 +4,13 @@ /* GENERAL // ------------------------- */ -* { - font-family: "Helvetica Neue", Helvetica, sans-serif; -} +/* * { + font-family: 'Helvetica Neue', Helvetica, sans-serif; +} */ #map { height: 100%; - height: 800px; + height: 100dvh; width: 100%; } @@ -25,14 +25,84 @@ body { padding: 0; } -body { - color: #646c78; - background-color: #222e3e; +.gm-fullscreen-control, +.gm-svpc { + display: none; +} + +.st0 { + fill: none; + stroke: #000000; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 10; +} +.st1 { + fill: none; + stroke: #000000; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; +} +.st2 { + fill: none; + stroke: #000000; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + stroke-dasharray: 6, 6; +} +.st3 { + fill: none; + stroke: #000000; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + stroke-dasharray: 4, 4; +} +.st4 { + fill: none; + stroke: #000000; + stroke-width: 2; + stroke-linecap: round; +} +.st5 { + fill: none; + stroke: #000000; + stroke-width: 2; + stroke-linecap: round; + stroke-dasharray: 3.1081, 3.1081; +} + +.st6 { + fill: none; + stroke: #000000; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 10; + stroke-dasharray: 4, 3; } +/* header { + background: rgb(38, 38, 38); + background: linear-gradient( + 180deg, + rgba(38, 38, 38, 1) 0%, + rgba(38, 38, 38, 0.7665660014005602) 51%, + rgba(38, 38, 38, 0) 100% + ); +} */ + +/* body { + color: #646c78; + background-color: #222e3e; +} */ +/* .container { max-width: 1200px; margin: 0 auto; padding-left: 15px; padding-right: 15px; -} +} */ diff --git a/src/main.js b/src/main.js deleted file mode 100644 index 19716e6..0000000 --- a/src/main.js +++ /dev/null @@ -1,153 +0,0 @@ -import { algoliasearch } from "algoliasearch"; -const MAPS_KEY = "AIzaSyCtS6CiOrG95FhroSUdDJJokItndcMkrgc"; -const ALGOLIA_KEY = "9fb3db0222f7b5aef0e2b30791ee6201"; -const INDEX_NAME = "pubfinder"; -const client = algoliasearch("YSWWVAX5RB", ALGOLIA_KEY); - -// Elements -const polygonSelect = document.querySelector(".polygon"); -const rectangleSelect = document.querySelector(".rectangle"); - -let markers = []; -let map; - -const algolia_params = { - hitsPerPage: 1000, -}; - -const initialPolygonCoords = [ - { lat: 51.555519, lng: -0.215208 }, - { lat: 51.526021, lng: -0.021665 }, - { lat: 51.454394, lng: -0.014601 }, - { lat: 51.425103, lng: -0.145876 }, - { lat: 51.514498, lng: -0.257455 }, -]; - -const london_bounds = { - north: 51.532, - south: 51.478, - east: -0.072, - west: -0.16, -}; - -function removeMarkers() { - for (let i = 0; i < markers.length; i++) { - markers[i].setMap(null); - } -} - -async function initMap(shape) { - const position = { lat: 51.508616, lng: -0.125319 }; - - const { Map, Polygon, Rectangle, InfoWindow } = - await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - - map = new Map(document.getElementById("map"), { - zoom: 4, - center: position, - mapId: "DEMO_MAP_ID", - restriction: { - latLngBounds: { - north: 51.74, - south: 51.27, - west: -0.51, - east: 0.23, - }, - strictBounds: true, - }, - }); - - function handleBoundsChange(activeShape) { - console.log("happening"); - removeMarkers(); - const { south, west, north, east } = activeShape.getBounds()?.toJSON(); - const algolia_bounds = [north, east, south, west]; - - function debounce(func, delay) { - let timer; - return function (...args) { - const context = this; - clearTimeout(timer); - timer = setTimeout(() => { - func.apply(context, args); - }, delay); - }; - } - - async function getSearch() { - const res = await client.searchSingleIndex({ - indexName: INDEX_NAME, - searchParams: { - ...algolia_params, - insideBoundingBox: [algolia_bounds], - attributesToRetrieve: ["_geoloc", "name"], - }, - }); - - res.hits.forEach((hit) => { - const marker = new AdvancedMarkerElement({ - map: map, - position: { - lat: hit._geoloc.lat, - lng: hit._geoloc.lng, - }, - }); - - const window = new InfoWindow({ - content: hit.name, - }); - - marker.addListener("click", function () { - window.open({ - anchor: marker, - map, - }); - }); - - markers.push(marker); - }); - } - - const doAll = debounce(getSearch, 500); - doAll(); - } - - if (shape === "rectangular") { - console.log("doing"); - const rectangle = new Rectangle({ - bounds: london_bounds, - editable: true, - draggable: true, - }); - - rectangle.setMap(map); - rectangle.addListener("bounds_changed", handleBoundsChange(rectangle)); - } else if (shape === "polygonular") { - const polygon = new Polygon({ - paths: initialPolygonCoords, - strokeColor: "#FF0000", - strokeOpacity: 0.8, - strokeWeight: 2, - fillColor: "#FF0000", - fillOpacity: 0.35, - editable: true, - draggable: true, - }); - - polygon.setMap(map); - polygon.addListener("bounds_changed", handleBoundsChange(polygon)); - } -} - -[rectangleSelect, polygonSelect].forEach((el) => { - el.addEventListener("click", function (e) { - if (e.target.classList.contains("rectangle")) { - initMap("rectangular"); - } else { - initMap("polygonular"); - } - }); -}); - -initMap("rectangular"); diff --git a/src/refactor.js b/src/refactor.js index e68d2d9..3731993 100644 --- a/src/refactor.js +++ b/src/refactor.js @@ -60,7 +60,7 @@ const dataController = (function () { query, ...algolia_params, ...geoParam, - attributesToRetrieve: ['_geoloc', 'name'], + attributesToRetrieve: ['_geoloc', 'name', 'address', 'postcode'], }, }); return res; @@ -91,6 +91,7 @@ const interfaceController = (function () { zoom, center: position, mapId: 'pub_map', + colorScheme: 'DARK', restriction: { latLngBounds: maxSpace, strictBounds: true, @@ -102,15 +103,20 @@ const interfaceController = (function () { bounds: bounds, editable: true, draggable: true, + strokeWeight: 2, + strokeOpacity: 0.8, + strokeColor: '#D97706', + fillColor: '#D97706', + fillOpacity: 0.35, }); shape.setMap(map); } else if (currentShape === 'polygon') { shape = new Polygon({ paths: initialPolygonBounds, - strokeColor: '#FF0000', + strokeColor: '#D97706', strokeOpacity: 0.8, strokeWeight: 2, - fillColor: '#FF0000', + fillColor: '#D97706', fillOpacity: 0.35, editable: true, draggable: true, @@ -156,7 +162,15 @@ const interfaceController = (function () { let html = `

${pub.name}
+
${pub.name}
+
${pub.address}, ${pub.postcode}
+ + + +

`; -- cgit v1.2.3

London Pubs - Algolia Map Search

London Pub Search 🍻

Pubs

${pub.name}

${pub.address}, ${pub.postcode}