First Commit

app/assets/javascripts/api_carto/backend.js

@@ -0,0 +1,101 @@
+(function () {
+    OSM = L.tileLayer("http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png", {
+        attribution: '&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    });
+    mapId = "map_qp";
+
+    position = get_position();
+
+    map = L.map(mapId, {
+        center: new L.LatLng(position.lat, position.lon),
+        zoom: 13,
+        layers: [OSM]
+    });
+    window.map = map;
+    baseMap = {
+        "OpenStreetMap": OSM
+    };
+
+    L.control.layers(baseMap).addTo(map);
+
+    function loaddraw(data) {
+        var qpLayer = L.geoJson(data).addTo(map);
+        map.fitBounds(qpLayer.getBounds());
+
+        recup_qp_dessin(data)
+    };
+
+    getdraw(ref_dossier);
+
+    function getdraw (ref) {
+        $.ajax({
+            headers: {'AUTHORIZATION': ''},
+            url: 'http://apicarto.coremaps.com/api/v1/data/' + ref + '/geojson',
+            datatype: 'json',
+            jsonCallback: 'getJson',
+            success: loaddraw
+        });
+    };
+
+    function loadGeoJson(data) {
+        map.spin(false);
+        var qpLayer = L.geoJson(data, {onEachFeature: onEachFeature, style: style()}).addTo(map);
+    };
+
+    function onEachFeature(feature, layer) {
+        var anchor = $(location).attr('hash').substring(1);
+        if (anchor != "") {
+            var qp_select = JSON.parse(anchor);
+            if (qp_select.qp.indexOf(feature.properties.code_qp) > -1) {
+                window.geom_inter.index.push(feature.properties.code_qp);
+                window.featureCollection.features.push(feature);
+                layer.setStyle(select_style());
+                map.fitBounds(layer.getBounds());
+
+            }
+        }
+    };
+
+    function style(feature) {
+        return {
+            fillColor: '#FC4E2A',
+            weight: 1,
+            opacity: 1,
+            color: 'white',
+            dashArray: '0',
+            fillOpacity: 0.6
+        };
+    }
+
+    function recup_qp_dessin(geom){
+        /**/
+        $.ajax({
+            url: 'http://apicarto.coremaps.com/zoneville/api/v1/qp',
+            datatype: 'json',
+            method: 'POST',
+            data: {geom: geom},
+            jsonCallback: 'getJson',
+            success: function (data) {
+                var qp_supp = "";
+                feature = geom
+                feature.properties = data;
+
+                for (i = 0; i < data.length; i++) {
+                    $.ajax({
+                        url: 'http://apicarto.coremaps.com/zoneville/api/beta/qp/mapservice',
+                        datatype: 'json',
+                        method: 'GET',
+                        data: {code: data[i].code_qp},
+                        jsonCallback: 'getJson',
+                        success: function (data) {
+
+                            loadGeoJson(data);
+                        }
+                    });
+                }
+            }
+        });
+        /**/
+    }
+
+}).call(this);

app/assets/javascripts/api_carto/lib/easy-button.js

@@ -0,0 +1,58 @@
+L.Control.EasyButtons = L.Control.extend({
+    options: {
+        position: 'topleft',
+        title: '',
+        intendedIcon: 'fa-circle-o'
+    },
+
+    onAdd: function () {
+        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+
+        this.link = L.DomUtil.create('a', 'leaflet-bar-part', container);
+        this._addImage()
+        this.link.href = '#';
+
+        L.DomEvent.on(this.link, 'click', this._click, this);
+        this.link.title = this.options.title;
+
+        return container;
+    },
+
+    intendedFunction: function(){ alert('no function selected');},
+
+    _click: function (e) {
+        L.DomEvent.stopPropagation(e);
+        L.DomEvent.preventDefault(e);
+        this.intendedFunction();
+        this.link.blur();
+    },
+
+    _addImage: function () {
+        var extraClasses = this.options.intendedIcon.lastIndexOf('fa', 0) === 0 ? ' fa fa-lg' : ' glyphicon';
+
+        var icon = L.DomUtil.create('i', this.options.intendedIcon + extraClasses, this.link);
+        icon.id = this.options.id;
+    }
+});
+
+L.easyButton = function( btnIcon , btnFunction , btnTitle , btnMap , btnId) {
+  var newControl = new L.Control.EasyButtons();
+
+  if (btnIcon) newControl.options.intendedIcon = btnIcon;
+  if (btnId) newControl.options.id = btnId;
+
+  if ( typeof btnFunction === 'function'){
+    newControl.intendedFunction = btnFunction;
+  }
+
+  if (btnTitle) newControl.options.title = btnTitle;
+
+  if ( btnMap === '' ){
+    // skip auto addition
+  } else if ( btnMap ) {
+    btnMap.addControl(newControl);
+  } else {
+    map.addControl(newControl);
+  }
+  return newControl;
+};

app/assets/javascripts/api_carto/lib/leaflet.photon.css

@@ -0,0 +1,39 @@
+ul.photon-autocomplete {
+    position: absolute;
+    background-color: white;
+    z-index: 1000;
+    box-shadow: 0 4px 9px #999999;
+    display: none;
+}
+.photon-autocomplete li {
+    min-height: 40px;
+    line-height: 1em;
+    padding: 5px 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 1em;
+}
+.photon-autocomplete li strong {
+    display: block;
+}
+.photon-autocomplete li.on {
+    background-color: #2980b9;
+    cursor: pointer;
+}
+.photon-autocomplete li.photon-no-result {
+    text-align: center;
+    color: #666;
+    font-size: 0.9em;
+    line-height: 40px;
+}
+.photon-autocomplete .photon-feedback {
+    display: block;
+    text-align: right;
+    font-size: 0.8em;
+    padding: 3px;
+    color: #999;
+    border-top: 1px solid #eee;
+}
+.photon-input:focus {
+    width: 400px;
+}

app/assets/javascripts/api_carto/lib/leaflet.photon.js

@@ -0,0 +1,444 @@
+L.PhotonBase = L.Class.extend({
+
+    forEach: function (els, callback) {
+        Array.prototype.forEach.call(els, callback);
+    },
+
+    ajax: function (callback, thisobj) {
+        if (typeof this.xhr === 'object') {
+            this.xhr.abort();
+        }
+        this.xhr = new XMLHttpRequest();
+        var self = this;
+        this.xhr.open('GET', this.options.url + this.buildQueryString(this.getParams()), true);
+
+        this.xhr.onload = function(e) {
+            self.fire('ajax:return');
+            if (this.status === 200) {
+                if (callback) {
+                    var raw = this.response;
+                    raw = JSON.parse(raw);
+                    callback.call(thisobj || this, raw);
+                }
+            }
+            delete this.xhr;
+        };
+
+        this.fire('ajax:send');
+        this.xhr.send();
+    },
+
+    buildQueryString: function (params) {
+        var queryString = [];
+        for (var key in params) {
+            if (params[key]) {
+                queryString.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]));
+            }
+        }
+        return queryString.join('&');
+    },
+
+    featureToPopupContent: function (feature) {
+        var container = L.DomUtil.create('div', 'leaflet-photon-popup'),
+            title = L.DomUtil.create('h3', '', container);
+        title.innerHTML = feature.properties.label;
+        return container;
+    }
+
+});
+
+
+L.PhotonSearch = L.PhotonBase.extend({
+
+    includes: L.Mixin.Events,
+
+    options: {
+        url: 'http://photon.komoot.de/api/?',
+        placeholder: 'Start typing...',
+        minChar: 3,
+        limit: 5,
+        submitDelay: 300,
+        includePosition: true,
+        noResultLabel: 'No result',
+        feedbackEmail: 'photon@komoot.de',  // Set to null to remove feedback box
+        feedbackLabel: 'Feedback'
+    },
+
+    CACHE: '',
+    RESULTS: [],
+    KEYS: {
+        LEFT: 37,
+        UP: 38,
+        RIGHT: 39,
+        DOWN: 40,
+        TAB: 9,
+        RETURN: 13,
+        ESC: 27,
+        APPLE: 91,
+        SHIFT: 16,
+        ALT: 17,
+        CTRL: 18
+    },
+
+    initialize: function (map, input, options) {
+        this.map = map;
+        this.input = input;
+        L.setOptions(this, options);
+        var CURRENT = null;
+
+        try {
+            Object.defineProperty(this, 'CURRENT', {
+                get: function () {
+                    return CURRENT;
+                },
+                set: function (index) {
+                    if (typeof index === 'object') {
+                        index = this.resultToIndex(index);
+                    }
+                    CURRENT = index;
+                }
+            });
+        } catch (e) {
+            // Hello IE8
+        }
+        this.input.type = 'search';
+        this.input.placeholder = this.options.placeholder;
+        this.input.autocomplete = 'off';
+        this.input.autocorrect = 'off';
+        L.DomEvent.disableClickPropagation(this.input);
+
+        L.DomEvent.on(this.input, 'keydown', this.onKeyDown, this);
+        L.DomEvent.on(this.input, 'input', this.onInput, this);
+        L.DomEvent.on(this.input, 'blur', this.onBlur, this);
+        L.DomEvent.on(this.input, 'focus', this.onFocus, this);
+        this.createResultsContainer();
+    },
+
+    createResultsContainer: function () {
+        this.resultsContainer = L.DomUtil.create('ul', 'photon-autocomplete', document.querySelector('body'));
+    },
+
+    resizeContainer: function()
+    {
+        var l = this.getLeft(this.input);
+        var t = this.getTop(this.input) + this.input.offsetHeight;
+        this.resultsContainer.style.left = l + 'px';
+        this.resultsContainer.style.top = t + 'px';
+        var width = this.options.width ? this.options.width : this.input.offsetWidth - 2;
+        this.resultsContainer.style.width = width + 'px';
+    },
+
+    onKeyDown: function (e) {
+        switch (e.keyCode) {
+            case this.KEYS.TAB:
+                if(this.CURRENT !== null)
+                {
+                    this.setChoice();
+                }
+                L.DomEvent.stop(e);
+                break;
+            case this.KEYS.RETURN:
+                L.DomEvent.stop(e);
+                this.setChoice();
+                break;
+            case this.KEYS.ESC:
+                L.DomEvent.stop(e);
+                this.hide();
+                this.input.blur();
+                break;
+            case this.KEYS.DOWN:
+                if(this.RESULTS.length > 0) {
+                    if(this.CURRENT !== null && this.CURRENT < this.RESULTS.length - 1) { // what if one resutl?
+                        this.CURRENT++;
+                        this.highlight();
+                    }
+                    else if(this.CURRENT === null) {
+                        this.CURRENT = 0;
+                        this.highlight();
+                    }
+                }
+                break;
+            case this.KEYS.UP:
+                if(this.CURRENT !== null) {
+                    L.DomEvent.stop(e);
+                }
+                if(this.RESULTS.length > 0) {
+                    if(this.CURRENT > 0) {
+                        this.CURRENT--;
+                        this.highlight();
+                    }
+                    else if(this.CURRENT === 0) {
+                        this.CURRENT = null;
+                        this.highlight();
+                    }
+                }
+                break;
+        }
+    },
+
+    onInput: function (e) {
+        if (typeof this.submitDelay === 'number') {
+            window.clearTimeout(this.submitDelay);
+            delete this.submitDelay;
+        }
+        this.submitDelay = window.setTimeout(L.Util.bind(this.search, this), this.options.submitDelay);
+    },
+
+    onBlur: function (e) {
+        this.fire('blur');
+        var self = this;
+        setTimeout(function () {
+            self.hide();
+        }, 100);
+    },
+
+    onFocus: function (e) {
+        this.fire('focus');
+        this.input.select();
+        this.search();  // In case we have a value from a previous search.
+    },
+
+    clear: function () {
+        this.RESULTS = [];
+        this.CURRENT = null;
+        this.CACHE = '';
+        this.resultsContainer.innerHTML = '';
+    },
+
+    hide: function() {
+        this.fire('hide');
+        this.clear();
+        this.resultsContainer.style.display = 'none';
+    },
+
+    setChoice: function (choice) {
+        choice = choice || this.RESULTS[this.CURRENT];
+        if (choice) {
+            this.hide();
+            this.fire('selected', {choice: choice.feature});
+            this.onSelected(choice.feature);
+            this.input.value = '';
+        }
+    },
+
+    search: function() {
+        var val = this.input.value;
+        var minChar = typeof this.options.minChar === 'function' ? this.options.minChar(val) : val.length >= this.options.minChar;
+        if (!val || !minChar) return this.clear();
+        if(val + '' === this.CACHE + '') return;
+        else this.CACHE = val;
+        this._doSearch();
+    },
+
+    _doSearch: function () {
+        this.ajax(this.handleResults, this);
+    },
+
+    _onSelected: function (feature) {
+        this.map.setView([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], 16);
+    },
+
+    onSelected: function (choice) {
+        return (this.options.onSelected || this._onSelected).call(this, choice);
+    },
+
+    _formatResult: function (feature, el) {
+        var title = L.DomUtil.create('strong', '', el),
+            detailsContainer = L.DomUtil.create('small', '', el),
+            details = [],
+            type = this.formatType(feature);
+        title.innerHTML = feature.properties.name;
+        if (type) details.push(type);
+        if (feature.properties.city && feature.properties.city !== feature.properties.name) {
+            details.push(feature.properties.city);
+        }
+        if (feature.properties.country) details.push(feature.properties.country);
+        detailsContainer.innerHTML = details.join(', ');
+    },
+
+    formatResult: function (feature, el) {
+        return (this.options.formatResult || this._formatResult).call(this, feature, el);
+    },
+
+    formatType: function (feature) {
+        return (this.options.formatType || this._formatType).call(this, feature);
+    },
+
+    _formatType: function (feature) {
+        return feature.properties.osm_value;
+    },
+
+    createResult: function (feature) {
+        var el = L.DomUtil.create('li', '', this.resultsContainer);
+        this.formatResult(feature, el);
+        var result = {
+            feature: feature,
+            el: el
+        };
+        // Touch handling needed
+        L.DomEvent.on(el, 'mouseover', function (e) {
+            this.CURRENT = result;
+            this.highlight();
+        }, this);
+        L.DomEvent.on(el, 'mousedown', function (e) {
+            this.setChoice();
+        }, this);
+        return result;
+    },
+
+    resultToIndex: function (result) {
+        var out = null;
+        this.forEach(this.RESULTS, function (item, index) {
+            if (item === result) {
+                out = index;
+                return;
+            }
+        });
+        return out;
+    },
+
+    handleResults: function(geojson) {
+        var self = this;
+        this.clear();
+        this.resultsContainer.style.display = 'block';
+        this.resizeContainer();
+        this.forEach(geojson.features, function (feature) {
+            self.RESULTS.push(self.createResult(feature));
+        });
+        if (geojson.features.length === 0) {
+            var noresult = L.DomUtil.create('li', 'photon-no-result', this.resultsContainer);
+            noresult.innerHTML = this.options.noResultLabel;
+        }
+        if (this.options.feedbackEmail) {
+            var feedback = L.DomUtil.create('a', 'photon-feedback', this.resultsContainer);
+            feedback.href = 'mailto:' + this.options.feedbackEmail;
+            feedback.innerHTML = this.options.feedbackLabel;
+        }
+        this.CURRENT = 0;
+        this.highlight();
+        if (this.options.resultsHandler) {
+            this.options.resultsHandler(geojson);
+        }
+    },
+
+    highlight: function () {
+        var self = this;
+        this.forEach(this.RESULTS, function (item, index) {
+            if (index === self.CURRENT) {
+                L.DomUtil.addClass(item.el, 'on');
+            }
+            else {
+                L.DomUtil.removeClass(item.el, 'on');
+            }
+        });
+    },
+
+    getLeft: function (el) {
+        var tmp = el.offsetLeft;
+        el = el.offsetParent;
+        while(el) {
+            tmp += el.offsetLeft;
+            el = el.offsetParent;
+        }
+        return tmp;
+    },
+
+    getTop: function (el) {
+        var tmp = el.offsetTop;
+        el = el.offsetParent;
+        while(el) {
+            tmp += el.offsetTop;
+            el = el.offsetParent;
+        }
+        return tmp;
+    },
+
+    getParams: function () {
+        return {
+            q: this.CACHE,
+            lang: this.options.lang,
+            limit: this.options.limit,
+            lat: this.options.includePosition ? this.map.getCenter().lat : null,
+            lon: this.options.includePosition ? this.map.getCenter().lng : null
+        };
+    }
+
+});
+
+
+L.Control.Photon = L.Control.extend({
+
+    includes: L.Mixin.Events,
+
+    onAdd: function (map, options) {
+        this.map = map;
+        this.container = L.DomUtil.create('div', 'leaflet-photon');
+
+        this.options = L.Util.extend(this.options, options);
+
+        this.input = L.DomUtil.create('input', 'photon-input', this.container);
+        this.search = new L.PhotonSearch(map, this.input, this.options);
+        this.search.on('blur', this.forwardEvent, this);
+        this.search.on('focus', this.forwardEvent, this);
+        this.search.on('hide', this.forwardEvent, this);
+        this.search.on('selected', this.forwardEvent, this);
+        this.search.on('ajax:send', this.forwardEvent, this);
+        this.search.on('ajax:return', this.forwardEvent, this);
+        return this.container;
+    },
+
+    forwardEvent: function (e) {
+        this.fire(e.type, e);
+    }
+
+
+});
+
+L.Map.addInitHook(function () {
+    if (this.options.photonControl) {
+        this.photonControl = new L.Control.Photon(this.options.photonControlOptions || {});
+        this.addControl(this.photonControl);
+    }
+});
+
+L.PhotonReverse = L.PhotonBase.extend({
+
+    includes: L.Mixin.Events,
+
+    options: {
+        url: 'http://photon.komoot.de/reverse/?',
+        limit: 1,
+        handleResults: null
+    },
+
+    initialize: function (options) {
+        L.setOptions(this, options);
+    },
+
+    doReverse: function (latlng) {
+        latlng = L.latLng(latlng);
+        this.fire('reverse', {latlng: latlng});
+        this.latlng = latlng;
+        this.ajax(this.handleResults, this);
+    },
+
+    _handleResults: function (data) {
+        /*eslint-disable no-console */
+        console.log(data);
+        /*eslint-enable no-alert */
+    },
+
+    handleResults: function (data) {
+        return (this.options.handleResults || this._handleResults).call(this, data);
+    },
+
+    getParams: function () {
+        return {
+            lang: this.options.lang,
+            limit: this.options.limit,
+            lat: this.latlng.lat,
+            lon: this.latlng.lng
+        };
+    }
+
+});

