3.0.9 • Published 9 months ago

utopia-ui v3.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

Utopia UI npm version

UI Framework for Real-Life-Networking-Apps

Real change happens in real life when we meet in person and connect as local communities manifesting their ideas with the earth. When we help each other to step out of capitalism and individualism and start building common infrastructure to meet human needs in harmony with Mother Earth.

That is why Utopia UI exists. It is a UI kit for minimalist, fast, intuitive and mobile-first map apps, as a tool for local connection and decentralised networking. It can work with any backend or p2p database and any kind of data structure.

Mission

Utopia UIs mission is to provide open source building blocks to create beautiful applications with a focus on real life impact, local communities and gamification.

The building blocks are designed to allow different networks and communities to assemble their map and app for their specific needs and purpose.

Utopia Game is one of the apps made with Utopia UI. It is an attempt to use gamification to get users to take action and make the map even more alive. Check it out at utopia-game.org or see the code in the repository

Features

  • Interactive Component Map with customizable Layers (like Projects, Event, People)
  • Flexible API-Interface to make it work with every backend or p2p database
  • Create, Update, Delete Items
  • User Authentification API-Interface
  • User Profiles
  • App Shell

Getting Started

Basic Map

In this tutorial we learn how we create a basic React app with a Map component using utopia-ui library.

For this tutorial we use Vite to create an empty React app called "utopia-static-map"

npm create vite@latest utopia-static-map -- --template react

We open our new app in the terminal and install the utopia-ui package

cd utopia-static-map
npm install utopia-ui

We open our src/App.jsx and we replace the content with

import { UtopiaMap } from "utopia-ui"

function App() {
  return (
    <UtopiaMap center={[50.6, 9.5]} zoom={5} height='100dvh' width="100dvw">
    </UtopiaMap>
  )
}

export default App

Then we start the development server to check out the result in our browser:

npm run dev

And can open our first map app in the browser 🙂

Static Layers

Now we add some static layer.

First we put some sample data in a new file called src/sample-data.js

export const places = [{
    "id": 51,
    "name": "Stadtgemüse",
    "text": "Stadtgemüse Fulda ist eine Gemüsegärtnerei in Maberzell, die es sich zur Aufgabe gemacht hat, die Stadt und seine Bewohner:innen mit regionalem, frischem und natürlich angebautem Gemüse mittels Gemüsekisten zu versorgen. Es gibt also jede Woche, von Frühjahr bis Herbst, angepasst an die Saison eine Kiste mit schmackhaftem und frischem Gemüse für euch, welche ihr direkt vor Ort abholen könnt. \r\n\r\nhttps://stadtgemuese-fulda.de",
    "position": { "type": "Point", "coordinates": [9.632435, 50.560342] },
  },
  {
    "id": 166,
    "name": "Weidendom",
    "text": "free camping",
    "position": { "type": "Point", "coordinates": [9.438793, 50.560112] },
  }];
  
  export const events = [
    {
      "id": 423,
      "name": "Hackathon",
      "text": "still in progress",
      "position": { "type": "Point", "coordinates": [10.5, 51.62] },
      "start": "2022-03-25T12:00:00",
      "end": "2022-05-12T12:00:00",
    }
  ]

We want to create two Layers. One we want to call Places and the other Events

we import our sample data to the src/App.jsx

import { events, places } from "./sample-data"

and than we create our two <Layer> inside of our <UtopiaMap> component

    <UtopiaMap center={[50.6, 15.5]} zoom={5} height='100dvh' width="100dvw">
      <Layer
        name='events'
        markerIcon='calendar'
        markerShape='square'
        markerDefaultColor='#700'
        data={events} />
      <Layer
        name='places'
        markerIcon='point'
        markerShape='circle'
        markerDefaultColor='#007'
        data={places} />
    </UtopiaMap>

Map Component

The map shows various Layers (like places, events, profiles ...) of Items at their respective position whith nice and informative Popup and Profiles.

Tags, colors and clusters help to retain the overview.

Map Options

OptionTypeDefaultRequiredDescription
heightstring'400px'Noheight of the map
widthstring'100vw'Nowidth of the map
centerLatLng[50.6, 9.5]Noinitial map position
zoomnumber10Noinitial zoom level

Layer Options

OptionTypeDefaultRequiredDescription
...

Join the community

This Library is in alpha stage. You are very welcome to participate in the development

We are looking for Web Developer, UX Designer, Community Manager, Visionaries, Artists, etc. who like to support this Vision.

https://t.me/UtopiaMap

Support us

3.0.8

9 months ago

3.0.7

9 months ago

3.0.6

9 months ago

3.0.9

9 months ago

3.0.4

9 months ago

3.0.3

9 months ago

3.0.5

9 months ago

3.0.2

9 months ago

3.0.1

9 months ago

3.0.0

9 months ago

3.0.0-alpha.263

10 months ago

3.0.0-alpha.264

10 months ago

3.0.0-alpha.208

1 year ago

3.0.0-alpha.209

1 year ago

3.0.0-alpha.204

1 year ago

3.0.0-alpha.205

1 year ago

3.0.0-alpha.206

1 year ago

3.0.0-alpha.207

1 year ago

3.0.0-alpha.200

1 year ago

3.0.0-alpha.201

1 year ago

3.0.0-alpha.202

1 year ago

3.0.0-alpha.203

1 year ago

3.0.0-alpha.219

12 months ago

3.0.0-alpha.215

1 year ago

3.0.0-alpha.216

1 year ago

3.0.0-alpha.217

12 months ago

3.0.0-alpha.218

12 months ago

3.0.0-alpha.211

1 year ago

3.0.0-alpha.212

1 year ago

3.0.0-alpha.213

1 year ago

3.0.0-alpha.214

1 year ago

3.0.0-alpha.210

1 year ago

3.0.0-alpha.226

12 months ago

3.0.0-alpha.227

12 months ago

3.0.0-alpha.228

12 months ago

3.0.0-alpha.229

12 months ago

3.0.0-alpha.222

12 months ago

3.0.0-alpha.223

12 months ago

3.0.0-alpha.224

12 months ago

3.0.0-alpha.225

12 months ago

3.0.0-alpha.220

12 months ago

3.0.0-alpha.221

12 months ago

3.0.0-alpha.237

12 months ago

3.0.0-alpha.238

12 months ago

3.0.0-alpha.239

12 months ago

3.0.0-alpha.233

12 months ago

3.0.0-alpha.234

12 months ago

3.0.0-alpha.235

12 months ago

3.0.0-alpha.236

12 months ago

3.0.0-alpha.230

12 months ago

3.0.0-alpha.231

12 months ago

3.0.0-alpha.232

12 months ago

3.0.0-alpha.167

1 year ago

3.0.0-alpha.168

1 year ago

3.0.0-alpha.169

1 year ago

3.0.0-alpha.163

1 year ago

3.0.0-alpha.164

1 year ago

3.0.0-alpha.165

1 year ago

3.0.0-alpha.166

1 year ago

3.0.0-alpha.178

1 year ago

3.0.0-alpha.179

1 year ago

3.0.0-alpha.174

1 year ago

3.0.0-alpha.175

1 year ago

3.0.0-alpha.176

1 year ago

3.0.0-alpha.177

1 year ago

3.0.0-alpha.170

1 year ago

3.0.0-alpha.171

1 year ago

3.0.0-alpha.172

1 year ago

3.0.0-alpha.173

1 year ago

3.0.0-alpha.189

1 year ago

3.0.0-alpha.185

1 year ago

3.0.0-alpha.186

1 year ago

3.0.0-alpha.187

1 year ago

3.0.0-alpha.188

1 year ago

3.0.0-alpha.181

1 year ago

3.0.0-alpha.182

1 year ago

3.0.0-alpha.183

1 year ago

3.0.0-alpha.184

1 year ago

3.0.0-alpha.180

1 year ago

3.0.0-alpha.196

1 year ago

3.0.0-alpha.197

1 year ago

3.0.0-alpha.198

1 year ago

3.0.0-alpha.199

1 year ago

3.0.0-alpha.192

1 year ago

3.0.0-alpha.193

1 year ago

3.0.0-alpha.194

1 year ago

3.0.0-alpha.195

1 year ago

3.0.0-alpha.190

1 year ago

3.0.0-alpha.191

1 year ago

3.0.0-alpha.248

12 months ago

3.0.0-alpha.249

12 months ago

3.0.0-alpha.244

12 months ago

3.0.0-alpha.245

12 months ago

3.0.0-alpha.246

12 months ago

3.0.0-alpha.247

12 months ago

3.0.0-alpha.240

12 months ago

3.0.0-alpha.241

12 months ago

3.0.0-alpha.242

12 months ago

3.0.0-alpha.243

12 months ago

3.0.0-alpha.259

12 months ago

3.0.0-alpha.255

12 months ago

3.0.0-alpha.256

12 months ago

3.0.0-alpha.257

12 months ago

3.0.0-alpha.258

12 months ago

3.0.0-alpha.252

12 months ago

3.0.0-alpha.253

12 months ago

3.0.0-alpha.254

12 months ago

3.0.0-alpha.250

12 months ago

3.0.0-alpha.262

12 months ago

3.0.0-alpha.260

12 months ago

3.0.0-alpha.261

12 months ago

3.0.0-alpha.162

1 year ago

3.0.0-alpha.161

1 year ago

3.0.0-alpha.160

1 year ago

3.0.0-alpha.156

1 year ago

3.0.0-alpha.157

1 year ago

3.0.0-alpha.158

1 year ago

3.0.0-alpha.159

1 year ago

3.0.0-alpha.152

1 year ago

3.0.0-alpha.153

1 year ago

3.0.0-alpha.154

1 year ago

3.0.0-alpha.155

1 year ago

3.0.0-alpha.151

1 year ago

3.0.0-alpha.150

1 year ago

3.0.0-alpha.149

1 year ago

3.0.0-alpha.138

1 year ago

3.0.0-alpha.139

1 year ago

3.0.0-alpha.136

1 year ago

3.0.0-alpha.137

1 year ago

3.0.0-alpha.145

1 year ago

3.0.0-alpha.146

1 year ago

3.0.0-alpha.147

1 year ago

3.0.0-alpha.148

1 year ago

3.0.0-alpha.141

1 year ago

3.0.0-alpha.142

1 year ago

3.0.0-alpha.143

1 year ago

3.0.0-alpha.144

1 year ago

3.0.0-alpha.140

1 year ago

3.0.0-alpha.134

1 year ago

3.0.0-alpha.135

1 year ago

3.0.0-alpha.132

1 year ago

3.0.0-alpha.133

1 year ago

3.0.0-alpha.131

1 year ago

3.0.0-alpha.127

1 year ago

3.0.0-alpha.128

1 year ago

3.0.0-alpha.129

1 year ago

3.0.0-alpha.130

1 year ago

3.0.0-alpha.126

1 year ago

3.0.0-alpha.123

1 year ago

3.0.0-alpha.124

1 year ago

3.0.0-alpha.125

1 year ago

3.0.0-alpha.122

1 year ago

3.0.0-alpha.121

1 year ago

3.0.0-alpha.119

1 year ago

3.0.0-alpha.120

1 year ago

3.0.0-alpha.117

1 year ago

3.0.0-alpha.118

1 year ago

3.0.0-alpha.116

1 year ago

3.0.0-alpha.113

1 year ago

3.0.0-alpha.114

1 year ago

3.0.0-alpha.115

1 year ago

3.0.0-alpha.112

1 year ago

3.0.0-alpha.110

1 year ago

3.0.0-alpha.111

1 year ago

3.0.0-alpha.109

1 year ago

3.0.0-alpha.105

1 year ago

3.0.0-alpha.106

1 year ago

3.0.0-alpha.107

1 year ago

3.0.0-alpha.108

1 year ago

3.0.0-alpha.101

1 year ago

3.0.0-alpha.102

1 year ago

3.0.0-alpha.103

1 year ago

3.0.0-alpha.104

1 year ago

3.0.0-alpha.100

1 year ago

3.0.0-alpha.98

1 year ago

3.0.0-alpha.99

1 year ago

3.0.0-alpha.96

1 year ago

3.0.0-alpha.97

1 year ago

3.0.0-alpha.92

1 year ago

3.0.0-alpha.94

1 year ago

3.0.0-alpha.93

1 year ago

3.0.0-alpha.95

1 year ago

3.0.0-alpha.90

1 year ago

3.0.0-alpha.91

1 year ago

3.0.0-alpha.87

1 year ago

