igs-slm 0.1.0b0__py3-none-any.whl

slm/map/migrations/0001_initial.py

@@ -0,0 +1,115 @@
+# Generated by Django 3.2.16 on 2022-12-08 09:41
+
+import django.core.validators
+import django_enum.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    initial = True
+
+    dependencies = []
+
+    operations = [
+        migrations.CreateModel(
+            name="MapSettings",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True,
+                        primary_key=True,
+                        serialize=False,
+                        verbose_name="ID",
+                    ),
+                ),
+                (
+                    "email",
+                    models.EmailField(
+                        blank=True,
+                        default=None,
+                        help_text="The mapbox account associated with the api key.",
+                        max_length=254,
+                        null=True,
+                    ),
+                ),
+                (
+                    "api_key",
+                    models.CharField(
+                        blank=True,
+                        default=None,
+                        help_text="The API key for your mapbox account.",
+                        max_length=255,
+                        null=True,
+                    ),
+                ),
+                (
+                    "map_style",
+                    django_enum.fields.EnumPositiveSmallIntegerField(
+                        choices=[
+                            (1, "Streets"),
+                            (2, "Outdoors"),
+                            (3, "Light"),
+                            (4, "Dark"),
+                            (5, "Satellite"),
+                            (6, "Satellite Streets"),
+                            (7, "Navigation Day"),
+                            (8, "Navigation Night"),
+                        ],
+                        default=3,
+                        help_text="The map tile styling to use on the interactive map page.",
+                    ),
+                ),
+                (
+                    "map_projection",
+                    django_enum.fields.EnumPositiveSmallIntegerField(
+                        choices=[
+                            (0, "Albers"),
+                            (1, "Equal Earth"),
+                            (2, "Equi-Rectangular"),
+                            (3, "Lambert Conformal Conic"),
+                            (4, "Mercator"),
+                            (5, "Natural Earth"),
+                            (6, "Winkel Tripel"),
+                            (7, "Globe"),
+                        ],
+                        default=7,
+                        help_text="The map projection to use on the interactive map page.",
+                    ),
+                ),
+                (
+                    "zoom",
+                    models.FloatField(
+                        blank=True,
+                        default=2,
+                        help_text="The default zoom level (0-22).",
+                        validators=[
+                            django.core.validators.MinValueValidator(0),
+                            django.core.validators.MaxValueValidator(22),
+                        ],
+                    ),
+                ),
+                (
+                    "static_map_style",
+                    django_enum.fields.EnumPositiveSmallIntegerField(
+                        choices=[
+                            (1, "Streets"),
+                            (2, "Outdoors"),
+                            (3, "Light"),
+                            (4, "Dark"),
+                            (5, "Satellite"),
+                            (6, "Satellite Streets"),
+                            (7, "Navigation Day"),
+                            (8, "Navigation Night"),
+                        ],
+                        default=3,
+                        help_text="The map tile styling to use for static map images.",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "SLM Map Settings",
+                "verbose_name_plural": "SLM Map Settings",
+            },
+        ),
+    ]

slm/map/models.py

@@ -0,0 +1,63 @@
+from django.core.validators import MaxValueValidator, MinValueValidator
+from django.db import models
+from django.utils.translation import gettext as _
+from django_enum import EnumField
+
+from slm.map.defines import MapBoxProjection, MapBoxStyle
+from slm.singleton import SingletonModel
+
+
+class MapSettings(SingletonModel):
+    email = models.EmailField(
+        null=True,
+        blank=True,
+        default=None,
+        help_text=_("The mapbox account associated with the api key."),
+    )
+
+    api_key = models.CharField(
+        default=None,
+        null=True,
+        blank=True,
+        help_text=_("The API key for your mapbox account."),
+        max_length=255,
+    )
+
+    map_style = EnumField(
+        MapBoxStyle,
+        null=False,
+        blank=False,
+        default=MapBoxStyle.LIGHT,
+        help_text=_(_("The map tile styling to use on the interactive map page.")),
+    )
+
+    map_projection = EnumField(
+        MapBoxProjection,
+        null=False,
+        blank=False,
+        default=MapBoxProjection.GLOBE,
+        help_text=_(_("The map projection to use on the interactive map page.")),
+    )
+
+    zoom = models.FloatField(
+        default=2,
+        null=False,
+        blank=True,
+        help_text=_("The default zoom level (0-22)."),
+        validators=[MinValueValidator(0), MaxValueValidator(22)],
+    )
+
+    static_map_style = EnumField(
+        MapBoxStyle,
+        null=False,
+        blank=False,
+        default=MapBoxStyle.LIGHT,
+        help_text=_(_("The map tile styling to use for static map images.")),
+    )
+
+    def __str__(self):
+        return "SLM Map Settings"
+
+    class Meta:
+        verbose_name = _("SLM Map Settings")
+        verbose_name_plural = verbose_name

slm/map/static/slm/css/map.css

@@ -0,0 +1,86 @@
+/*#slm-map-container {
+  display: inline-block;
+  position: relative;
+  height: 90vh;
+  width: 90vh;
+}
+
+#slm-map-spacer {
+  margin-top: 100%;
+}
+
+#slm-map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+*/
+
+#slm-station-map-container {
+    height: 70vh;
+    width: 100vw;
+    cursor: pointer;
+}
+
+#slm-station-map {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+#slm-station-map canvas {
+    cursor: pointer !important;
+}
+
+colgroup .pos {
+    background-color: #F2F2F2;
+    border-bottom: 1px solid #000000;
+    border-top: 1px solid #000000;
+}
+colgroup .pos.left {
+    border-left: 1px solid #000000;
+}
+colgroup .pos.right {
+    border-right: 1px solid #000000;
+}
+
+colgroup .activity {
+    border-bottom: 1px solid #000000;
+    border-top: 1px solid #000000;
+}
+colgroup .activity.left {
+    border-left: 1px solid #000000;
+}
+colgroup .activity.right {
+    border-right: 1px solid #000000;
+}
+
+table.dataTable {
+    border-collapse:collapse !important;
+    margin-top: 20px;
+}
+
+.slm-agency-col,
+.slm-network-col {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 10vw;
+}
+
+#slm-map-station-table_filter {
+    margin-bottom: 10px;
+}
+
+#site-name {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    text-align: center;
+    top: 10px;
+    z-index: 10;
+    font-size: large;
+    pointer-events: none;
+}

