diff --git a/observations/static/observations/images/bug.png b/observations/static/observations/images/bug.png new file mode 100644 index 0000000000000000000000000000000000000000..e7a48707ddd5728cd10d07889d46b64d67bbe85a Binary files /dev/null and b/observations/static/observations/images/bug.png differ diff --git a/observations/static/observations/images/bug_medium.png b/observations/static/observations/images/bug_medium.png new file mode 100644 index 0000000000000000000000000000000000000000..07c546946090b01e75d5f79324498148468bf730 Binary files /dev/null and b/observations/static/observations/images/bug_medium.png differ diff --git a/observations/static/observations/js/observationViewMap.js b/observations/static/observations/js/observationViewMap.js index 43a88c5e9ae4a654fdfd98926d63a984947ee289..fe85e9e04d4683a18ce32ecc7573a525a2196e0a 100644 --- a/observations/static/observations/js/observationViewMap.js +++ b/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 diff --git a/observations/templates/observations/detail.html b/observations/templates/observations/detail.html index f0c72b4b018ca27eb2ae2808f593d53b70e25715..cfbbe40899b4feee5fcce75f3e5c1b7f22cbd87a 100644 --- a/observations/templates/observations/detail.html +++ b/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>