DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound...
Transcript of DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound...
![Page 1: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/1.jpg)
DEVELOPING WEB TILES
STEVE CL INE – G IS ANALYST
![Page 2: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/2.jpg)
CSS for Maps
![Page 3: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/3.jpg)
![Page 4: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/4.jpg)
PROS OF WEB TILES
• Speed
• Cross Browser
• Design Control!
• Multi-scale
• Easy integration
with applications
• Leaflet, Mapbox,
ArcGIS Online
![Page 5: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/5.jpg)
CONS OF WEB TILES
• Data not Dynamic
• Data updates require exporting a new tile file.
• Large scale range = large file size
• Limit scale range
• TileMill 2: In development on GitHub, vector tiles!
![Page 6: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/6.jpg)
ADD TILE TO ARCGIS ONLINE
• My Map
• Add layer from
web.
• A tile layer
• Enter URL
with your mapID.
• Sub domains:
a, b, c, d
![Page 7: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/7.jpg)
EXAMPLES
• Bi-Variate map. Poverty and Median Income
• Radon
• Portland Building footprint Age
• Netherlands Building footprint Age
• Washington Post
• National Parks
![Page 8: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/8.jpg)
![Page 9: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/9.jpg)
![Page 10: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/10.jpg)
![Page 11: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/11.jpg)
![Page 12: DEVELOPING WEB TILES - DVRPC · TileMill ZOOM 11 Layers • *building #munilabel *tcrbound *municipal Centre Twp. click map info. Municipal style.mss X { polygon- { polygon- { polygon-](https://reader034.fdocuments.net/reader034/viewer/2022052104/603f771ae1ffce4c62434455/html5/thumbnails/12.jpg)
QUESTIONS
• Contact Steve Cline
• Download TileMill
• https://www.mapbox.com/tilemill/
• Getting Started with CartoCSS
• www.mapbox.com/tilemill/docs/crashcourse/introduction/
• Tip
• Open sample .mss files in a text editor like notepad to view
the code. Copy paste to TileMill to modify and use your own
data.