Awesome mapbox gist for Agata

html

{% extends "calf_tracker/base.html" %}

{% load i18n %}
{% load staticfiles %}
{% load common_tags %}

{% block extrastyle %}
  {{ block.super }}

{% endblock %}

{% block title %}
    {% trans "title-calf-tracker" %} - {% trans "title-manage-practice" %}
{% endblock %}

{% block content %}
<div id="wrapper" class="animated fadeIn">
    <div class="container top-bar">
        <div class="columns">
            <div class="column col-12" style="align-self: flex-end;">
                <ul class="breadcrumbs">
                    <li><a href="{% url 'calf-home' %}">{% trans "title-farm-list" %}</a></li>
                    <li>{% trans "title-manage-practice" %}: {{ request.umm_user.default_organization_name }}</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container container-manage-practice">
        {% include 'fragments/messages.html' %}

        <div class="box">
            <form class="basic-form form-manage-practice" action="." method="post" enctype="multipart/form-data">
                <div class="container">
                    {% csrf_token %}

                    {{ form.mapbox_param }}
                    <div class="columns">
                        <div class="column col-12">
                            <h2>{% trans "title-manage-practice" %}</h2>
                        </div>
                    </div>
                    <div class="columns mb-2">
                        <div class="column col-6">
                            {% render_field form.name %}
                            {% render_field form.address1 %}
                            {% render_field form.address2 %}
                            {% render_field form.address3 %}
                            {% render_field form.city %}
                            {% render_field form.country %}
                            {% render_field form.postal_code %}
                            {% render_field form.email %}
                            {% render_field form.phone_number %}
                            {% render_field form.phone_number2 %}
                            {% render_field form.website_url %}
                            {% render_field form.facebook_url %}
                            {% render_field form.twitter_url %}
                            {% render_field form.opening_hours %}
                            {% render_field form.consulting_hours %}
                        </div>
                        <div class="column col-6">
                            <div class="columns">
                                <div class="column col-12">
                                    <fieldset class="fieldset-select">
                                        <label>
                                            {% trans "label-created-date" %}
                                        </label>
                                        <input type="text" maxlength="255" value="{{ form.instance.created_at }}" readonly disabled />
                                    </fieldset>
                                    {% render_field form.umm_org_id %}
                                    {% render_field form.umm_region %}
                                    <div class="divider"></div>
                                </div>
                            </div>

                            <div class="columns" id="clinic-map-wrapper">
                                <div class="column col-12">
                                    <h2>{% trans "location-map-text" %}</h2>
                                    <p class="footnote" style="margin-top:-12px;">
                                        {% trans "click-anywhere-text" %}
                                    </p>
                                </div>
                                <div class="column col-12" style="position: relative; height: 320px;">
                                    <div id="clinic-map" class="map"></div>
                                </div>
                            </div>


                            <div class="columns mb-4">
                                <div class="column col-12 mb-4">
                                    <div class="h1">{% trans "label-practice-logo" %}</div>
                                </div>
                                <div class="column col-12 mb-2">
                                    {% if form.instance.logo %}
                                    <div><img id="logo_preview" src="{{ form.instance.logo.url }}" /></div>
                                    {% else %}
                                    <div><img id="logo_preview" /></div>
                                    {% endif %}
                                    <fieldset class="fieldset-file">
                                        <label>
                                            {% trans "label-practice-logo" %}
                                        </label>
                                        <input type="file" name="logo" id="id_logo">
                                    </fieldset>
                                </div>
                                <div class="column col-12 text-small">
                                    {% trans "text-practice-logo-instructions" %}
                                </div>
                            </div>

                            <div class="columns mb-4">
                                <div class="column col-12 mb-4">
                                    <div class="divider"></div>
                                    <div class="h1">{% trans "label-practice-banner" %}</div>
                                </div>
                                <div class="column col-12 mb-2">
                                    {% if form.instance.banner %}
                                    <div><img id="banner_preview" src="{{ form.instance.banner.url }}" /></div>
                                    {% else %}
                                    <div><img id="banner_preview" /></div>
                                    {% endif %}
                                    <fieldset>
                                        <label>
                                            {% trans "label-practice-banner" %}
                                        </label>
                                        <input type="file" name="banner" id="id_banner">
                                    </fieldset>
                                </div>
                                <div class="column col-12 text-small">
                                    {% trans "text-practice-banner-instructions" %}
                                </div>
                            </div>

                            <div class="columns">
                                <div class="column col-12 mb-4">
                                    <div class="divider"></div>
                                    <div class="h1">{% trans "label-practice-footer-logo" %}</div>
                                </div>
                                <div class="column col-12 mb-2">
                                    {% if form.instance.footer_logo %}
                                    <div><img id="footer_logo_preview" src="{{ form.instance.footer_logo.url }}" /></div>
                                    {% else %}
                                    <div><img id="footer_logo_preview" /></div>
                                    {% endif %}
                                    <fieldset>
                                        <label>
                                            {% trans "label-practice-footer-logo" %}
                                        </label>
                                        <input type="file" name="footer_logo" id="id_footer_logo">
                                    </fieldset>
                                </div>
                                <div class="column col-12 text-small">
                                    {% trans "text-practice-footer-logo-instructions" %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="columns">
                        <div class="column col-12">
                            <fieldset class="notes">
                                <input value="{% trans 'text-button-save' %}" type="submit">
                            </fieldset>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scriptnocompress %}
    {{ block.super }}

    <script src='https://api.tiles.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />

    <script type="text/javascript">
        (function(window, _, $, L) {
            function ImagePreviewWidget(options) {
                var _this = this;
                var defaults = {
                    logoPreviewID: 'logo_preview',
                    bannerPreviewID: 'banner_preview',
                    footerLogoPreviewID: 'footer_logo_preview',

                    logoID: 'id_logo',
                    bannerID: 'id_banner',
                    footerLogoID: 'id_footer_logo'
                };
                var settings = $.extend({}, defaults, options || {});
                this.settings = settings;

                this.showPreview = function(el, field_id) {
                    var self = _this;
                    if (el.target.files && el.target.files[0]) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            document.getElementById(field_id).setAttribute('src', e.target.result);
                        };
                        reader.readAsDataURL(el.target.files[0]);
                    }
                };
                this.init = function() {
                    var _this = this;

                    var inputLogo = document.getElementById(_this.settings.logoID)
                    inputLogo.addEventListener("change", function(el) {
                        _this.showPreview(el, _this.settings.logoPreviewID)
                    }, false);

                    var inputBanner = document.getElementById(_this.settings.bannerID)
                    inputBanner.addEventListener("change", function(el) {
                        _this.showPreview(el, _this.settings.bannerPreviewID)
                    }, false);

                    var inputFooterLogo = document.getElementById(_this.settings.footerLogoID)
                    inputFooterLogo.addEventListener("change", function(el) {
                        _this.showPreview(el, _this.settings.footerLogoPreviewID)
                    }, false);
                };
            }
            window.ImagePreviewWidget = ImagePreviewWidget;

            function MapBoxWidget(options) {
                var defaults = {
                    token: 'pk.eyJ1Ijoiem9ldGlzIiwiYSI6ImVtUU1ZS0UifQ.EMTXi0dSn87D696dH5pjkQ',
                    mapId: 'clinic-map',
                    mapType: 'zoetis.j5i5548n',
                    markerColor: '#fa0',
                    defaultLatlng: {
                        'lat': 51.5,
                        'lng': -0.92
                    }
                };
                var settings = $.extend({}, defaults, options || {});
                L.mapbox.config.FORCE_HTTPS = true;
                L.mapbox.accessToken = settings.token;
                this.settings = settings;
                this.marker = null;
                this.map = L.mapbox.map(settings.mapId, settings.mapType);
                this.geocoder = L.mapbox.geocoder('mapbox.places');
                this.markerOptions = {
                    icon: L.mapbox.marker.icon({
                            // 'marker-size': 'large',
                            'marker-symbol': 'dog-park',
                            'marker-color': settings.markerColor
                        }),
                    draggable: true
                };
                this.setMarker = function(latlng) {
                    if(this.marker) {
                        this.map.removeLayer(this.marker);
                    }
                    this.map.setView(latlng, 16);
                    var marker = L.marker(latlng, this.markerOptions).addTo(this.map);
                    document.getElementById("id_mapbox_param").value = JSON.stringify(latlng);
                    marker.on('dragend', function(){
                        var latlng = marker.getLatLng();
                        document.getElementById("id_mapbox_param").value = JSON.stringify(latlng);
                    });
                    this.marker = marker;
                };
                this.loadInitialData = function() {
                    var self = this;
                    var initialLatlng = document.getElementById("id_mapbox_param").value;
                    try {
                        var latlng = JSON.parse(initialLatlng);
                        self.setMarker(latlng);
                    } catch(e) {
                        // hide map?
                    }
                    self.map.on('click', function(e){
                        self.setMarker(e.latlng);
                    });
                };
                this.setGeocoderMarker = function(address) {
                    var self = this;
                    this.geocoder.query(address, function(err, data) {
                        if('latlng' in data) {
                            self.setMarker(data.latlng);
                        }
                    });
                }
            }
            window.MapBoxWidget = MapBoxWidget;

        })(window, _, jQuery, L);

        var mapbox = new MapBoxWidget();
        mapbox.loadInitialData();

        var imagePreviewWidget = new ImagePreviewWidget();
        imagePreviewWidget.init();

        $(document).ready(function() {
            var setMapboxMarker = _.debounce(function (e) {
                var address1 = $('#id_address1').val();
                var address2 = $('#id_address2').val();
                var address3 = $('#id_address3').val();
                var city = $('#id_city').val();
                var postalCode = $('#id_postal_code').val();
                var country = $('#id_country').val();
                if(_.every([postalCode, city]) && _.some([address1, address2, address3])) {
                    var addressQuery = [
                        country,
                        postalCode,
                        city,
                        address1,
                        address2,
                        address3
                    ].join(' ');
                    mapbox.setGeocoderMarker(addressQuery);
                }
            }, 500);
                
            $('#id_address1, #id_address2, #id_address3, #id_city, #id_postal_code').keyup(setMapboxMarker);
            $('#id_country').on('change', setMapboxMarker);
        });
    </script>
{% endblock %}

{% block mixpanel %}
    <script>
        mixpanel.track('Page Hit', {
            'View Name': 'Manage Practice',
            'URL Path': window.location.pathname
        });
    </script>
{% endblock %}