django-extended-ol 0.1.0__tar.gz → 1.1.0__tar.gz

{django_extended_ol-0.1.0/django_extended_ol.egg-info → django_extended_ol-1.1.0}/PKG-INFO

@@ -1,6 +1,6 @@
-Metadata-Version: 2.1
+Metadata-Version: 2.4
 Name: django-extended-ol
-Version: 0.1.0
+Version: 1.1.0
 Summary: An openlayers widget for Django with extended capabilities
 Author-email: SITN <sitn@ne.ch>
 Project-URL: Homepage, https://github.com/sitn/django-extended-ol
@@ -23,25 +23,32 @@ Requires-Python: >=3.10
 Description-Content-Type: text/markdown
 License-File: LICENSE
 Requires-Dist: Django>=5.0
+Dynamic: license-file
 
 # django-extended-ol
 
 django-extended-ol is a Django app that extends the basic OpenLayers Widget.
 
+Features:
+
 * Custom WMTS base_layer with fixed resolutions
 
 ## Quick start
 
-1. Add "olwidget" to your INSTALLED_APPS setting like this:
+```sh
+pip install django-extended-ol
+```
+
+1. Add "django_extended_ol" to your INSTALLED_APPS setting like this:
 
 ```python
 INSTALLED_APPS = [
     ...,
-    "olwidget",
+    "django_extended_ol",
 ]
 ```
 
-2. Configure olwidget in your settings.py, here's an example:
+2. Configure django_extended_ol in your settings.py, here's an example:
 
 ```python
 OLWIDGET = {
@@ -61,16 +68,24 @@ OLWIDGET = {
         "url_template": 'https://sitn.ne.ch/mapproxy95/wmts/1.0.0/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png',
         "request_encoding": 'REST', # optional
         "format": 'image/png' # optional
+    },
+    "search": { # optional, only if you want a search service
+        "url_template": 'https://sitn.ne.ch/search?limit=10&partitionlimit=2&interface=desktop&query={search_term}'
     }
 }
 ```
 
-3. You can now use WMTSWidget in your gis forms:
+3. You can now use `WMTSWidget` in your gis forms:
 
 ```python
-gis_widget = WMTSWidget
+from django_extended_ol.forms.widgets import WMTSWidget
+...
+class MyCustomGISClass:
+    gis_widget = WMTSWidget
 ```
 
+If you want a search widget, you can use `WMTSWithSearchWidget`. Please check search service specification below.
+
 4. You can also use it in your admin.py:
 
 ```python
@@ -81,4 +96,19 @@ gis_widget = WMTSWidget
     admin.site.register(YourGeomModel, WMTSGISModelAdmin)
 ```
 
+If you want the search widget please use `WMTSGISWithSearchModelAdmin`. Please check search service specification below.
+
 5. Start the development server and visit the admin.
+
+
+## Search service specification
+
+You'll need a templated URL as showcased in the `settings.py` above.
+Such service should reply GeoJSON feature collection and each feature should have a `bbox` and a property named `label`.
+
+# Build this package
+
+```sh
+py -m build
+py -m twine upload dist/*
+```

{django_extended_ol-0.1.0 → django_extended_ol-1.1.0}/README.md

@@ -2,20 +2,26 @@
 
 django-extended-ol is a Django app that extends the basic OpenLayers Widget.
 
+Features:
+
 * Custom WMTS base_layer with fixed resolutions
 
 ## Quick start
 
-1. Add "olwidget" to your INSTALLED_APPS setting like this:
+```sh
+pip install django-extended-ol
+```
+
+1. Add "django_extended_ol" to your INSTALLED_APPS setting like this:
 
 ```python
 INSTALLED_APPS = [
     ...,
-    "olwidget",
+    "django_extended_ol",
 ]
 ```
 
-2. Configure olwidget in your settings.py, here's an example:
+2. Configure django_extended_ol in your settings.py, here's an example:
 
 ```python
 OLWIDGET = {
@@ -35,16 +41,24 @@ OLWIDGET = {
         "url_template": 'https://sitn.ne.ch/mapproxy95/wmts/1.0.0/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png',
         "request_encoding": 'REST', # optional
         "format": 'image/png' # optional
+    },
+    "search": { # optional, only if you want a search service
+        "url_template": 'https://sitn.ne.ch/search?limit=10&partitionlimit=2&interface=desktop&query={search_term}'
     }
 }
 ```
 
