Robin-van-der-Linde/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add sunny unlabeld, fix label export

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-03-30 13:07:26 +01:00
parent 5984d0c19e
commit 5cd7f0976e
8 changed files with 2983 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -101,7 +101,7 @@
"weblate-add-upstream": "git remote add weblate-github git@github.com:weblate/MapComplete.git && git remote add weblate-hosted-core https://hosted.weblate.org/git/mapcomplete/core/ && git remote add weblate-hosted-layers https://hosted.weblate.org/git/mapcomplete/layers/",
"weblate-merge": "git remote update weblate-github; git merge weblate-github/weblate-mapcomplete-core weblate-github/weblate-mapcomplete-layers weblate-github/weblate-mapcomplete-layer-translations",
"weblate-fix-heavy": "git fetch weblate-hosted-layers; git fetch weblate-hosted-core; git merge weblate-hosted-layers/master weblate-hosted-core/master ",
"housekeeping": "git pull && npx update-browserslist-db@latest && npm run weblate-fix-heavy && npm run generate && npm run generate:docs && npm run generate:contributor-list && vite-node scripts/fetchLanguages.ts && npm run format && git add assets/ langs/ Docs/ **/*.ts Docs/* src/* && git commit -m 'chore: automated housekeeping...'",
"housekeeping": "git pull && npx update-browserslist-db@latest && npm run weblate-fix-heavy && npm run generate && npm run generate:docs && npm run generate:contributor-list && vite-node scripts/fetchLanguages.ts && vite-node scripts/generateSunnyUnlabeled.ts && npm run format && git add assets/ langs/ Docs/ **/*.ts Docs/* src/* && git commit -m 'chore: automated housekeeping...'",
"reuse-compliance": "reuse lint",
"summary-server": "vite-node scripts/osm2pgsql/tilecountServer.ts",
"ldjson-server": "vite-node scripts/serverLdScrape.ts",

2901
public/assets/sunny-unlabeled.json Normal file
View file

File diff suppressed because it is too large Load diff

18
scripts/generateSunnyUnlabeled.ts Normal file
View file

@ -0,0 +1,18 @@
import { writeFileSync } from "fs"
import Script from "./Script"
import sunny from "../public/assets/sunny.json"
export class GenerateSunnyUnlabeled extends Script {
constructor() {
super("Generates 'sunny-unlabeled.json' based on sunny.json")
}
async main(args: string[]): Promise<void> {
const unlabeled = { "#":"AUTOMATICALLY GENERATED! Do not edit.", ...sunny }
unlabeled.name = unlabeled.name+"-unlabeled"
unlabeled.layers = sunny.layers.filter(l => l.type !== "symbol" || !l.layout["text-field"])
writeFileSync("public/assets/sunny-unlabeled.json", JSON.stringify(unlabeled, null, " "))
}
}
new GenerateSunnyUnlabeled().run()

59
src/UI/Map/MapLibreAdaptor.ts
View file

