Repository: DjangoGirls/djangogirls

Issue:
Events map broken
The map on https://djangogirls.org/en/events/map/ is now broken and only shows markers with no map. Inspecting the page indicates that the map no longer exists. It looks like the map has been deleted and needs to be created again so the page can work.

```
Request URL: https://a.tiles.mapbox.com/v4/olasitarska.m8nged0f.json?access_token=token&secure
Request Method: GET
Status Code: 410 Gone (from disk cache)
Remote Address: 52.85.219.178:443
Referrer Policy: same-origin
```


Discussion:
More details, including tips for transitioning to the new map styles at: https://blog.mapbox.com/deprecating-studio-classic-styles-d8892ac38cb4
Do we have a screenshot of what this map looked like before, or can we just use a standard map?
The map wasn't anything custom, so we definitely could use something standard. I started working on this but I also see someone else has been playing with it in the Studio on mapbox. I don't want to try and do the same thing if someone already has that in progress.

I currently have the map itself loaded and I am working on making the events load onto the map because it was previously just a list of points where the new implementation of mapbox requires the points on the map to be prepared in a vector format as far as I could get in the docs? Also the custom icon has to be prepared in the Mapbox studio.

Is someone further with the work on this or should I continue? 🙌 
@vanessa the previous map looked like this.

![Previous Map](https://user-images.githubusercontent.com/13593285/222487936-b06d4801-0f90-407a-a702-ef6bb3c21e6e.png)

@aniav I had started playing around with the map and loaded the custom icon in Mapbox Studio but haven't loaded the events from the DB yet. The markers in the map are from when I created the layers in Mapbox Studio and they are not customised by color of event.

This is what I currently have.

<img width="722" alt="Screenshot 2023-03-02 at 18 22 52" src="https://user-images.githubusercontent.com/13593285/222489877-4f330881-4ba8-45c3-bde5-3ae40c6a1f45.png">

Maybe @aniav I can reach out to you if I need help?

Resolving patch:
diff --git a/core/models/event.py b/core/models/event.py
--- a/core/models/event.py
+++ b/core/models/event.py
@@ -109,6 +109,25 @@ def date_is_approximate(self):
             return True
         return False
 
+    @property
+    def lnglat(self):
+        """Returns X, Y coordinates.
+
+        In most cases on the page we are operating on latitude, longitude string.
+        This property returns the value in a swapped order of longitude, latitude
+        also called X, Y instead. This is a standard required for GeoJSON coordinates
+        required for the map JS library.
+        """
+        if not self.latlng:
+            return ""
+
+        try:
+            lat, lng = self.latlng.split(", ")
+        except ValueError:
+            return ""
+
+        return f"{lng}, {lat}"
+
     def as_ical(self):
         """
         Return a representation of the current event as an icalendar.Event.
diff --git a/core/views.py b/core/views.py
--- a/core/views.py
+++ b/core/views.py
@@ -14,7 +14,6 @@
 
 
 def index(request):
-
     blogs = Story.objects.filter(is_story=False).order_by("-created")[:3]
     city_count = Event.objects.values("city").distinct().count()
     country_count = Event.objects.values("country").distinct().count()
@@ -38,7 +37,6 @@ def index(request):
 
 
 def events(request):
-
     return render(
         request,
         "core/events.html",
@@ -50,14 +48,10 @@ def events(request):
 
 
 def events_map(request):
-
     return render(
         request,
         "core/events_map.html",
-        {
-            "events": Event.objects.public().order_by("date"),
-            "mapbox_map_id": settings.MAPBOX_MAP_ID,
-        },
+        {"events": Event.objects.public().order_by("date"), "mapbox_access_token": settings.MAPBOX_ACCESS_TOKEN},
     )
 
 
@@ -135,7 +129,7 @@ def year_2015(request):
         "core/2015.html",
         {
             "events": Event.objects.public().filter(date__lt="2016-01-01").order_by("date"),
-            "mapbox_map_id": settings.MAPBOX_MAP_ID,
+            "mapbox_access_token": settings.MAPBOX_ACCESS_TOKEN,
         },
     )
 
@@ -145,11 +139,8 @@ def year_2016_2017(request):
         request,
         "core/2016-2017.html",
         {
-            "events_2015": Event.objects.public().filter(date__lt="2016-01-01").order_by("date"),
-            "events_20162017": Event.objects.public()
-            .filter(date__lt="2017-08-01", date__gte="2016-01-01")
-            .order_by("date"),
-            "mapbox_map_id": settings.MAPBOX_MAP_ID,
+            "events": Event.objects.public().filter(date__lt="2017-08-01", date__gte="2016-01-01").order_by("date"),
+            "mapbox_access_token": settings.MAPBOX_ACCESS_TOKEN,
         },
     )
 
diff --git a/djangogirls/settings.py b/djangogirls/settings.py
--- a/djangogirls/settings.py
+++ b/djangogirls/settings.py
@@ -226,9 +226,6 @@ def gettext(s):
 SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
 SECURE_SSL_REDIRECT = not DEBUG
 
-# Mapbox maps to use on the Events map
-MAPBOX_MAP_ID = "olasitarska.m8nged0f"
-
 APPEND_SLASH = True
 
 JOBS_EMAIL_USER = os.environ.get("JOBS_EMAIL_USER")
@@ -278,3 +275,5 @@ def gettext(s):
 TUMBLR_API_KEY = os.environ.get("TUMBLR_API_KEY")
 TUMBLR_API_BASE_URL = os.environ.get("TUMBLR_API_BASE_URL", "https://api.tumblr.com/v2")
 TUMBLR_BLOG_HOSTNAME = os.environ.get("TUMBLR_BLOG_HOSTNAME", "blog.djangogirls.org")
+
+MAPBOX_ACCESS_TOKEN = os.environ.get("MAPBOX_ACCESS_TOKEN")


Test patch:
diff --git a/tests/core/test_models.py b/tests/core/test_models.py
--- a/tests/core/test_models.py
+++ b/tests/core/test_models.py
@@ -94,3 +94,13 @@ def test_has_organizer_main_organizer(user, future_event):
     future_event.team.clear()
 
     assert future_event.has_organizer(user)
+
+
+def test_event_lnglat(future_event):
+    assert future_event.lnglat == ""
+
+    future_event.latlng = "39.4747112, -0.3798073"
+    assert future_event.lnglat == "-0.3798073, 39.4747112"
+
+    future_event.latlng = "sddasdasda"
+    assert future_event.lnglat == ""