Skip to content

Instantly share code, notes, and snippets.

View JenniferFuBook's full-sized avatar

Jennifer Fu JenniferFuBook

24 followers · 0 following
View GitHub Profile
@JenniferFuBook
JenniferFuBook / react.leaflet.geoJSON.App.js
Last active March 5, 2023 01:09
import { useCallback, useEffect, useRef, useState } from 'react';
import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import markerIconPng from 'leaflet/dist/images/marker-icon.png';
import markShadowPng from 'leaflet/dist/images/marker-shadow.png';
function App() {
const [jsonContent, setJsonContent] = useState();
const [isMapReady, setIsMapReady] = useState(false);
@JenniferFuBook
JenniferFuBook / react.leaflet.example.geojson.code
Created March 1, 2023 05:15
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.0368739, 38.907192]
},
"properties": {
@JenniferFuBook
JenniferFuBook / react.leaflet.views.App.js
Created February 27, 2023 06:07
import { MapContainer, LayersControl, TileLayer, WMSTileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
function App() {
return (
<MapContainer center={[38.907192, -77.036873]} zoom={8}>
<LayersControl collapsed={false}>
<LayersControl.BaseLayer name="Street View" checked>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@JenniferFuBook
JenniferFuBook / react.leaflet.2markers.App.js
Last active March 4, 2023 21:10
import { useEffect, useRef, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import { Icon } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import markerIconPng from 'leaflet/dist/images/marker-icon.png';
import markShadowPng from 'leaflet/dist/images/marker-shadow.png';
import collegePng from './icons8-university-64.png';
function App() {
const [popupRef1Ready, setPopupRef1Ready] = useState(false);
@JenniferFuBook
JenniferFuBook / react.leaflet.marker.App.js
Last active March 4, 2023 05:53
import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import { Icon } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import markerIconPng from 'leaflet/dist/images/marker-icon.png';
import markShadowPng from 'leaflet/dist/images/marker-shadow.png';
function App() {
return (
<MapContainer center={[38.907192, -77.036873]} zoom={8}>
<TileLayer
@JenniferFuBook
JenniferFuBook / react.leaflet.App.js
Last active February 28, 2023 03:59
import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
function App() {
return (
<MapContainer center={[38.907192, -77.036873]} zoom={8}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://tile.openstreetmap.org/{z}/{x}/{y}{r}.png"
/>
@JenniferFuBook
JenniferFuBook / leaflet.geoJSON.App.js
Created February 25, 2023 21:19
import { useEffect, useRef, useState } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import markerIconPng from 'leaflet/dist/images/marker-icon.png';
import markShadowPng from 'leaflet/dist/images/marker-shadow.png';
function App() {
const [jsonContent, setJsonContent] = useState();
const savedMap = useRef();
const mapId = 'map';
@JenniferFuBook
JenniferFuBook / leaflet.example.geojson.code
Last active February 25, 2023 18:46
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.419418, 37.774929]
},
"properties": {
@JenniferFuBook
JenniferFuBook / leaflet.views.App.js
Last active February 24, 2023 04:13
import { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const baseMaps = {
'Street View': L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}),
Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
layers: 'TOPO-WMS',
@JenniferFuBook
JenniferFuBook / leaflet.2markers.App.js
Created February 22, 2023 05:56
import { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import markerIconPng from 'leaflet/dist/images/marker-icon.png';
import markShadowPng from 'leaflet/dist/images/marker-shadow.png';
import collegePng from './icons8-university-64.png';
function App() {
const savedMap = useRef();
const mapId = 'map';