-3. You can now use WMTSWidget in your gis forms:
+3. You can now use `WMTSWidget` in your gis forms:
 
 ```python
-gis_widget = WMTSWidget
+from django_extended_ol.forms.widgets import WMTSWidget
+...
+class MyCustomGISClass:
+    gis_widget = WMTSWidget
 ```
 
+If you want a search widget, you can use `WMTSWithSearchWidget`. Please check search service specification below.
+
 4. You can also use it in your admin.py:
 
 ```python
@@ -55,4 +69,19 @@ gis_widget = WMTSWidget
     admin.site.register(YourGeomModel, WMTSGISModelAdmin)
 ```
 
+If you want the search widget please use `WMTSGISWithSearchModelAdmin`. Please check search service specification below.
+
 5. Start the development server and visit the admin.
+
+
+## Search service specification
+
+You'll need a templated URL as showcased in the `settings.py` above.
+Such service should reply GeoJSON feature collection and each feature should have a `bbox` and a property named `label`.
+
+# Build this package
+
+```sh
+py -m build
+py -m twine upload dist/*
+```

django_extended_ol-1.1.0/django_extended_ol/admin.py

@@ -0,0 +1,10 @@
+from django.contrib.gis.admin import GISModelAdmin
+from .forms.widgets import WMTSWidget, WMTSWithSearchWidget
+
+
+class WMTSGISModelAdmin(GISModelAdmin):
+    gis_widget = WMTSWidget
+
+
+class WMTSGISWithSearchModelAdmin(GISModelAdmin):
+    gis_widget = WMTSWithSearchWidget

{django_extended_ol-0.1.0 → django_extended_ol-1.1.0}/django_extended_ol/forms/widgets.py

@@ -10,7 +10,6 @@ class WMTSWidget(OpenLayersWidget):
             (extent[0] + extent[2]) / 2,
             (extent[1] + extent[3]) / 2,
         ]
-    print(center_from_extent)
     widget_options = {
         "wmts_layer_name": settings.OLWIDGET["wmts"].get("layer_name"),
         "wmts_style": settings.OLWIDGET["wmts"]["style"],
@@ -22,13 +21,16 @@ class WMTSWidget(OpenLayersWidget):
         "default_map_center": settings.OLWIDGET["globals"].get("default_center", center_from_extent),
         "default_resolution": settings.OLWIDGET["globals"].get("default_resolution", 8),
         "extent": extent,
-        "resolutions" : settings.OLWIDGET["globals"]["resolutions"]
+        "resolutions": settings.OLWIDGET["globals"]["resolutions"]
     }
 
     class Media(OpenLayersWidget.Media):
         js = OpenLayersWidget.Media.js + (
             "olwidget/js/WMTSWidget.js",
         )
+        css = {
+            "all": OpenLayersWidget.Media.css["all"] + ("olwidget/css/WMTSWidget.css",)
+        }
 
     def __init__(self, attrs=None):
         super().__init__()
@@ -37,3 +39,10 @@ class WMTSWidget(OpenLayersWidget):
             self.attrs[key] = self.widget_options[key]
         if attrs:
             self.attrs.update(attrs)
+
+
+class WMTSWithSearchWidget(WMTSWidget):
+    widget_options = {
+        **WMTSWidget.widget_options, 
+        "search_url": settings.OLWIDGET["search"].get("url_template", None)
+    }

django_extended_ol-1.1.0/django_extended_ol/static/olwidget/css/WMTSWidget.css

@@ -0,0 +1,30 @@
+.ext-ol-search {
+    position: absolute;
+    top: 0.5em;
+    left: 2.5em;
+}
+
+.ext-ol-autocomplete-results {
+    border: 1px solid var(--border-color);
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: var(--body-bg);
+    color: var(--body-fg);
+    width: 20em;
+    position: absolute;
+    top: 2.5em;
+    left: 2.5em;
+}
+
+.ext-ol-autocomplete-results div {
+    padding: 8px;
+    cursor: pointer;
+}
+
+.ext-ol-autocomplete-results div:hover {
+    background-color: var(--darkened-bg);
+}
+
+.ext-ol-hidden {
+    display: none;
+}

django_extended_ol-1.1.0/django_extended_ol/static/olwidget/js/WMTSWidget.js

