antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

you can pass places and events now and also set center and zoom

Browse Source
This commit is contained in:
AT 2022-07-09 20:53:43 +02:00
parent 64fcb0575f
commit 9b6143d46e
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "utopia-ui", "name": "utopia-ui",
"version": "1.0.3", "version": "1.0.4",
"description": "Reuseable React Components to build mapping apps for all kinds of communities ", "description": "Reuseable React Components to build mapping apps for all kinds of communities ",
"repository": "https://github.com/utopia-os/utopia-ui", "repository": "https://github.com/utopia-os/utopia-ui",
"homepage:": "https://utopia.os/", "homepage:": "https://utopia.os/",

35
src/index.tsx
View File

@ -3,37 +3,38 @@ import "leaflet/dist/leaflet.css";
import * as React from "react"; import * as React from "react";
import MarkerIconFactory from './Utils/MarkerIconFactory'; import MarkerIconFactory from './Utils/MarkerIconFactory';
import MarkerPopup, { IMapItem } from "./Components/Map/MarkerPopup"; import MarkerPopup, { IMapItem } from "./Components/Map/MarkerPopup";
import { places, events } from './sampleData/data'
import "./styles.scss" import "./styles.scss"
export interface IMapProps { export interface IMapProps {
height: string, height: string,
width: string, width: string,
center: number[],
zoom: number,
places?: IMapItem[], places?: IMapItem[],
events?: IMapItem[] events?: IMapItem[],
children?: any,
data?: any,
} }
const Map = (props: IMapProps) => { const Map = (props: IMapProps) => {
return ( return (
<MapContainer style={{ height: props.height, width: props.width }} center={[51.3, 9.6]} zoom={8} > <MapContainer style={{ height: props.height, width: props.width }} center={props.center} zoom={props.zoom} >
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<LayersControl position="topright"> <LayersControl position="topright">
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LayersControl.Overlay checked name="Places"> <LayersControl.Overlay checked name="Places">
{places && {props.places &&
(places).map((place) => ( (props.places).map((place: IMapItem) => (
<Marker icon={MarkerIconFactory('circle', '#f18e1c', 'RGBA(35, 31, 32, 0.2)', 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}> <Marker icon={MarkerIconFactory('circle', '#f18e1c', 'RGBA(35, 31, 32, 0.2)', 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>
<MarkerPopup item={place} /> <MarkerPopup item={place} />
</Marker> </Marker>
)) ))
} }
</LayersControl.Overlay> </LayersControl.Overlay>
<LayersControl.Overlay checked name="Events"> <LayersControl.Overlay checked name="Events">
{events && {props.events &&
(events).map((event) => ( (props.events).map((event: IMapItem) => (
<Marker icon={MarkerIconFactory('square', '#6d398b', 'RGBA(35, 31, 32, 0.2)', 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}> <Marker icon={MarkerIconFactory('square', '#6d398b', 'RGBA(35, 31, 32, 0.2)', 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}>
<MarkerPopup item={event} /> <MarkerPopup item={event} />
</Marker> </Marker>