location.html

---
layout: default
---
{% capture lvl %}{{ page.url | append:'index.html' | split:'/' | size }}{% endcapture %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

<div class="col-md-12">
    <div id="map-container">
      <div id="map"></div>
      <i class="map-top"></i>
      <!-- <i class="map-left"></i> -->
    </div>
    <div class="row">
      <div class="col-md-4 col-md-offset-1 side-list">
        <div class="point-counter">
        	<span class="count-highlight">{{page.title}} Parklet</span>
        	<p class="address">{{page.address}}</p>
        	<p class="address">{{page.install_date}}</p>
        </div>
        <div class="list-group" id="listings">
        	<div class="reveal">
        		<img src="{{relative}}images/{{ page.image }}" class="sidebar">
        		<h2 class="list-tags">Ammenities:</h2>
						{% if page.tags %}
							<ul class="list-inline">
								{% for tag in page.tags %}
									<li><i class="icon-check" style="color:#428bca;"></i> {{tag}} </li>
								{% endfor %}
							</ul>
						{% endif %}
					</div>
				</div>
			</div>
	    <div class="col-md-1 col-md-offset-11 flag fixed">
	      <div class="point-counter"><p>Crafted By:</p>
	        <a href="https://github.com/mick/jekyllmap"><img src="{{relative}}assets/img/cfa_flag.png" width="50px" height="30px" /></a>
	      </div>
	    </div>
		</div>
	</div>
</div>

	<div class="col-md-8">
		<div id="map-container">
			<div id="map"></div>

			<!-- <i class="map-top"></i> -->
			<i class="map-left"></i>
		</div>
	</div>
</div>



<script>
  var markerIconActive = L.AwesomeMarkers.icon({
    icon: 'coffee',
    color: 'blue'
  });

  var popupContent = '<div class="popHead" class="text-center"><strong>{{ page.address }}</strong></div><div class="metadata"><strong>Host:</strong> {{ page.title }}<br /><strong>Opened:</strong> {{ page.install_date }}</div><div class="text-center"><a href="https://maps.google.com/?q={{page.latitude}},{{page.longitude}}" type="button" class="btn btn-default btn-xs">Get Directions <i class="icon-chevron-sign-right" style="color:#428bca;"></i></a></div>';

  var map = L.map('map', {scrollWheelZoom: false}).setView([ {{ page.latitude }}, {{ page.longitude }} ], 14);

  // hacky solution to move map over to fit point with sidebar in view
  // paddingTopLeft option is only available to the fitBounds() method
  var bounds = map.getBounds([{{page.latitude}}, {{page.longitude}}]);
  map.fitBounds(bounds, {paddingTopLeft: [200, 0]}).setZoom(14);

  L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png', {
    maxZoom: 18
  }).addTo(map);

  var marker = L.marker([ {{page.latitude }}, {{ page.longitude }} ], {icon: markerIconActive}).addTo(map);

  var popup = L.popup({closeButton: false, keepInView: true, closeOnClick: false}).setLatLng([{{page.latitude}},{{page.longitude}}]).setContent(popupContent);

  marker.bindPopup(popup).openPopup();

</script>

<script src="{{ site.baseurl }}/map.geojson"></script>
<script src="{{ site.baseurl }}/assets/js/mapping.js"></script>