Building a Web Map, Part 2

Alright, I was finally able to get some basic markers and popups to work.  I wasn’t able to accomplish as much this week as I was hoping.  I ended up working extra hours this week because I was off school for spring break, so I couldn’t spend that time working on the map as I had planned.

Before placing any locations on the map, I organized the data I had preciously collected into one excel file. I split the locations into two broad categories, adventure locations and population locations. for adventures, I included data about type of adventure, ruin, dungeon, lair, mine, and graveyard; type of monsters present such as humanoid, or undead; the big boss of the adventure; and the source where the adventure can be found. For population centers I included different categories, type of population center, total population, faction loyalty, military capability, the current ruler, and main economic activities. For this category I included major humanoid locations that were the locations of a lair for an entire tribe.

Once I had all this data organized, I needed to create actual points in ArcMap to match to all the locations. To do this I used Thorfinn Tait’s updated map of Karameikos modified with forested hills as a reference. I was able to georeference this 8mph using the24mph expert map as a basis. however, this map doesn’t match up perfectly and I had to use more than two control points to get it to line up, even then it still doesn’t completely agree with the earlier 6mph map or the 24 mph map published in the expert set. The most notable differences occur in the route of the rivers and the shape of the peninsula by Specularum. There are also more hexes classified as mountainous as opposed to hilly, and some of the settlements are off by a smidge. These differences can be seen in the image below, the 8mph map is displayed at 50%transparency on top of the other maps with the created locations symbolized as red and purple circles. Once I had this reference map in place, I was able to create a new shapefile and add points features to it for each location. I used the 6mph map as a primary source, and where a location wasn’t marked on that map, I used the 8ph map.

With the point locations created, now I needed to join the data from my excel file to the shapefile. this proved troublesome. the join tool failed to operate when I attempted to join the two attribute tables with the excel table. I could have figured out the issue, which probably had something to do with the formatting of the excel table, but since I hadn’t created a great number of points I decided to just copy and paste the data from the excel file to the attribute table of the shapefile.

With my work in ArcMap completed, I moved on to moving the features I had created into the web map. This is where the most time was spent and I kept running into roadblocks. The main goal here was to convert the shapefile into a geoJSON format and then use that to create popups displaying the properties of each marker.  Converting to geoJSON seemed to be easy at first. There was a tool in ArcMap which allowed me to easily do this. however, the end result had to be modified. This is what the tool gave me for the adventure site of Koriszegy Keep:

{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"EPSG:3857"}},"features":[{"type":"Feature","id":0,"geometry":{"type":"Point","coordinates": 419432.17583047762,3141498.3623768883]},"properties":{"FID":0,"Id":0,"Name":"Koriszegy Keep","Type":"Ruins","Monsters":" Humanoids, Werewolves, Undead, Lowlife","Boss":" Rodemus Family","Module":"Modlvay Basic"}}]}

The issue here is the coordinates provided. In order for the point to be displayed properly the x and y values must be in decimal degrees; currently a northing and easting are displayed in meters, specific to the projection used (web Mercator). Also, the latitude and longitude values need to be swapped, so they appear as long(x), lat(y). Also, seen in the code above is the definition of the projection used (the section following crs), this can be deleted as the coordinates used in the future will be unprojected in decimal degrees. The resulting geoJSON feature looks like this:

{"type" : "FeatureCollection",  "features" : [{"type" : "Feature", "id" : 0, "geometry" : { "type" : "Point", "coordinates" : [3.76782, 27.1442 ]}, "properties" : {"FID" : 0,"Id" : 0,"Name" : "Koriszegy Keep", "Type" : "Ruins", "Monsters" : " Humanoids, Werewolves, Undead, Lowlife", "Boss" : " Rodemus Family", "Module" : "Modlvay Basic"} } ] }

