Map Not Displaying Query Invalid....

[timtutt]

I'm currently running into a weird issue where the the reactivemaps component is not displaying anything at all despite me having API keys set and a field with geo_point types.

I'm using it as follows:

<ReactiveMap componentId="mapFilter" dataField="GeoPoint" title="Offense Location Map" autoCenter={true} />

When looking at network tools, the _msearch query appears to be the following..
{"query":{"bool":{"must":[{"match_all":{}},{"geo_bounding_box":{"GeoPoint":{"top_left":[null,null],"bottom_right":[null,null]}}}]}},"size":10,"from":0}

Any thoughts on why this might be occurring. I've tried adding other default parameters, but have had no luck.

[metagrover]

Can you try adding a style prop to the map component defining its width and height specifically?

style={{ width: '500px', height: '500px' }}

or anything as per your needs.

[timtutt]

Yep tried that. it modified the width and height, but no effect on that query that appears to be being sent.

It looks like the geo bounding box is not getting values... Though it's unclear how that bounding box is generated in the first place? Are there parameters I can set to enforce those values being set (top_left, and bottom_right). I've also tried adding a default center and default zoom, but no luck.

[siddharthlatest]

The bounding box is set by the library with the map's bounds, so that results in the visible area are returned over results that may not be in the area. I suspect that since ReactiveMap isn't get displayed, the bound values aren't getting initialized correctly.

Is it possible for you to share a codesandbox of the snippet where you are seeing this?

[timtutt]

Sure - the isolated snippet is here: https://codesandbox.io/s/4lq41onj50

Though I don't have a public ES cluster to point it to and don't want to publish my google api key publicly, but the data is in the following format where GeoPoint is a geo_point type field:

[
{
          "NEIGHBORHOOD_CLUSTER" : "Cluster 26",
          "CENSUS_TRACT" : "006500",
          "REPORT_DATE" : "2017-02-13T22:35:23.000Z",
          "LONGITUDE" : -76.9973260165343,
          "END_DATE" : null,
          "OBJECTID" : 156433634,
          "SHIFT" : "EVENING",
          "YBLOCK" : 135255,
          "DISTRICT" : 1,
          "GeoPoint" : "38.8851334424645 -76.9973260165343",
          "WARD" : 6,
          "X" : -76.99732829833262,
          "Y" : 38.885141227699975,
          "BID" : "CAPITOL HILL",
          "PSA" : 107,
          "BLOCK_GROUP" : "006500 1",
          "VOTING_PRECINCT" : "Precinct 89",
          "XBLOCK" : 400232,
          "BLOCK" : "600 - 669 BLOCK OF PENNSYLVANIA AVENUE SE",
          "START_DATE" : "2017-02-13T21:40:52.000Z",
          "CCN" : 17025341,
          "OFFENSE" : "THEFT/OTHER",
          "ANC" : "6B",
          "METHOD" : "OTHERS",
          "LATITUDE" : 38.8851334424645
        },
      {
          "NEIGHBORHOOD_CLUSTER" : "Cluster 25",
          "CENSUS_TRACT" : "010600",
          "REPORT_DATE" : "2017-02-14T15:09:10.000Z",
          "LONGITUDE" : -77.003585693025,
          "END_DATE" : "2017-02-13T22:56:05.000Z",
          "OBJECTID" : 156433635,
          "SHIFT" : "EVENING",
          "YBLOCK" : 137844,
          "DISTRICT" : 5,
          "GeoPoint" : "38.9084560713047 -77.003585693025",
          "WARD" : 6,
          "X" : -77.0035879781956,
          "Y" : 38.908463861011064,
          "BID" : "NOMA",
          "PSA" : 501,
          "BLOCK_GROUP" : "010600 2",
          "VOTING_PRECINCT" : "Precinct 83",
          "XBLOCK" : 399689,
          "BLOCK" : "150 - 199 BLOCK OF FLORIDA AVENUE NE",
          "START_DATE" : "2017-02-13T21:22:19.000Z",
          "CCN" : 17025363,
          "OFFENSE" : "THEFT/OTHER",
          "ANC" : "6C",
          "METHOD" : "OTHERS",
          "LATITUDE" : 38.9084560713047
      }
]

[timtutt]

Any hints as to how or when the bound values get initializeD?

[metagrover]

At any point, was your map rendering on the screen? (were you able to see the map?)

Have you imported the google maps script in the html?

ReactiveMaps uses Google Maps JS library to render the maps and access the necessary geo-location services. For including Google Maps, add the following <script> tag in the element of public/index.html.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.31&key=YOUR_MAPS_KEY_HERE"></script>

Note that you will need places library from google maps if you are using GeoDistance components. You can add it by appending &libraries=places in the above URL

Source: Getting started with Reactivemaps.

[timtutt]

To be clear I'm seeing the component load, but not the map. This is a screenshot of what I see.

Yes, I included the google maps script in the html with the appropriate key and all. Google is loading. This is the only error showing up in the console:

And the error in network tools indicates the same because of the query that's being sent. I'm just not sure how that bounding box is being created... I feel like there's a missing bit of data I need to pass to the component to initialize those values.

[metagrover]

The library adds geo-bounding box query from itself after the "map" gets loaded. This query only gets applied whenever there is a null or match_all query on the map component. It reads the co-ordinates of the loaded map (which is not being loaded as per your screenshot), determines the bounding-box coordinates and then applies a query to perform a better search query ~ resulting in same or more results in the current view of the map.

[metagrover]

I'd recommend you to put some sample data on appbase and then share a codesandox here replicating the issue - this would help me debug this for you.

[timtutt]

Figured out the issue, but not the resolution. I'm running my server using SSL, but when I turn ssl off, the map displays appropriately. Is there a way to enforce SSL for the maps component?

[timtutt]

Actually - that's not entirely accurate. When I disabled SSL no data was being returned. and the map showed up, but with no data because of a proxy i'm using. When I updated the proxy to not be ssl as well it went back to failing...

[metagrover]

Oh right, you should load the google maps script with https and that should work!

[timtutt]

Yeah that part I was doing in the index.html.... I'm testing to see if the issue is with my data. Trying to use the earthquake in my app instead to see if that works.

[timtutt]

Alright - finally got it figured out.

There are multiple ways to store geo_point fields as per elasticsearch documentation there are 4 ways the geo_points might be specified:
https://www.elastic.co/guide/en/elasticsearch/reference/current/geo-point.html

It appears my issue was that ReactiveMaps seems to look for the specific format of {lat: 12.122, lon: 47.0121}. If that's not found it fails. I was using the "LAT, LON" format.

Luckily I was able to quickly reindex this data since it was a relatively small dataset, but definitely an issue if you have larger datasets...

Should look into making the component work with all valid geo_point datatypes.

[metagrover]

We do parse the geo_points appropriately in the map component. But I may have skipped it somewhere. Thanks for reporting this. I will look into it 😅

[jeremiealbert]

Any new on this issue ? Elasticsearch allows geopoint to be set as string like "41.12,-71.34" and these strings are not parsed properly in in the code.

parseLocation(location) {
    if (Array.isArray(location)) {
        return {
	    lat: Number(location[0]),
	    lng: Number(location[1]),
	};
    } else if (typeof location === "string" && location.split(",").length === 2) { 
        // case to deal with / to add
        return {
	    lat: Number(location.split(",")[0]),
	    lng: Number(location.split(",")[1]),
	};
    }
    return {
        lat: location ? Number(location.lat) : this.props.defaultCenter.lat,
	lng: location
		? Number(location.lon === undefined ? location.lng : location.lon)
		: this.props.defaultCenter.lng,
    };
}