Widget HTML Atas

How To Brand A Hexagonal Wargames Map


If y'all liked the WarGames Dashboard, that was featured on final week, therefore y'all mightiness live on interested inwards creating your ain WarGames map style.

Here's a quick tutorial on making a WarGames map using Mapbox Studio. Before getting started y'all tin cheque out the finished map here.

1. The Base Map

The base of operations map for the WarGames map comes from Project Linework. Project Linework convey made a publish of unique map styles, all of which tin live on downloaded inwards the GeoJSON format. The WarGames map agency has hexagonal coast lines as well as borders which is perfect for our map.

Download the WarGames map agency from Project Linework inwards the GeoJSON format.

In Mapbox Studio select 'New Style' as well as therefore conduct the 'Empty' option from the listing of templates.

Once Mapbox Studio opens y'all rootage involve to import the WarGames GeoJSON information that y'all downloaded from Project Linework. Select the 'data' icon from the carte du jour on the left-hand side of the screen.

Click on 'New Dataset' as well as therefore 'Select a File'. 

I decided to precisely upload the admin0_lines.json & admin0_polygons.json files for province borders as well as province shapefiles as well as the admin1_lines.json for province as well as rootage admin score boundaries. If y'all desire y'all tin add together to a greater extent than exceptional to your map past times too uploading the lakes.json every bit well.

Once y'all convey uploaded the information to Mapbox Studio y'all involve to add together each json file to your map. Select the file y'all desire to add together to your file from your listing of 'Datasets' as well as therefore select 'Add to Style'. Do this for each of the json files y'all desire to add together to your map.

Each fourth dimension y'all add together a dataset to your map y'all involve to click on 'Create Layer' to larn inwards an active layer inwards your Mapbox Studio map style.

2. Styling Your Basemap

Lets agency the H2O on our map. We genuinely haven't added whatever H2O features to our map. However the 'background' layer volition suffice every bit it is forthwith basically the world's seas as well as oceans. Click on the 'background' layer inwards your listing of layers. Click on the color as well as motion into #0d1b29.

Now agency the land. Click on your 'admin0_polygons' layer inwards the layers menu. Click on the color as well as motion into #246.

3. Make Your Borders Glow

You tin brand neon glowing borders for your map past times duplicating the province borders layer as well as styling each layer a niggling differently.


Select the master province edge layer as well as ready the width to 1px as well as the color to #32d9d9.

Click on your province edge layer. Then select the 'Duplicate Layer' icon to re-create that layer. Now select your duplicate layer as well as ready the width to 9px as well as the blur to 10px.

Now duplicate this layer every bit good as well as select the novel layer as well as ready the width to 15px.

You mightiness involve to brand certain your province edge layer as well as 2 duplicate layers are inwards the right stacking order. In the layers carte du jour your master should live on at the superlative as well as the 2 duplicate underneath inwards descending order. If they aren't inwards this guild y'all tin rearrange them only past times dragging the layers into the right order.

4. Add Country Labels

Lets add together the names of countries to our map. Select '+ New Layer' as well as therefore 'Select a Database'. Now select 'country-label' from the list.

After y'all convey added province labels select the country-label layer from the layers menu. From 'select data' brand certain y'all convey chosen the 'Symbol' option.

From the agency carte du jour select '{name_en}' inwards the 'text field'. Change the 'Font' past times selecting 'Magda Clean Mono Offc Pro Black' from the listing of fonts. I too set the 'Size' to 11px.

That's it! If y'all are happy amongst your novel WarGames map agency precisely click on the 'Publish' push clitoris to consummate your map.