react-leaflet#MapContainer JavaScript Examples

function ParcelMap(props) {
  const classes = useStyles();
  const [zipCodeFeatures, setZipCodeFeatures] = useState([]);
  const [lat] = useState(41.3148);
  const [lon] = useState(-96.1951);
  const [zoom] = useState(11);

  useEffect(() => {
    setZipCodeFeatures(nebraskaZipCodes.features);
  }, []);

  const {parcels, source} = props;
  return (<>
        <Box className={classes.container}>
          <Box className={classes.breadcrumb} mb={2}>
            <Breadcrumbs aria-label="breadcrumb" separator="›">
              <Typography color="textPrimary"><Link href={`/landlord/${source}`}>{source}</Link></Typography>
              <Typography color="textPrimary">Property Map</Typography>
            </Breadcrumbs>
          </Box>
          <Box className={classes.map}>
            <MapContainer center={[lat, lon]} zoom={zoom}>
              <TileLayer
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                  attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
              />
              <LandlordsMap parcels={parcels} source={source} zipCodeFeatures={zipCodeFeatures}/>
            </MapContainer>
          </Box>
        </Box>
    </>);
}

function Map(props) {
  const { tweets } = props;

  console.log(tweets);

  return (
    <MapContainer center={[25, 0]} zoom={2.3} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {tweets.map((tweet) => (
        <Marker
          position={[
            tweet.geometry.coordinates[1],
            tweet.geometry.coordinates[0],
          ]}
        >
          <Popup className="popup-toast">
            <Toast>
              <Toast.Header closeButton={false}>
                <strong className="me-auto">{tweet.properties.username}</strong>
                <small>
                  {DateTime.fromISO(tweet.properties.created_at).toRelative()}
                </small>
              </Toast.Header>
              <Toast.Body>{tweet.properties.text}</Toast.Body>
            </Toast>
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  );
}

Map = () => {
    const bounds = {
        North: 0,
        East: 2048,
        West: 0,
        South: -2048
        //      North
        //
        //West          East
        //
        //      South
    }
    return (
        <MapContainer
            zoom={0}
            minZoom={0}
            maxZoom={3}
            crs={L.CRS.Simple}
            maxBounds={[[bounds.South-100,bounds.West-250],[bounds.North+250,bounds.East+250]]}
            center={[bounds.South/2,bounds.East/2]}
            zoomControl={false}
            attributionControl={false}
            keyboard={false}
            maxBoundsViscosity={0.5}
            doubleClickZoom={false}
        >
            <TileLayer
                url="./assets/images/tiles/{z}/{y}-{x}.png"
                bounds={[[bounds.South,bounds.West],[bounds.North,bounds.East]]}
                tileSize={1024}
                noWrap={true}
            />
            <Init/>
        </MapContainer>
    );
}

function Map() {
	return (
		<>
			<MapContainer
				center={position}
				zoom={15}
				scrollWheelZoom={false}
				placeholder={<MapPlaceholder />}
			>
				<MapTooltip />
				<MapLayers />
				<ReCenterButton />
				<SetViewOnClick />
			</MapContainer>
		</>
	);
}

RouteMap = ({stops, stopIdx, onMarkerClick}) => {
  const { stopList, geoPermission, setGeoPermission, setGeolocation } = useContext ( AppContext )
  const classes = useStyles()
  const [center, setCenter] = useState(stopList[stops[stopIdx]] ? stopList[stops[stopIdx]].location : {})
  const [map, setMap] = useState(null)

  useEffect ( () => {
    setCenter(stopList[stops[stopIdx]] ? stopList[stops[stopIdx]].location : 
      stopList[stops[Math.round(stops.length/2)]].location
    )
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [stopIdx])

  const updateCenter = (e) => {
    setCenter(map.getCenter())
  }

  useEffect ( () => {
    if ( !map ) return
    map.on('dragend', updateCenter)
    return () => {
      map.off('dragend', updateCenter)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [map])

  return (
    <Box className={`${classes.mapContainer}`}>
      <MapContainer 
        center={checkPosition(center)} 
        zoom={16} 
        scrollWheelZoom={false} 
        className={classes.mapContainer}
        whenCreated={setMap}
      >
        <ChangeMapCenter center={checkPosition(center)} zoom={16} />
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
          url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
        />
        {
          // plot stops
          stops.map((stopId, idx, self) => 
              <Marker 
                key={`${stopId}-${idx}`} 
                position={stopList[stopId].location} 
                icon={<BusStopMarker active={idx === stopIdx} passed={idx < stopIdx} />}
                eventHandlers={{
                  click: (e) => {onMarkerClick(idx)(e, true, true)}
                }}
                
              />
          )
        }
        {
          // plot line
          stops.slice(1).map((stopId, idx) => 
            <Polyline 
              key={`${stopId}-line`}
              positions={[
                getPoint(stopList[stops[idx]].location),
                getPoint(stopList[stopId].location)
              ]}
              color={'#FF9090'}
            />
          )
        }
        <SelfCircle />
        <CenterControl 
          onClick={() => {
            if (geoPermission === 'granted') {
              // load from cache to avoid unintentional re-rending 
              // becoz geolocation is updated frequently 
              setCenter(checkPosition(JSON.parse(localStorage.getItem('geolocation'))))
            } else if ( geoPermission !== 'denied' ) {
              // ask for loading geolocation
              navigator.geolocation.getCurrentPosition(({coords: {latitude, longitude}}) => {
                setGeolocation( {lat: latitude, lng: longitude} )
                setCenter( {lat: latitude, lng: longitude} )
                setGeoPermission('granted')
              })
            }
          }}
        />
      </MapContainer>
    </Box>
  )
}