Comments (16)
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 😅
from reactivemaps.
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.
from reactivemaps.
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.
from reactivemaps.
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?
from reactivemaps.
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
}
]
from reactivemaps.
Any hints as to how or when the bound values get initializeD?
from reactivemaps.
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.
from reactivemaps.
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.
from reactivemaps.
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.
from reactivemaps.
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.
from reactivemaps.
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?
from reactivemaps.
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...
from reactivemaps.
Oh right, you should load the google maps script with https
and that should work!
from reactivemaps.
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.
from reactivemaps.
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.
from reactivemaps.
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,
};
}
from reactivemaps.
Related Issues (20)
- Search as move doesn't work with defaultQuery HOT 2
- [Question] In ReactiveOpenStreetMap, where comes from the 100vh on height?
- New feature request: customMapStyle
- Geopoint boundry not fiding data
- Add onQueryChange prop for all sensors
- Update react-google-maps HOT 6
- appbaseRef is marked as required HOT 3
- Error thrown on ReactiveMap Basic example HOT 1
- interactive onboarding gets me stuck many times HOT 6
- Live Examples not working HOT 1
- All links on the website lead to the reactivesearch repo HOT 1
- Add a fetch call to update the github stars
- Browser Hangs Waiting For Data HOT 15
- How to SSR with nextjs like for reactiveSearch HOT 1
- Cannot render the ReactiveMap HOT 2
- Draw hexagon tiles over the map HOT 1
- ReactiveGoogleMap : onPopoverClick on the custom renderData ?
- Could not find "store" in the context of "Connect(ReactiveMap)" HOT 3
- renderMap() doesn't show Google Map HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactivemaps.