Created a frontend app to have the map,

added deck.gl to the frontend app,
Ibercivis · Oct 4, 2024 · c3891c8 · c3891c8
1 parent 7880f58
commit c3891c8
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 0 deletions.
diff --git a/frontend/__init__.py b/frontend/__init__.py
diff --git a/frontend/admin.py b/frontend/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/frontend/apps.py b/frontend/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class FrontendConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'frontend'
diff --git a/frontend/migrations/__init__.py b/frontend/migrations/__init__.py
diff --git a/frontend/models.py b/frontend/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/frontend/templates/frontend/index.html b/frontend/templates/frontend/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Deck.gl Map</title>
+    <!-- Include Mapbox and deck.gl CDN -->
+    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
+    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
+</head>
+<body>
+    <div id="map-container" style="width: 100%; height: 500px;"></div>
+
+    <script>
+        // Mapbox access token
+        const MAPBOX_ACCESS_TOKEN = "{{mapbox_token}}";
+
+        // Initialize the deck.gl map
+        const deckgl = new deck.DeckGL({
+            container: 'map-container',
+            mapboxApiAccessToken: MAPBOX_ACCESS_TOKEN,
+            mapStyle: 'mapbox://styles/mapbox/light-v9',
+            initialViewState: {
+                longitude: -0.88,
+                latitude: 41.64,
+                zoom: 12,
+                pitch: 45,
+                bearing: 0
+            },
+            controller: true,
+            layers: [
+                new deck.ScatterplotLayer({
+                    data: [
+                        {position: [-122.4, 37.8], size: 100}
+                    ],
+                    getPosition: d => d.position,
+                    getRadius: d => d.size,
+                    getFillColor: [255, 0, 0],
+                })
+            ]
+        });
+    </script>
+</body>
+</html>
diff --git a/frontend/tests.py b/frontend/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/frontend/urls.py b/frontend/urls.py
@@ -0,0 +1,6 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('', views.index),
+]
diff --git a/frontend/views.py b/frontend/views.py
@@ -0,0 +1,10 @@
+from django.shortcuts import render
+from django.conf import settings
+
+# Create your views here.
+
+def index(request):
+    context = {
+        'mapbox_token': settings.MAPBOX_ACCESS_TOKEN
+    }
+    return render(request, 'frontend/index.html', context)
diff --git a/openred/settings.py b/openred/settings.py
@@ -57,6 +57,7 @@
     # Custom apps
     'devices',
     'measures',
+    'frontend',
 
 
 ]
@@ -82,6 +83,7 @@
         'DIRS': [os.path.join(BASE_DIR, 'templates')],
         'APP_DIRS': True,
         'OPTIONS': {
+            'debug': True,
             'context_processors': [
                 'django.template.context_processors.debug',
                 'django.template.context_processors.request',
@@ -156,6 +158,9 @@
     }
 }
 
+# Mapbox
+MAPBOX_ACCESS_TOKEN = config('MAPBOX_ACCESS_TOKEN')
+
 
 # Internationalization
 # https://docs.djangoproject.com/en/3.2/topics/i18n/

diff --git a/openred/urls.py b/openred/urls.py
@@ -39,4 +39,5 @@
     path('api/', include('measures.urls')),
     path('swagger/', schema_view.with_ui('swagger', cache_timeout=0), name='schema-swagger-ui'),
     path('redoc/', schema_view.with_ui('redoc', cache_timeout=0), name='schema-redoc'),
+    path('', include('frontend.urls')),
 ]
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		from django.contrib import admin

		# Register your models here.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		from django.db import models

		# Create your models here.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		from django.test import TestCase

		# Create your tests here.