59 lines
2.3 KiB
HTML
59 lines
2.3 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
||
|
{% block content %}
|
||
|
<div class="row justify-content-center">
|
||
|
<div class="col-12 col-sm-8 col-md-6">
|
||
|
<div class="card">
|
||
|
<div class="card-header">
|
||
|
<h4 class="card-title mb-0"><b>{{ place.name }}</b></h4>
|
||
|
</div>
|
||
|
<div class="card-body row">
|
||
|
<div class="col-12" id="map" style="height: 500px;"></div>
|
||
|
</div>
|
||
|
<div class="card-body row">
|
||
|
<div class="col-6">
|
||
|
<p>
|
||
|
{{ place.address }}<br />
|
||
|
{{ place.postal }} {{ place.city }}<br />
|
||
|
{{ place.country.nameus }}
|
||
|
</p>
|
||
|
</div>
|
||
|
<div class="col-6 text-right">
|
||
|
{% if place.nbkm %}{{ place.nbkm }}km<br />{% endif %}
|
||
|
{% if place.timing %}{{ place.timing }}min<br />{% endif %}
|
||
|
{% if not place.active %}Inactive{% endif %}
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="card-footer pt-0">
|
||
|
<a href="{% url 'place_list' %}">
|
||
|
<button type="submit" value="add" class="btn btn-icon btn-warning ">
|
||
|
<i class="tim-icons icon-double-left"></i>
|
||
|
</button>
|
||
|
</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
{% endblock %}
|
||
|
|
||
|
{% block footerscript %}
|
||
|
<script type="text/javascript">
|
||
|
L.mapbox.accessToken = 'pk.eyJ1IjoiZ3RydWxsZW0iLCJhIjoiY2p2Mm5wa3YzMDE1eTQ0cDJlOGdsZno4ZCJ9.zrOWNO0F4VTd9_h-LSSkzw';
|
||
|
|
||
|
var geocoder = L.mapbox.geocoder('mapbox.places');
|
||
|
geocoder.query('{{ place.address }} {{ place.postal }} {{ place.city }}', showMap);
|
||
|
var map = L.mapbox.map('map').addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
|
||
|
|
||
|
function showMap(err, data) {
|
||
|
// The geocoder can return an area, like a city, or a point, like an
|
||
|
// address. Here we handle both cases, by fitting the map bounds to an
|
||
|
// area or zooming to a point.
|
||
|
if (data.lbounds) {
|
||
|
map.fitBounds(data.lbounds);
|
||
|
} else if (data.latlng) {
|
||
|
map.setView([data.latlng[0], data.latlng[1]], 10);
|
||
|
L.marker([data.latlng[0], data.latlng[1]]).addTo(map);
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
{% endblock %}
|