#30DayMapChallenge Ziua 3. Poligoane
City Tiles 🏙️
Aceasta este o hartă care conține tile-uri de tip vector din clădirile OSM, create folosind D3.js și Nextzen, și am pregătit-o pentru #30DayMapChallenge de pe Twitter în 2021. Puteți afla mai multe despre provocare și celelalte hărți ale mele în această postare.
Puteți urmări un clip care prezintă funcționalitatea pe YouTube.
Scop: O hartă cu poligoane.
Live: https://maptheclouds.com/playground/30-day-map-challenge/polygons/
Tweet: https://twitter.com/maptheclouds/status/1455980347066302471
Cod: https://github.com/alexaac/map-challenges/tree/master/polygons
Descriere:
Vizualizarea reprezintă centrul istoric al Timișoarei, din România.
Date: OSM Buildings, Nextzen
Tag-uri: #D3js #Nextzen #OSMBuildings #VectorTiles
Inspirație:
https://osmbuildings.org/documentation/data/
https://www.nextzen.org/
Tile-uri de tip vector din clădirile OSM folosind D3.js și Nextzen – procesul
Provocări: Pentru această hartă am vrut să testez încărcarea de tile-uri de tip vector din surse diferite. În acest scop folosesc câteva layere pentru a desena harta de bază, de la Nextzen, și adaug un layer de clădiri deasupra, de la OSM Buildings. Pentru a obține datele mă conectez la API-uri specifice de date și le primesc tile cu tile, folosind d3.tile.
Mai întâi, încarc datele pentru straturile de bază: layer-ele de background, water, earth și roads. Apoi încarc stratul de deasupra, clădirile. După aceea folosesc D3.js atât pentru a le stiliza cât și pentru a le vizualiza.
const buildings = g
.selectAll('g.buildings')
.data(tiles.features)
.enter()
.append('path')
.style('fill', '#3288bd')
.style('fill-opacity', 1)
.attr('d', path)
.style('stroke-width', 0.1)
.style('stroke', '#000');Totuși încărcarea de tile-uri din surse diferite s-a dovedit a fi un proces mai complicat. Cea mai mare provocare pe care a ridicat-o această hartă a fost să încarc toate tile-urile folosind API-ul de la Nextzen înainte de a încărca clădirile. Altfel unele tile-uri de clădiri ar fi fost acoperite de tile-uri de bază.
Pnetru a rezolva această problemă am folosit mai întâi Promise.all și async pentru a obține datele de bază cu d3.tile. apoi am încărcat clădirile doar după ce toate layer-urile pentru background layers se aflau deja în pagină. Mai mult, toate tile-urile de la API-ul de la Nextzen API au trebuit să fie încărcate înainte de a le stiliza, pentru a preveni aceeași problemă de suprapunere.
return Promise.all(promises)
.then((data) => {
// Wait for the Nextzen tiles to complete, then render the OSM tiles
renderBuildings();
return data;
})
.catch((error) => console.log(error));
};TODO: să adaug zoom mai lin, să creez un layout pentru tipărire.
Ca o concluzie, trebuie să spun că mi-a plăcut să lucrez la această hartă și am învățat mai multe despre preluarea de tile-uri de tip vector prin API-uri pentru a face hărți utilizând D3.js.
