<?php
/**
* this view generates fields for search form
* <br/><br/>
* @author Gabriele Droege, Patricia Kelbert (BGBM, GGBN/DNA Bank Network) <contact@dnabank-network.org>
* @version yii 2.0.3
* @package View
* @var $this SearchController
* @var $model SearchForm
* @var $selectionLists - created in the controller
* @var $form CActiveForm
* @copyright Copyright © 2011 DNA Bank Network http://www.dnabank-network.org
* <br/>The contents of this file are subject to the Mozilla Public License Version 1.1
* @filesource
* @license http://www.mozilla.org/MPL/ MPL
*/
use yii\helpers\Html;
use yii\web\View;
use yii\helpers\Url;
use yii\jui\Dialog;
// $this->title = 'Search';
// $this->params ['breadcrumbs'] [] = $this->title;
?>
<style>
<!--
#logos img{max-height:160px;}
-->
</style>
<link rel="stylesheet"
href="<?php echo Yii::$app->request->baseUrl?>/css/map/ol.css"
type="text/css">
<link rel="stylesheet" type="text/css"
href="<?php echo Yii::$app->request->baseUrl?>/css/jquery.jqplot.min.css" />
<script src="<?php echo Yii::$app->request->baseUrl?>/js/ol.js"></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="http://www.mapquestapi.com/sdk/leaflet/v2.s/mq-map.js?key=eqbZNOKhjQJ1MKLfU5ufkA7Nox2G0ySA"></script>
<script type="text/javascript" src="<?php echo Yii::$app->request->baseUrl?>/js/jquery.jqplot.min.js"></script>
<script type="text/javascript"
src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript"
src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript"
src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript"
src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript"
src="<?php echo Yii::$app->request->baseUrl?>/js/jqplot.cursor.min.js"></script>
<div class="jumbotron">
<h2>NAGB Members<br/>
Click on icons to learn more</h2>
</div>
<div class="container">
<div class="container-fluid" >
<div class="row-fluid">
<div id="mapdiv"></div>
</div>
</div>
<br />
<?php
Dialog::begin ( [
'clientOptions' => [
'modal' => true,
'title' => "NAGB Member Details",
'width' => "800px",
'id' => 'logodiv',
'class' => "feedbackclass",
'buttons' => [ ]
],
'id' => 'logodiv',
'class' => "feedbackclass"
] );
echo "<span id='dialog-content'></span><br/>";
// echo Html::button('Close', ['class' => 'btn btn-primary', 'name' => 'feedback-button', 'id'=>'close-button']);
Dialog::end ();
$i = 0;
?>
<br/>
<hr/>
<div class="col-lg-6" id="chartmembers" style="margin-top: 20px; width: 800px; height: 400px;"></div>
<br/>
<div class="clearer"></div>
<button class="button-reset">Reset Zoom</button>
<br/>
<hr/>
<div class="clearer"></div>
<script>
map = L.map('mapdiv', {
layers: MQ.mapLayer(),
center: [49.7,15.6],
zoom: 7
});
L.control.layers({
'Map': MQ.mapLayer(),
'Dark': MQ.darkLayer(),
'Light': MQ.lightLayer(),
'Satellite': MQ.satelliteLayer()
}).addTo(map);
/*var map = new OpenLayers.Map({
div:"mapdiv",
projection: "EPSG:900913",
layers: [
new OpenLayers.Layer.XYZ(
"OpenStreetMap",
[
"http://otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
"http://otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
"http://otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
"http://otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png"
],
{
attribution: "Map provided by <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a>, <a href='http://www.openstreetmap.org/' target='_blank'>Open Street Map</a> and contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/' target='_blank'>CC-BY-SA</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
transitionEffect: "resize"
}
),
],
center: [0, 0],
zoom: 2,
width:"auto",height:"auto"
});
var epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
var projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
var vectorLayer = new OpenLayers.Layer.Vector("Overlay");*/
<?php
foreach ( $latitude as $il => $la ) {
if (! empty ( $longitude [$il] ) && ! empty ( $latitude [$il] ))
/* echo "
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point( " . $longitude [$il] . ", " . $latitude [$il] . " ).transform(epsg4326, projectTo),
{description:'" . $names [$il] . "'} ,
{externalGraphic: 'http://localhost".Yii::$app->request->baseUrl."/images/ngbz_dna_barva.png', graphicHeight: 15, graphicWidth: 15, graphicXOffset:-12, graphicYOffset:-10 }
);
vectorLayer.addFeatures(feature);";*/
echo "icon = L.icon({
iconSize: [20, 20],
iconUrl: '".Yii::$app->request->baseUrl."/".Yii::$app->params['mapiconfile']."',
iconDescription: 'hallo'
})
map.addLayer(L.marker([".$latitude [$il].", ".$longitude [$il]."],{icon: icon}).addTo(map).bindPopup('".$names [$il]."'));";
}
?>
//map.addLayer(vectorLayer);
//Add a selector control to the vectorLayer with popup functions
/*var controls = {
selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
};
function createPopup(feature) {
feature.popup = new OpenLayers.Popup.FramedCloud("pop",
feature.geometry.getBounds().getCenterLonLat(),
null,
'<div class="markerContent">'+feature.attributes.description+'</div>',
null,
true,
function() { controls['selector'].unselectAll(); }
);
//feature.popup.closeOnMove = true;
map.addPopup(feature.popup);
}
function destroyPopup(feature) {
feature.popup.destroy();
feature.popup = null;
}
map.addControl(controls['selector']);
controls['selector'].activate(); */
$(function() {
$( "#logodiv" ).dialog({
autoOpen: false,
modal: true,
});
$( "#logos img" ).click(function(event) {
i=event.target.id.split("image-")[1];
partner="#partner-"+i;
text=$(partner).html();
$( "#dialog-content" ).html(text);
$( "#logodiv" ).dialog( "open" );
});
$('#close-button').click(function() {
$('#logodiv').dialog("close");
});
$( "#logodiv" ).on('clickoutside',function(){
$('#logodiv').dialog('close');
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var joiningAll=<?php echo $joiningAll;?>;
var joiningCore=<?php echo $joiningCore;?>;
var joiningAssociate=<?php echo $joiningAssociate;?>;
var joiningObserver=<?php echo $joiningObserver;?>;
$.jqplot.config.enablePlugins = true;
var joiningplot = $.jqplot('chartmembers', [joiningAll, [['2009', 3], ['2011', 5], ['2015', 12], ['2014', 11], ['2013', 8], ['2016', 16], ['2007', 0]], joiningAssociate, joiningObserver], {
title:'Members, by year',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
tickOptions:{formatString:'%Y',angle: 25},
tickInterval:'1 year',
min:'January 1, 2009 8:00AM',
},
yaxis: { }
},
series:[{label: ' All',lineWidth:4, markerOptions:{style:'square'}},
{label: ' Core',lineWidth:4, markerOptions:{style:'square'}},
{label: ' Associate',lineWidth:4, markerOptions:{style:'square'}},
{label: ' Observer',lineWidth:4, markerOptions:{style:'square'}},
],
legend: { show:true ,location: 'e' , placement : "outside", },
cursor:{
show: true,
zoom:true,
showTooltip:false
}
});
$('.button-reset').click(function() { joiningplot.resetZoom() });
});
</script>
</div>