From d182f6c7d94850a49ff485ec8080c0768a5a5b1a Mon Sep 17 00:00:00 2001 From: Mael Date: Thu, 8 Aug 2024 21:39:45 +0200 Subject: [PATCH] =?UTF-8?q?La=20police=20par=20d=C3=A9faut=20de=20Maplibre?= =?UTF-8?q?=20n'est=20pas=20dispo=20chez=20nous?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://github.com/maplibre/maplibre-style-spec/pull/436 --- app/effects/buildSvgImage.ts | 6 +++--- app/effects/useDrawElectionCluserResults.ts | 3 +-- app/effects/useDrawQuickSearchFeatures.ts | 8 +++++--- app/effects/useDrawTransit.ts | 2 +- app/itinerary/useDrawRoute.ts | 2 +- app/styles/france.ts | 4 ++++ components/map/CartesProtocol.ts | 2 +- 7 files changed, 16 insertions(+), 11 deletions(-) diff --git a/app/effects/buildSvgImage.ts b/app/effects/buildSvgImage.ts index fa339982d..066749ee3 100644 --- a/app/effects/buildSvgImage.ts +++ b/app/effects/buildSvgImage.ts @@ -14,7 +14,7 @@ export default async function buildSvgImage( const img = new Image(40, 40) const svg = fromHTML(imageText) - console.log({ imageText, imageUrl }) + //console.log({ imageText, imageUrl }) const svgSize = svg.getAttribute('width'), // Icons must be square ! xyr = svgSize / 2 const backgroundDisk = `` const newInner = `${backgroundDisk}${svg.innerHTML}` svg.innerHTML = newInner - console.log('svg', newInner) - console.log('svg', svg.outerHTML) + //console.log('svg', newInner) + //console.log('svg', svg.outerHTML) img.src = 'data:image/svg+xml;charset=utf-8,' + svg.outerHTML diff --git a/app/effects/useDrawElectionCluserResults.ts b/app/effects/useDrawElectionCluserResults.ts index 5c92515d0..8ae5a055a 100644 --- a/app/effects/useDrawElectionCluserResults.ts +++ b/app/effects/useDrawElectionCluserResults.ts @@ -54,7 +54,6 @@ export default function useDrawElectionClusterResults( rawFilter ) { const filter = rawFilter || 'elus' - console.log('lg plopi', styleKey, map) const [rawData, setData] = useState(null) useEffect(() => { if (styleKey !== 'elections') return @@ -161,7 +160,7 @@ export default function useDrawElectionClusterResults( ['get', 'cat'], { 'min-fraction-digits': 1, 'max-fraction-digits': 1 }, ], - 'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'], + 'text-font': ['Roboto Regular', 'Noto Sans Regular'], 'text-size': 10, }, paint: { diff --git a/app/effects/useDrawQuickSearchFeatures.ts b/app/effects/useDrawQuickSearchFeatures.ts index cf8f495a1..7e3860cfd 100644 --- a/app/effects/useDrawQuickSearchFeatures.ts +++ b/app/effects/useDrawQuickSearchFeatures.ts @@ -45,12 +45,13 @@ export default function useDrawQuickSearchFeatures( imageUrl, (img) => { console.log('useDrawQuickSearchFeatures build svg image', shownFeatures) - const imageName = category.name + '-futureco' + const imageName = category.name + '-cartes' // avoid collisions const mapImage = map.getImage(imageName) if (!mapImage) map.addImage(imageName, img) const baseId = `features-${category.name}-` - console.log('useDrawQuickSearchFeatures add source ', baseId + 'points') + console.log('useDrawQuickSearchFeatures add source ') + console.log(baseId + 'points') // Looks like buildSvgImage triggers multiple img.onload calls thus // multiple map.addSource, hence an error const source = map.getSource(baseId + 'points') @@ -133,11 +134,12 @@ export default function useDrawQuickSearchFeatures( type: 'symbol', source: baseId + 'points', layout: { - 'icon-image': category.name + '-futureco', + 'icon-image': category.name + '-cartes', 'icon-size': 0.6, 'text-field': ['get', 'name'], 'text-offset': [0, 1.25], 'text-anchor': 'top', + 'text-font': ['Roboto Regular', 'Noto Sans Regular'], }, paint: { 'text-color': '#503f38', diff --git a/app/effects/useDrawTransit.ts b/app/effects/useDrawTransit.ts index aee437dff..a912d1d87 100644 --- a/app/effects/useDrawTransit.ts +++ b/app/effects/useDrawTransit.ts @@ -113,7 +113,7 @@ export default function useDrawTransit(map, transit, selectedConnection, date) { source: id, layout: { 'symbol-placement': 'line', - 'text-font': ['Open Sans Bold'], + 'text-font': ['Roboto Regular', 'Noto Sans Regular'], 'text-field': '{name}', // part 2 of this is how to do it 'text-transform': 'uppercase', 'text-size': 16, diff --git a/app/itinerary/useDrawRoute.ts b/app/itinerary/useDrawRoute.ts index 7fcc25651..052ed9b72 100644 --- a/app/itinerary/useDrawRoute.ts +++ b/app/itinerary/useDrawRoute.ts @@ -42,8 +42,8 @@ export default function useDrawRoute(isItineraryMode, map, geojson, id) { }, layout: { 'text-field': ['get', 'letter'], - // 'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'], 'text-size': 16, + 'text-font': ['Roboto Regular', 'Noto Sans Regular'], }, }) console.log('will add layer poinst', id + 'Points') diff --git a/app/styles/france.ts b/app/styles/france.ts index 531daa012..c05ba0a2e 100644 --- a/app/styles/france.ts +++ b/app/styles/france.ts @@ -14,6 +14,8 @@ export default function franceStyle(key) { sources: { openmaptiles: { url: 'cartes://hybrid', // see the protocol CartesProtocol + //url: 'pmtiles://' + gtfsServerUrl + '/hexagone-plus.pmtiles', + //url: 'pmtiles://https://panoramax.openstreetmap.fr/pmtiles/planet.pmtiles', type: 'vector', }, // https://osmdata.openstreetmap.de/data/land-polygons.html @@ -34,6 +36,8 @@ export default function franceStyle(key) { layers, glyphs: getFetchUrlBase() + '/fonts/glyphs/{fontstack}/{range}.pbf', sprite: getFetchUrlBase() + '/sprite/sprite', + //glyphs: `https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=${key}`, + //sprite: 'https://api.maptiler.com/maps/2f80a9c4-e0dd-437d-ae35-2b6c212f830b/sprite', bearing: 0, pitch: 0, center: [0, 0], diff --git a/components/map/CartesProtocol.ts b/components/map/CartesProtocol.ts index 71827fa77..6e6608e2c 100644 --- a/components/map/CartesProtocol.ts +++ b/components/map/CartesProtocol.ts @@ -3,12 +3,12 @@ import { RequestParameters } from 'maplibre-gl' import { PMTiles } from 'pmtiles' import { gtfsServerUrl } from '@/app/serverUrls' -import hexagoneGeojson from '@/components/map/hexagone.json' import { bboxPolygon } from '@turf/bbox-polygon' import { booleanContains } from '@turf/boolean-contains' const pmtilesUrl1 = gtfsServerUrl + '/hexagone-plus.pmtiles' const pmtilesUrl2 = gtfsServerUrl + '/planet.pmtiles' +// https://panoramax.openstreetmap.fr/pmtiles/planet.pmtiles const bboxHexagonePlus = [-11.26, 40.5, 11.26, 60.33]