assets/data-tiling.svg

<svg viewBox="0 0 715 640" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="715" height="640" fill="white"/>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" letter-spacing="0em"><tspan x="512" y="74.1016">&#10;</tspan><tspan x="512" y="88.1016">Data must be a sequence of </tspan><tspan x="512" y="102.102">newline-delimited GeoJSON </tspan><tspan x="512" y="116.102">objects for upload through the </tspan><tspan x="512" y="130.102">Tilesets API. All data </tspan><tspan x="512" y="144.102">attributes are retained when </tspan><tspan x="512" y="158.102">uploaded to the server.</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" font-style="italic" letter-spacing="0em"><tspan x="512" y="60.1016">data.ndjson&#10;</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" letter-spacing="0em"><tspan x="227" y="88.1016">&#10;</tspan><tspan x="227" y="102.102">ogr2ogr is a command-line tool </tspan><tspan x="227" y="116.102">distributed as part of the GDAL package </tspan><tspan x="227" y="130.102">and converts data from one geographic </tspan><tspan x="227" y="144.102">representation to another.&#10;</tspan><tspan x="227" y="158.102">&#10;</tspan><tspan x="227" y="172.102">We use it to convert our source geometry </tspan><tspan x="227" y="186.102">to an array of GeoJSON objects.</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" font-style="italic" letter-spacing="0em"><tspan x="227" y="60.1016">ogr2ogr -f &#x201c;GeoJSONSeq&#x201d;  source </tspan><tspan x="227" y="74.1016">data.ndjson&#10;</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" font-style="italic" letter-spacing="0em"><tspan x="220" y="317.102">mapbox://tileset-source/mbxsolutions/us-counties&#10;</tspan><tspan x="220" y="331.102">&#10;</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" letter-spacing="0em"><tspan x="220" y="345.102">Uploaded source files are hosted&#10;</tspan><tspan x="220" y="359.102">by Mapbox and can be shared by&#10;</tspan><tspan x="220" y="373.102">multiple recipes.</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" letter-spacing="0em"><tspan x="220" y="461.102">&#10;</tspan><tspan x="220" y="475.102">The recipe defines how to interpret the </tspan><tspan x="220" y="489.102">source data when tiling.&#10;</tspan><tspan x="220" y="503.102">&#10;</tspan><tspan x="220" y="517.102">For the elections sample, we filter the US </tspan><tspan x="220" y="531.102">counties to only include counties from the </tspan><tspan x="220" y="545.102">lower 48 states and DC. We also limit the </tspan><tspan x="220" y="559.102">published attributes to the ones used in </tspan><tspan x="220" y="573.102">our application and ensure that the each </tspan><tspan x="220" y="587.102">feature&#x2019;s ID is derived from its county&#10;</tspan><tspan x="220" y="601.102">FIPS code.</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" font-style="italic" letter-spacing="0em"><tspan x="220" y="447.102">recipe.json&#10;</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" letter-spacing="0em"><tspan x="24" y="77.1016">&#10;</tspan><tspan x="24" y="91.1016">Most formats can be converted&#10;</tspan><tspan x="24" y="105.102">to GeoJSONSeq by ogr2ogr.&#10;</tspan><tspan x="24" y="119.102">&#10;</tspan><tspan x="24" y="133.102">The Census Bureau provides </tspan><tspan x="24" y="147.102">county and other administrative </tspan><tspan x="24" y="161.102">boundaries in shapefile format.</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" font-style="italic" letter-spacing="0em"><tspan x="24" y="63.1016">cb_2018_us_county_500k.shp&#10;</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="18" font-weight="bold" letter-spacing="0em"><tspan x="24" y="36.6523">Source Data</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="18" font-weight="bold" letter-spacing="0em"><tspan x="227" y="36.6523">ogr2ogr</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="18" font-weight="bold" letter-spacing="0em"><tspan x="512" y="36.6523">GeoJSONSeq</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="18" font-weight="bold" letter-spacing="0em"><tspan x="220" y="290.652">Tilesets Source</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="18" font-weight="bold" letter-spacing="0em"><tspan x="512" y="290.652">Published Tileset</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="18" font-weight="bold" letter-spacing="0em"><tspan x="220" y="426.652">Tilesets Recipe</tspan></text>
<path d="M205.354 32.3536C205.549 32.1583 205.549 31.8417 205.354 31.6464L202.172 28.4645C201.976 28.2692 201.66 28.2692 201.464 28.4645C201.269 28.6597 201.269 28.9763 201.464 29.1716L204.293 32L201.464 34.8284C201.269 35.0237 201.269 35.3403 201.464 35.5355C201.66 35.7308 201.976 35.7308 202.172 35.5355L205.354 32.3536ZM155 32.5H205V31.5H155V32.5Z" fill="black"/>
<path d="M496.354 32.3536C496.549 32.1583 496.549 31.8417 496.354 31.6464L493.172 28.4645C492.976 28.2692 492.66 28.2692 492.464 28.4645C492.269 28.6597 492.269 28.9763 492.464 29.1716L495.293 32L492.464 34.8284C492.269 35.0237 492.269 35.3403 492.464 35.5355C492.66 35.7308 492.976 35.7308 493.172 35.5355L496.354 32.3536ZM446 32.5H496V31.5H446V32.5Z" fill="black"/>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" letter-spacing="0em"><tspan x="24" y="328.102">&#10;</tspan><tspan x="24" y="342.102">This project uses a Node script </tspan><tspan x="24" y="356.102">to interact with the Tilesets API </tspan><tspan x="24" y="370.102">for uploading source data, a </tspan><tspan x="24" y="384.102">recipe, and publishing its </tspan><tspan x="24" y="398.102">tileset.&#10;</tspan><tspan x="24" y="412.102">&#10;</tspan><tspan x="24" y="426.102">A Python-based CLI provides </tspan><tspan x="24" y="440.102">more complete interaction with </tspan><tspan x="24" y="454.102">the Tilesets API.</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" font-style="italic" letter-spacing="0em"><tspan x="24" y="314.102">npm run upload-data&#10;</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="18" font-weight="bold" letter-spacing="0em"><tspan x="24" y="290.652">Tilesets API</tspan></text>
<path d="M205.354 286.354C205.549 286.158 205.549 285.842 205.354 285.646L202.172 282.464C201.976 282.269 201.66 282.269 201.464 282.464C201.269 282.66 201.269 282.976 201.464 283.172L204.293 286L201.464 288.828C201.269 289.024 201.269 289.34 201.464 289.536C201.66 289.731 201.976 289.731 202.172 289.536L205.354 286.354ZM155 286.5H205V285.5H155V286.5Z" fill="black"/>
<path d="M496.354 286.354C496.549 286.158 496.549 285.842 496.354 285.646L493.172 282.464C492.976 282.269 492.66 282.269 492.464 282.464C492.269 282.66 492.269 282.976 492.464 283.172L495.293 286L492.464 288.828C492.269 289.024 492.269 289.34 492.464 289.536C492.66 289.731 492.976 289.731 493.172 289.536L496.354 286.354ZM446 286.5H496V285.5H446V286.5Z" fill="black"/>
<path d="M227 385L227 399" stroke="black" stroke-width="2" stroke-linecap="round"/>
<path d="M234 392L220 392" stroke="black" stroke-width="2" stroke-linecap="round"/>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" letter-spacing="0em"><tspan x="512" y="331.102">&#10;</tspan><tspan x="512" y="345.102">The published tileset can be </tspan><tspan x="512" y="359.102">added to a map style in Studio or </tspan><tspan x="512" y="373.102">added as a new source in gl-js.</tspan></text>
<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Helvetica, Arial, sans-serif" font-size="12" font-style="italic" letter-spacing="0em"><tspan x="512" y="317.102">mbxsolutions.us-counties&#10;</tspan></text>
<path d="M583.5 177.5C583.5 208.5 397.012 208 303 208C211 208 29 204.5 29 259" stroke="black" stroke-width="1.25"/>
<line x1="0.5" y1="-0.5" x2="6.54617" y2="-0.5" transform="matrix(0.596212 0.802827 -0.596212 0.802827 25 254)" stroke="black" stroke-linecap="round"/>
<line x1="0.5" y1="-0.5" x2="6.54617" y2="-0.5" transform="matrix(0.596212 -0.802827 0.596212 0.802827 29.4558 259.657)" stroke="black" stroke-linecap="round"/>
</svg>