app/assets/javascripts/api_carto/lib/leaflet.spin.js

@@ -0,0 +1,41 @@
+L.SpinMapMixin = {
+    spin: function (state, options) {
+        if (!!state) {
+            // start spinning !
+            if (!this._spinner) {
+                this._spinner = new Spinner(options).spin(this._container);
+                this._spinning = 0;
+            }
+            this._spinning++;
+        }
+        else {
+            this._spinning--;
+            if (this._spinning <= 0) {
+                // end spinning !
+                if (this._spinner) {
+                    this._spinner.stop();
+                    this._spinner = null;
+                }
+            }
+        }
+    }
+};
+
+L.Map.include(L.SpinMapMixin);
+
+L.Map.addInitHook(function () {
+    this.on('layeradd', function (e) {
+        // If added layer is currently loading, spin !
+        if (e.layer.loading) this.spin(true);
+        if (typeof e.layer.on != 'function') return;
+        e.layer.on('data:loading', function () { this.spin(true); }, this);
+        e.layer.on('data:loaded',  function () { this.spin(false); }, this);
+    }, this);
+    this.on('layerremove', function (e) {
+        // Clean-up
+        if (e.layer.loading) this.spin(false);
+        if (typeof e.layer.on != 'function') return;
+        e.layer.off('data:loaded');
+        e.layer.off('data:loading');
+    }, this);
+});