3.0.0-alpha.89

1 year ago

3.0.0-alpha.88

1 year ago

3.0.0-alpha.83

1 year ago

3.0.0-alpha.82

1 year ago

3.0.0-alpha.85

1 year ago

3.0.0-alpha.84

1 year ago

3.0.0-alpha.86

1 year ago

3.0.0-alpha.81

1 year ago

3.0.0-alpha.80

1 year ago

3.0.0-alpha.79

1 year ago

3.0.0-alpha.78

1 year ago

3.0.0-alpha.77

1 year ago

3.0.0-alpha.76

1 year ago

3.0.0-alpha.74

1 year ago

3.0.0-alpha.75

1 year ago

3.0.0-alpha.72

1 year ago

3.0.0-alpha.71

1 year ago

3.0.0-alpha.73

1 year ago

3.0.0-alpha.70

1 year ago

3.0.0-alpha.69

1 year ago

3.0.0-alpha.68

1 year ago

3.0.0-alpha.63

1 year ago

3.0.0-alpha.65

1 year ago

3.0.0-alpha.64

1 year ago

3.0.0-alpha.67

1 year ago

3.0.0-alpha.66

1 year ago

3.0.0-alpha.62

1 year ago

3.0.0-alpha.58

1 year ago

3.0.0-alpha.57

1 year ago

3.0.0-alpha.59

1 year ago

3.0.0-alpha.52

1 year ago

3.0.0-alpha.51

1 year ago

3.0.0-alpha.54

1 year ago

3.0.0-alpha.53

1 year ago

3.0.0-alpha.56

1 year ago

3.0.0-alpha.55

1 year ago

3.0.0-alpha.61

1 year ago

3.0.0-alpha.60

1 year ago

3.0.0-alpha.50

2 years ago

3.0.0-alpha.47

2 years ago

3.0.0-alpha.46

2 years ago

3.0.0-alpha.49

2 years ago

3.0.0-alpha.48

2 years ago

3.0.0-alpha.45

2 years ago

3.0.0-alpha.44

2 years ago

3.0.0-alpha.43

2 years ago

3.0.0-alpha.42

2 years ago

3.0.0-alpha.41

2 years ago

3.0.0-alpha.40

2 years ago

3.0.0-alpha.36

2 years ago

3.0.0-alpha.35

2 years ago

3.0.0-alpha.38

2 years ago

3.0.0-alpha.37

2 years ago

3.0.0-alpha.39

2 years ago

3.0.0-alpha.32

2 years ago

3.0.0-alpha.31

2 years ago

3.0.0-alpha.34

2 years ago

3.0.0-alpha.33

2 years ago

3.0.0-alpha.30

2 years ago

3.0.0-alpha.7

2 years ago

3.0.0-alpha.6

2 years ago

3.0.0-alpha.9

2 years ago

3.0.0-alpha.8

2 years ago

3.0.0-alpha.14

2 years ago

2.0.3

2 years ago

3.0.0-alpha.13

2 years ago

2.0.2

2 years ago

3.0.0-alpha.16

2 years ago

3.0.0-alpha.1

2 years ago

2.0.5

2 years ago

3.0.0-alpha.15

2 years ago

3.0.0-alpha.0

2 years ago

2.0.4

2 years ago

3.0.0-alpha.18

2 years ago

3.0.0-alpha.3

2 years ago

3.0.0-alpha.17

2 years ago

3.0.0-alpha.2

2 years ago

2.0.6

2 years ago

3.0.0-alpha.5

2 years ago

3.0.0-alpha.19

2 years ago

3.0.0-alpha.4

2 years ago

3.0.0-alpha.10

2 years ago

3.0.0-alpha.12

2 years ago

2.0.1

2 years ago

3.0.0-alpha.11

2 years ago

2.0.0

2 years ago

3.0.0-alpha.25

2 years ago

3.0.0-alpha.24

2 years ago

3.0.0-alpha.27

2 years ago

3.0.0-alpha.26

2 years ago

3.0.0-alpha.29

2 years ago

3.0.0-alpha.28

2 years ago

3.0.0-alpha.21

2 years ago

3.0.0-alpha.20

2 years ago

3.0.0-alpha.23

2 years ago

3.0.0-alpha.22

2 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago