Added view of locations, not just random GeoJSON

observations/static/observations/js/observationViewMap.js

@@ -21,7 +21,7 @@
 var map;
 var observationLayer;
 
-var initMap = function(geoJSON, container, mapAttribution)
+var initMap = function(geoJSON, poi, container, mapAttribution)
 {
 	var backgroundLayer = new ol.layer.Tile({
    	 	source: new ol.source.OSM({
@@ -50,49 +50,79 @@ var initMap = function(geoJSON, container, mapAttribution)
 	map.setView(view);
 	
 	var features = new ol.Collection();
-	var featureOverlay = new ol.layer.Vector({
-	    source: new ol.source.Vector({
-	      features: features
-	    }),
-	    style: new ol.style.Style({
-	      fill: new ol.style.Fill({
-	        color: 'rgba(255, 0, 255, 0.2)'
-	      }),
-	      stroke: new ol.style.Stroke({
-	        color: '#ff00ff',
-	        width: 2
-	      }),
-	      image: new ol.style.Circle({
-	        radius: 7,
-	        fill: new ol.style.Fill({
-	          color: '#ff00ff'
-	        })
-	      })
-	    })
-	  });
-	var format = new ol.format.GeoJSON();
-    var drawnfeatures = format.readFeatures(geoJSON, {
-      dataProjection: 'EPSG:4326',
-      featureProjection: map.getView().getProjection().getCode()
-    });
+	if(geoJSON != null)
+	{
+		var featureOverlay = new ol.layer.Vector({
+		    source: new ol.source.Vector({
+		      features: features
+		    }),
+		    style: new ol.style.Style({
+		      fill: new ol.style.Fill({
+		        color: 'rgba(255, 0, 255, 0.2)'
+		      }),
+		      stroke: new ol.style.Stroke({
+		        color: '#ff00ff',
+		        width: 2
+		      }),
+		      image: new ol.style.Circle({
+		        radius: 7,
+		        fill: new ol.style.Fill({
+		          color: '#ff00ff'
+		        })
+		      })
+		    })
+		  });
+	
+	
+		var format = new ol.format.GeoJSON();
+	    var drawnfeatures = format.readFeatures(geoJSON, {
+	      dataProjection: 'EPSG:4326',
+	      featureProjection: map.getView().getProjection().getCode()
+	    });
+	
     
-    // TODO: Convert small areas to points on large scale views
-    /**
-    for(var i in drawnfeatures)
-    {
-    	console.log(drawnfeatures[i].getGeometryName());
-    	var geome = drawnfeatures[i];
-    	if(geome.getGeometry() instanceof ol.geom.Polygon)
-    	{
-    		console.log(geome.getGeometry().getArea());
-    	}
-    	
-    }
-    console.log(drawnfeatures);
-    */
-    //featureOverlay.clear(true);
-    featureOverlay.getSource().addFeatures(drawnfeatures);
-    featureOverlay.setMap(map);
-    extent = featureOverlay.getSource().getExtent();
-    map.getView().fit(extent, map.getSize());
+	    // TODO: Convert small areas to points on large scale views
+	    /**
+	    for(var i in drawnfeatures)
+	    {
+	    	console.log(drawnfeatures[i].getGeometryName());
+	    	var geome = drawnfeatures[i];
+	    	if(geome.getGeometry() instanceof ol.geom.Polygon)
+	    	{
+	    		console.log(geome.getGeometry().getArea());
+	    	}
+	    	
+	    }
+	    console.log(drawnfeatures);
+	    */
+	    //featureOverlay.clear(true);
+	    featureOverlay.getSource().addFeatures(drawnfeatures);
+	    featureOverlay.setMap(map);
+		
+	    extent = featureOverlay.getSource().getExtent();
+	    map.getView().fit(extent, map.getSize());
+	}
+	else
+	{
+		/*var poiLayer = new ol.layer.Vector({
+		    source: new ol.source.Vector({
+		        url: "http://" + settings.vipslogicServerName + "/rest/pois/kml/" + settings.vipsOrganizationId + "?excludePoiId=" + poi.pointOfInterestId,
+		            projection: "EPSG:3857",
+		            format: new ol.format.KML()
+		      })
+		    });
+		    map.addLayer(poiLayer);*/
+		    var centerPosition =ol.proj.transform([poi.longitude,poi.latitude], 'EPSG:4326', map.getView().getProjection().getCode()); 
+		    view.setCenter(centerPosition);
+		    
+		    // Marker overlay
+		    stationMarker = new ol.Overlay({
+		      position: centerPosition,
+		      positioning: 'bottom-center',
+		      element: document.getElementById('poiMarker'),
+		      stopEvent: false
+		    });
+		    
+		    map.addOverlay(stationMarker);
+	}
 }
\ No newline at end of file

observations/templates/observations/detail.html

@@ -45,6 +45,7 @@
 			<div id="observationViewMap" class="map" style="height: 400px;"></div>
 		</div>
 	</div>
+	<div style="display: none;"><div id="poiMarker" title="Marker"><img src="{% static "observations/images/bug_medium.png" %}"/></div></div>
 </div>
 {% endblock %}
 {% block customCSS %}
@@ -87,7 +88,16 @@
 		  		var illustration = observation.observationIllustrationSet[0]; 
 		  		document.getElementById("observationIllustration").innerHTML = "<img src='http://" + settings.vipslogicServerName + "/static/images/observations/" + observation.organismId + "/" + illustration.observationIllustrationPK.fileName + "' class='img-responsive'/>";
 		  	}
-		  	initMap(observation.geoinfo,"observationViewMap","{{settings.MAP_ATTRIBUTION|safe}}");
+		  	if(observation.locationPointOfInterestId > 0)
+		  	{
+		  		$.getJSON( "http://" + settings.vipslogicServerName + "/rest/poi/" + observation.locationPointOfInterestId , function( poi ) {
+		  			initMap(null,poi,"observationViewMap","{{settings.MAP_ATTRIBUTION|safe}}")
+		  		});
+		  	}
+		  	else
+		  	{
+		  		initMap(observation.geoinfo,null,"observationViewMap","{{settings.MAP_ATTRIBUTION|safe}}");
+		  	}
 		  });
 	});
 </script>