django-extended-ol 0.1.0__py3-none-any.whl → 1.1.0__py3-none-any.whl

django_extended_ol/admin.py

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

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/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/static/olwidget/js/WMTSWidget.js

@@ -2,6 +2,12 @@
 '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({
@@ -24,4 +30,62 @@ class WMTSWidget extends MapWidget {
     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/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.dist-info → django_extended_ol-1.1.0.dist-info}/METADATA

@@ -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
@@ -22,26 +22,33 @@ Classifier: Topic :: Internet :: WWW/HTTP :: Dynamic Content
 Requires-Python: >=3.10
 Description-Content-Type: text/markdown
 License-File: LICENSE
-Requires-Dist: Django >=5.0
+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-1.1.0.dist-info/RECORD

@@ -0,0 +1,13 @@
+django_extended_ol/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+django_extended_ol/admin.py,sha256=gmm3dZHcCwop1QNm5RJr2iHkBUPqWdDexe80espo32g,281
+django_extended_ol/apps.py,sha256=hw3h5JXhThL1TSDfWa2wxwBTWvCHuaEHWb8axT_QP88,188
+django_extended_ol/forms/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+django_extended_ol/forms/widgets.py,sha256=QvqDtWdBoFsG_IGW9QaEHEVgud49mD-0d4rjxq1cMqE,1987
+django_extended_ol/static/olwidget/css/WMTSWidget.css,sha256=Rw8fvpdpjoA-1Icp3gwpE78XPOViL5YNXNGy20TzQOM,538
+django_extended_ol/static/olwidget/js/WMTSWidget.js,sha256=fS9hCvChKIIvJasDJt75Rh3Am0yJjrlL229w_rRkU3I,3152
+django_extended_ol/templates/gis/openlayers-wmts.html,sha256=zSsGwdN8bESYHq-OTx4__fgbB_Kn50dYgWFTfzd2w00,2231
+django_extended_ol-1.1.0.dist-info/licenses/LICENSE,sha256=0uvSPKfP0VUrQ1XqeXD62tYc54cfQqt21YI9lWW9hq8,1564
+django_extended_ol-1.1.0.dist-info/METADATA,sha256=jp-6LZJbiiZhgNxG7gP_6YQs226LQ0V0rmf2-FXsqz8,3663
+django_extended_ol-1.1.0.dist-info/WHEEL,sha256=SmOxYU7pzNKBqASvQJ7DjX3XGUF92lrGhMb3R6_iiqI,91
+django_extended_ol-1.1.0.dist-info/top_level.txt,sha256=rX8AqitfQu0etd6PoOeNxcRl5fsus-YOs932PGUjDIs,19
+django_extended_ol-1.1.0.dist-info/RECORD,,

{django_extended_ol-0.1.0.dist-info → django_extended_ol-1.1.0.dist-info}/WHEEL

@@ -1,5 +1,5 @@
 Wheel-Version: 1.0
-Generator: setuptools (75.1.0)
+Generator: setuptools (79.0.1)
 Root-Is-Purelib: true
 Tag: py3-none-any
 

django_extended_ol-0.1.0.dist-info/RECORD

@@ -1,12 +0,0 @@
-django_extended_ol/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-django_extended_ol/admin.py,sha256=tE7_DtllUHuNSEpsKLkfUdLpSX7uhjZa-Q5y2UH7h7A,165
-django_extended_ol/apps.py,sha256=hw3h5JXhThL1TSDfWa2wxwBTWvCHuaEHWb8axT_QP88,188
-django_extended_ol/forms/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-django_extended_ol/forms/widgets.py,sha256=uVSj4TuJLGV-Fn8-AJsj00nrxZXSwwHqBI5IC2lErHc,1712
-django_extended_ol/static/olwidget/js/WMTSWidget.js,sha256=6fGzhd8wx20Oll_64fu7ZPfs9MZwj74vQYZ7hnanfxE,796
-django_extended_ol/templates/gis/openlayers-wmts.html,sha256=4MhZr_ldK_w7t2sswmHjTekX_P_js9SsXHW_0ESBSPw,1926
-django_extended_ol-0.1.0.dist-info/LICENSE,sha256=0uvSPKfP0VUrQ1XqeXD62tYc54cfQqt21YI9lWW9hq8,1564
-django_extended_ol-0.1.0.dist-info/METADATA,sha256=aXRMb31ksRmTegqtGBm0I1HQHSn-_szdC8rvpDHT3WY,2721
-django_extended_ol-0.1.0.dist-info/WHEEL,sha256=GV9aMThwP_4oNCtvEC2ec3qUYutgWeAzklro_0m4WJQ,91
-django_extended_ol-0.1.0.dist-info/top_level.txt,sha256=rX8AqitfQu0etd6PoOeNxcRl5fsus-YOs932PGUjDIs,19
-django_extended_ol-0.1.0.dist-info/RECORD,,