When first trying to import this geoJSON into leaflet, nothing would happen. the feature was inserted as a variable within the body of the script at first, with the L.geoJson following the map initialization. I tried several different things to get it to work, some of which caused the map to not even initialize. I even attempted to use mapbox to display the data. I was able to upload the data, and display points, but o make popups work I had to rewrite the entire map code from scratch in the mapbox GL JS. This I failed to execute successfully, so I gave up on that. After a day of not being able to get anything done I was able to find some more examples and resources about geoJSON that I had not looked at before. I ended up placing the geoJSON variables in the header of the document in two separate scripts for each variable. It may not have been the most efficient way to write it, but it ended up working.  The last part I did was to have the markers be clickable and display the properties of each feature. This was done using the onEachFeature function combined with layer.bindPopup.

This post has grown larger than I expected, given the changes made to the map are relatively minor. In the next few weeks I will be adding more markers, different symbols based on feature type, a base map of my own devising, and possibly a routing option. If you have any comments about the process far, or have input about how the data should be displayed please leave a comment. 

Building a Web Map, Part 1

I have put up a link to the web map under the blog header. At the moment, it is just a base map different scale maps. All the maps used in the app so far are replica maps made by Thorfinn Tait. Establishing a Base Map In a previous post, I discussed how the basis for all the maps of Mystara can be referenced back to a paleogeographic map from the early 80s. With the goal of determining an accurate geographic location for all the maps and places of Mystara, the original paleo map had to be georeferenced. Most raster images must be georeferenced at some point, whether it be an old historical map, or satellite imagery. Georeferencing is a process in which a map is placed on a geographic grid based on some key control points. Generally, the more control points the better fit. In this case as the late Jurassic map most likely served as the basis for a tracing which was modified to the map of Mystara, it was important to use only two control points in order to scale and rotate the map to the right position. This same principle applied to the georeferencing of all the other Mystara maps also. the control points to establish the position of the late Jurassic map, and thus all other maps, were based on the latitude and longitude lines of the original map. as shown below it can be seen that this process resulted in some of the outer longitude lines not matching up perfectly with a digital dataset of longitude and latitude lines. A second georeferencing was done with more control points, resulting in a perfect match between the digital coordinates and the image, but this also resulted in a less perfect match between the world map of Mystara and the late Jurassic map, so the origianl scaled image shown below was used as a basis for all other maps.

The world map of Mystara was georeferenced using the basis of the late Jurassic map. Control points used were points along the coastlines that were common to both maps. this resulted in a less than perfect match, so both points had to be moved until a best fit was found; the end result showing a comparison between the two can be seen below.

In order to fix the larger scale maps to this model accurately it was necessary to use a continental map from the D&D Dungeon Masters Companion: Book Two, which shows outlines of exactly how the larger scale hexagonal maps fit into the world map. A personal scanned copy of this map which had been matched to the world map using GIMP, was then georeferenced to the same location as the map pictured above. Based on the continental map, the map presented in X1: Isle of Dread was georeferenced.

At this point, colored version of the same maps already discussed were georeferenced, along with the 6 mile per hex(mph) map that appeared in the D&D expert rulebook published in 1981.

Moving the Base map to the Web with a general base map is established, work can begin on the web application. The web map was built using leaflet and mapbox. After learning the basics of mapbox, each of the layers (the world map, continental map of Brun, 24mph known world map, and 6mph Karameikos map) established in ArcGIS was imported as a tile set into mapbox. While doing this, it was discovered that mapbox needed raster tile sets to be already established in the Web Mercator projection. If this was not done map box would either take a very long time to reproject the raster, or be unable to upload the raster entirely. Another issue that was encountered occurred when loading a raster formatted with a color map. when this raster was uploaded to mapbox the result was a greyscale image. To properly display color rasters in mapbox, all images must be in an 8-bit unsigned three color band format (three versions of the image in red, green, and blue). Thus, all the images were reprojected in the web Mercator projection and converted to a three-color band format. Once all four tile sets were uploaded they were added to a single style in map box, and opacity was adjusted for each image dependent on zoom level. below is a view of Mystara in the web Mercator format, and as expected, the poles are severely warped; outlines of current continents are shown for comparison. 

With the base map hosted on map box it was fairly easy to port that over to a leaflet application. This is the code so far. I put the map on a separate page on the blog which is linked underneath the header just as test to make sure it works. Next steps involve adding location markers and popups with data.

