keplergl / kepler.gl Goto Github PK
View Code? Open in Web Editor NEWKepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.
Home Page: http://kepler.gl
License: MIT License
Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.
Home Page: http://kepler.gl
License: MIT License
https://github.com/uber/kepler.gl/blob/master/src/components/common/time-range-slider.js#L68
onChange is cached in constructor and nothing handle the change of the onChange handler
this make this component not reusable and might cause issue since react reuse component whenever possible
that lines in constructor() should be moved to render()
Even if we could pin multiple tooltips at a time to draw attention to specific objects it would make a massive difference.
Annotation layer as a GIS jargon for labelling options where you stick/pin a name, or other string/Int value of table data to got a proper and easy identification. Different of legend and tooltip popup it define clearly (depend of the case) what the data represents. Just something that takes lat, Lon, Text, offset type values. Like geom_text in ggplot2
Shan:
My thinking is this can be an additional option for each layer as a ‘Add label’ toggle. point, line, arc and polygon should offer this option
Sorry for not having a more descriptive title, or a more specific description of the problem. I'll try to describe what I'm seeing as detailed as possible; and I'm attaching the test data below.
I have a CSV that is just not displaying on the map. It's a three-column file (title, WKT geometry, an "ItemType" string field). Some observations:
Since the clipped dataset works, I'm guessing there might be something in the data that kepler.gl doesn't like. But I can't figure out what it is. Below, I'm attaching:
Exporting the configuration only includes the currently selected map style and not all other map styles that have been added to the configuration. The expectation would be for the map styles to include all configured styles, and for the mapStyle to indicate which of the styles has been selected.
To reproduce the issue, open a default kepler.gl app. It should have the standard map styles added "Dark, Light, Muted Night, Muted Light". By default the Dark style is selected. Click on the "Save / Export" button and select "Export Config". Note that the map styles are empty in the config JSON.
"mapStyle": {
"styleType": "dark",
"topLayerGroups": {},
"visibleLayerGroups": {
"label": true,
"road": true,
"border": false,
"building": true,
"water": true,
"land": true
},
"mapStyles": {}
}
The expectation would be that all the map styles are in the config:
"mapStyle": {
"styleType": "dark",
"topLayerGroups": {},
"visibleLayerGroups": {
"label": true,
"road": true,
"border": false,
"building": true,
"water": true,
"land": true
},
"mapStyles": {
"dark": {
"id": "dark",
"label": "Dark",
"icon": "...",
"url": "..."
"layerGroups": [],
},
"light": { ... },
"mutednight": { ... },
"mutedlight": { ... },
}
}
Thus using this.getMapConfig() to preserve the map configuration when loading new data means having to regenerate the mapStyles. i.e.
// Created to show how to replace dataset with new data and keeping the same configuration
replaceData = () => {
// Use processCsvData helper to convert csv file into kepler.gl structure {fields, rows}
const data = Processors.processCsvData(nycTripsSubset);
// Create dataset structure
const dataset = {
data,
info: {
id: 'my_data'
// this is used to match the dataId defined in nyc-config.json. For more details see API documentation.
// It is paramount that this id mathces your configuration otherwise the configuration file will be ignored.
}
};
// read the current configuration
const config = this.getMapConfig();
// addDataToMap action to inject dataset into kepler.gl instance
this.props.dispatch(addDataToMap({datasets: dataset, config}));
means that the config won't have the complete set of mapstyles.
Consider adding a middleware for the redux store and push events from actions.
Events we're interested are tracked in this spreadsheet.
When running yarn install
as of ~4PM PST on 5/25/18, the package for https://registry.npmjs.org/Pomax/-/react-onclickoutside-6.7.1.tgz
fails to download from NPM with a 404 error. I've replicated this on a local machine and in Travis tests, and it looks to be specific to the NPM URL route.
cc/ @heshan0131
Adding a GeometryCollection GeoJson layer throw this error:
deck.gl deck.gl error during initialization of <GeoJsonLayer:'vyik0jh'> Error: GeoJsonLayer: GeometryCollection not supported.
Error: GeoJsonLayer: GeometryCollection not supported.
You can reproduce it with testCase.csv.zip
I've really enjoyed working with data in keplergl and have recommended it to others. One feedback question I've gotten back, and I've had difficulty with as well, is :
what is the best way to go about making a sharable version of the map?
It is very easy and intuitive to make things from client-side GUI, but they go away when you close the browser. There is export functionality, but not a lot of documentation on how to go about building a map with that exported data and configuration that you could share via github pages. There have been some great Medium posts on how users can load their own data into the application, perhaps something similar would be helpful if not here within a separate readme?
If someone wants to take this on, feel free to tag me for feedback / edits.
Provide data util functions, such as transform points into geojson, etc.
Kepler causes sites to need to run with --ignore-engines we should have it specify a valid engine
End up I need to massage the data in certain way that fits the layer paradigm. For example, I have to deserialize the points of each trip into a set of points with trip id to plot them by point layer.
Example: Join sequence of points (by timestamp/sequence id) into line
I would like to thanks the team first for this awesome projet :)
I have one week of data to display, and the frequency of data is per second.
I wanted to implement a TimeSlider widget to reduce the number of my data on screen, but it seems I can't reduce the slider's interval less than 24h...
Is there any hack to reduce the quantity of time in the time slider please (console hack, something like that...)?
Thanks!
Requires:
When running a local deployment of kepler.gl (also problem happened when doing a Vis Academy embed kepler.gl tutorial), the original Dark Base Map Style loads perfectly fine with my mapbox token, but when I try to switch the Base Map Style to 'Light' or 'Muted Light' the map doesn't render and I get loads of error.
The error doesn't appear when I try to load 'Muted Dark'.
Here is a screenshot of the map that loads when you select Light or Muted Light, it is not the correct basemap and if you zoom in much further even the simple country outline disappears and no labels or borders appear. I have also attached a screenshot of the console errors. I am able to load data no problem and am able to load custom styles no problem.
Currently, user has to wait for the component to be mounted first and then pass the data in componentDidMount
I am trying to upload 540 MB of data. Chrome won't support but it throws no error. Safari crashes and reloads the web page. Firefox too won't load the data.
Request:
I would love the ability to edit the individual colors or have a custom color array type for use in “color based on”.
Reasoning:
Frequently the colors on a map represent an actual data value as opposed to just needing to visually differentiate between the values. For an overly simple example if an analysis is supposed to show locations that are being green lighted for another process, I should have the ability to set a specific green color for those points. And likewise set red, orange, yellow for points depending on their data value.
are there plans to support geoserver out of the box as a data source?
I've loaded some centroids that have valid coordinates in both geojson and csv (just to see if there was a difference). Map renders, but if I want to classify the data based upon an integer column Kepler recognizes the data, but incorrectly casts the data as a Boolean. Anyone else having the same issue?
That would also open up the ability to reuse styles across projects or even on multiple datasets in the same project. You could possibly even allow for multiple datasets to be in a single layer with a single style (assuming their data structure is consistent)
Save map config via save map choose config only, and downlaod the config json, and store somewhere that can be accessed via url
Load kepler.gl/#/demo?mapConfig=http://xxxxx.xxxx.json. Load kepler.gl with a preset config (layers, filters, mapStyles etc).
3.1 The config might contain 1 dataset, in which case kepler.gl try to map layer, filter to it
3.2 The config contain 2 dataset...........
Rules to match config to data: dataset must contain field that layer column and layer color / size by are depends on. must contain fields that filters are depends on....
Currently
if you call receiveMapconfig
without data preloaded, kepler will try to match layers / filters based on dataId
, it is not finding those fieds, then it will saved the layer/filter to layersToBeMerged
filtersToBeMerged
. When you then call addDataToMap
without config. kepler will use the to be merged the ones.
For Example:
layersToBeMerged
in visState reducerstep to reproduce:
now 2 filters both mark themselves as enlarged internally. but only the first filter is used in the large panel.
if you click to show the second filter, it will hide the enlarged filter instead of switching to the second.
First of all, thanks for this amazing work!
When enabling height, the elevation scale
parameter is forced to be an integer apparently. But when visualizing small objects (like small individual houses, couple of meters wide), even the smallest value of 1 can be too high.
Can we allow floating point number here, pretty please?
Seems kepler points directly too "react-onclickoutside": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz"
& this package is not found in npm registry currently. Throwing build errors due to this package saying {"error":"Not found"}
when visiting the tarball link
One of the custom mapbox styles questions we got was to be able to set a custom background color when using a basemap.
We'll need a mapbox style url to reproduce this issue.
I define a pickup geofence, and several dropoff geofences.
And I can see the distribution of trips from this geofence into those dropoff geofences.
Vice versa - define a dropoff geofence and list of pickup geofences.
I would like to project satellite images as a layer under geojson map data. Does anyone have any ideas or suggestions on how I could do this?
I have json files with GPS bounding boxes and associated satellite imagery (low quality jpg's and high quality tif's) that cover the spaces that I want to view.
My initial idea was to extend the GridLayer class, but so far I've had little luck. Any suggestsions would be highly appreciated
I'm currently unable to build the demo-app project in the /examples directory. Following the included readme, I ran npm install
followed by npm start
, but I'm receiving the following output. Any ideas? I'm not particularly well-versed in React, so am I missing something obvious?
> @ start /Users/username/Projects/demos/kepler-demo/node_modules/kepler.gl/examples/demo-app
> webpack-dev-server --progress --hot --open
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
10% building modules 3/3 modules 0 activewebpack: wait until bundle finished: /
Hash: bfbb95190c60eccaeb52
Version: webpack 2.7.0
Time: 588ms
Asset Size Chunks Chunk Names
bundle.js 351 kB 0 [emitted] [big] app
bundle.js.map 413 kB 0 [emitted] app
chunk {0} bundle.js, bundle.js.map (app) 321 kB [entry] [rendered]
[2] (webpack)/hot/emitter.js 77 bytes {0} [built]
[3] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
[4] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
[5] ./src/main.js 369 bytes {0} [built] [failed] [1 error]
[7] ./~/ansi-regex/index.js 135 bytes {0} [built]
[8] ./~/events/events.js 8.33 kB {0} [built]
[9] ./~/html-entities/index.js 231 bytes {0} [built]
[12] ./~/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[18] ./~/strip-ansi/index.js 161 bytes {0} [built]
[19] ./~/url/url.js 23.3 kB {0} [built]
[21] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
[22] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
[24] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
[25] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
[26] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
+ 12 hidden modules
ERROR in ./src/main.js
Module parse failed: /Users/username/Projects/demos/kepler-demo/node_modules/kepler.gl/examples/demo-app/src/main.js Unexpected token (36:2)
You may need an appropriate loader to handle this file type.
|
| const Root = () => (
| <Provider store={store}>
| <Router history={history}>
| <Route path="/(:id)" component={App} />
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
webpack: Failed to compile.
mapbox is great but it would be hugely beneficial if users had the option to load in WMS/WMTS imagery tilelayers as basemaps that are hosted/sold by other companies
or if you can't allow entire tilelayers to be added, consider adding single raster images, especially when users want to use kepler in disconnected environments where they woudn't have access to mapbox baselayers they could load a single raster image that is stored locally instead and still get the same effect
It would be a game changer for exploratory analysis. Currently need to materialize filtered data in two separate layers to have a split-screen visualization.
I'm trying to upload a very small CSV (2MB), and I followed the guidelines by having columns named x_lat, x_lng, and some others, but when I click to load the file, the interface has a spinning wheel indefinitely and never goes to the mapping screen. By the way, the project looks very interesting.
Hello,
I'm trying to visualize GeoJSON LineStrings of aircraft flight paths and nothing happens. I'm prompted to pick Lat0/Lng0 and Lat1/Lng0, but that makes it seem like it only supports "lines" with a start/finish location rather than multi-vertex linestrings. Is that correct? Are traditional line strings not supported at this time?
Kepler.gl looks super cool and I'm excited to be able to use it. After adding my data, my fields only show up as integers and strings, even my DateTime field. I've tried going back into LibreCalc to set the format to date, time, and custom YYYY/MM/DD HH:MM:SS format, but it still just comes through as a string after upload the UTF-8 CSV file.
SyracuseSiteData_Qonly_UTF-8.zip
Logged travis-ci/travis-ci#9679 (comment)
Started seeing apt-get failures on Travis CI since about 10 hours ago. (E.g. #71)
https://github.com/uber/kepler.gl/blob/master/src/processors/data-processor.js#L271
This function should probably call getSampleForTypeAnalyze
before passing to getFieldsFromData
Hello, I want to see the upload file data structure, so according to the method provided by https://medium.com/vis-gl/visualizing-u-s-county-unemployment-with-kepler-gl-c5f2ed31c71 I generated a counties-unemployment.geojson file, the file is only about 1800K, but can not be uploaded to the kepler.gl, I do not know what to do Is it? If you need the file I generated, I can send it to you. Thank you.
Problem:
Currently, kepler.gl doesn’t do much with data aggregation or transformation. User has to massage the data in certain way that fits the layer paradigm. For example, I have to deserialize the points of each trip into a set of points with trip id to plot them by point layer.
Suggestions:
Ability to provide a specific hexcode for custom colors on map.
This would make it easier to create a similar layer and only adjusting some minor styling things.
There are at least three oddly drawn polygons (US counties) in the image below: one in Alaska and two in the contiguous 48 states. This was produced with the kepler.gl website.
The was geojson file was originally an sf object stored in a .RData file (R language) - subsequently converted to geojson.
I attempted to replicate this problem with the geojson file in D3 v4 (seen here), but it did not produce the same oddly drawn polygons.
I have the geojson file, kepler config file, and D3 attempt contained within this gist.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.