Skip to content

Instantly share code, notes, and snippets.

@vgrem

vgrem/MapExample.js

Created Oct 5, 2020
Embed
What would you like to do?
import React, { useEffect } from "react";
import { Map, GeoJSON, TileLayer } from "react-leaflet";
import leafletStream from "leaflet-geojson-stream";
function StreamGeoJsonLayer(props) {
const layerRef = React.useRef();
const { url } = props;
useEffect(() => {
const gj = layerRef.current.leafletElement;
leafletStream.ajax(url, gj).on("end", function () {
console.log("all done!");
});
}, []);
return <GeoJSON ref={layerRef} />;
}
function MapExample(props) {
return (
<Map center={props.center} zoom={props.zoom}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<StreamGeoJsonLayer url={"http://localhost:8000/data"} />
</Map>
);
}
export default MapExample;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment