flask-boilerplate/app/templates/map.html

{% extends "layout.html" %}

{% block head %}
    {{ super() }}
    <!-- Leaflet JS -->
    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
    <!-- Leaflet CSS -->
    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet'/>
    <!-- Map style -->
    <style>
    #map {
    	height: 600px;
    }
    </style>
{% endblock %}

{% block content %}

	   <h1 class="ui header">{{ title }}</h1>

    {% if current_user.is_authenticated %}
        <h2 class="ui header">Hi {{ current_user.name }}!</h2>
    {% endif %}

    <div id="map"></div>
    
    <script type="text/javascript">

        L.mapbox.accessToken = 'pk.eyJ1IjoibGVtYXgiLCJhIjoidnNDV1kzNCJ9.iH26jLhEuimYd6vLOO6v1g';
        var map = L.mapbox.map('map', 'mapbox.outdoors', {
            maxZoom: 20,
            fullscreenControl: true,
            zoomControl: false
        })
        var layers = {
            "Baisc": L.mapbox.tileLayer('mapbox.outdoors').addTo(map),
            "Light": L.mapbox.tileLayer('mapbox.light'),
            "Dark": L.mapbox.tileLayer('mapbox.dark'),
            "Comics": L.mapbox.tileLayer('mapbox.comic'),
            "Pencil": L.mapbox.tileLayer('mapbox.pencil')
        }
        L.control.layers(
            layers,
            null,
            {position: 'topleft'}
        ).addTo(map);
        map.setView({{[48.8534100, 2.3488000]}}, 13);

        markers = [];

        function remove_points(points){
            for (i in points){
                map.removeLayer(points[i])
            }
        }

        function refresh_points(){
            $.ajax({
                type: "POST",
                async: true,
                url: "/map/refresh"
            }).done(function(response){
                remove_points(markers);
                points = response.points;
                for (i in points){
                    marker = L.marker(points[i]);
                    markers.push(marker);
                    marker.addTo(map);
                }
            });
        }

        refresh_points();
        window.setInterval(function(){
            refresh_points();
        }, 1000);

    </script>

{% endblock %}