stop.html

{% extends "layout.html" %}

{% block title %}Parada {{stop.stop_code}}{% endblock %}

{% block head %}
	{{ super() }}
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
      .popover {
      	width: 200px;
      }
    </style>
    <script src="http://openlayers.org/en/v3.2.1/build/ol.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{% endblock %}

{% block body %}

<ol class="breadcrumb">
  <li><a href="/">Inicio</a></li>
  <li><a href="/stops/{{stop.stop_id}}">Parada {{stop.stop_code}}</a></li>
</ol>

<div class="row">
	<div class="col-md-4">
		<dl class="dl-horizontal">
			<dt>Codigo</dt>
			<dd>{{stop.stop_code or ""}}</dd>
			<dt>Latitud, Longitud</dt>
			<dd>{{stop.stop_lat}}, {{stop.stop_lon}}</dd>
			<dt>Nombre</dt>
			<dd>{{stop.stop_name or ""}}</dd>
			<dt>Calle</dt>
			<dd>{{stop.stop_calle or ""}}</dd>
			<dt>Numero</dt>
			<dd>{{stop.stop_numero or ""}}</dd>
			<dt>Entre calles</dt>
			<dd>{{stop.stop_entre or ""}}</dd>
			<dt>Esquina</dt>
			<dd>{{stop.stop_esquina or ""}}</dd>
		</dl>
	</div>
	<div class="col-md-8">
		<div id="map" class="map">
			<div id="popup"></div>
		</div>
	</div>
</div>

<h2>Rutas</h2>
<table class="table table-striped">
	<thead>
		<tr>
			<th>Nombre corto</th>
			<th>Activa</th>
			<th>Tipo</th>
			<th>Descripción</th>
		</tr>
	</thead>
{%for route in routes%}
	<tr>
		<td><a href="/routes/{{route.route_id}}">{{route.route_short_name}}</a></td>
		<td>{{"Si" if route.active else "No"}}</td>
		<td>{{route.route_type or ""}}</td>
		<td>{{route.route_desc or ""}}</td>
	</tr>
{%endfor%}
</table>



<script type="text/javascript">

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([
  	{{stop.stop_lon|tojson}}, {{stop.stop_lat|tojson}}
  	], 'EPSG:4326',
  'EPSG:3857')),
  name: '{{stop.stop_name}}',
  stop_id: '{{stop.stop_id}}',
  stop_code: '{{stop.stop_code}}'
});

var circleStyle = new ol.style.Style({
    image: new ol.style.Circle({
      fill: new ol.style.Fill({
        color: '#FFF'
      }),
      stroke: new ol.style.Stroke({
        color: '#000',
        width: 2
      }),
      radius: 8
    })
  })

iconFeature.setStyle(circleStyle);

var vectorSource = new ol.source.Vector({
  features: [iconFeature]
});

var vectorLayer = new ol.layer.Vector({
	source: vectorSource,
	// style: function (feature, resolution) {
	// 	return [new ol.style.Style({
	// 		stroke: new ol.style.Stroke({color: 'blue', width: 3}),
	// 		fill: new ol.style.Fill({
	// 			color: 'blue'
	// 		})
	// 	})];
	// }
});

var map = new ol.Map({
	target: 'map',
	layers: [
	new ol.layer.Tile({
		source: new ol.source.OSM()
	}),
	vectorLayer
	],
	view: new ol.View({
		center: ol.proj.transform([{{stop.stop_lon|tojson}},
  	{{stop.stop_lat|tojson}}], 'EPSG:4326', 'EPSG:3857'),
		zoom: 13
	})
});

var element = document.getElementById('popup');

var popup = new ol.Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false
});

map.addOverlay(popup);

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });
  if (feature) {
    var geometry = feature.getGeometry();
    var coord = geometry.getCoordinates();
    popup.setPosition(coord);
    $(element).popover({
      'placement': 'top',
      'html': true,
      'title': feature.get('stop_code'),
      'content': feature.get('name')
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }
});

	vectorLayer.on('change', function (evt) {
		var source = vectorLayer.getSource(),
			extent = source.getExtent(),
			features = source.getFeatures()[0];

		console.log(features.getGeometry());

		map.getView().fitExtent(extent, map.getSize());

	});

</script>

{% endblock%}