@@ -0,0 +1,91 @@
+/* global ol */
+'use strict';
+
+class WMTSWidget extends MapWidget {
+
+    /**
+     * Overrides MapWiget.createMap() that is called by
+     * MapWidget itself and stores the map in this.map
+     * @returns ol.Map instance
+     */
+    createMap() {
+        this.map_extent = this.options.extent;
+        this.projection = new ol.proj.Projection({
+            code: `EPSG:${this.options.map_srid}`,
+            extent: this.map_extent,
+        });
+        return new ol.Map({
+            target: this.options.map_id,
+            layers: [this.options.base_layer],
+            view: new ol.View({
+                center: this.options.default_center,
+                resolution: this.options.default_resolution,
+                projection: this.projection,
+                resolutions: this.options.resolutions,
+                constrainResolution: true
+            })
+        });
+    }
+
+    defaultCenter() {
+        return this.options.default_center;
+    }
+
+    search(searchterm) {
+        let debounceTimeout;
+        const query = searchterm.trim();
+    
+        clearTimeout(debounceTimeout);
+        if (query.length < 3) {
+            this.clearResults()
+            return;
+        }
+    
+        debounceTimeout = setTimeout(() => {
+        const url = this.options.search_url.replace('{search_term}', encodeURIComponent(query));
+    
+        fetch(url)
+            .then(response => response.json())
+            .then(data => {
+            this.clearResults();
+            if (data && data.features) {
+                data.features.forEach(feature => {
+                    const label = feature.properties.label;
+                    const coords = feature.geometry.coordinates;
+                    const div = document.createElement("div");
+                    div.textContent = label;
+                    div.addEventListener("click", () => {
+                        this.clearResults();
+                        this.inputSearchElement.value = label;
+                        this.map.getView().fit(feature.bbox, {padding: [50, 50, 50, 50]})
+                    });
+                    this.divSearchResults.appendChild(div);
+                    this.divSearchResults.classList.remove("ext-ol-hidden");
+                });
+            }
+            })
+            .catch(error => {
+                console.error("Search error!", error);
+                console.error(`Something went wrong parsing the response of ${url}`);
+            });
+        }, 300);
+    }
+
+    clearResults() {
+        this.divSearchResults.innerHTML = "";
+        this.divSearchResults.classList.add("ext-ol-hidden");
+    }
+
+    createInteractions() {
+        super.createInteractions();
+        document.addEventListener("DOMContentLoaded", () => {
+            document.querySelectorAll('.ext-ol-search-widget').forEach((divElement) => {
+                this.inputSearchElement = divElement.querySelector('input');
+                this.divSearchResults = divElement.querySelector('div.ext-ol-autocomplete-results');
+                this.inputSearchElement.addEventListener("input", () => this.search(this.inputSearchElement.value));
+            });
+        });
+    }
+}
+
+

{django_extended_ol-0.1.0 → django_extended_ol-1.1.0}/django_extended_ol/templates/gis/openlayers-wmts.html

@@ -6,6 +6,12 @@
 
 <div id="{{ id }}_div_map" class="dj_map_wrapper">
     <div id="{{ id }}_map" class="dj_map"></div>
+    {% if search_url %}
+    <div id="{{ id }}_input_search" class="ext-ol-search-widget">
+      <input type="text" class="vTextField ext-ol-search" name="search">
+      <div class="ext-ol-autocomplete-results ext-ol-hidden"></div>
+    </div>
+    {% endif %}
     {% if not disabled %}<span class="clear_features"><a href="">{% translate "Delete all Features" %}</a></span>{% endif %}
     {% if display_raw %}<p>{% translate "Debugging window (serialized value)" %}</p>{% endif %}
     <textarea id="{{ id }}" class="vSerializedField required" cols="150" rows="10" name="{{ name }}"