How are we not dead yet, part 2

Date: 17 March 2017 Karameikan Calendar Date:19 Kaldmont - 23 Kaldmont
Characters:
Henry, lvl 1 fighter
Ozbrave, lvl 3 M-U
Matt, lvl 3 M-U
Edge, lvl 3 Mystic
Raveling, lvl 5 thief
Dilbert, lvl 1 Lizardman
Bladus, lvl 1 Fighter
Bilbo, lvl 1 Thief
Willem, lvl 2 Elf
Ranulf, lvl 2 Fighter
Dr Happy, lvl 2 Cleric
Daila, Lvl 1 elf

We started the game by leveling up characters who gained enough xp from last session: Raveling, Edge, Ozbrave, and Matt, and Willem.

19 Kaldmont - weather = 10-18 degrees Fahrenheit, low humidity, no winds.
     The party continues on their journey north. In the morning they encounter some villagers running south along the road in panic. One of them has his hair on fire. They scream warnings about a red dragon and continue fleeing south. Party drives wagon off road into forest in attempt to hide, other individuals in party attempt to hide behind trees. They see an adult red dragon come flying over trees and bite head off of peasant who was slower than the rest, he circles around and come back to the dead body, sniffs it, and flies away.
     The party continues on the road north. after about a mile they find small farming village on side of road burnt down. they search the remains and find a small chest with 100 crona. They continue traveling until dark and make camp.

20 Kaldmont - weather = 10-25 degrees Fahrenheit, low humidity, no winds.
     The party continues north. the day passes uneventfully. Towards dusk they approach Kelvin and stay at an inn.

21 Kaldmont - weather = 10-18 degrees Fahrenheit, moderate humidity, no winds.
     The party goes shopping, buys winter clothes and fresh food and a few weapons. They continue on the Duke's Road north. About midday they find a hole that has been recently dug in the middle of the road. It is 5' diameter, and 8' deep. They investigate it for a few minutes and move on, camping when darkness falls.
     At about midnight, Henry is keeping watch. he hears the shriek of an eagle. He wakes up Willem and Dilbert. They look towards the source of  the sound and see a giant bird above them. Henry wakes everyone else up. The bird lands next to the wagon and starts rummaging through it. Willem and Dilbert both throw missiles at it, but miss. The rest of the party is now awake and attack the Roc with missile weapons. It becomes frightened and begins to fly away, but Ozbrave hits it with his necklace of Fireballs. It dies and falls to the ground. The party cuts it up and eats some of it and stores the rest of it in the wagon.

22 Kaldmont - weather = 15-26 degrees Fahrenheit, high humidity, no winds.
     As the party continues north on the road, a heavy mist moves in from the swamp and envelopes them. A horrible rotting stench comes with the mist. After a few hours of traveling they hear noises of combat, and a horse comes galloping out of the mist dragging a dead rider behind it. The rider is an orc armed in rusted mail.
     They go towards the noise and find four overturned wagons, several dead orc bodies, dead horses, deadslave bodies, and deep furrows in the ground. The good from the wagons are all spoiled or broken, they included provisions, and crude black swords. Henry goes scouting into the swamp, and hears deep breathes. he goes further and sees the head of a black dragon looking at him. He turns around and runs away yelling. The dragon chases him, and runs towards the rest of the party. Ozbrave hits it with his wand of fireballs. The dragon runs forward and breathes a line of acid, injuring Ozbrave, Willem, Daila, Bladus, Raveling and Edge. Matt casts a globe of continual darkness around the dragon, the rest of the party shoots blindly into the globe. The dragon comes limping out and melees Ranulf, while the rest of the party attacks the dragon. The dragon takesto thewing and starts to fly away, Matt takes the necklace of fireballs from Ozbrave and hits the dragon, killing it.

     During the whole combat it was apparent that the dragon was suffering from some sort of disease and that he couldn't summon the strength to use his breath weapon after the first attack. When he died the dragon exploded and a bitter acid landed on everyone.
     The party now sees two crude wooden bridges leading into the swamp, they hear voices of orcs on one bridge so decide to take the other. The bridge leads to a smallislandin the swamp with a dead tree and an old statue of some forgotten king. They search the island and find a large silver neck circlet 5' in diameter, with a riddle inscribed on the inside, "Prince and Pauper, King and Knave, equals in his wake."  The statue has a carving of the head of a five eyeddemon hanging from its belt. Ozbrave casts detect magic on the statueand is able to determine that the statue is a construct ofsome sort, so they avoid it.
    The returns to the other bridge and Ozbrave goes forward andparleys with the orcs. After learning that the dragon is deadby their hand, the orcs want to celebrate with the party. They drink and eat, and cut off Willem's hair. The party learns that the orcs are part of the cult of the dragon. THeir cult is trying to ressurect and ancient evil reddragon. A kobpld sect of the cultwas tasked with ressurecting the dragon's human companion, a human wizard named Tsathzar Rho, who had helped the dragon conquer many lands. The orcs had just traded asignificant amount of the cultswealth for a shipment of swords of blight. Swords of blight are made at the forge in the swamp, ruled by Kyleth, an vil sorceress, knownas the witch queen. They give the party a crude map of the swamp, and agreeto take them to the forge. The party campswith the orcsfor the night.

