Map: geojson response - first display of items on map

1 files changed, 44 insertions, 4 deletions

diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index 8fb01f06c..f1fbca3e1 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -1,5 +1,7 @@
 /* layers */
 
+var default_pointer = "../media/images/default-pointer.png";
+
 var source_osm = function(options){
     return new ol.layer.Tile({
         source: new ol.source.OSM()
@@ -15,7 +17,6 @@ var get_layers = function(layers){
     if (!layers){
         layers = [{'type': 'osm', 'options': null}];
     }
-    console.log(layers);
     var ol_layers = [];
     for (idx in layers){
         var layer_attr = layers[idx];
@@ -31,20 +32,59 @@ var get_layers = function(layers){
 var get_markers = function(points){
 };
 
+/* styles */
+var get_style = function(feature){
+    /*
+    properties = feature.getProperties();
+    var size = [properties.icon_width, properties.icon_height];
+    var anchor = [properties.icon_offset_x,
+                  properties.icon_offset_y];
+
+    return new ol.style.Style({
+        image: new ol.style.Icon({
+            anchor: [17, 50],
+            anchorXUnits: 'pixels',
+            anchorYUnits: 'pixels',
+            src: default_pointer,
+            size: [35, 50]
+        })
+    });
+    */
+    var image = new ol.style.Circle({
+        radius: 5,
+        fill: null,
+        stroke: new ol.style.Stroke({color: 'red', width: 1})
+    });
+
+    return new ol.style.Style({
+        image: image
+    });
+};
+
 
 /* display map */
 
 var display_map = function(map_id, points, layers){
+    console.log((new ol.format.GeoJSON()).readFeatures(points));
+    var vector_source = new ol.source.Vector({
+        features: (new ol.format.GeoJSON()).readFeatures(points)
+    });
+
+    var vector_layer = new ol.layer.Vector({
+        source: vector_source,
+        style: get_style
+    });
+
+    var map_layers = get_layers(layers);
+    map_layers.push(vector_layer);
     var map = new ol.Map({
         target: map_id,
-        layers: get_layers(layers),
+        layers: map_layers,
         view: new ol.View({
             center: ol.proj.fromLonLat([37.41, 8.82]),
             zoom: 4
         })
     });
-    get_markers(points);
-
 
 }