Merge pull request #15 from datopian/fix/mapdata_per_dataset

[mapdata][m]: added fix for mapdata per dataset page

ckanext/rvr/assets/js/rvrDatasetMapGenerator.js

@@ -0,0 +1,96 @@
+// Dataset map module
+this.ckan.module('rvr-dataset-map', function (jQuery, _) {
+
+  return {
+    options: {
+      i18n: {
+      },
+      styles: {
+        point:{
+          iconUrl: '/img/marker.png',
+          iconSize: [14, 25],
+          iconAnchor: [7, 25]
+        },
+        default_:{
+          color: '#B52',
+          weight: 2,
+          opacity: 1,
+          fillColor: '#FCF6CF',
+          fillOpacity: 0.4
+        }
+      }
+    },
+
+    initialize: function () {
+
+      this.extent = this.el.data('extent');
+
+      // fix bbox when w-long is positive while e-long is negative.
+      // assuming coordinate sequence is west to east (left to right)
+      if (this.extent.type == 'Polygon'
+        && this.extent.coordinates[0].length == 5) {
+        _coordinates = this.extent.coordinates[0]
+        w = _coordinates[0][0];
+        e = _coordinates[2][0];
+        if (w >= 0 && e < 0) {
+          w_new = w
+          while (w_new > e) w_new -=360
+          for (var i = 0; i < _coordinates.length; i++) {
+            if (_coordinates[i][0] == w) {
+              _coordinates[i][0] = w_new
+            };
+          };
+          this.extent.coordinates[0] = _coordinates
+        };
+      };
+
+      // hack to make leaflet use a particular location to look for images
+      L.Icon.Default.imagePath = this.options.site_url + 'js/vendor/leaflet/images';
+
+      jQuery.proxyAll(this, /_on/);
+      this.el.ready(this._onReady);
+
+    },
+
+    _onReady: function(){
+
+      var map, backgroundLayer, extentLayer, ckanIcon;
+
+      if (!this.extent) {
+          return false;
+      }
+      // OK map time
+      const mapConfig = {
+          'type': 'wms',
+          'wms.url': 'https://geodaten.metropoleruhr.de/spw2',
+          'wms.layers': 'spw2_light',
+          'wms.version': '1.3.0'
+      }
+      const leafletMapOptions = {
+          attributionControl: false,
+          drawControlTooltips: true,
+          maxBoundsViscosity: 1,
+          minZoom: 8
+      }
+      map = ckan.rvrWebMap(
+          'dataset-map-container',
+          mapConfig,
+          leafletMapOptions
+      );
+      var ckanIcon = L.Icon.extend({options: this.options.styles.point});
+
+      var extentLayer = L.geoJson(this.extent, {
+          style: this.options.styles.default_,
+          pointToLayer: function (feature, latLng) {
+            return new L.Marker(latLng, {icon: new ckanIcon})
+          }});
+      extentLayer.addTo(map);
+
+      if (this.extent.type == 'Point'){
+        map.setView(L.latLng(this.extent.coordinates[1], this.extent.coordinates[0]), 9);
+      } else {
+        map.fitBounds(extentLayer.getBounds());
+      }
+    }
+  }
+});

ckanext/rvr/assets/webassets.yml

@@ -56,3 +56,12 @@ bbox_generator_js:
     - js/vendors/leaflet.draw/leaflet.draw.js
     - js/rvrMap.js
     - js/rvrBBOXGenerator.js
+
+rvr_dataset_map_generator_js:
+  output: rvr/%(version)s_rvr_dataset_map_generator.js
+  extra:
+    preload:
+      - vendor/jquery
+  contents:
+    - js/rvrMap.js
+    - js/rvrDatasetMapGenerator.js

ckanext/rvr/templates/package/read_base.html

@@ -37,13 +37,10 @@
     {% endif %}
   {% endblock %}
 
-  <section class="module module-narrow">
-    <h2 class="module-heading"> {{ _('Karte') }}</h2>
-      {% set dataset_extent = h.get_pkg_dict_extra(c.pkg_dict, 'spatial', '') %}
-      {% if dataset_extent %}
-          {% snippet "spatial/snippets/dataset_map_base.html", extent=dataset_extent %}
-      {% endif %}
-  </section>
+  {% set dataset_extent = c.pkg_dict.get('spatial', '') %}
+  {% if dataset_extent %}
+      {% snippet "spatial/snippets/rvr_dataset_map_base.html", extent=dataset_extent %}
+  {% endif %}
 
   {% block package_social %}
     {% snippet "snippets/social.html" %}
@@ -53,4 +50,9 @@ <h2 class="module-heading"> {{ _('Karte') }}</h2>
     {% snippet "snippets/license.html", pkg_dict=pkg %}
   {% endblock %}
 
-{% endblock %}
+{% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  {% asset 'rvr/rvr_dataset_map_generator_js' %}
+{% endblock %}

ckanext/rvr/templates/spatial/snippets/rvr_dataset_map_base.html

@@ -0,0 +1,26 @@
+{#
+Displays a map widget to define a spatial filter on the dataset search page sidebar
+
+default_extent
+Initial map extent (Optional, defaults to the whole world). It can be defined
+either as a pair of coordinates or as a GeoJSON bounding box.
+
+e.g.
+{% snippet "spatial/snippets/spatial_query.html", default_extent=[[15.62, -139.21], [64.92, -61.87]] %}
+
+{% snippet "spatial/snippets/spatial_query.html", default_extent="{ \"type\": \"Polygon\", \"coordinates\": [[[74.89, 29.39],[74.89, 38.45], [60.50, 38.45], [60.50, 29.39], [74.89, 29.39]]]}" %}
+
+#}
+<section id="dataset-map" class="module module-narrow module-shallow">
+  <h2 class="module-heading"> {{ _('Karte') }}</h2>
+    {% set map_config = h.get_common_map_config() %}
+    <div class="dataset-map" data-module="rvr-dataset-map" data-extent="{{ extent }}" data-module-site_url="{{ h.dump_json(h.url_for('/', locale='default', qualified=true)) }}" data-module-map_config="{{ h.dump_json(map_config) }}">
+      <div id="dataset-map-container"></div>
+    </div>
+    <div id="dataset-map-attribution">
+        {% snippet "spatial/snippets/rvr_map_attribution.html", map_config=map_config %}
+    </div>
+</section>
+
+{% set type = 'asset' if h.ckan_version().split('.')[1] | int >= 9 else 'resource' %}
+{% include 'spatial/snippets/dataset_map_' ~ type ~ '.html' %}