23 Kaldmont - weather = 11-20 degrees Fahrenheit, moderate humidity, 15 mph minds from north.

     The party is led by the orcs across another bridge to a larger island. in one corner of this island is a hut, which the orcs identify as the hut of a hermit that they avoid. the party goes in, the hermit is an ancient elf who babbles about curing a sickness and joining his army to destroy the witch queen. he then commands 10 skeletons to attack the party. They quickly dispatch the skeletons and tie up the old man. They find someof his diaries, most of wich is illegible. what they can read is cryptic ravings of a madman.

XP earned: 313 per character

How are we not dead yet, part 1

So I plan on keeping notes for my current D&D campaign, starting with last week's events

Characters present:
Raveling lvl 4 thief
Edge lvl 1 mystic
Dr. Happy lvl 1 cleric
Willem lvl 1 elf
Ronalf lvl1 fighter
Matt lvl 1 m-u
ozbrave lvl 1 m-u
Chelsea lvl 2 druid

Previously: The party had just finished an adventure in a dungeon beneath Koriszegy Keep where they defeated a kobold cult trying to resurrect Tsathzar Rho, an ancient sorcerer. After returning to town (Luln) they were contacted by an agent of the Duke who had received word about the rise of this cult in his domain. the agent had recently discovered the plans of the cult to perform a dark ritual at the standing stones in the forest nearby. While discussing a plan to sabotage the ritual the agent was assassinated and the assassin escaped. The party continued with their plans to stop the ritual  and were successful, either killing or chasing off the cultists. They captured one cultist and were able to withdraw information from him. he revealed that the cult receives weapon shipments at the village of Stallanford. At this point the party returned to Luln and sold some of their loot from the dungeon. they then took a wagon with more loot, mostly a library that they plundered, to Specularum to find a buyer for the collection.

Date 10 March 2017, calendar date:18 sviftmont - 18 kaldmont

At this point the party reached Specularum  in the late evening after the gates to city were shut. they were able to bribe the guards to let them in. They stayed the night at the Rattlebone inn. The next day they went to various merchants and were able to sell their gems and other miscellaneous items. they were able to sell their collection of books to senator Eipoistlo in the Hill district. They initialyy couldn't find anyone to buy  the Black Candles from them, but were able to convince Ceesar the sage to buy them. At this point those with enough experience found the local chapter of the Adventurers Guild and spent time training to level up. they then left the city and began the journey north along the dukes road. we ended with them about 15 miles north of Krakatos.

Things of Note:
Black Candles - the party learned that these candles were magically created specifically for dark rituals. They are made from the blood of 5 different species, men, elves, dwarves, dragons, and rakasta combined with fat of orcs.

Adventurers Guild: this guild was created in the city of dragons located north of the lost valley. The guild has chapters in most major cities throughout the known world. Each chapter provides training for adventurers, a place to sell loot, buy equipment, and recruit new members.