Visualize Neo4j-Spatial database in a map

Question

I've been able to import some shapefiles to Neo4j 2.3.1. Now how do I view this data on a map?

I have tried the Wiki instructions on GeoServer and uDig, but both of them are outdated and I couldn't get it to work.

Is there any recent tutorial or other tool that can solve this problem?

score 0 · Accepted Answer · edited Feb 08 '17 at 15:09

I've used neo4j-spatial with Mapbox.js for visualizing geometries in a map.

For my use case I indexed US Congressional district geometries in neo4j-spatial then query the spatial index based on where a user clicks on the map, returning the closest district including the WKT string and the results of a Cypher query. To render the WKT polygon in the map I wrote a simple javascript function to parse that into an array of points to add a map annotation.

Here are some relevant code snippets:

Create the map and define a click handler for the map:

L.mapbox.accessToken = MB_API_TOKEN;
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([39.8282, -98.5795], 5);

map.on('click', function(e) {
  clearMap(map);
  getClosestDistrict(e);
});

Handle mouse click

/**
  *  Find the District for a given latlng.
  *  Find the representative, commitees and subjects for that rep.
  */
function infoDistrictWithinDistance(latlng, distance) {

  var districtParams = {
    "layer": "geom",
    "pointX": latlng.lng,
    "pointY": latlng.lat,
    "distanceInKm": distance
  };

 var districtURL = baseURI + findGeometriesPath;
 makePOSTRequest(districtURL, districtParams, function (error, data) {

   if (error) {
    console.log("Error");
   } else {
    console.log(data);

   var params = {
    "state": data[0]["data"]["state"],
    "district": data[0]["data"]["district"]
   };

   var points = parseWKTPolygon(data[0]["data"]["wkt"]);

   makeCypherRequest([{"statement": subjectsQuery, "parameters": params}], function (error, data) {

    if (error) {
      console.log("Error");
    } else {
      console.log(data);

      var districtInfo = data["results"][0]["data"][0]["row"][0];
      districtInfo["points"] = points;
      districtInfo["state"] = params["state"];
      districtInfo["district"] = params["district"];
      console.log(districtInfo);

      addDistrictToMap(districtInfo, latlng);
    }
   });
 }
});

Parse WKT into an array of points

/**
 *  Converts Polygon WKT string to an array of [x,y] points
 */
function parseWKTPolygon(wkt) {
  var pointArr = [];
  var points = wkt.slice(10, -3).split(",");

  $.each(points, function(i,v) {
    var point = $.trim(v).split(" ");
    var xy = [Number(point[1]), Number(point[0])];
    pointArr.push(xy)
  });

  return pointArr;
}

The code is in this repo. You can see the simple map demo here (just click anywhere in the US to get started). There is also a recent blog post about this example here.

Thank you! That's what I was looking for. I see you add data to Neo4j in a similar way I do. Does your import/add nodes to layer script works really slow or is it just me? — Evandro Roberto, Apr 02 '16 at 18:52

Visualize Neo4j-Spatial database in a map

1 Answers1