Template source: web_map.html

{% extends "base.html" %} {% load staticfiles %} {% load mapcomponent %} {% block extra_scripts %} {% include 'google_analytics.html' %} <script> MAP_NAME = "{{name}}"; MAP_SLUG = "{{slug}}"; MAP_TITLE = "{{title}}"; MAP_MARKER = "{% static 'img/marker3.png' %}"; HIGHLIGHT_LAYER = "{{highlight_layer}}"; ZOOM = {{ zoom }}; LAT = {{ lat }}; LNG = {{ long }}; </script> <script type="text/javascript" src="{% static 'js/search.js' %}"></script> <script type="text/javascript" src="{% static 'js/markerclusterer.js' %}"></script> <script type="text/javascript" src="{% static 'js/markerclusterer.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/crash_map.js' %}"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiGWB9vQSvAvuAZIvG177eGZcS2xXQyoQ" > </script> <script type="text/javascript" src="{% static 'js/map_styles.js' %}"></script> <!-- <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> --> <script type="text/javascript"> function initialize() { var dataURL = '{{ data_url }}'; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); ace.webMap = new WebMap(MAP_TITLE,MAP_NAME,MAP_SLUG,MAP_MARKER,map); ko.applyBindings(ace.webMap, $("body")[0]); } google.maps.event.addDomListener(window, 'load', initialize); </script> {% for layer in map.layers %} {% if layer.popover_template and layer.popover_template != map.popover_template %} {% include layer.popover_template with layer=layer %} {% else %} {% include map.popover_template with layer=layer %} {% endif %} {% endfor %} {% include 'layer_template.html' %} {% include 'layer_group_template.html' %} {% block search_result_template %} {% include 'search/result_template.html' %} {% endblock %} {% endblock %} {% block content %} {% if map.is_draft %} <div class="watermark">{% block watermark %}<p>DRAFT</p>{% endblock %}</div> {% endif %} {% load_map_components %} <div id="map-canvas"></div> <!-- Search Help Modal --> <div class="modal fade" id="search-help" tabindex="-1" role="dialog" aria-labelledby="search-helpLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">How to search the map</h4> </div> <div class="modal-body"> {% block help_text %} <p>To search the map, click and type in the search box found at the top of the layers panel. You can search for a road fatality using its <strong>accident type</strong>, <strong>parish</strong>, <strong>division</strong> or <strong>date</strong> properties.</p> <p>For example, searching for <strong>Kingston</strong> will find all fatalities that occurred in Kingston while searching for <strong>2015-02</strong> will find all fatalities that occurred in February 2015.</p> <p>Clicking on a search result will zoom to the point and display it's properties.</p> <h3><strong>Note</strong></h3> <ul> <li>Search will search all layers (including ones that are currently turned off).</li> <li>The date property is currently formatted as: YYYY-MM-DD, so all date queries will need to be in that format.</li> </ul> {% endblock %} </div> </div> </div> </div> {% endblock %} {% block footer %} <footer id="footer-ad"> <div id="sponsor-logos" class="text-center"> <a href="http://www.jngijamaica.com/"><span id="jngi-logo"></span></a> <a href="http://www.jnfoundation.com/"><span id="jn-foundation-logo"></span></a> <a href="https://www.calljaa.com/"><span id="jaa-logo"></span></a> </div> </footer> {% endblock %}