JenniferFuBook

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

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

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

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-122.419418, 37.774929]
      },
      "properties": {

JenniferFuBook

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

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';

JenniferFuBook

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';

function App() {
  const savedMap = useRef();
  const mapId = 'map';

JenniferFuBook

import { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

function App() {
  const savedMap = useRef();
  const mapId = 'map';

  useEffect(() => {
    if (savedMap.current) {

JenniferFuBook

import { useEffect } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

function App() {
  const mapId = 'map';

  useEffect(() => {
    const map = L.map(mapId, {
      center: [37.774929, -122.419418],

JenniferFuBook

import { useState } from 'react';
import { Button, ConfigProvider, Space, Select, Switch, theme } from 'antd';

const options = [
  { value: 'jack', label: 'Jack' },
  { value: 'lucy', label: 'Lucy' },
  { value: 'Yiminghe', label: 'yiminghe' },
  { value: 'disabled', label: 'Disabled', disabled: true },
];