app/assets/javascripts/api_carto/lib/leaflet.toolbar.css

@@ -0,0 +1,117 @@
+/* Variables and Mixins */
+/* Generic L.Toolbar */
+.leaflet-toolbar-0 {
+  list-style: none;
+  padding-left: 0;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+}
+.leaflet-toolbar-0 > li {
+  position: relative;
+}
+.leaflet-toolbar-0 > li > .leaflet-toolbar-icon {
+  display: block;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  margin-right: 0;
+  padding-right: 0;
+  border-right: 0;
+  text-align: center;
+  text-decoration: none;
+  background-color: #ffffff;
+}
+.leaflet-toolbar-0 > li > .leaflet-toolbar-icon:hover {
+  background-color: #f4f4f4;
+}
+.leaflet-toolbar-0 .leaflet-toolbar-1 {
+  display: none;
+  list-style: none;
+}
+.leaflet-toolbar-tip-container {
+  margin: 0 auto;
+  height: 12px;
+  position: relative;
+  overflow: hidden;
+}
+.leaflet-toolbar-tip {
+  width: 12px;
+  height: 12px;
+  margin: -6px auto 0;
+  background-color: #ffffff;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+  -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+/* L.Toolbar.Control */
+.leaflet-control-toolbar {
+  /* Secondary Toolbar */
+}
+.leaflet-control-toolbar > li > .leaflet-toolbar-icon {
+  border-bottom: 1px solid #ccc;
+}
+.leaflet-control-toolbar > li:first-child > .leaflet-toolbar-icon {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.leaflet-control-toolbar > li:last-child > .leaflet-toolbar-icon {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-width: 0;
+}
+.leaflet-control-toolbar .leaflet-toolbar-1 {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  left: 26px;
+  /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
+  top: 0;
+  white-space: nowrap;
+  height: 26px;
+}
+.leaflet-control-toolbar .leaflet-toolbar-1 > li {
+  display: inline-block;
+}
+.leaflet-control-toolbar .leaflet-toolbar-1 > li > .leaflet-toolbar-icon {
+  display: block;
+  background-color: #919187;
+  border-left: 1px solid #aaa;
+  color: #fff;
+  font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif;
+  line-height: 26px;
+  text-decoration: none;
+  padding-left: 10px;
+  padding-right: 10px;
+  height: 26px;
+}
+.leaflet-control-toolbar .leaflet-toolbar-1 > li > .leaflet-toolbar-icon:hover {
+  background-color: #a0a098;
+}
+/* L.Toolbar.Popup */
+.leaflet-popup-toolbar {
+  position: relative;
+}
+.leaflet-popup-toolbar > li {
+  float: left;
+}
+.leaflet-popup-toolbar > li:first-child > .leaflet-toolbar-icon {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.leaflet-popup-toolbar > li:last-child > .leaflet-toolbar-icon {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-width: 0;
+}
+.leaflet-popup-toolbar .leaflet-toolbar-1 {
+  position: absolute;
+  top: 26px;
+  left: 0;
+  padding-left: 0;
+}
+.leaflet-popup-toolbar .leaflet-toolbar-1 > li > .leaflet-toolbar-icon {
+  position: relative;
+  float: left;
+  width: 26px;
+  height: 26px;
+}

app/assets/javascripts/api_carto/qp.js

@@ -0,0 +1,259 @@
+(function () {
+    API_URL = '//api-adresse.data.gouv.fr';
+
+    var showSearchPoints = function (geojson) {
+        console.log(geojson);
+    };
+    var SHORT_CITY_NAMES = ['y', 'ay', 'bu', 'by', 'eu', 'fa', 'gy', 'oo', 'oz', 'py', 'ri', 'ry', 'sy', 'ur', 'us', 'uz'];
+    var photonControlOptions = {
+        resultsHandler: showSearchPoints,
+        position: 'topleft',
+        url: API_URL + '/search/?',
+        placeholder: 'Entrer une adresse',
+        minChar: function (val) {
+            return SHORT_CITY_NAMES.indexOf(val) !== -1 || val.length >= 3;
+        },
+        submitDelay: 200
+    };
+    var LeafIcon, OSM, baseMap, cad, cadWmtsUrl, drawControl, drawnItems, greenIcon, ignApiKey, layers, map, mapId, onEachFeature, onMapClick, onZoom, ortho, overlayMaps, scan25, scan25url, scanWmtsUrl;
+    L.drawLocal.draw.toolbar.buttons.polygon = 'Dessiner un polygone';
+    L.drawLocal.draw.toolbar.actions.title = "Annule le dessin en cours";
+    L.drawLocal.draw.toolbar.actions.text = "Annuler";
+    L.drawLocal.draw.toolbar.undo.text = "Supprimer le dernier point";
+    L.drawLocal.draw.toolbar.undo.title = "Supprime le dernier point dessiné";
+    L.drawLocal.draw.handlers.polygon.tooltip.start = "Cliquer pour commencer le dessin";
+    L.drawLocal.draw.handlers.polygon.tooltip.cont = "Cliquer pour continuer le dessin";
+    L.drawLocal.draw.handlers.polygon.tooltip.end = "Cliquer sur le premier point pour finaliser votre dessin";
+    L.drawLocal.edit.toolbar.actions.save.title = "Valide les modifications";
+    L.drawLocal.edit.toolbar.actions.save.text = "Valider les modifications";
+    L.drawLocal.edit.toolbar.actions.cancel.title = "Annule les modifications";
+    L.drawLocal.edit.toolbar.actions.cancel.text = "Annuler les modifications";
+    L.drawLocal.edit.handlers.edit.tooltip.text = "Déplacer les points pour éditer le dessin";
+    L.drawLocal.edit.handlers.edit.tooltip.subtext = "Cliquer sur 'annuler' pour annuler les changements";
+    L.drawLocal.edit.toolbar.buttons.edit = "Édition du dessin";
+    L.drawLocal.edit.toolbar.buttons.editDisabled = "Aucun dessin à éditer";
+    L.drawLocal.edit.toolbar.buttons.removeDisabled = "Aucun dessin à supprimer";
+    L.drawLocal.edit.toolbar.buttons.remove = "Supprimer le dessin";
+    L.drawLocal.edit.handlers.remove.tooltip.text = "Cliquer sur le dessin pour le supprimer";
+    L.drawLocal.edit.handlers.remove.tooltip.subtext = "Cliquer sur 'annuler' pour annuler la suppression";
+    mapId = "map_qp";
+    layers = new Array;
+
+    window.featureCollection = new Object()
+    window.featureCollection.type = 'FeatureCollection';
+    window.featureCollection.features = new Array();
+    OSM = L.tileLayer("http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png", {
+        attribution: '&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    });
+
+    position = get_position();
+
+    map = L.map(mapId, {
+        center: new L.LatLng(position.lat, position.lon),
+        zoom: 13,
+        layers: [OSM],
+        photonControl: true,
+        photonControlOptions: photonControlOptions,
+        photonReverseControl: true
+    });
+    var info = L.control();
+    // method that we will use to update the control based on feature properties passed
+    info.update = function (props) {
+        this._div.innerHTML = '<h4>Quartier prioritaire</h4>' + (props ?
+            '<b>' + props.nom_qp + '</b><br />' + props.commune_qp
+                : 'survolez un quartier prioritaire');
+    };
+    info.onAdd = function (map) {
+        this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
+        this.update();
+        return this._div;
+    };
+    info.addTo(map);
+
+    window.map = map;
+    baseMap = {
+        "OpenStreetMap": OSM
+    };
+
+    //L.control.layers(baseMap).addTo(map);
+    LeafIcon = L.Icon.extend({
+        options: {
+            shadowUrl: "http://leafletjs.com/docs/images/leaf-shadow.png",
+            iconSize: [38, 95],
+            shadowSize: [50, 64],
+            iconAnchor: [22, 94],
+            shadowAnchor: [4, 62],
+            popupAnchor: [-3, -76]
+        }
+    });
+    greenIcon = new LeafIcon({
+        iconUrl: "http://leafletjs.com/docs/images/leaf-green.png"
+    });
+    drawnItems = new L.FeatureGroup();
+    map.addLayer(drawnItems);
+
+    drawControl = new L.Control.Draw({
+        position: "topright",
+        draw: {
+            polygon: {
+                shapeOptions: {
+                    color: "purple"
+                },
+                allowIntersection: false,
+                drawError: {
+                    color: "orange",
+                    timeout: 1000
+                },
+                showArea: false,
+                metric: true,
+                repeatMode: false
+            },
+            marker: false,
+            polyline: false,
+            rectangle: false,
+            circle: false
+        },
+        edit: {
+            featureGroup: drawnItems
+        }
+    });
+    map.addControl(drawControl);
+    L.control.scale({
+        imperial: false
+    }).addTo(map);
+    map.on("draw:created", function (e) {
+        var layer;
+        layer = e.layer;
+        drawnItems.addLayer(layer);
+        console.log(layer);
+        window.featureCollection.features.push(layer.toGeoJSON());
+        get_ref_dossier ();
+        /**
+         $.ajax({
+        url: 'http://apicarto.coremaps.com//zoneville/api/v1/qp',
+        datatype: 'json',
+        method: 'POST',
+        data: {geom:layer.toGeoJSON()},
+        jsonCallback: 'getJson',
+        success: function (data){
+          var qp_supp = "";
+          feature = layer.toGeoJSON()
+          feature.properties = data;
+          for (i = 0; i < data.length; i++){
+            qp_supp += "<br><span>Quartier(s) prioritaire(s) : " + data[i].code_qp+  " - " +data[i].nom_qp;
+          }
+          $("#selection_qp").append("<span>Dessin personnalisé</span><br>"+qp_supp +'<br>');
+        }
+      });**/
+    });
+    map.spin(true);
+    $.ajax({
+        url: 'http://apicarto.coremaps.com/zoneville/api/beta/qp/mapservice',
+        datatype: 'json',
+        jsonCallback: 'getJson',
+        success: loadGeoJson
+    });
+    window.geom_inter = {index: []};
+
+    function style(feature) {
+        return {
+            fillColor: '#FC4E2A',
+            weight: 1,
+            opacity: 1,
+            color: 'white',
+            dashArray: '0',
+            fillOpacity: 0.6
+        };
+    }
+
+    function select_style(feature) {
+        return {
+            fillColor: '#1E4E2E',
+            weight: 1,
+            opacity: 1,
+            color: 'white',
+            dashArray: '0',
+            fillOpacity: 0.6
+        };
+    }
+
+    function onEachFeature(feature, layer) {
+        var anchor = $(location).attr('hash').substring(1);
+        if (anchor != "") {
+            var qp_select = JSON.parse(anchor);
+            if (qp_select.qp.indexOf(feature.properties.code_qp) > -1) {
+                window.geom_inter.index.push(feature.properties.code_qp);
+                window.featureCollection.features.push(feature);
+                layer.setStyle(select_style());
+                map.fitBounds(layer.getBounds());
+
+            }
+        }
+        layer.on("mouseover", function (e) {
+            info.update({nom_qp: feature.properties.nom_qp, commune_qp: feature.properties.commune_qp})
+        });
+        layer.on("mouseout", function (e) {
+            info.update()
+        });
+        //layer.on("click", function (e) {
+        //    var feature = e.target.feature;
+        //    console.log(select_style());
+        //    if (window.geom_inter.index.indexOf(feature.properties.code_qp) == -1) {
+        //        window.geom_inter.index.push(feature.properties.code_qp);
+        //        window.featureCollection.features.push(feature);
+        //        layer.setStyle(select_style());
+        //        $("#selection_qp").append("<span>Quartier sélectionné : " + feature.properties.code_qp + "</span><br>");
+        //    }
+        //});
+    };
+
+
+    function loadGeoJson(data) {
+        map.spin(false);
+        // var store = new Terraformer.GeoStore({
+        //   store: new Terraformer.GeoStore.Memory(),
+        //   index: new Terraformer.RTree()
+        // });
+        // store.add(data);
+        // window.store = store;
+        // var anchor = $(location).attr('hash').substring(1);
+        // var qp_select = JSON.parse(anchor);
+        // for (i = 0; i < qp_select.qp.length; i++){
+        // store.get(id, function (err, res) {
+        //   if (typeof res == != 'undefined'){
+        //     window.geom_inter.index.push(res.properties.code_qp);
+        //     window.featureCollection.features.push(res);
+        //   }
+        // });
+        //}
+        var qpLayer = L.geoJson(data, {onEachFeature: onEachFeature, style: style()}).addTo(map);
+    };
+
+
+    function store() {
+        return $.ajax("http://apicarto.coremaps.com/store/api/v2/datastore/draw", {
+            method: 'POST',
+            crossDomain: true,
+            contentType: 'application/x-www-form-urlencoded',
+            headers: {'AUTHORIZATION': ''},
+            data: {geojson: JSON.stringify(window.featureCollection)}
+        }).done(function (data) {
+            $('#info').append('<span>Références pour récupérer le fichier : ' + data.reference + '</span>');
+        });
+    };
+
+    L.easyButton('fa-floppy-o', store, 'Enregistrer votre sélection').addTo(map);
+
+    function listener(event) {
+        console.log(event);
+        console.log("received: " + event.data);
+    }
+
+    if (window.addEventListener) {
+        addEventListener("message", listener, false)
+    } else {
+        attachEvent("onmessage", listener)
+    }
+
+
+}).call(this);

app/assets/javascripts/application.js

@@ -0,0 +1,21 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_ujs
+//= require turbolinks
+//= require_tree .
+//= require jquery
+//= require bootstrap-sprockets
+//= require bootstrap-datepicker
+//= require bootstrap-datepicker/core
+//= require bootstrap-datepicker/locales/bootstrap-datepicker.fr.js

app/assets/javascripts/carte.js

@@ -0,0 +1,34 @@
+//récupération de la position de l'entreprise
+
+function get_position(){
+    var position;
+
+    $.ajax({
+        url: '/dossiers/'+dossier_id+'/carte/position',
+        dataType: 'json',
+        async: false
+    }).done(function (data) {
+        position = data
+    });
+
+    return position;
+}
+
+function get_ref_dossier (){
+    $.post("http://apicarto.coremaps.com/api/v1/datastore", {
+        contentType: "application/json",
+        dataType: 'json',
+        geom: JSON.stringify(window.featureCollection.features[0]),
+        ascyn: false
+    }).done(function (data) {
+        $("#ref_dossier").val(data.reference);
+    });
+}
+
+function submit_check_draw(e) {
+    if (window.featureCollection.features.length == 0) {
+        $("#flash_message").html('<div class="alert alert-danger">Un dessin est obligatoire.</div>');
+        e.preventDefault();
+        return false;
+    }
+}

app/assets/javascripts/commentaires.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/javascripts/demandes.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/javascripts/description.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/javascripts/dossiers.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/javascripts/recapitulatif.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/javascripts/start.js

@@ -0,0 +1,4 @@
+function show_dossier_id_input (){
+    $("#btn_show_dossier_id_input").hide()
+    $("#pro_dossier_id").show()
+}

app/assets/stylesheets/admin.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the admin controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/application.scss

@@ -0,0 +1,53 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ *= require bootstrap-datepicker3
+ */
+@import "bootstrap-sprockets";
+@import "bootstrap";
+
+body {
+  background-color:rgb(255,255,255)
+}
+
+.logo {
+  margin-left: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  max-height: 100%;
+}
+
+.alert.alert-success,
+.alert.alert-danger {
+  margin-top:-20px
+}
+
+.navbar {
+  height: 35px;
+  background-color: rgb(235, 235, 235)
+}
+
+.btn {
+  box-shadow: none !important;
+}
+
+.description {
+  border-color: rgba(200, 200, 200, 0.6);
+  border-style: solid;
+  border-radius: 5px;
+  border-width: 1px;
+  padding: 10px;
+  background-color: rgb(245, 245, 245);
+  margin-top: 10px;
+}

app/assets/stylesheets/carte.scss

@@ -0,0 +1,19 @@
+// Place all the styles related to the carte controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+table {
+  font-size: 13;
+}
+.info {
+  padding: 6px 8px;
+  font: 14px/16px Arial, Helvetica, sans-serif;
+  background: white;
+  background: rgba(255,255,255,0.8);
+  box-shadow: 0 0 15px rgba(0,0,0,0.2);
+  border-radius: 5px;
+}
+.info h4 {
+  margin: 0 0 5px;
+  color: #777;
+}

app/assets/stylesheets/commentaires.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the commentaires controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/demandes.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the demandes controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/description.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the description controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/dossiers.scss

@@ -0,0 +1,7 @@
+// Place all the styles related to the dossiers controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+h5 span {
+  font-weight: normal
+}

app/assets/stylesheets/recapitulatif.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the recapitulatif controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/start.scss

@@ -0,0 +1,7 @@
+// Place all the styles related to the start controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+.mask {
+  display: none;
+}