La police par défaut de Maplibre n'est pas dispo chez nous

maplibre/maplibre-style-spec#436
cartesapp · Aug 8, 2024 · d182f6c · d182f6c
1 parent 0670c80
commit d182f6c
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 11 deletions.
diff --git 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 = `<circle
@@ -24,8 +24,8 @@ export default async function buildSvgImage(
      r="${xyr}" />`
 	const newInner = `${backgroundDisk}<g style="fill:white;" transform="scale(.7)" transform-origin="center" transform-box="fill-box">${svg.innerHTML}</g>`
 	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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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]