Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add OpenMapTiles vector map #4042

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions app/assets/javascripts/leaflet.map.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
//= require maplibre-gl
//= require @maplibre/maplibre-gl-leaflet
//= require @maptiler/maplibre-gl-omt-language
//= require i18n

L.extend(L.LatLngBounds.prototype, {
getSize: function () {
return (this._northEast.lat - this._southWest.lat) *
Expand All @@ -9,6 +14,40 @@ L.extend(L.LatLngBounds.prototype, {
}
});

if (OSM.MAPTILER_KEY) {
L.OpenMapTiles = L.MaplibreGL.extend({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Arabic and Hebrew would be broken unless this code also installs the right-to-left text plugin. (Note that it only supports these two languages, not other languages in the same scripts or other right-to-left scripts.)

options: {
maxZoom: 23,
style: "https://api.maptiler.com/maps/openstreetmap/style.json?key=" + OSM.MAPTILER_KEY
},
onAdd: function (map) {
var supportedLanguages = "am,ar,az,be,bg,br,bs,ca,co,cs,cy,da,de,el,en,eo,es,et,eu,fi,fr,fy,ga,gd,he,hi,hr,hu,hy,id,is,it,ja,ja_kana,ja_rm,ja-Latn,ja-Hira,ka,kk,kn,ko,ko-Latn,ku,la,lb,lt,lv,mk,mt,ml,nl,no,oc,pl,pt,rm,ro,ru,sk,sl,sq,sr,sr-Latn,sv,ta,te,th,tr,uk,zh".split(",");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

name:ja_kana and name:ja_rm are both documented on the wiki as being deprecated, although they are still in use to some extent. Is it a good idea to support these nonstandard language codes as part of the website?

Copy link
Contributor

@1ec5 1ec5 Jun 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This list doesn’t include the languages added to OpenMapTiles openmaptiles/openmaptiles#1477, including zh-Hans and zh-Hant. I assume that’s because the MapTiler-hosted tiles are on OpenMapTiles v3.14, whereas this change is still waiting to be released. Is there a way to automate this list so that the website maintainers won’t have to remember to update it based on OpenMapTiles’ release schedule and MapTiler’s upgrade schedule?

L.MaplibreGL.prototype.onAdd.call(this, map);
var m = this.getMaplibreMap();
m.on("load", function () {
var locale;
if (supportedLanguages.includes(I18n.locale)) {
locale = I18n.locale;
} else {
var mainLocale = I18n.locale.slice(0, 2);
var localeIndex = supportedLanguages.findIndex(function (locale) { return locale.slice(0, 2) === mainLocale; });
if (localeIndex > -1) {
locale = supportedLanguages[localeIndex];
}
}

if (locale) {
m.setLanguage(locale);
}
});
L.MaplibreGL.prototype._update.call(this, map);
},
onRemove: function (map) {
L.MaplibreGL.prototype.onRemove.call(this, map);
}
});
}

L.OSM.Map = L.Map.extend({
initialize: function (id, options) {
L.Map.prototype.initialize.call(this, id, options);
Expand Down Expand Up @@ -44,6 +83,32 @@ L.OSM.Map = L.Map.extend({
this.baseLayers.push(layer);
}

if (L.OpenMapTiles) {
var copyright_link = $("<a>", {
href: "/copyright",
text: I18n.t("javascripts.map.openstreetmap_contributors")
}).prop("outerHTML");

var copyright = I18n.t("javascripts.map.copyright_text", { copyright_link: copyright_link });

var openmaptiles_link = I18n.t("javascripts.map.openmaptiles", {
openmaptiles_url: "https://openmaptiles.org/",
maptiler_url: "https://www.maptiler.com/"
});

var terms = $("<a>", {
href: "https://wiki.osmfoundation.org/wiki/Terms_of_Use",
text: I18n.t("javascripts.map.website_and_api_terms")
}).prop("outerHTML");

this.baseLayers.push(new L.OpenMapTiles({
attribution: copyright + ". " + openmaptiles_link + ". " + terms,
code: "V",
keyid: "openmaptiles_osm",
name: I18n.t("javascripts.map.base.openmaptiles_osm")
}));
}

this.noteLayer = new L.FeatureGroup();
this.noteLayer.options = { code: "N" };

Expand Down
4 changes: 4 additions & 0 deletions app/assets/javascripts/osm.js.erb
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ OSM = {
LAYER_DEFINITIONS: <%= YAML.load_file(Rails.root.join("config/layers.yml")).to_json %>,
LAYERS_WITH_MAP_KEY: <%= YAML.load_file(Rails.root.join("config/key.yml")).keys.to_json %>,

<% if Settings.key?(:maptiler_key) %>
MAPTILER_KEY: <%= Settings.maptiler_key.to_json %>,
<% end %>

MARKER_GREEN: <%= image_path("marker-green.png").to_json %>,
MARKER_RED: <%= image_path("marker-red.png").to_json %>,

Expand Down
2 changes: 1 addition & 1 deletion app/controllers/application_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ def fetch_body
def map_layout
policy = request.content_security_policy.clone

policy.connect_src(*policy.connect_src, "http://127.0.0.1:8111", Settings.nominatim_url, Settings.overpass_url, Settings.fossgis_osrm_url, Settings.graphhopper_url, Settings.fossgis_valhalla_url)
policy.connect_src(*policy.connect_src, "http://127.0.0.1:8111", Settings.maptiler_url, Settings.nominatim_url, Settings.overpass_url, Settings.fossgis_osrm_url, Settings.graphhopper_url, Settings.fossgis_valhalla_url)
policy.form_action(*policy.form_action, "render.openstreetmap.org")
policy.style_src(*policy.style_src, :unsafe_inline)

Expand Down
2 changes: 1 addition & 1 deletion config/initializers/content_security_policy.rb
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
policy.plugin_types
policy.script_src(*script_src)
policy.style_src(:self)
policy.worker_src(:none)
policy.worker_src(:blob)
policy.manifest_src(:self)
policy.report_uri(Settings.csp_report_url) if Settings.key?(:csp_report_url)
end
Expand Down
32 changes: 17 additions & 15 deletions config/locales/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,12 @@ en:
url: Main Application URL (Required)
callback_url: Callback URL
support_url: Support URL
allow_read_prefs: read their user preferences
allow_read_prefs: read their user preferences
allow_write_prefs: modify their user preferences
allow_write_diary: create diary entries and comments
allow_write_api: modify the map
allow_read_gpx: read their private GPS traces
allow_write_gpx: upload GPS traces
allow_write_api: modify the map
allow_read_gpx: read their private GPS traces
allow_write_gpx: upload GPS traces
allow_write_notes: modify notes
diary_comment:
body: "Body"
Expand Down Expand Up @@ -836,7 +836,7 @@ en:
census: "Census Boundary"
national_park: "National Park"
political: "Electoral Boundary"
protected_area : "Protected Area"
protected_area: "Protected Area"
"yes": "Boundary"
bridge:
aqueduct: "Aqueduct"
Expand Down Expand Up @@ -987,7 +987,7 @@ en:
turning_circle: "Turning Circle"
turning_loop: "Turning Loop"
unclassified: "Unclassified Road"
"yes" : "Road"
"yes": "Road"
historic:
aircraft: "Historic Aircraft"
archaeological_site: "Archaeological Site"
Expand Down Expand Up @@ -1167,7 +1167,7 @@ en:
trench: "Trench"
"yes": "Military"
mountain_pass:
"yes" : "Mountain Pass"
"yes": "Mountain Pass"
natural:
atoll: "Atoll"
bare_rock: "Bare Rock"
Expand Down Expand Up @@ -2068,11 +2068,11 @@ en:
credit_2_1: Provide credit to OpenStreetMap by displaying our copyright notice.
credit_2_2: Make clear that the data is available under the Open Database License.
credit_3_html: |
For the copyright notice, we have different requirements on how this should be
displayed, depending on how you are using our data. For example, different
rules apply on how to show the copyright notice depending on whether you have
created a browsable map, a printed map or a static image. Full details on the
requirements can be found in the %{attribution_guidelines_link}.
For the copyright notice, we have different requirements on how this should be
displayed, depending on how you are using our data. For example, different
rules apply on how to show the copyright notice depending on whether you have
created a browsable map, a printed map or a static image. Full details on the
requirements can be found in the %{attribution_guidelines_link}.
credit_3_attribution_guidelines: Attribution Guidelines
credit_3_attribution_guidelines_url: https://osmfoundation.org/wiki/Licence/Attribution_Guidelines
credit_4_1_html: |
Expand Down Expand Up @@ -2755,7 +2755,7 @@ en:
tab_title: "Sign up"
signup_to_authorize_html: "Sign up with OpenStreetMap to access %{client_app_name}."
no_auto_account_create: "Unfortunately we are not currently able to create an account for you automatically."
please_contact_support_html: 'Please contact %{support_link} to arrange for an account to be created - we will try and deal with the request as quickly as possible.'
please_contact_support_html: "Please contact %{support_link} to arrange for an account to be created - we will try and deal with the request as quickly as possible."
support: support
about:
header: Free and editable.
Expand All @@ -2776,7 +2776,7 @@ en:
privacy_policy: privacy policy
privacy_policy_url: https://osmfoundation.org/wiki/Privacy_Policy
privacy_policy_title: OSMF privacy policy including section on email addresses
html: 'Your address is not displayed publicly, see our %{privacy_policy_link} for more information.'
html: "Your address is not displayed publicly, see our %{privacy_policy_link} for more information."
consider_pd_html: "I consider my contributions to be in the %{consider_pd_link}."
consider_pd: "public domain"
consider_pd_url: https://osmfoundation.org/wiki/Licence_and_Legal_FAQ/Why_would_I_want_my_contributions_to_be_public_domain
Expand Down Expand Up @@ -3168,6 +3168,7 @@ en:
transport_map: Transport Map
tracestracktop_topo: Tracestrack Topo
hot: Humanitarian
openmaptiles_osm: MapTiler OMT
layers:
header: Map Layers
notes: Map Notes
Expand All @@ -3188,6 +3189,7 @@ en:
tracestrack: Tracestrack
hotosm_credit: "Tiles style by %{hotosm_link} hosted by %{osm_france_link}"
hotosm_name: Humanitarian OpenStreetMap Team
openmaptiles: "Vector tiles from <a href='%{openmaptiles_url}' target='_blank'>OpenMapTiles</a> hosted by <a href='%{maptiler_url}' target='_blank'>MapTiler</a>"
site:
edit_tooltip: Edit the map
edit_disabled_tooltip: Zoom in to edit the map
Expand Down Expand Up @@ -3314,7 +3316,7 @@ en:
title: "Creating New Redaction"
show:
description: "Description:"
heading: "Showing Redaction \"%{title}\""
heading: 'Showing Redaction "%{title}"'
title: "Showing Redaction"
user: "Creator:"
edit: "Edit this redaction"
Expand Down
2 changes: 2 additions & 0 deletions config/settings.yml
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,8 @@ attachments_dir: ":rails_root/public/attachments"
#logstash_path: ""
# List of memcache servers to use for caching
#memcache_servers: []
# URL of Maptiler API for vector maps
maptiler_url: "https://api.maptiler.com/"
# URL of Nominatim instance to use for geocoding
nominatim_url: "https://nominatim.openstreetmap.org/"
# Default editor
Expand Down
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
"name": "openstreetmap",
"private": true,
"dependencies": {
"@maplibre/maplibre-gl-leaflet": "^0.0.17",
"@maptiler/maplibre-gl-omt-language": "^0.0.1",
"jquery-simulate": "^1.0.2",
"js-cookie": "^3.0.0",
"leaflet": "^1.8.0",
"leaflet.locatecontrol": "^0.83.0",
"maplibre-gl": "^2.4.0",
"osm-community-index": "^5.2.0"
},
"devDependencies": {
Expand Down
Loading