├── README.md
├── img
    ├── address_routing.png
    ├── airportrouting.png
    ├── bloom2.png
    ├── bounding_box.png
    ├── data_model_addresses.png
    ├── daylight_notebook.png
    ├── linesearch.png
    ├── osm_data_model.png
    ├── osm_routing.png
    ├── point_in_polygon_search.png
    ├── radius_search.png
    └── spatialsearch.png
└── src
    ├── address_routing.html
    ├── airports.html
    ├── index.html
    ├── osm_routing.html
    └── strava.html


/README.md:
--------------------------------------------------------------------------------
  1 | # Geospatial Graph Demos
  2 | 
  3 | Map-based demos to showcase geospatial functionality in Neo4j.
  4 | 
  5 | * Spatial search
  6 |     * Radius distance search
  7 |     * Bouding box search
  8 |     * Point in polygon search
  9 |     * Line geometries
 10 | * Routing
 11 |     * Airport routing (`gds.shortestPath.Dijkstra`)
 12 |     * OpenStreetMap road network routing (`apoc.algo.dijkstra` and `apoc.algo.aStar`)
 13 | 
 14 | ## Spatial Search With Neo4j
 15 | 
 16 | ![](img/spatialsearch.png)
 17 | 
 18 | See [`src/index.html`](src/index.html)
 19 | 
 20 | These examples use points of interest from the **Daylight Earth Table OpenStreetMap** distribution. [This Python notebook](https://github.com/johnymontana/daylight-earth-graph/blob/main/POI_import.ipynb) has the code to import this data into Neo4j.
 21 | 
 22 | [![](img/daylight_notebook.png)](https://github.com/johnymontana/daylight-earth-graph/blob/main/POI_import.ipynb)
 23 | 
 24 | 
 25 | ### Radius Distance Search
 26 | 
 27 | ```Cypher
 28 | WITH point({latitude: $latitude, longitude:$longitude}) AS radiusCenter
 29 | MATCH (p:Point)-[:HAS_GEOMETRY]-(poi:PointOfInterest)-[:HAS_TAGS]->(t:Tags) 
 30 |     WHERE point.distance(p.location, radiusCenter) < $radius
 31 | RETURN p {  latitude: p.location.latitude, 
 32 |             longitude: p.location.longitude, 
 33 |             name: poi.name, 
 34 |             categories: labels(poi),
 35 |             tags: t{.*}
 36 |         } AS point
 37 | ```
 38 | 
 39 | ![](img/radius_search.png)
 40 | 
 41 | See [`src/index.html`](src/index.html)
 42 | 
 43 | ### Bounding Box Search
 44 | 
 45 | ```Cypher
 46 | MATCH (p:Point)-[:HAS_GEOMETRY]-(poi:PointOfInterest)-[:HAS_TAGS]->(t:Tags) 
 47 |     WHERE point.withinBBox(
 48 |         p.location, 
 49 |         point({longitude: $lowerLeftLon, latitude: $lowerLeftLat }), 
 50 |         point({longitude: $upperRightLon, latitude: $upperRightLat}))
 51 | RETURN p {  latitude: p.location.latitude, 
 52 |             longitude: p.location.longitude, 
 53 |             name: poi.name, 
 54 |             categories: labels(poi),
 55 |             tags: t{.*}
 56 |         } AS point
 57 | ```
 58 | 
 59 | ![](img/bounding_box.png)
 60 | 
 61 | See [`src/index.html`](src/index.html)
 62 | 
 63 | ### Point In Polygon Search
 64 | 
 65 | Index backed point in polygon search can be accomplished by first converting the polygon to a bounding box, using Cypher's `point.withinBBox` predicate function to find points within the bounding box (using database index), and then filtering the results on the client to the polygon bounds. Here, using Turf.js:
 66 | 
 67 | ```JavaScript
 68 | const polygon = layer.toGeoJSON();
 69 | var bbox = turf.bbox(polygon); // convert polygon to bounding box
 70 | 
 71 | // Within Bounding Box Cypher query
 72 | const cypher = `
 73 |     MATCH (p:Point)-[:HAS_GEOMETRY]-(poi:PointOfInterest)-[:HAS_TAGS]->(t:Tags) 
 74 |     WHERE point.withinBBox(
 75 |         p.location, 
 76 |         point({longitude: $lowerLeftLon, latitude: $lowerLeftLat }), 
 77 |         point({longitude: $upperRightLon, latitude: $upperRightLat}))
 78 |     RETURN p { latitude: p.location.latitude, 
 79 |                longitude: p.location.longitude, 
 80 |                name: poi.name, 
 81 |                categories: labels(poi),
 82 |                tags: t{.*}
 83 |             } AS point
 84 |           `;
 85 | 
 86 | var session = driver.session({
 87 |     database: "osmpois",
 88 |     defaultAccessMode: neo4j.session.READ,
 89 | });
 90 | 
 91 | session
 92 |     .run(cypher, {
 93 |         lowerLeftLat: bbox[1],
 94 |         lowerLeftLon: bbox[0],
 95 |         upperRightLat: bbox[3],
 96 |         upperRightLon: bbox[2],
 97 |     })
 98 |     .then((result) => {
 99 |         const bboxpois = [];
100 |         result.records.forEach((record) => {
101 |             const poi = record.get("point");
102 |             var point = [poi.longitude, poi.latitude];
103 |             bboxpois.push(point);
104 |         });
105 |         // filter results of bouding box query to polygon bounds
106 |         const poisWithin = turf.pointsWithinPolygon(
107 |             turf.points(bboxpois),
108 |             polygon
109 |         );
110 | 
111 |         poisWithin.features.forEach((e) => {
112 |             L.marker([
113 |                 e.geometry.coordinates[1],
114 |                 e.geometry.coordinates[0],
115 |             ])
116 |             .addTo(map)
117 |             .bindPopup("Polygon");
118 |         })
119 | ```
120 | 
121 | ![](img/point_in_polygon_search.png)
122 | 
123 | See [`src/index.html`](src/index.html)
124 | 
125 | ### Line Geometry Search
126 | 
127 | ![](img/linesearch.png)
128 | 
129 | See [`src/strava.html`](src/strava.html)
130 | 
131 | ![](img/bloom2.png)
132 | 
133 | Working with Line geometries in Neo4j using Strava data. To import data, first export user data from Strava then to add activities:
134 | 
135 | ```Cypher
136 | // Create Activity Nodes
137 | LOAD CSV WITH HEADERS FROM "file:///activities.csv" AS row
138 | MERGE (a:Activity {activity_id: row.`Activity ID`})
139 | SET a.filename = row.Filename,
140 |     a.activity_type = row.`Activity Type`,
141 |     a.distance = toFloat(row.Distance),
142 |     a.activity_name = row.`Activity Name`,
143 |     a.activity_data = row.`Activity Date`,
144 |     a.activity_description = row.`Activity Description`,
145 |     a.max_grade = toFloat(row.`Max Grade`),
146 |     a.elevation_high = toFloat(row.`Elevation High`),
147 |     a.elevation_loss = toFloat(row.`Elevation Loss`),
148 |     a.elevation_gain = toFloat(row.`Elevation Gain`),
149 |     a.elevation_low = toFloat(row.`Elevation Low`),
150 |     a.moving_time = toFloat(row.`Moving Time`),
151 |     a.max_speed = toFloat(row.`Max Speed`),
152 |     a.avg_grade = toFloat(row.`Average Grade`)
153 | 
154 | // Parse geojson geometries and create Geometry:Line nodes
155 | MATCH (a:Activity) 
156 | WITH a WHERE a.filename IS NOT NULL AND a.filename CONTAINS ".gpx"
157 | MERGE (n:Geometry {geom_id:a.activity_id })
158 | MERGE (n)<-[:HAS_FEATURE]-(a)
159 | WITH n,a
160 | CALL apoc.load.json('file:///' + replace(a.filename, '.gpx', '.geojson')) YIELD value
161 | UNWIND value.features[0].geometry.coordinates AS coord
162 | WITH n, collect(point({latitude: coord[1], longitude: coord[0]})) AS coords
163 | SET n.coordinates = coords
164 | SET n:Line
165 | ```
166 | 
167 | Radius distance search using line geometry and `any` Cypher list predicate function:
168 | 
169 | ```Cypher
170 | WITH point({latitude: $latitude, longitude: $longitude}) AS radiusCenter
171 | MATCH (g:Geometry) 
172 |     WHERE any(
173 |         p IN g.coordinates WHERE point.distance(p, radiusCenter) < $radius
174 |     )
175 | RETURN [n IN g.coordinates | [n.latitude, n.longitude]] AS route
176 | ```
177 | 
178 | ## Routing
179 | 
180 | ### Airport Routing
181 | 
182 | Using the [Graph Data Science Neo4j Sandbox](https://dev.neo4j.com/sandbox) dataset.
183 | 
184 | ![](img/airportrouting.png)
185 | 
186 | See [`src/airports.html`](src/airports.html)
187 | 
188 | Airport routing using `gds.shortestPath.Dijkstra`:
189 | 
190 | ```Cypher
191 | MATCH (source:Airport {iata: $from}), (target:Airport {iata: $to})
192 | CALL gds.shortestPath.dijkstra.stream('routes-weighted', {
193 |     sourceNode: source,
194 |     targetNode: target,
195 |     relationshipWeightProperty: 'distance'
196 | }) YIELD path
197 | RETURN [n IN nodes(path) | [n.location.latitude, n.location.longitude]] AS route
198 | ```
199 | 
200 | ### OpenStreetMap Road Network Routing
201 | 
202 | ![](img/osm_data_model.png)
203 | 
204 | See [OSMnx Neo4j Experiments repo](https://github.com/johnymontana/neo4j-osmnx-experiments) for dataset.
205 | 
206 | ```Cypher
207 | MATCH (source:Intersection {osmid: $from}), (target:Intersection {osmid: $to})
208 | CALL apoc.algo.dijkstra(source, target, 'ROAD_SEGMENT', 'length')
209 | YIELD path, weight
210 | RETURN [n in nodes(path) | [n.location.latitude, n.location.longitude]] AS route
211 | ```
212 | 
213 | ![](img/osm_routing.png)
214 | 
215 | See [`src/osm_routing.html`](src/osm_routing.html)
216 | 
217 | ![](img/data_model_addresses.png)
218 | 
219 | To enable searching for points of interest and addresses a full text index can be used:
220 | 
221 | ```Cypher
222 | CREATE FULLTEXT INDEX search_index IF NOT EXISTS FOR (p:PointOfInterest|Address) ON EACH [p.name, p.full_address] 
223 | ```
224 | 
225 | ```
226 | CALL db.index.fulltext.queryNodes("search_index", $searchString) 
227 | YIELD node, score
228 | RETURN coalesce(node.name, node.full_address) AS value, score, labels(node)[0] AS label, node.id AS id
229 | ORDER BY score DESC LIMIT 25
230 | ```
231 | 
232 | 
233 | ```Cypher
234 | MATCH (to {id: $dest})-[:NEAREST_INTERSECTION]->(source:Intersection) 
235 | MATCH (from {id: $source})-[:NEAREST_INTERSECTION]->(target:Intersection)
236 | CALL apoc.algo.dijkstra(source, target, 'ROAD_SEGMENT', 'length')
237 | YIELD path, weight
238 | RETURN [n in nodes(path) | [n.location.latitude, n.location.longitude]] AS route
239 | ```
240 | 
241 | ![](img/address_routing.png)
242 | 
243 | See `src/address_routing.png`.
244 | 
245 | ## Resources
246 | 
247 | * ["Making Sense Of Geospatial Data With Knowledge Graphs"](https://www.youtube.com/watch?v=-fs8ozxKklQ) Presented at NODES2022. November 2022. ([Slides](https://dev.neo4j.com/geo-nodes2022))


--------------------------------------------------------------------------------
/img/address_routing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/address_routing.png


--------------------------------------------------------------------------------
/img/airportrouting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/airportrouting.png


--------------------------------------------------------------------------------
/img/bloom2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/bloom2.png


--------------------------------------------------------------------------------
/img/bounding_box.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/bounding_box.png


--------------------------------------------------------------------------------
/img/data_model_addresses.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/data_model_addresses.png


--------------------------------------------------------------------------------
/img/daylight_notebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/daylight_notebook.png


--------------------------------------------------------------------------------
/img/linesearch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/linesearch.png


--------------------------------------------------------------------------------
/img/osm_data_model.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/osm_data_model.png


--------------------------------------------------------------------------------
/img/osm_routing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/osm_routing.png


--------------------------------------------------------------------------------
/img/point_in_polygon_search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/point_in_polygon_search.png


--------------------------------------------------------------------------------
/img/radius_search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/radius_search.png


--------------------------------------------------------------------------------
/img/spatialsearch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnymontana/geospatial-graph-demos/a2a0b745517357df1fa36b8752017dd9792143e4/img/spatialsearch.png


--------------------------------------------------------------------------------
/src/address_routing.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <base target="_top" />
  5 |     <meta charset="utf-8" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 | 
  8 |     <title>OpenStreetMap Routing With Neo4j</title>
  9 | 
 10 |     <!-- TODO: add favicon -->
 11 |     <link
 12 |       rel="shortcut icon"
 13 |       type="image/x-icon"
 14 |       href="docs/images/favicon.ico"
 15 |     />
 16 | 
 17 |     <!-- CSS for leaflet and leaflet-geoman plugin -->
 18 |     <link
 19 |       rel="stylesheet"
 20 |       href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
 21 |       integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
 22 |       crossorigin=""
 23 |     />
 24 |     <link
 25 |       rel="stylesheet"
 26 |       href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css"
 27 |     />
 28 | 
 29 |     <!-- Load JavaScript for leaflet, leaflet-geoman plugin, turf.js, and neo4j-driver -->
 30 |     <script
 31 |       src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
 32 |       integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
 33 |       crossorigin=""
 34 |     ></script>
 35 |     <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
 36 |     <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
 37 |     <script src="https://unpkg.com/neo4j-driver"></script>
 38 | 
 39 |     <!-- Fixed size map area -->
 40 |     <style>
 41 |       html,
 42 |       body {
 43 |         height: 100%;
 44 |         margin: 0;
 45 |       }
 46 |       /* .leaflet-container {
 47 |         width: 1000px;
 48 |         height: 1000px;
 49 |       } */
 50 | 
 51 |       * {
 52 |         box-sizing: border-box;
 53 |       }
 54 |       body {
 55 |         font: 16px Arial;
 56 |       }
 57 |       .autocomplete {
 58 |         /*the container must be positioned relative:*/
 59 |         position: relative;
 60 |         display: inline-block;
 61 |       }
 62 |       input {
 63 |         border: 1px solid transparent;
 64 |         background-color: #f1f1f1;
 65 |         padding: 10px;
 66 |         font-size: 16px;
 67 |       }
 68 |       input[type="text"] {
 69 |         background-color: #f1f1f1;
 70 |         width: 100%;
 71 |       }
 72 |       input[type="submit"] {
 73 |         background-color: DodgerBlue;
 74 |         color: #fff;
 75 |       }
 76 |       .autocomplete-items {
 77 |         position: absolute;
 78 |         border: 1px solid #d4d4d4;
 79 |         border-bottom: none;
 80 |         border-top: none;
 81 |         z-index: 999;
 82 |         /*position the autocomplete items to be the same width as the container:*/
 83 |         top: 100%;
 84 |         left: 0;
 85 |         right: 0;
 86 |       }
 87 |       .autocomplete-items div {
 88 |         padding: 10px;
 89 |         cursor: pointer;
 90 |         background-color: #fff;
 91 |         border-bottom: 1px solid #d4d4d4;
 92 |       }
 93 |       .autocomplete-items div:hover {
 94 |         /*when hovering an item:*/
 95 |         background-color: #e9e9e9;
 96 |       }
 97 |       .autocomplete-active {
 98 |         /*when navigating through the items using the arrow keys:*/
 99 |         background-color: DodgerBlue !important;
100 |         color: #ffffff;
101 |       }
102 |     </style>
103 |   </head>
104 |   <body>
105 |     <form autocomplete="off" action="/action_page.php">
106 |       <div class="autocomplete" style="width: 300px">
107 |         <input id="source" type="text" name="source" placeholder="From" />
108 | 
109 |         <input id="dest" type="text" name="dest" placeholder="To" />
110 |       </div>
111 |       <input id="routeButton" type="submit" value="Route" />
112 |     </form>
113 | 
114 |     <!-- Fixed size map area -->
115 |     <div id="map" style="width: 100%; height: 100%"></div>
116 |     <!-- TODO: move this into it's own JavaScript file -->
117 |     <!-- TODO: read credentials from env vars -->
118 | 
119 |     <script>
120 |       var driver = neo4j.driver(
121 |         "neo4j://localhost",
122 |         neo4j.auth.basic("neo4j", "letmeinnow")
123 |       );
124 | 
125 |       var route = [];
126 | 
127 |       // See https://www.w3schools.com/howto/howto_js_autocomplete.asp
128 |       function autocomplete(inp) {
129 |         /*the autocomplete function takes two arguments,
130 |   the text field element and an array of possible autocompleted values:*/
131 |         var currentFocus;
132 |         /*execute a function when someone writes in the text field:*/
133 |         inp.addEventListener("input", function (e) {
134 |           var a,
135 |             b,
136 |             i,
137 |             val = this.value;
138 |           /*close any already open lists of autocompleted values*/
139 |           closeAllLists();
140 |           if (!val) {
141 |             return false;
142 |           }
143 | 
144 |           if (val.length < 4) {
145 |             return false;
146 |           }
147 | 
148 |           currentFocus = -1;
149 |           /*create a DIV element that will contain the items (values):*/
150 |           a = document.createElement("DIV");
151 |           a.setAttribute("id", this.id + "autocomplete-list");
152 |           a.setAttribute("class", "autocomplete-items");
153 |           /*append the DIV element as a child of the autocomplete container:*/
154 |           this.parentNode.appendChild(a);
155 |           /*for each item in the array...*/
156 | 
157 |           // TODO: query for address (or POI) from database
158 |           // iterate over matching results
159 | 
160 |           var session = driver.session();
161 | 
162 |           session
163 |             .run(
164 |               `
165 |               CALL 
166 |                 db.index.fulltext.queryNodes("search_index", $searchString) 
167 |                 YIELD node, score
168 |               RETURN coalesce(node.name, node.full_address) AS value, score, labels(node)[0] AS label, node.id AS id
169 |               ORDER BY score DESC LIMIT 25
170 |           
171 |           `,
172 |               { searchString: inp.value }
173 |             )
174 |             .then((result) => {
175 |               console.log(result);
176 |               result.records.forEach((record) => {
177 |                 const address = record.get("value");
178 |                 const nodeId = record.get("id")
179 | 
180 |                 b = document.createElement("DIV");
181 |                 /*make the matching letters bold:*/
182 |                 b.innerHTML = address;
183 |                 //b.dataset.id = nodeId
184 |                 /*insert a input field that will hold the current array item's value:*/
185 |                 b.innerHTML += "<input data-id='" + nodeId + "' type='hidden' value='" + address + "'>";
186 |                 /*execute a function when someone clicks on the item value (DIV element):*/
187 |                 b.addEventListener("click", function (e) {
188 |                   /*insert the value for the autocomplete text field:*/
189 |                   inp.value = this.getElementsByTagName("input")[0].value;
190 |                   inp.dataset.id = this.getElementsByTagName("input")[0].dataset.id
191 |                   //inp.value = this.getElementsByTagName("input")[0].dataset.id;
192 |                   /*close the list of autocompleted values,
193 |               (or any other open lists of autocompleted values:*/
194 |                   closeAllLists();
195 |                 });
196 |                 a.appendChild(b);
197 |               });
198 |             });
199 |         });
200 |         /*execute a function presses a key on the keyboard:*/
201 |         inp.addEventListener("keydown", function (e) {
202 |           var x = document.getElementById(this.id + "autocomplete-list");
203 |           if (x) x = x.getElementsByTagName("div");
204 |           if (e.keyCode == 40) {
205 |             /*If the arrow DOWN key is pressed,
206 |         increase the currentFocus variable:*/
207 |             currentFocus++;
208 |             /*and and make the current item more visible:*/
209 |             addActive(x);
210 |           } else if (e.keyCode == 38) {
211 |             //up
212 |             /*If the arrow UP key is pressed,
213 |         decrease the currentFocus variable:*/
214 |             currentFocus--;
215 |             /*and and make the current item more visible:*/
216 |             addActive(x);
217 |           } else if (e.keyCode == 13) {
218 |             /*If the ENTER key is pressed, prevent the form from being submitted,*/
219 |             e.preventDefault();
220 |             if (currentFocus > -1) {
221 |               /*and simulate a click on the "active" item:*/
222 |               if (x) x[currentFocus].click();
223 |             }
224 |           }
225 |         });
226 |         function addActive(x) {
227 |           /*a function to classify an item as "active":*/
228 |           if (!x) return false;
229 |           /*start by removing the "active" class on all items:*/
230 |           removeActive(x);
231 |           if (currentFocus >= x.length) currentFocus = 0;
232 |           if (currentFocus < 0) currentFocus = x.length - 1;
233 |           /*add class "autocomplete-active":*/
234 |           x[currentFocus].classList.add("autocomplete-active");
235 |         }
236 |         function removeActive(x) {
237 |           /*a function to remove the "active" class from all autocomplete items:*/
238 |           for (var i = 0; i < x.length; i++) {
239 |             x[i].classList.remove("autocomplete-active");
240 |           }
241 |         }
242 |         function closeAllLists(elmnt) {
243 |           /*close all autocomplete lists in the document,
244 |     except the one passed as an argument:*/
245 |           var x = document.getElementsByClassName("autocomplete-items");
246 |           for (var i = 0; i < x.length; i++) {
247 |             if (elmnt != x[i] && elmnt != inp) {
248 |               x[i].parentNode.removeChild(x[i]);
249 |             }
250 |           }
251 |         }
252 |         /*execute a function when someone clicks in the document:*/
253 |         document.addEventListener("click", function (e) {
254 |           closeAllLists(e.target);
255 |         });
256 |       }
257 |       autocomplete(document.getElementById("source"));
258 |       autocomplete(document.getElementById("dest"));
259 | 
260 |       document.getElementById("routeButton").addEventListener("click", (e) => {
261 |         e.preventDefault();
262 |         getRoute({
263 |           //source: document.getElementById("source").value,
264 |           source: document.getElementById("source").dataset.id,
265 |           dest: document.getElementById("dest").dataset.id
266 |           //dest: document.getElementById("dest").value,
267 |         });
268 |       });
269 |     </script>
270 | 
271 |     <script>
272 |       const map = L.map("map", { zoomControl: false }).setView(
273 |         [37.563434, -122.322255],
274 |         13
275 |       );
276 | 
277 |       L.control
278 |         .zoom({
279 |           position: "bottomright",
280 |         })
281 |         .addTo(map);
282 | 
283 |       const tiles = L.tileLayer(
284 |         "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
285 |         {
286 |           maxZoom: 19,
287 |           attribution:
288 |             '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
289 |         }
290 |       ).addTo(map);
291 | 
292 |       const popup = L.popup();
293 |       var route = [];
294 | 
295 |       const getRoute = ({ source, dest }) => {
296 |         var session = driver.session({
297 |           database: "neo4j",
298 |           defaultAccessMode: neo4j.session.READ,
299 |         });
300 | 
301 |         const routeQuery = `
302 |                   MATCH (to {id: $dest})-[:NEAREST_INTERSECTION]->(source:Intersection) 
303 |                   MATCH (from {id: $source})-[:NEAREST_INTERSECTION]->(target:Intersection)
304 |                   CALL apoc.algo.dijkstra(source, target, 'ROAD_SEGMENT', 'length')
305 |                   YIELD path, weight
306 |                   RETURN [n in nodes(path) | [n.location.latitude, n.location.longitude]] AS route
307 |                       `;
308 | 
309 |         var session = driver.session({
310 |           database: "neo4j",
311 |           defaultAccessMode: neo4j.session.READ,
312 |         });
313 | 
314 |         session
315 |           .run(routeQuery, { source, dest })
316 |           .then((routeResult) => {
317 |             routeResult.records.forEach((routeRecord) => {
318 |               const routeCoords = routeRecord.get("route");
319 |               var polyline = L.polyline(routeCoords)
320 |                 .setStyle({ color: "red", weight: 7 })
321 |                 .addTo(map);
322 | 
323 |                 console.log(routeCoords[0])
324 |                 console.log(routeCoords[routeCoords.length-1])
325 | 
326 |                 var corner1 = L.latLng(routeCoords[0][0], routeCoords[0][1]),
327 |                 corner2 = L.latLng(routeCoords[routeCoords.length-1][0], routeCoords[routeCoords.length-1][1])
328 |                 
329 |                 L.marker(corner1).addTo(map);
330 |                 L.marker(corner2).addTo(map);
331 |                 
332 |                 bounds = L.latLngBounds(corner1, corner2);
333 | 
334 | 
335 |               map.panInsideBounds(bounds)
336 |             });
337 |           })
338 |           .catch((error) => {
339 |             console.log(error);
340 |           })
341 |           .then(() => {
342 |             route = [];
343 |             session.close();
344 |           });
345 |       };
346 |     </script>
347 |   </body>
348 | </html>
349 | 


--------------------------------------------------------------------------------
/src/airports.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <base target="_top" />
  5 |     <meta charset="utf-8" />
  6 |     <meta
  7 |       name="viewport"
  8 |       content="width=device-width, initial-scale=1"
  9 |     />
 10 | 
 11 |     <title>Airport Routing With Neo4j</title>
 12 | 
 13 |     <!-- TODO: add favicon -->
 14 |     <link
 15 |       rel="shortcut icon"
 16 |       type="image/x-icon"
 17 |       href="docs/images/favicon.ico"
 18 |     />
 19 | 
 20 |     <!-- CSS for leaflet and leaflet-geoman plugin -->
 21 |     <link
 22 |       rel="stylesheet"
 23 |       href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
 24 |       integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
 25 |       crossorigin=""
 26 |     />
 27 |     <link
 28 |       rel="stylesheet"
 29 |       href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css"
 30 |     />
 31 | 
 32 |     <!-- Load JavaScript for leaflet, leaflet-geoman plugin, turf.js, and neo4j-driver -->
 33 |     <script
 34 |       src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
 35 |       integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
 36 |       crossorigin=""
 37 |     ></script>
 38 |     <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
 39 |     <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
 40 |     <script src="https://unpkg.com/neo4j-driver"></script>
 41 | 
 42 |     <!-- Fixed size map area -->
 43 |     <style>
 44 |       html,
 45 |       body {
 46 |         height: 100%;
 47 |         margin: 0;
 48 |       }
 49 |       /* .leaflet-container {
 50 |         width: 1000px;
 51 |         height: 1000px;
 52 |       } */
 53 |     </style>
 54 |   </head>
 55 |   <body>
 56 |     <!-- Fixed size map area -->
 57 |     <div id="map" style="width: 100%; height: 100%"></div>
 58 |     <!-- TODO: move this into it's own JavaScript file -->
 59 |     <script>
 60 |       var driver = neo4j.driver(
 61 |         "neo4j://localhost",
 62 |         neo4j.auth.basic("neo4j", "letmein")
 63 |       );
 64 | 
 65 |       const map = L.map("map").setView([37.563434, -122.322255], 3);
 66 | 
 67 |       const tiles = L.tileLayer(
 68 |         "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
 69 |         {
 70 |           maxZoom: 19,
 71 |           attribution:
 72 |             '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 73 |         }
 74 |       ).addTo(map);
 75 | 
 76 |       const popup = L.popup();
 77 |       var route = [];
 78 | 
 79 |       const fetchAirportsQuery = `
 80 |       MATCH (a:Airport) WHERE a.runways > 2 OR a.iata = "SCL" OR a.iata = "PPT"
 81 |       RETURN a { 
 82 |         iata: a.iata, 
 83 |         latitude: a.location.latitude, 
 84 |         longitude: a.location.longitude
 85 |       } AS airport
 86 |       `;
 87 | 
 88 |       var session = driver.session({
 89 |         database: "airports",
 90 |         defaultAccessMode: neo4j.session.READ,
 91 |       });
 92 | 
 93 |       session
 94 |         .run(fetchAirportsQuery)
 95 |         .then((result) => {
 96 |           result.records.forEach((record) => {
 97 |             const airport = record.get("airport");
 98 | 
 99 |             L.marker([airport.latitude, airport.longitude])
100 |               .addTo(map)
101 |               .bindPopup(airport.iata)
102 |               .on("click", (e) => {
103 |                 console.log(airport.iata);
104 |                 route.push(airport.iata);
105 |                 if (route.length === 2) {
106 |                   const routeQuery = `
107 |                   MATCH (source:Airport {iata: $from}), (target:Airport {iata: $to})
108 |                   CALL gds.shortestPath.dijkstra.stream('routes-weighted', {
109 |                       sourceNode: source,
110 |                       targetNode: target,
111 |                       relationshipWeightProperty: 'distance'
112 |                   })
113 |                   YIELD path
114 |                   RETURN [n IN nodes(path) | [n.location.latitude, n.location.longitude]] AS route
115 |                       `;
116 | 
117 |                   var session = driver.session({
118 |                     database: "airports",
119 |                     defaultAccessMode: neo4j.session.READ,
120 |                   });
121 |                   session
122 |                     .run(routeQuery, { from: route[0], to: route[1] })
123 |                     .then((routeResult) => {
124 |                       routeResult.records.forEach((routeRecord) => {
125 |                         const routeCoords = routeRecord.get("route");
126 |                         var polyline =
127 |                           L.polyline(routeCoords).addTo(map);
128 |                       });
129 |                     })
130 |                     .catch((error) => {
131 |                       console.log(error);
132 |                     })
133 |                     .then(() => {
134 |                       route = [];
135 |                       session.close();
136 |                     });
137 |                 }
138 |               });
139 |           });
140 |         })
141 |         .catch((error) => {
142 |           console.log(error);
143 |         })
144 |         .then(() => session.close());
145 |     </script>
146 |   </body>
147 | </html>
148 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <base target="_top" />
  5 |     <meta charset="utf-8" />
  6 |     <meta
  7 |       name="viewport"
  8 |       content="width=device-width, initial-scale=1"
  9 |     />
 10 | 
 11 |     <title>Spatial Search With Neo4j</title>
 12 | 
 13 |     <!-- TODO: add favicon -->
 14 |     <link
 15 |       rel="shortcut icon"
 16 |       type="image/x-icon"
 17 |       href="docs/images/favicon.ico"
 18 |     />
 19 | 
 20 |     <!-- CSS for leaflet and leaflet-geoman plugin -->
 21 |     <link
 22 |       rel="stylesheet"
 23 |       href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
 24 |       integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
 25 |       crossorigin=""
 26 |     />
 27 |     <link
 28 |       rel="stylesheet"
 29 |       href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css"
 30 |     />
 31 | 
 32 |     <!-- Load JavaScript for leaflet, leaflet-geoman plugin, turf.js, and neo4j-driver -->
 33 |     <script
 34 |       src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
 35 |       integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
 36 |       crossorigin=""
 37 |     ></script>
 38 |     <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
 39 |     <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
 40 |     <script src="https://unpkg.com/neo4j-driver"></script>
 41 | 
 42 |     <!-- Fixed size map area -->
 43 |     <style>
 44 |       html,
 45 |       body {
 46 |         height: 100%;
 47 |         margin: 0;
 48 |       }
 49 |       /* .leaflet-container {
 50 |         width: 1000px;
 51 |         height: 1000px;
 52 |       } */
 53 |     </style>
 54 |   </head>
 55 |   <body>
 56 |     <!-- Fixed size map area -->
 57 |     <div id="map" style="width: 100%; height: 100%"></div>
 58 |     <!-- TODO: move this into it's own JavaScript file -->
 59 |     <script>
 60 |       var driver = neo4j.driver(
 61 |         "neo4j://localhost",
 62 |         neo4j.auth.basic("neo4j", "letmein")
 63 |       );
 64 | 
 65 |       const map = L.map("map").setView([37.563434, -122.322255], 13);
 66 | 
 67 |       const tiles = L.tileLayer(
 68 |         "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
 69 |         {
 70 |           maxZoom: 19,
 71 |           attribution:
 72 |             '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 73 |         }
 74 |       ).addTo(map);
 75 | 
 76 |       const popup = L.popup();
 77 | 
 78 |       // add Leaflet-Geoman controls with some options to the map
 79 |       map.pm.addControls({
 80 |         position: "topleft",
 81 |         drawCircleMarker: false,
 82 |         drawPolyline: false,
 83 |         drawText: false,
 84 |         editMode: false,
 85 |         cutPolygon: false,
 86 |         rotateMode: false,
 87 |       });
 88 | 
 89 |       // EVENT LISTENERS
 90 | 
 91 |       map.on("pm:create", ({ shape, layer }) => {
 92 |         if (shape === "Circle") {
 93 |           var radius = layer.getRadius(),
 94 |             circleCenterPoint = layer.toGeoJSON();
 95 | 
 96 |           const cypher = `
 97 |           WITH point({latitude: $latitude, longitude:$longitude}) AS radiusCenter
 98 |           MATCH (p:Point)-[:HAS_GEOMETRY]-(poi:PointOfInterest)-[:HAS_TAGS]->(t:Tags) 
 99 |           WHERE point.distance(p.location, radiusCenter) < $radius
100 |           RETURN p { latitude: p.location.latitude, 
101 |                     longitude: p.location.longitude, 
102 |                     name: poi.name, 
103 |                     categories: labels(poi),
104 |                     tags: t{.*}} 
105 |           AS point
106 |           `;
107 | 
108 |           var session = driver.session({
109 |             database: "osmpois",
110 |             defaultAccessMode: neo4j.session.READ,
111 |           });
112 | 
113 |           session
114 |             .run(cypher, {
115 |               radius: radius,
116 |               latitude: circleCenterPoint.geometry.coordinates[1],
117 |               longitude: circleCenterPoint.geometry.coordinates[0],
118 |             })
119 |             .then((result) => {
120 |               result.records.forEach((record) => {
121 |                 const poi = record.get("point");
122 | 
123 |                 L.marker([poi.latitude, poi.longitude])
124 |                   .addTo(map)
125 |                   .bindPopup(poi.name);
126 |               });
127 |             })
128 |             .catch((error) => {
129 |               console.log(error);
130 |             })
131 |             .then(() => session.close());
132 |         } else if (shape === "Rectangle") {
133 |           const bbox = layer.toGeoJSON();
134 |           var turfbbox = turf.polygon(bbox);
135 |           console.log("lowerLeftLat: ", bbox.geometry.coordinates[0][0][1])
136 |           console.log("lowerLeftLon", bbox.geometry.coordinates[0][0][0])
137 |           console.log("upper right lat", bbox.geometry.coordinates[0][2][1])
138 |           console.log("upper right lon", bbox.geometry.coordinates[0][2][0])
139 | 
140 |           const cypher = `
141 |           MATCH (p:Point)-[:HAS_GEOMETRY]-(poi:PointOfInterest)-[:HAS_TAGS]->(t:Tags) 
142 |           WHERE point.withinBBox(
143 |             p.location, 
144 |             point({longitude: $lowerLeftLon, latitude: $lowerLeftLat }), 
145 |             point({longitude: $upperRightLon, latitude: $upperRightLat}))
146 |           RETURN p { latitude: p.location.latitude, 
147 |                     longitude: p.location.longitude, 
148 |                     name: poi.name, 
149 |                     categories: labels(poi),
150 |                     tags: t{.*}} 
151 |           AS point
152 |           `;
153 | 
154 |           var session = driver.session({
155 |             database: "osmpois",
156 |             defaultAccessMode: neo4j.session.READ,
157 |           });
158 | 
159 |           session
160 |             .run(cypher, {
161 |               lowerLeftLat: bbox.geometry.coordinates[0][0][1],
162 |               lowerLeftLon: bbox.geometry.coordinates[0][0][0],
163 |               upperRightLat: bbox.geometry.coordinates[0][2][1],
164 |               upperRightLon: bbox.geometry.coordinates[0][2][0],
165 |             })
166 |             .then((result) => {
167 |               result.records.forEach((record) => {
168 |                 const poi = record.get("point");
169 | 
170 |                 L.marker([poi.latitude, poi.longitude])
171 |                   .addTo(map)
172 |                   .bindPopup(poi.name);
173 |               });
174 |             })
175 |             .catch((error) => {
176 |               console.log(error);
177 |             })
178 |             .then(() => session.close());
179 |         } else if (shape === "Polygon") {
180 |           const polygon = layer.toGeoJSON();
181 |           var bbox = turf.bbox(polygon);
182 | 
183 |           const cypher = `
184 |           MATCH (p:Point)-[:HAS_GEOMETRY]-(poi:PointOfInterest)-[:HAS_TAGS]->(t:Tags) 
185 |           WHERE point.withinBBox(
186 |             p.location, 
187 |             point({longitude: $lowerLeftLon, latitude: $lowerLeftLat }), 
188 |             point({longitude: $upperRightLon, latitude: $upperRightLat}))
189 |           RETURN p { latitude: p.location.latitude, 
190 |                     longitude: p.location.longitude, 
191 |                     name: poi.name, 
192 |                     categories: labels(poi),
193 |                     tags: t{.*}} 
194 |           AS point
195 |           `;
196 | 
197 |           var session = driver.session({
198 |             database: "osmpois",
199 |             defaultAccessMode: neo4j.session.READ,
200 |           });
201 | 
202 |           session
203 |             .run(cypher, {
204 |               lowerLeftLat: bbox[1],
205 |               lowerLeftLon: bbox[0],
206 |               upperRightLat: bbox[3],
207 |               upperRightLon: bbox[2],
208 |             })
209 |             .then((result) => {
210 |               const bboxpois = [];
211 |               result.records.forEach((record) => {
212 |                 const poi = record.get("point");
213 |                 var point = [poi.longitude, poi.latitude];
214 |                 bboxpois.push(point);
215 |               });
216 |               
217 |               const poisWithin = turf.pointsWithinPolygon(
218 |                 turf.points(bboxpois),
219 |                 polygon
220 |               );
221 | 
222 |               poisWithin.features.forEach((e) => {
223 |                 L.marker([
224 |                   e.geometry.coordinates[1],
225 |                   e.geometry.coordinates[0],
226 |                 ])
227 |                   .addTo(map)
228 |                   .bindPopup("Polygon");
229 |               });
230 |             })
231 |             .catch((error) => {
232 |               console.log(error);
233 |             })
234 |             .then(() => session.close());
235 |         }
236 |       });
237 |     </script>
238 |   </body>
239 | </html>
240 | 


--------------------------------------------------------------------------------
/src/osm_routing.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <base target="_top" />
  5 |     <meta charset="utf-8" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7 | 
  8 |     <title>OpenStreetMap Routing With Neo4j</title>
  9 | 
 10 |     <!-- TODO: add favicon -->
 11 |     <link
 12 |       rel="shortcut icon"
 13 |       type="image/x-icon"
 14 |       href="docs/images/favicon.ico"
 15 |     />
 16 | 
 17 |     <!-- CSS for leaflet and leaflet-geoman plugin -->
 18 |     <link
 19 |       rel="stylesheet"
 20 |       href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
 21 |       integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
 22 |       crossorigin=""
 23 |     />
 24 |     <link
 25 |       rel="stylesheet"
 26 |       href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css"
 27 |     />
 28 | 
 29 |     <!-- Load JavaScript for leaflet, leaflet-geoman plugin, turf.js, and neo4j-driver -->
 30 |     <script
 31 |       src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
 32 |       integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
 33 |       crossorigin=""
 34 |     ></script>
 35 |     <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
 36 |     <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
 37 |     <script src="https://unpkg.com/neo4j-driver"></script>
 38 | 
 39 |     <!-- Fixed size map area -->
 40 |     <style>
 41 |       html,
 42 |       body {
 43 |         height: 100%;
 44 |         margin: 0;
 45 |       }
 46 |       /* .leaflet-container {
 47 |         width: 1000px;
 48 |         height: 1000px;
 49 |       } */
 50 |     </style>
 51 |   </head>
 52 |   <body>
 53 |     <!-- Fixed size map area -->
 54 |     <div id="map" style="width: 100%; height: 100%"></div>
 55 |     <!-- TODO: move this into it's own JavaScript file -->
 56 |     <!-- TODO: read credentials from env vars -->
 57 |     <script>
 58 |       var driver = neo4j.driver(
 59 |         "neo4j://localhost",
 60 |         neo4j.auth.basic("neo4j", "letmeinnow")
 61 |       );
 62 | 
 63 |       const map = L.map("map").setView([37.563434, -122.322255], 13);
 64 | 
 65 |       const tiles = L.tileLayer(
 66 |         "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
 67 |         {
 68 |           maxZoom: 19,
 69 |           attribution:
 70 |             '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 71 |         }
 72 |       ).addTo(map);
 73 | 
 74 |       const popup = L.popup();
 75 |       var route = [];
 76 | 
 77 |       const fetchIntersectionsQuery = `
 78 |       MATCH (p:PointOfInterest) WITH p LIMIT 1000
 79 |       RETURN p { 
 80 |         name: p.name, 
 81 |         latitude: p.location.latitude, 
 82 |         longitude: p.location.longitude,
 83 |         osmid: id(p)
 84 |       } AS poi
 85 |       `;
 86 | 
 87 |       var session = driver.session({
 88 |         database: "neo4j",
 89 |         defaultAccessMode: neo4j.session.READ,
 90 |       });
 91 | 
 92 |       session
 93 |         .run(fetchIntersectionsQuery)
 94 |         .then((result) => {
 95 |           result.records.forEach((record) => {
 96 |             const poi = record.get("poi");
 97 | 
 98 |             L.marker([poi.latitude, poi.longitude])
 99 |               .addTo(map)
100 |               .bindPopup(poi.name)
101 |               .on("click", (e) => {
102 |                 console.log(poi.osmid);
103 |                 route.push(poi.osmid);
104 |                 if (route.length === 2) {
105 |                   const routeQuery = `
106 |                   MATCH (to:PointOfInterest)-[:NEAREST_INTERSECTION]->(source:Intersection) 
107 |                   WHERE id(to) = toInteger($to)
108 |                   MATCH (from:PointOfInterest)-[:NEAREST_INTERSECTION]->(target:Intersection)
109 |                   WHERE id(from) = toInteger($from)
110 |                   CALL apoc.algo.dijkstra(source, target, 'ROAD_SEGMENT', 'length')
111 |                   YIELD path, weight
112 |                   RETURN [n in nodes(path) | [n.location.latitude, n.location.longitude]] AS route
113 |                       `;
114 | 
115 |                   var session = driver.session({
116 |                     database: "neo4j",
117 |                     defaultAccessMode: neo4j.session.READ,
118 |                   });
119 |                   session
120 |                     .run(routeQuery, { from: route[0], to: route[1] })
121 |                     .then((routeResult) => {
122 |                       routeResult.records.forEach((routeRecord) => {
123 |                         const routeCoords = routeRecord.get("route");
124 |                         var polyline = L.polyline(routeCoords)
125 |                           .setStyle({ color: "red", weight: 7 })
126 |                           .addTo(map);
127 |                       });
128 |                     })
129 |                     .catch((error) => {
130 |                       console.log(error);
131 |                     })
132 |                     .then(() => {
133 |                       route = [];
134 |                       session.close();
135 |                     });
136 |                 }
137 |               });
138 |           });
139 |         })
140 |         .catch((error) => {
141 |           console.log(error);
142 |         })
143 |         .then(() => session.close());
144 |     </script>
145 |   </body>
146 | </html>
147 | 


--------------------------------------------------------------------------------
/src/strava.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <base target="_top" />
  5 |     <meta charset="utf-8" />
  6 |     <meta
  7 |       name="viewport"
  8 |       content="width=device-width, initial-scale=1"
  9 |     />
 10 | 
 11 |     <title>Line Search With Neo4j</title>
 12 | 
 13 |     <!-- TODO: add favicon -->
 14 |     <link
 15 |       rel="shortcut icon"
 16 |       type="image/x-icon"
 17 |       href="docs/images/favicon.ico"
 18 |     />
 19 | 
 20 |     <!-- CSS for leaflet and leaflet-geoman plugin -->
 21 |     <link
 22 |       rel="stylesheet"
 23 |       href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
 24 |       integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
 25 |       crossorigin=""
 26 |     />
 27 |     <link
 28 |       rel="stylesheet"
 29 |       href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css"
 30 |     />
 31 | 
 32 |     <!-- Load JavaScript for leaflet, leaflet-geoman plugin, turf.js, and neo4j-driver -->
 33 |     <script
 34 |       src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
 35 |       integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
 36 |       crossorigin=""
 37 |     ></script>
 38 |     <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
 39 |     <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
 40 |     <script src="https://unpkg.com/neo4j-driver"></script>
 41 | 
 42 |     <!-- Fixed size map area -->
 43 |     <style>
 44 |       html,
 45 |       body {
 46 |         height: 100%;
 47 |         margin: 0;
 48 |       }
 49 |       /* .leaflet-container {
 50 |         width: 1000px;
 51 |         height: 1000px;
 52 |       } */
 53 |     </style>
 54 |   </head>
 55 |   <body>
 56 |     <!-- Fixed size map area -->
 57 |     <div id="map" style="width: 100%; height: 100%"></div>
 58 |     <!-- TODO: move this into it's own JavaScript file -->
 59 |     <script>
 60 |       var driver = neo4j.driver(
 61 |         "neo4j://localhost",
 62 |         neo4j.auth.basic("neo4j", "letmein")
 63 |       );
 64 | 
 65 |       const map = L.map("map").setView([37.563434, -122.322255], 13);
 66 | 
 67 |       const tiles = L.tileLayer(
 68 |         "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
 69 |         {
 70 |           maxZoom: 19,
 71 |           attribution:
 72 |             '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 73 |         }
 74 |       ).addTo(map);
 75 | 
 76 |       const popup = L.popup();
 77 | 
 78 |       // add Leaflet-Geoman controls with some options to the map
 79 |       map.pm.addControls({
 80 |         position: "topleft",
 81 |         drawCircleMarker: false,
 82 |         drawPolyline: false,
 83 |         drawText: false,
 84 |         editMode: false,
 85 |         cutPolygon: false,
 86 |         rotateMode: false,
 87 |         drawPolygon: false,
 88 |         drawMarker: false,
 89 |         drawRectangle: false
 90 |       });
 91 | 
 92 |       // EVENT LISTENERS
 93 | 
 94 |       map.on("pm:create", ({ shape, layer }) => {
 95 |         if (shape === "Circle") {
 96 |           var radius = layer.getRadius(),
 97 |             circleCenterPoint = layer.toGeoJSON();
 98 | 
 99 |           const cypher = `
100 |           WITH point({latitude: $latitude, longitude: $longitude}) AS radiusCenter
101 |           MATCH (g:Geometry) 
102 |           WHERE any(
103 |             p IN g.coordinates WHERE point.distance(p, radiusCenter) < $radius
104 |           )
105 |           RETURN [n IN g.coordinates | [n.latitude, n.longitude]] AS route
106 |           `;
107 | 
108 |           var session = driver.session({
109 |             database: "stravagraph",
110 |             defaultAccessMode: neo4j.session.READ,
111 |           });
112 | 
113 |           session
114 |             .run(cypher, {
115 |               radius: radius,
116 |               latitude: circleCenterPoint.geometry.coordinates[1],
117 |               longitude: circleCenterPoint.geometry.coordinates[0],
118 |             })
119 |             .then((result) => {
120 |               result.records.forEach((record) => {
121 |                 const routeCoords = record.get("route");
122 |                 var polyline = L.polyline(routeCoords)
123 |                   .setStyle({ color: "red" })
124 |                   .addTo(map);
125 |               });
126 |             })
127 |             .catch((error) => {
128 |               console.log(error);
129 |             })
130 |             .then(() => session.close());
131 |         }
132 |       });
133 |     </script>
134 |   </body>
135 | </html>
136 | 


--------------------------------------------------------------------------------