//= require_self
//= require leaflet.sidebar
+//= require leaflet.sidebar-pane
+//= require leaflet.locatecontrol/src/L.Control.Locate
//= require leaflet.locate
//= require leaflet.layers
//= require leaflet.key
//= require index/changeset
//= require index/query
//= require router
-//= require bowser
-//= require querystring
+//= require qs/dist/qs
$(document).ready(function () {
- var querystring = require("querystring-component");
-
var loaderTimeout;
var map = new L.OSM.Map("map", {
zoomControl: false,
layerControl: false,
- contextmenu: true
+ contextmenu: true,
+ worldCopyJump: true
});
OSM.loadSidebarContent = function (path, callback) {
}
});
- var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
-
- L.OSM.zoom({ position: position })
+ var sidebar = L.OSM.sidebar("#map-ui")
.addTo(map);
- var locate = L.control.locate({
- position: position,
- icon: "icon geolocate",
- iconLoading: "icon geolocate",
- strings: {
- title: I18n.t("javascripts.map.locate.title"),
- popup: I18n.t("javascripts.map.locate.popup")
- }
- }).addTo(map);
+ var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
- var locateContainer = locate.getContainer();
+ function addControlGroup(controls) {
+ controls.forEach(function (control) {
+ control.addTo(map);
+ });
- $(locateContainer)
- .removeClass("leaflet-control-locate leaflet-bar")
- .addClass("control-locate")
- .children("a")
- .attr("href", "#")
- .removeClass("leaflet-bar-part leaflet-bar-part-single")
- .addClass("control-button");
+ var firstContainer = controls[0].getContainer();
+ $(firstContainer).find(".control-button").first()
+ .addClass("control-button-first");
- var sidebar = L.OSM.sidebar("#map-ui")
- .addTo(map);
+ var lastContainer = controls[controls.length - 1].getContainer();
+ $(lastContainer).find(".control-button").last()
+ .addClass("control-button-last");
+ }
- L.OSM.layers({
- position: position,
- layers: map.baseLayers,
- sidebar: sidebar
- }).addTo(map);
-
- L.OSM.key({
- position: position,
- sidebar: sidebar
- }).addTo(map);
-
- L.OSM.share({
- "position": position,
- "sidebar": sidebar,
- "short": true
- }).addTo(map);
-
- L.OSM.note({
- position: position,
- sidebar: sidebar
- }).addTo(map);
-
- L.OSM.query({
- position: position,
- sidebar: sidebar
- }).addTo(map);
+ addControlGroup([
+ L.OSM.zoom({ position: position }),
+ L.OSM.locate({ position: position })
+ ]);
+
+ addControlGroup([
+ L.OSM.layers({
+ position: position,
+ layers: map.baseLayers,
+ sidebar: sidebar
+ }),
+ L.OSM.key({
+ position: position,
+ sidebar: sidebar
+ }),
+ L.OSM.share({
+ "position": position,
+ "sidebar": sidebar,
+ "short": true
+ })
+ ]);
+
+ addControlGroup([
+ L.OSM.note({
+ position: position,
+ sidebar: sidebar
+ })
+ ]);
+
+ addControlGroup([
+ L.OSM.query({
+ position: position,
+ sidebar: sidebar
+ })
+ ]);
L.control.scale()
.addTo(map);
map.getLayersCode(),
map._object);
- $.removeCookie("_osm_location");
- $.cookie("_osm_location", OSM.locationCookie(map), { expires: expiry, path: "/" });
+ Cookies.set("_osm_location", OSM.locationCookie(map), { secure: true, expires: expiry, path: "/", samesite: "lax" });
});
- if ($.cookie("_osm_welcome") !== "hide") {
+ if (Cookies.get("_osm_welcome") !== "hide") {
$(".welcome").addClass("visible");
}
- $(".welcome .close-wrap").on("click", function () {
+ $(".welcome .btn-close").on("click", function () {
$(".welcome").removeClass("visible");
- $.cookie("_osm_welcome", "hide", { expires: expiry, path: "/" });
+ Cookies.set("_osm_welcome", "hide", { secure: true, expires: expiry, path: "/", samesite: "lax" });
});
var bannerExpiry = new Date();
bannerExpiry.setYear(bannerExpiry.getFullYear() + 1);
- $("#banner .close-wrap").on("click", function (e) {
+ $("#banner .btn-close").on("click", function (e) {
var cookieId = e.target.id;
$("#banner").hide();
e.preventDefault();
if (cookieId) {
- $.cookie(cookieId, "hide", { expires: bannerExpiry, path: "/" });
+ Cookies.set(cookieId, "hide", { secure: true, expires: bannerExpiry, path: "/", samesite: "lax" });
}
});
- if (OSM.PIWIK) {
+ if (OSM.MATOMO) {
map.on("layeradd", function (e) {
if (e.layer.options) {
- var goal = OSM.PIWIK.goals[e.layer.options.keyid];
+ var goal = OSM.MATOMO.goals[e.layer.options.keyid];
if (goal) {
- $("body").trigger("piwikgoal", goal);
+ $("body").trigger("matomogoal", goal);
}
}
});
});
function remoteEditHandler(bbox, object) {
- var loaded = false,
- url,
+ var remoteEditHost = "http://127.0.0.1:8111",
+ osmHost = location.protocol + "//" + location.host,
query = {
left: bbox.getWest() - 0.0001,
top: bbox.getNorth() + 0.0001,
bottom: bbox.getSouth() - 0.0001
};
- if (location.protocol === "http" ||
- bowser.check({ chrome: "53", firefox: "55" })) {
- url = "http://127.0.0.1:8111/load_and_zoom?";
- } else {
- url = "https://127.0.0.1:8112/load_and_zoom?";
- }
-
- if (object) query.select = object.type + object.id;
-
- var iframe = $("<iframe>")
- .hide()
- .appendTo("body")
- .attr("src", url + querystring.stringify(query))
- .on("load", function () {
- $(this).remove();
- loaded = true;
- });
+ if (object && object.type !== "note") query.select = object.type + object.id; // can't select notes
+ sendRemoteEditCommand(remoteEditHost + "/load_and_zoom?" + Qs.stringify(query), function () {
+ if (object && object.type === "note") {
+ var noteQuery = { url: osmHost + OSM.apiUrl(object) };
+ sendRemoteEditCommand(remoteEditHost + "/import?" + Qs.stringify(noteQuery));
+ }
+ });
- setTimeout(function () {
- if (!loaded) {
+ function sendRemoteEditCommand(url, callback) {
+ var iframe = $("<iframe>");
+ var timeoutId = setTimeout(function () {
alert(I18n.t("site.index.remote_failed"));
iframe.remove();
- }
- }, 1000);
+ }, 5000);
+
+ iframe
+ .hide()
+ .appendTo("body")
+ .attr("src", url)
+ .on("load", function () {
+ clearTimeout(timeoutId);
+ iframe.remove();
+ if (callback) callback();
+ });
+ }
return false;
}
};
page.load = function () {
- var params = querystring.parse(location.search.substring(1));
+ var params = Qs.parse(location.search.substring(1));
if (params.query) {
$("#sidebar .search_form input[name=query]").value(params.query);
}