function makeMap(latIn, longIn, exist) {
    console.log("lat long" + latIn + longIn)
    var apiKey = '';
    var app = new Mapp({
        element: "#app",
        presets: {
            latlng: {
                lat: latIn,
                lng: longIn
            },
            zoom: 6
        },
        locale: "fa",
        apiKey: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjU5MTZkYmRhYmJkMzgwZjQwYWQ5ZWM2YWQ4MjA5YmQyMDRhYWE1YzRjMjI2YWIwYzljNDIyYWEzMGNkMTc0ZTI5YzdkMWViNDA5NGNjMjQyIn0.eyJhdWQiOiIyMTQ4MSIsImp0aSI6IjU5MTZkYmRhYmJkMzgwZjQwYWQ5ZWM2YWQ4MjA5YmQyMDRhYWE1YzRjMjI2YWIwYzljNDIyYWEzMGNkMTc0ZTI5YzdkMWViNDA5NGNjMjQyIiwiaWF0IjoxNjc4Njk0MTgzLCJuYmYiOjE2Nzg2OTQxODMsImV4cCI6MTY4MTExMzM4Mywic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OeW5g0oc06eFgvYrXXAzAsJYBwCVLblomZbEKmuhrPhhh3EbC80axHLgwZ3tkllDvuHRcp0kQ8gIGXjYp9JCJbF2XBcZ24zNwYuzGZqAliBYCUp-TOB81wNmexW-LcxS970w9MZT8cCmwRsAt_MB7fGv9e48zjHfa5XTUf72OcxMEEO9HRDmhdTvaB2-s6CB4cdrGqpBcKi0YEaLgU4078V5202N6XqUDRmeNYxL-2dPoQHI2dalBTA5GHcy5ApNoe8IerSN1hH2OXFJQoP-tB4uJ4HVZgzzCSra7qcBHzXN0aBVLln7Xf0F0W6CNI1YFRicN_jhToHd67nDiywiog"
    });

    app.addVectorLayers();
    //
    // app.addLayers();
    //
    app.addGeolocation({
        history: true,
        onLoad: true,
        onLoadCallback: function(){
            console.log(start.marker.getLatLng());
        },
    });

    var start = {};
    var index = 1;
    var curse = 0;
    var history = [];
    var memeTimeout;

    if(exist == "edit") {
        kickOffEdit()
    } else {
        kickOff();
    }

    function kickOffEdit() {
        console.log("kickEdit")
        start = {
            latlng: {
                lat: latIn,
                lng: longIn
            },
            marker: undefined,
            icon: {
                iconUrl: "/RTL/website/css/images/map/marker-default-blue.svg",
                iconSize: [40, 40],
                iconAnchor: [20, 40],
                popupAnchor: [0, -40]
            }
        };

        app.map.fitBounds([[35.532, 51.051], [35.835, 51.632]]);

        app.map.panTo({
            lat: start.latlng.lat,
            lng: start.latlng.lng
        });

        $("#Latitude").val(start.latlng.lat)
        $("#Longitude").val(start.latlng.lng)

        // $("#latlong").val("lat: " + app.states.user.latlng.lat + ", long: " + app.states.user.latlng.lng)

        $("#mapp-app").append('<div class="app-start"></div>');

        $(".app-start").on("click", function() {
            start.latlng = app.map.getCenter();

            $("#Latitude").val(start.latlng.lat)
            $("#Longitude").val(start.latlng.lng)

            start.marker = app.addMarker({
                name: "start",
                latlng: start.latlng,
                icon: start.icon,
                popup: false,
                pan: false,
                draggable: true,
                history: false
            });

            $(".app-start").remove();


            doReverse();

            start.marker.on("dragend", function() {
                start.latlng = start.marker.getLatLng();

                $("#Latitude").val(start.latlng.lat)
                $("#Longitude").val(start.latlng.lng)

                doReverse();
            });
        });

    }

    function kickOff() {

        start = {
            latlng: undefined,
            marker: undefined,
            icon: {
                iconUrl: "/RTL/website/css/images/map/marker-default-blue.svg",
                iconSize: [40, 40],
                iconAnchor: [20, 40],
                popupAnchor: [0, -40]
            }
        };

        app.map.fitBounds([[35.532, 51.051], [35.835, 51.632]]);

        userLocationFound = false;
        app.getUserLocation({
            before: function() {
                freeze();
            },
            after: function() {
                unfreeze();
            },
            success: function() {
                userLocationFound = true;

                app.map.panTo({
                    lat: app.states.user.latlng.lat,
                    lng: app.states.user.latlng.lng
                });

                start.latlng = app.map.getCenter();

                $("#Latitude").val(start.latlng.lat)
                $("#Longitude").val(start.latlng.lng)

                // $("#latlong").val("lat: " + app.states.user.latlng.lat + ", long: " + app.states.user.latlng.lng)

                $("#mapp-app").append('<div class="app-start"></div>');

                $(".app-start").on("click", function() {
                    start.latlng = app.map.getCenter();

                    $("#Latitude").val(start.latlng.lat)
                    $("#Longitude").val(start.latlng.lng)

                    start.marker = app.addMarker({
                        name: "start",
                        latlng: start.latlng,
                        icon: start.icon,
                        popup: false,
                        pan: false,
                        draggable: true,
                        history: false
                    });

                    $(".app-start").remove();


                    doReverse();

                    start.marker.on("dragend", function() {
                        start.latlng = start.marker.getLatLng();

                        $("#Latitude").val(start.latlng.lat)
                        $("#Longitude").val(start.latlng.lng)

                        doReverse();
                    });
                });
            },
            error: function() {
                var centerMarker = $('#center-marker').show();
                centerMarker.on('click', function(){
                    start.latlng = app.map.getCenter()
                    app.map.panTo(start.latlng);
                    $("#Latitude").val(start.latlng.lat)
                    $("#Longitude").val(start.latlng.lng)
                    doReverse();
                });
            },
            pan: false,
            marker: false
        });
    }

    // function leg(text) {
    //     var printed = text;
    //
    //     if (text === history[history.length - 1]) {
    //         printed = "برای بار دوم، " + text;
    //
    //         if (text === history[history.length - 2]) {
    //             printed =
    //                 curse < 2
    //             "دوباره " + text;
    //
    //             if (curse === 2) meme("parviz");
    //
    //             if (curse < 2 && text === history[history.length - 3]) {
    //                 printed = "دوباره " + text;
    //
    //                 if (text === history[history.length - 4]) {
    //                     printed = "دوباره " + text;
    //
    //                     if (text === history[history.length - 5]) {
    //                         printed = "دوباره " + text;
    //
    //                         if (text === history[history.length - 6]) {
    //                             curse = 1;
    //                             printed = "دوباره " + text;
    //
    //                             if (text === history[history.length - 7]) {
    //                                 printed = "دوباره " + text;
    //
    //                                 if (text === history[history.length - 8]) {
    //                                     printed = "دوباره " + text;
    //
    //                                     if (text === history[history.length - 9]) {
    //                                         printed = "دوباره " + text;
    //
    //                                         if (text === history[history.length - 10]) {
    //                                             printed = "دوباره " + text;
    //
    //                                             return;
    //                                         }
    //                                     }
    //                                 }
    //                             }
    //                         }
    //                     }
    //                 }
    //             }
    //         }
    //     }
    //
    //     if (
    //         curse === 1 &&
    //         history[history.length - 1] !== undefined &&
    //         text !== history[history.length - 1]
    //     ) {
    //         history = [];
    //         curse = 2;
    //         index = 1;
    //         printed = "برگردیم سر نقشه. " + text;
    //
    //         $(".app-results-ul").html("");
    //     }
    //
    //     history.push(text);
    //
    //     var html =
    //         '<li class="app-results-li highlighted" id="li-' +
    //         index +
    //         '">' +
    //         '<div class="app-result-content">' +
    //         index +
    //         " - " +
    //         printed +
    //         "</div>" +
    //         "</li>";
    //
    //     $(".app-results-ul").prepend(html);
    //
    //     var i = index;
    //
    //     setTimeout(function() {
    //         $("#li-" + i).removeClass("highlighted");
    //     }, 2000);
    //
    //     index += 1;
    // }

    function doReverse() {
        if (start.latlng) {

            var result = app.findReverseGeocode({
                before: function() {
                    freeze();
                },
                after: function(data) {
                    unfreeze();
                },
                state: {
                    latlng: start.latlng
                }
            });
        }
    }


    function meme(image) {
        if (memeTimeout) clearTimeout(memeTimeout);

        $(".app-meme").addClass("app-visible");
        $(".app-meme").css({
            backgroundImage: "var(--meme-" + image + ")"
        });

        memeTimeout = setTimeout(function() {
            $(".app-meme").removeClass("app-visible");
        }, 1000);
    }

    function unfreeze() {
        $(".app-overlay").removeClass("app-visible");
        $("textarea").prop("disabled", false);
        $("button").prop("disabled", false);
        $("input").prop("disabled", false);
    }

    function freeze() {
        $(".app-overlay").addClass("app-visible");
        $("textarea").prop("disabled", true);
        $("button").prop("disabled", true);
        $("input").prop("disabled", true);
    }
}
