Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Include properties in FeatureCollection example #2425

Merged
merged 5 commits into from
Dec 13, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
inlude properties in example for TS
  • Loading branch information
Johngeorgesample committed Aug 16, 2024
commit 2940997a62fd0075ebb980ac22efc8b5e92a5368
17 changes: 12 additions & 5 deletions docs/get-started/adding-custom-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,14 @@ import type {FeatureCollection} from 'geojson';
const geojson: FeatureCollection = {
type: 'FeatureCollection',
features: [
{type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.4, 37.8]
},
properties: {title: '915 Front Street, San Francisco, California'}
}
]
};

Expand All @@ -33,7 +40,8 @@ function App() {
longitude: -122.45,
latitude: 37.78,
zoom: 14
}}>
}}
>
<Source id="my-data" type="geojson" data={geojson}>
<Layer {...layerStyle} />
</Source>
Expand All @@ -44,18 +52,17 @@ function App() {

For details about data sources and layer configuration, check out the [Mapbox style specification](https://www.mapbox.com/mapbox-gl-js/style-spec).

For dynamically updating data sources and layers, check out the [GeoJSON](http://visgl.github.io/react-map-gl/examples/geojson) and [GeoJSON animation](http://visgl.github.io/react-map-gl/examples/geojson-animation) examples.

[For](For) dynamically updating data sources and layers, check out the [GeoJSON](http://visgl.github.io/react-map-gl/examples/geojson) and [GeoJSON animation](http://visgl.github.io/react-map-gl/examples/geojson-animation) examples.

## Custom Overlays

You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling `map.project()` you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example [here](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-overlay).


## Other vis.gl Libraries

For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the [vis.gl](https://www.github.com/visgl) ecosystem, a suite of high-performance data visualization tools for the Web.

- [deck.gl](https://deck.gl) - WebGL-powered framework for the visualization of large datasets.
- [loaders.gl](https://loaders.gl) - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.
- [nebula.gl](https://nebula.gl) - 3D-enabled GeoJSON editing based on deck.gl and React.