From 9b6143d46ee07ac87ae253cacb0c57e6bfc07e15 Mon Sep 17 00:00:00 2001
From: AT <mail@antontranelis.de>
Date: Sat, 9 Jul 2022 20:53:43 +0200
Subject: [PATCH] you can pass places and events now and also set center and
 zoom

---
 package.json  |  2 +-
 src/index.tsx | 35 ++++++++++++++++++-----------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index c3522d36..50dfdd12 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Reuseable React Components to build mapping apps for all kinds of communities ",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage:": "https://utopia.os/",
diff --git a/src/index.tsx b/src/index.tsx
index 49dfb9c1..6c7d0c2d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,37 +3,38 @@ import "leaflet/dist/leaflet.css";
 import * as React from "react";
 import MarkerIconFactory from './Utils/MarkerIconFactory';
 import MarkerPopup, { IMapItem } from "./Components/Map/MarkerPopup";
-import { places, events } from './sampleData/data'
 import "./styles.scss"
 
 export interface IMapProps {
     height: string,
     width: string,
+    center: number[],
+    zoom: number,
     places?: IMapItem[],
-    events?: IMapItem[]
+    events?: IMapItem[],
+    children?: any,
+    data?: any,
 }
 
 const Map = (props: IMapProps) => {
-
     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">
-                <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">
-                        {places &&
-                            (places).map((place) => (
-                                <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} />
-                                </Marker>
-                            ))
-                        }
+                    {props.places &&
+                        (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]]}>
+                                <MarkerPopup item={place} />
+                            </Marker>
+                        ))
+                    }
                 </LayersControl.Overlay>
                 <LayersControl.Overlay checked name="Events">
-                        {events &&
-                        (events).map((event) => (
+                    {props.events &&
+                        (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]]}>
                                 <MarkerPopup item={event} />
                             </Marker>