slm/map/static/slm/js/map.js

@@ -0,0 +1,159 @@
+class SLMSiteMap {
+    constructor(options, source=slm.urls.reverse('slm_edit_api:map-list')) {
+        this.element = $(`#${options["container"]}`);
+        this.map = new mapboxgl.Map(options);
+        $(this.element).mousedown(function (e) {
+            e.stopPropagation();
+        });
+        this.hoveredStation = null;
+        this.selectedStation = null;
+        this.selectCallback = null;
+        this.clickCoords = {x:-1, y:-1};
+        const baseRadius = [
+            'interpolate',
+            ['linear'],
+            ['zoom'],
+            0,
+            [
+                'case',
+                ['boolean', ['feature-state', 'selected'], false],
+                ['+', 2.5, 3],
+                ['case',
+                    ['boolean', ['feature-state', 'hover'], false],
+                    ['+', 2.5, 3],
+                    2.5
+                ]
+            ],
+            22,
+            [
+                'case',
+                ['boolean', ['feature-state', 'selected'], false],
+                ['+', 15, 3],
+                ['case',
+                    ['boolean', ['feature-state', 'hover'], false],
+                    ['+', 15, 3],
+                    15
+                ]
+            ]
+        ];
+        this.map.on('load', function () {
+            this.setSource(source);
+            this.map.addLayer({
+                'id': 'station_layer',
+                'type': 'circle',
+                'source': 'stations',
+                'paint': {
+                    'circle-radius': baseRadius,
+                    'circle-color': [
+                        'match',
+                        ['get', 'status'],
+                        slm.SiteLogStatus.FORMER.value,
+                        slm.SiteLogStatus.FORMER.color,
+                        slm.SiteLogStatus.SUSPENDED.value,
+                        slm.SiteLogStatus.SUSPENDED.color,
+                        slm.SiteLogStatus.PROPOSED.value,
+                        slm.SiteLogStatus.PROPOSED.color,
+                        slm.SiteLogStatus.UPDATED.value,
+                        slm.SiteLogStatus.UPDATED.color,
+                        slm.SiteLogStatus.PUBLISHED.value,
+                        slm.SiteLogStatus.PUBLISHED.color,
+                        '#223B53'
+                    ],
+                    'circle-opacity': 1
+                }
+            });
+        }.bind(this));
+
+        this.map.on(
+            'mousemove',
+            'station_layer', function(e) {
+                if (e.features.length > 0) {
+                    if (this.hoveredStation !== null) {
+                        this.map.setFeatureState(
+                            { source: 'stations', id: this.hoveredStation },
+                            { hover: false }
+                        );
+                    }
+                    this.hoveredStation = e.features[0].id;
+                    this.map.setFeatureState(
+                        { source: 'stations', id: this.hoveredStation },
+                        { hover: true }
+                    );
+                    let div = $('#site-name');
+                    div.html(e.features[0].properties['name']);
+                    div.attr('style', `color: ${SiteLogStatus.get(e.features[0].properties['status']).color}`);
+                }
+            }.bind(this)
+        );
+
+        // When the mouse leaves the state-fill layer, update the feature state of the
+        // previously hovered feature.
+        this.map.on(
+            'mouseleave',
+            'station_layer', function() {
+                if (this.hoveredStation !== null) {
+                    this.map.setFeatureState(
+                        { source: 'stations', id: this.hoveredStation },
+                        { hover: false }
+                    );
+                }
+                if (this.hoveredStation) {
+                    $('#site-name').html('');
+                    this.hoveredStation = null;
+                }
+            }.bind(this)
+        );
+
+        this.map.on(
+            'click',
+            function(e) {
+                if (
+                    this.selectedStation !== null &&
+                    this.clickCoords.x !== e.point.x &&
+                    this.clickCoords.y !== e.point.y
+                )
+                {
+                    this.map.setFeatureState(
+                        { source: 'stations', id: this.selectedStation },
+                        { selected: false }
+                    );
+                }
+                this.selectCallback('');
+            }.bind(this)
+        );
+        this.map.on(
+            'click',
+            'station_layer',
+            function(e) {
+                this.clickCoords = e.point;
+                if (this.selectedStation !== null) {
+                    this.map.setFeatureState(
+                        { source: 'stations', id: this.selectedStation },
+                        { selected: false }
+                    );
+                }
+                this.selectedStation = e.features[0].id;
+                this.map.setFeatureState(
+                    { source: 'stations', id: this.selectedStation },
+                    { selected: true }
+                );
+                this.selectCallback(e.features[0].properties['name']);
+            }.bind(this)
+        );
+    }
+
+    setSelectCallback(callback) {
+        this.selectCallback = callback;
+    }
+
+    setSource(mapQuery) {
+        if (this.map.getSource('stations')) {
+            this.map.getSource('stations').setData(mapQuery);
+        } else {
+            this.map.addSource('stations', {
+                type: 'geojson',
+                data: mapQuery
+            });
+        }
+    }
+}