@@ -52,6 +58,8 @@ const WMTSOptions = {
 options.base_layer = new ol.layer.Tile({
   source: new ol.source.WMTS(WMTSOptions),
 });
+
+options.search_url = '{{ search_url|safe }}';
 {% endblock %}
 
 var {{ module }} = new WMTSWidget(options);

{django_extended_ol-0.1.0 → django_extended_ol-1.1.0/django_extended_ol.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
-Metadata-Version: 2.1
+Metadata-Version: 2.4
 Name: django-extended-ol
-Version: 0.1.0
+Version: 1.1.0
 Summary: An openlayers widget for Django with extended capabilities
 Author-email: SITN <sitn@ne.ch>
 Project-URL: Homepage, https://github.com/sitn/django-extended-ol
@@ -23,25 +23,32 @@ Requires-Python: >=3.10
 Description-Content-Type: text/markdown
 License-File: LICENSE
 Requires-Dist: Django>=5.0
+Dynamic: license-file
 
 # django-extended-ol
 
 django-extended-ol is a Django app that extends the basic OpenLayers Widget.
 
+Features:
+
 * Custom WMTS base_layer with fixed resolutions
 
 ## Quick start
 
-1. Add "olwidget" to your INSTALLED_APPS setting like this:
+```sh
+pip install django-extended-ol
+```
+
+1. Add "django_extended_ol" to your INSTALLED_APPS setting like this:
 
 ```python
 INSTALLED_APPS = [
     ...,
-    "olwidget",
+    "django_extended_ol",
 ]
 ```
 
-2. Configure olwidget in your settings.py, here's an example:
+2. Configure django_extended_ol in your settings.py, here's an example:
 
 ```python
 OLWIDGET = {
@@ -61,16 +68,24 @@ OLWIDGET = {
         "url_template": 'https://sitn.ne.ch/mapproxy95/wmts/1.0.0/{layer}/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png',
         "request_encoding": 'REST', # optional
         "format": 'image/png' # optional
+    },
+    "search": { # optional, only if you want a search service
+        "url_template": 'https://sitn.ne.ch/search?limit=10&partitionlimit=2&interface=desktop&query={search_term}'
     }
 }
 ```
 
-3. You can now use WMTSWidget in your gis forms:
+3. You can now use `WMTSWidget` in your gis forms:
 
 ```python
-gis_widget = WMTSWidget
+from django_extended_ol.forms.widgets import WMTSWidget
+...
+class MyCustomGISClass:
+    gis_widget = WMTSWidget
 ```
 
+If you want a search widget, you can use `WMTSWithSearchWidget`. Please check search service specification below.
+
 4. You can also use it in your admin.py:
 
 ```python
@@ -81,4 +96,19 @@ gis_widget = WMTSWidget
     admin.site.register(YourGeomModel, WMTSGISModelAdmin)
 ```
 
+If you want the search widget please use `WMTSGISWithSearchModelAdmin`. Please check search service specification below.
+
 5. Start the development server and visit the admin.
+
+
+## Search service specification
+
+You'll need a templated URL as showcased in the `settings.py` above.
+Such service should reply GeoJSON feature collection and each feature should have a `bbox` and a property named `label`.
+
+# Build this package
+
+```sh
+py -m build
+py -m twine upload dist/*
+```

{django_extended_ol-0.1.0 → django_extended_ol-1.1.0}/django_extended_ol.egg-info/SOURCES.txt

@@ -13,5 +13,6 @@ django_extended_ol.egg-info/requires.txt
 django_extended_ol.egg-info/top_level.txt
 django_extended_ol/forms/__init__.py
 django_extended_ol/forms/widgets.py
+django_extended_ol/static/olwidget/css/WMTSWidget.css
 django_extended_ol/static/olwidget/js/WMTSWidget.js
 django_extended_ol/templates/gis/openlayers-wmts.html

{django_extended_ol-0.1.0 → django_extended_ol-1.1.0}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = 'setuptools.build_meta'
 
 [project]
 name = "django-extended-ol"
-version = "0.1.0"
+version = "1.1.0"
 authors = [
   { name="SITN", email="sitn@ne.ch" },
 ]

django_extended_ol-0.1.0/django_extended_ol/admin.py

@@ -1,6 +0,0 @@
-from django.contrib.gis.admin import GISModelAdmin
-from .forms.widgets import WMTSWidget
-
-
-class WMTSGISModelAdmin(GISModelAdmin):
-    gis_widget = WMTSWidget

django_extended_ol-0.1.0/django_extended_ol/static/olwidget/js/WMTSWidget.js

@@ -1,27 +0,0 @@
-/* global ol */
-'use strict';
-
-class WMTSWidget extends MapWidget {
-    createMap() {
-        this.map_extent = this.options.extent;
-        this.projection = new ol.proj.Projection({
-            code: `EPSG:${this.options.map_srid}`,
-            extent: this.map_extent,
-        });
-        return new ol.Map({
-            target: this.options.map_id,
-            layers: [this.options.base_layer],
-            view: new ol.View({
-                center: this.options.default_center,
-                resolution: this.options.default_resolution,
-                projection: this.projection,
-                resolutions: this.options.resolutions,
-                constrainResolution: true
-            })
-        });
-    }
-
-    defaultCenter() {
-        return this.options.default_center;
-    }
-}