@ -1,7 +1,7 @@
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
import { Map as MLMap } from "maplibre-gl"
import { Map as MlMap, SourceSpecification } from "maplibre-gl"
import maplibregl from "maplibre-gl";
import maplibregl from "maplibre-gl"
import { RasterLayerPolygon } from "../../Models/RasterLayers"
import { Utils } from "../../Utils"
import { BBox } from "../../Logic/BBox"
@ -12,7 +12,9 @@ import { RasterLayerProperties } from "../../Models/RasterLayerProperties"
import * as htmltoimage from "html-to-image"
import RasterLayerHandler from "./RasterLayerHandler"
import Constants from "../../Models/Constants"
import { Protocol } from "pmtiles";
import { Protocol } from "pmtiles"
import { bool } from "sharp"
/**
* The 'MapLibreAdaptor' bridges 'MapLibre' with the various properties of the `MapProperties`
*/
@ -24,13 +26,13 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
"dragRotate",
"dragPan",
"keyboard",
"touchZoomRotate",
"touchZoomRotate"
]
private static maplibre_zoom_handlers = [
"scrollZoom",
"boxZoom",
"doubleClickZoom",
"touchZoomRotate",
"touchZoomRotate"
]
readonly location: UIEventSource<{ lon: number; lat: number }>
readonly zoom: UIEventSource<number>
@ -47,7 +49,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
readonly pitch: UIEventSource<number>
readonly useTerrain: Store<boolean>
private static pmtilesInited = false
private static pmtilesInited = false
/**
* Functions that are called when one of those actions has happened
* @private
@ -57,8 +59,8 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
private readonly _maplibreMap: Store<MLMap>
constructor(maplibreMap: Store<MLMap>, state?: Partial<MapProperties>) {
if(!MapLibreAdaptor.pmtilesInited){
maplibregl.addProtocol("pmtiles",new Protocol().tile);
if (!MapLibreAdaptor.pmtilesInited) {
maplibregl.addProtocol("pmtiles", new Protocol().tile)
MapLibreAdaptor.pmtilesInited = true
console.log("PM-tiles protocol added" +
"")
@ -214,9 +216,9 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
return {
map: mlmap,
ui: new SvelteUIElement(MaplibreMap, {
map: mlmap,
map: mlmap
}),
mapproperties: new MapLibreAdaptor(mlmap),
mapproperties: new MapLibreAdaptor(mlmap)
}
}
@ -284,7 +286,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
) {
const event = {
date: new Date(),
key: key,
key: key
}
for (let i = 0; i < this._onKeyNavigation.length; i++) {
@ -328,6 +330,19 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
rescaleIcons: number,
pixelRatio: number
) {
{
const allimages = element.getElementsByTagName("img")
for (const img of Array.from(allimages)) {
let isLoaded: boolean = false
while (!isLoaded) {
console.log("Waiting for image", img.src, "to load")
await Utils.waitFor(250)
isLoaded = img.complete && img.naturalWidth > 0
}
}
}
const style = element.style.transform
let x = element.getBoundingClientRect().x
let y = element.getBoundingClientRect().y
@ -339,12 +354,16 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
// Force a wider view for icon badges
element.style.width = element.getBoundingClientRect().width * 4 + "px"
element.style.height = element.getBoundingClientRect().height + "px"
// Force more height to include labels
element.style.height = element.getBoundingClientRect().height * 2 + "px"
element.classList.add("w-full","flex", "flex-col","items-center")
const svgSource = await htmltoimage.toSvg(element)
const img = await MapLibreAdaptor.createImage(svgSource)
element.style.width = w
element.style.height = h
await Utils.awaitAnimationFrame()
if (offset && rescaleIcons !== 1) {
const [_, __, relYStr] = offset
const relY = Number(relYStr)
@ -355,10 +374,13 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
y *= pixelRatio
try {
drawOn.drawImage(img, x, y, img.width * rescaleIcons, img.height * rescaleIcons)
let xdiff = img.width * rescaleIcons / 2
drawOn.drawImage(img, x - xdiff, y, img.width * rescaleIcons, img.height * rescaleIcons)
} catch (e) {
console.log("Could not draw image because of", e)
}
element.classList.remove("w-full","flex", "flex-col","items-center")
}
/**
@ -393,19 +415,12 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
const markers = Array.from(container.getElementsByClassName("marker"))
for (let i = 0; i < markers.length; i++) {
const marker = <HTMLElement>markers[i]
const labels = Array.from(marker.getElementsByClassName("marker-label"))
const style = marker.style.transform
if (isDisplayed(marker)) {
await this.drawElement(drawOn, marker, rescaleIcons, pixelRatio)
}
for (const label of labels) {
if (isDisplayed(label)) {
await this.drawElement(drawOn, <HTMLElement>label, rescaleIcons, pixelRatio)
}
}
if (progress) {
progress.setData({ current: i, total: markers.length })
}
@ -434,7 +449,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
const bounds = map.getBounds()
const bbox = new BBox([
[bounds.getEast(), bounds.getNorth()],
[bounds.getWest(), bounds.getSouth()],
[bounds.getWest(), bounds.getSouth()]
])
if (this.bounds.data === undefined || !isSetup) {
this.bounds.setData(bbox)
@ -612,14 +627,14 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
type: "raster-dem",
url:
"https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=" +
Constants.maptilerApiKey,
Constants.maptilerApiKey
})
try {
while (!map?.isStyleLoaded()) {
await Utils.waitFor(250)
}
map.setTerrain({
source: id,
source: id
})
} catch (e) {
console.error(e)

3
src/UI/Map/RasterLayerHandler.ts
View file

@ -131,7 +131,8 @@ class SingleBackgroundHandler {
.layers.find((l) => l.id.startsWith("mapcomplete_"))?.id
if (background.type === "vector") {
map.setStyle(background.style ?? background.url)
const styleToSet = background.style ?? background.url
map.setStyle(styleToSet)
} else {
map.addLayer(
{

8
src/Utils.ts
View file

@ -1061,6 +1061,14 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
throw result["error"]
}
public static awaitAnimationFrame(): Promise<void>{
return new Promise<void>((resolve) => {
window.requestAnimationFrame(() => {
resolve()
})
})
}
public static async downloadJsonAdvanced(
url: string,
headers?: any

2
src/Utils/pngMapCreator.ts
View file

@ -67,7 +67,7 @@ export class PngMapCreator {
const newZoom = settings.zoom.data + Math.log2(pixelRatio) - 1
const mapElem = new MlMap({
container: div.id,
style: AvailableRasterLayers.defaultBackgroundLayer.properties.url,
style: settings.rasterLayer.data?.properties?.url ?? AvailableRasterLayers.defaultBackgroundLayer.properties.url,
center: [l.lon, l.lat],
zoom: newZoom,
pixelRatio,

15
src/assets/global-raster-layers.json
View file

@ -102,6 +102,21 @@
"url": "https://protomaps.com/"
}
},
{
"url": "pmtiles://https://api.protomaps.com/tiles/v3.json?key=2af8b969a9e8b692",
"style": "assets/sunny-unlabeled.json",
"connect-src": [
"https://protomaps.github.io"
],
"id": "protomaps.sunny_unlabeled",
"name": "Protomaps Sunny Unlabeled",
"type": "vector",
"category": "osmbasedmap",
"attribution": {
"text": "Protomaps",
"url": "https://protomaps.com/"
}
},
{
"name": "Americana",