bug fix: popup position; new ol3 api

linventifatelier · Jan 29, 2014 · 90bc5d7 · 90bc5d7
1 parent 6c0deab
commit 90bc5d7
Showing 1 changed file with 39 additions and 58 deletions.
diff --git a/geodata/templates/geodata/bigmap.js b/geodata/templates/geodata/bigmap.js
@@ -1,46 +1,36 @@
 {% load l10n %}
 
 {% block vars %}var {{ module }} = {};
-{{ module }}.map = null; {{ module }}.panel = null; {{ module }}.layers = {}; {{ module }}.info = null; {{ module }}.popup = null;
+{{ module }}.map = null; {{ module }}.panel = null; {{ module }}.layers = {}; {{ module }}.layerstyle = {}; {{ module }}.info = null; {{ module }}.popup = null;
 {% endblock %}
 
 var base_layer = new ol.layer.Tile({
     source: new ol.source.OSM(),
 });
 
 {% for layer in map_layers %}
+{{ module }}.layerstyle[{{ forloop.counter0 }}] = [new ol.style.Style({
+        image: new ol.style.Icon(({
+                src: '{{ layer.external_graphic }}',
+              }))
+    })];
+
 {{ module }}.layers[{{ forloop.counter0 }}] = new ol.layer.Vector({
-    source: new ol.source.Vector({
-        parser: new ol.parser.GeoJSON(),
+    source: new ol.source.GeoJSON({
         url: '{{ layer.url }}'
     }),
-    style: new ol.style.Style({
-        symbolizers: [
-            new ol.style.Icon({
-                url: '{{ layer.external_graphic }}',
-            })
-        ]
-    }),
-    transformFeatureInfo: function(features) {
-        if (features.length > 0) {
-            var content = {};
-            content.name = features[0].get('name');
-            content.url = features[0].get('url');
-            content.image = features[0].get('image');
-            content.geometry = features[0].getGeometry();
-            content.coordinates = features[0].getGeometry().getCoordinates();
-            return content;
-        };
+    styleFunction: function(feature, resolution) {
+        return {{ module }}.layerstyle[{{ forloop.counter0 }}];
     }
 });
 {% endfor %}
 
 {{ module }}.map = new ol.Map({
-    target: '{{ module }}_map',
     layers: [
         base_layer{% for layer in map_layers %}, {{ module }}.layers[{{ forloop.counter0 }}]{% endfor %}
     ],
     renderer: ol.RendererHint.CANVAS,
+    target: document.getElementById('{{ module }}_map'),
     view: new ol.View2D({
       center: [-2400000, 3000000],
       zoom: 2
@@ -64,47 +54,38 @@ var base_layer = new ol.layer.Tile({
 
 $({{ module }}.map.getViewport()).on('mousemove', function(evt) {
   var pixel = {{ module }}.map.getEventPixel(evt.originalEvent);
-  var position = {{ module }}.map.getEventCoordinate(evt.originalEvent);
-  {{ module }}.map.getFeatureInfo({
-    pixel: pixel,
-    layers: [{% for layer in map_layers %}{% if forloop.first %}{% else %}, {% endif %}{{ module }}.layers[{{ forloop.counter0 }}]{% endfor %}],
-    success: function(layerFeatures) {
-      var flattenFeatures = [];
-      for (i = 0; i < layerFeatures.length; i++ ) {
-          if (layerFeatures[i]) {
-             flattenFeatures = flattenFeatures.concat(layerFeatures[i]);
-          }
-      }
-      var feature = flattenFeatures[0];
-      if (feature) {
-        {{ module }}.popup.setPosition([feature.coordinates[0], feature.coordinates[1] - 150000]); // TODO bug zoom-pixel!!!
-        var content = "";
-        if (feature.image) {
-            content = "<a href=\"" + feature.url + "\"><img src=\""  + feature.image + "\"></a>"
-        };
-        {{ module }}.info.popover('hide')
-            .attr('data-original-title', "<a href=\"" + feature.url + "\">"  + feature.name + "</a>")
-            .attr('data-content', content)
-            .popover('show');
-      } else {
-        {{ module }}.info.popover('hide');
-      }
-    }
+  var allFeaturesAtPixel = [];
+  {{ module }}.map.forEachFeatureAtPixel(pixel, function(feature) {
+    allFeaturesAtPixel.push(feature);
   });
+
+  if (allFeaturesAtPixel.length > 0) {
+    var feature = allFeaturesAtPixel[0];
+    var coordinates = feature.getGeometry().getCoordinates();
+    var pixel = {{ module }}.map.getPixelFromCoordinate(coordinates);
+    {{ module }}.popup.setPosition({{ module }}.map.getCoordinateFromPixel([pixel[0], pixel[1] + 5]));
+    var content = "";
+    if (feature.get('image')) {
+        content = "<a href=\"" + feature.get('url') + "\"><img src=\""  + feature.get('image') + "\"></a>"
+    };
+    {{ module }}.info.popover('hide')
+        .attr('data-original-title', "<a href=\"" + feature.get('url') + "\">"  + feature.get('name') + "</a>")
+        .attr('data-content', content)
+        .popover('show');
+  } else {
+    {{ module }}.info.popover('hide');
+  }
 });
 
 $({{ module }}.map.getViewport()).on('click', function(evt) {
   var pixel = {{ module }}.map.getEventPixel(evt.originalEvent);
-  {{ module }}.map.getFeatures({
-    pixel: pixel,
-    layers: [{% for layer in map_layers %}{% if forloop.first %}{% else %}, {% endif %}{{ module }}.layers[{{ forloop.counter0 }}]{% endfor %}],
-    success: function(layerFeatures) {
-      var flattenFeatures = [].concat.apply([], layerFeatures);
-      var feature = flattenFeatures[0];
-      if (feature) {
-        window.location.href = feature.e.url;
-      } else {
-      }
-    }
+  var allFeaturesAtPixel = [];
+  {{ module }}.map.forEachFeatureAtPixel(pixel, function(feature) {
+    allFeaturesAtPixel.push(feature);
   });
+
+  if (allFeaturesAtPixel.length > 0) {
+    var feature = allFeaturesAtPixel[0];
+    window.location.href = feature.get('url');
+  }
 });