Widget:MapStyles

Mobile users may need to view this page in a browser to use the map fully.

<style> .full-container {

 display: inline-block;
 padding: 5px;
 border: 1px solid #000; 

} .skin-fandommobile .full-container {

 display: flex;
 flex-direction: column;

} .resourcemap {

 width:100%;
 height:100%;

} table.resourcemaptable {

 margin:0;

} .legend-container {

 display: inline-block;
 padding-right: 10px;
 float: left;
 max-width: 225px;

}

.map-container {

 position: relative;

}

.map-container > .dots { height: 100%; width: 100%; position: absolute; inset: 0 100% 100% 0; }

.legend {

 display: inline-block;
 position: relative;
 padding: 0;
 border-radius: 50%;
 margin-left: 3px;

} .map-legend .dots {

 text-align: right;
 vertical-align: top;

} .map-legend input[type=checkbox] + label {

 color: #3c0000;
 text-shadow: 0 0 0.05em lightsalmon;

} .map-legend input[type=checkbox]:checked + label {

 color: #003c00;
 text-shadow: 0 0 0.1em lightgreen;

}

.theme-fandomdesktop-dark .map-legend input[type="checkbox"]:checked + label {

 color: #05bb25;
 text-shadow: 0 0 0.3em darkgreen;

}

.theme-fandomdesktop-dark .map-legend input[type="checkbox"] + label {

 color: #b70303;
 text-shadow: 0 0 0.3em darkred;

}

.legend-container > button, .legend-container > select {

   width: 100%;

} .legend-container .details-toggle {

 display: block;

} ul.groups-legend, ul.groups-legend ul {

 list-style: none;

} ul.groups-legend {

 margin-left: 0;

} ul.groups-legend > li {

 border: 1px solid #222;
 margin-top: 0.3em;

} ul.groups-legend > li:first-child {

 margin-top: 0;

}

.map-container .dot, .map-container .dots > div {

 position: absolute;
 line-height: 0;
 padding: 0;
 border-radius: 50%;
 z-index: 5;

}

.map-container .square {

 position: absolute;
 background-color: rgba(255,0,0,0.7);
 border-radius: 5px;
 border: 2px solid black;
 z-index: 5;

}

.map-container .point {

 width: 7px;
 height: 7px;
 background-color: rgba(255,0,0,0.7);
 border: 1px solid black;
 z-index: 5;

}

1. top-notice {

 padding: 5px;
 vertical-align: middle;
 border-radius: 15px;
 width: 1060px;
 max-width:100%;
 overflow:auto;
 display:block;

} .top-notice-image {

 position: relative;
 top: -100px;
 height: 0;
 z-index: 1;

} .top-notice-text {

 vertical-align: middle;
 white-space:normal;
 font-size:22px;
 padding-left:10px;

} .top-notice-text a {

 font-weight: bold;

}

1. legend-notice {

 padding: 10px;
 width: 210px;

} .notice {

 display: inline-block;
 margin-bottom: 10px;
 border: 1px solid #000;
 background: linear-gradient(white, lightyellow);

} .theme-fandomdesktop-dark .notice {

 border:1px dashed #7FE7FF;
 background: linear-gradient(#6e92c06b,#828af38c);

}

/* Responsive styling for interactive maps when siderail is present to prevent overlap. */ .map-legend td:first-child {

 width:25px;
 text-align:center;

} .map-legend tr.no-icon td:first-child {

 text-align:left;

}

@media only screen and (max-width:1700px){ /* for users with the siderail ad */

 div#global-wrapper.with-siderail table.map-legend tr {
   display:inline-block;
   width:13em;
 }

 div#global-wrapper.with-siderail .legend-container {
   max-width:unset;
 }

 div#global-wrapper.with-siderail table.resourcemaptable {
   clear: left;
 }

}

@media only screen and (max-width:1300px){ /* for everyone */

 table.map-legend tr {
   display:inline-block;
   width:13em;
 }

 .legend-container {
   max-width:unset;
 }
 
 .map-legend tr.no-icon {
   display: block;
 }

}

@media only screen and (min-height: 700px) {

 .resourcemaptable {
   position: sticky;
   top: 0;
 }

}

/**********

• Markers *
  • • • • • • • • • • /

.hide-cave .map-container .cave {

 display: none;

}

.cave.dots > div { border-style: double; border-width: 2px; }

.map-legend .obelisk-red, .obelisk-red.dots > div {

 width:20px;
 height:20px; 
 background-color:#f70102;
 border:2px solid #812f1a;

} .map-legend .obelisk-green, .obelisk-green.dots > div {

 width:20px;
 height:20px;
 background-color:#14e800;
 border:2px solid #207203;
 margin-left:3px;

} .map-legend .obelisk-blue, .obelisk-blue.dots > div {

 width:20px;
 height:20px;
 background-color:#00a5ff;
 border:2px solid #266dbf;

} /* for Mod:Ebenus Astrum */ .map-legend .obelisk-yellow, .obelisk-yellow.dots > div {

 width:20px;
 height:20px;
 background-color:#EAE42C;
 border:2px solid #207203;

}

.map-legend .terminal, .terminal.dots > div {

 width:20px;
 height:20px;
 background-color:#B477FF;
 border:2px solid #266dbf;

}

.map-legend .water-vein, .water-vein.dots > div, .map-legend .oil-rock, .oil-rock.dots > div, .map-legend .oil-vein, .oil-vein.dots > div, .map-legend .salt, .salt.dots > div, .map-legend .sulfur, .sulfur.dots > div, .map-legend .clay, .clay.dots > div, .map-legend .crystal, .crystal.dots > div, .map-legend .obsidian, .obsidian.dots > div, .map-legend .silica, .silica.dots > div, .map-legend .black-pearl, .black-pearl.dots > div, .map-legend .river-rock, .river-rock.dots > div, .map-legend .metal, .metal.dots > div, .map-legend .metal-rich, .metal-rich.dots > div, .map-legend .metal-underwater, .metal-underwater.dots > div, .map-legend .rare-flower, .rare-flower.dots > div, .map-legend .rockarrot, .rockarrot.dots > div, .map-legend .savoroot, .savoroot.dots > div, .map-legend .silk, .silk.dots > div, .map-legend .carniflora, .carniflora.dots > div, .map-legend .polymer, .polymer.dots > div, .map-legend .keratin, .keratin.dots > div, .map-legend .element-ore, .element-ore.dots > div, .map-legend .dust-rich, .dust-rich.dots > div, .map-legend .element-shard, .element-shard.dots > div, .map-legend .gem-blue, .gem-blue.dots > div, .map-legend .gem-green, .gem-green.dots > div, .map-legend .gem-red, .gem-red.dots > div, .map-legend .charge-node, .charge-node.dots > div, .map-legend .hyper-charge-node, .hyper-charge-node.dots > div, .map-legend .gas-node, .gas-node.dots > div, .map-legend .city-terminal, .city-terminal.dots > div, .map-legend .mission-terminal, .mission-terminal.dots > div, .map-legend .plant-z, .plant-z.dots > div, .map-legend .wyvern-nest, .wyvern-nest.dots > div, .map-legend .ice-wyvern-nest, .ice-wyvern-nest.dots > div, .map-legend .drake-nest, .drake-nest.dots > div, .map-legend .cave-loot, .cave-loot.dots > div, .map-legend .deinonychus-nest, .deinonychus-nest.dots > div, .map-legend .magmasaur-nest, .magmasaur-nest.dots > div, .map-legend .poison-tree, .poison-tree.dots > div, .map-legend .beaver-dam, .beaver-dam.dots > div, .map-legend .saddlebag, .saddlebag.dots > div, .map-legend .anthill, .anthill.dots > div, .map-legend .mutagel, .mutagel.dots > div, .map-legend .mutagen-bulb, .mutagen-bulb.dots > div, .map-legend .crystal-rich, .crystal-rich.dots > div, .map-legend .ambergris, .ambergris.dots > div {

  height:7px;
  width:7px;

}

.hide-obelisk-red .obelisk-red, .hide-obelisk-green .obelisk-green, .hide-obelisk-blue .obelisk-blue, .hide-obelisk-yellow .obelisk-yellow, .hide-terminal .terminal, .hide-rockwell-prime-terminal .rockwell-prime-terminal, .hide-water-vein .water-vein, .hide-oil-rock .oil-rock, .hide-oil-vein .oil-vein, .hide-oil-vent .oil-vent, .hide-oxy-vents .oxy-vents, .hide-salt .salt, .hide-sulfur .sulfur, .hide-clay .clay, .hide-cactus .cactus, .hide-crystal .crystal, .hide-crystal-rich .crystal-rich, .hide-obsidian .obsidian, .hide-silica .silica, .hide-black-pearl .black-pearl, .hide-river-rock .river-rock, .hide-metal .metal, .hide-metal-rich .metal-rich, .hide-metal-underwater .metal-underwater, .hide-rare-flower .rare-flower, .hide-rockarrot .rockarrot, .hide-savoroot .savoroot, .hide-silk .silk, .hide-polymer .polymer, .hide-keratin .keratin, .hide-element-ore .element-ore, .hide-dust-rich .dust-rich, .hide-element-shard .element-shard, .hide-ambergris .ambergris, .hide-mutagel .mutagel, .hide-mutagen-bulb .mutagen-bulb, .hide-carniflora .carniflora, .hide-gem-blue .gem-blue, .hide-gem-green .gem-green, .hide-gem-red .gem-red, .hide-charge-node .charge-node, .hide-hyper-charge-node .hyper-charge-node, .hide-gas-node .gas-node, .hide-city-terminal .city-terminal, .hide-mission-terminal .mission-terminal, .hide-element-node .element-node, .hide-geyser .geyser, .hide-wyvern-nest .wyvern-nest, .hide-ice-wyvern-nest .ice-wyvern-nest, .hide-drake-nest .drake-nest, .hide-magmasaur-nest .magmasaur-nest, .hide-dossier .dossier, .hide-note .note, .hide-glitch .glitch, .hide-plant-z .plant-z, .hide-poison-tree .poison-tree, .hide-artifact .artifact, .hide-underwater-dome .underwater-dome, .hide-cave-entrance .cave-entrance, .hide-poi .poi, .hide-cave-loot .cave-loot, .hide-sea-loot .sea-loot, .hide-deinonychus-nest .deinonychus-nest, .hide-crate .crate, .hide-crateCave .crateCave, .hide-crateDungeon .crateDungeon, .hide-crateSurface .crateSurface, .hide-test .test, .hide-beaver-dam .beaver-dam, .hide-saddlebag .saddlebag, .hide-anthill .anthill, .hide-rot0 .rot0, .hide-rot1 .rot1, .hide-rot2 .rot2, .hide-rot3 .rot3, .hide-rot4 .rot4, .hide-rot5 .rot5, .hide-rot6 .rot6, .hide-rot7 .rot7 {

 display: none;

}

.map-legend .rockwell-prime-terminal, .rockwell-prime-terminal.dots > div {

 width: 20px;
 height: 20px;
 background-color: #bd2fb3;
 border: 1px solid black;

}

.map-legend .water-vein, .water-vein.dots > div {

 background-color: cyan;
 border: 1px solid black;

}

.map-legend .oil-vein, .oil-vein.dots > div, .map-legend .oil-rock, .oil-rock.dots > div {

 background-color: #3B3131;
 border: 1px solid white;

}

.map-legend .salt, .salt.dots > div {

 background-color: #679dae;
 border: 1px solid black;

}

.map-legend .sulfur, .sulfur.dots > div {

 background-color: yellow;
 border: 1px solid black;

}

.map-legend .clay, .clay.dots > div {

 background-color: #FFD800;
 border: 1px solid black;

}

.map-legend .cactus, .cactus.dots > div {

 width: 4px;
 height: 4px;
 background-color: lightgreen;
 border: 1px solid green;

} .map-legend .crystal, .crystal.dots > div {

 background-color: white;
 border: 1px solid black;

}

.map-legend .crystal-rich, .crystal-rich.dots > div {

 background-color: #caddde;
 border: 1px solid black;

}

.map-legend .obsidian, .obsidian.dots > div {

 background-color: #2F30A2;
 border: 1px solid white;

}

.map-legend .silica, .silica.dots > div {

 background-color: pink;
 border: 1px solid black;

}

.map-legend .black-pearl, .black-pearl.dots > div {

 background-color: magenta;
 border: 1px solid black;

}

.map-legend .river-rock, .river-rock.dots > div {

 background-color: brown;
 border: 1px solid black;

}

.map-legend .metal, .metal.dots > div {

 background-color: silver;
 border: 1px solid black;

}

.map-legend .carniflora, .carniflora.dots > div {

 background-color: #800f9f;
 border: 1px solid black;

}

.map-legend .metal-rich, .metal-rich.dots > div {

 background-color: goldenrod;
 border: 1px solid black;

}

.map-legend .metal-underwater, .metal-underwater.dots > div {

 background-color: teal;
 border: 1px solid black;

}

.map-legend .rare-flower, .rare-flower.dots > div {

 background-color: #ADD8E6;
 border: 1px solid black;

}

.map-legend .rockarrot, .rockarrot.dots > div {

 background-color: #3BD319;
 border: 1px solid black;

}

.map-legend .savoroot, .savoroot.dots > div {

 background-color: #2B9111;
 border: 1px solid black;

}

.map-legend .silk, .silk.dots > div {

 background-color: #9B31E2;
 border: 1px solid black;

}

.map-legend .polymer, .polymer.dots > div {

 background-color: #678396;
 border: 1px solid black;

}

.map-legend .keratin, .keratin.dots > div {

 background-color: #CBB195;
 border: 1px solid black;

}

.map-legend .element-ore, .element-ore.dots > div {

 background-color: #E577DF;
 border: 1px solid black;

}

.map-legend .dust-rich, .dust-rich.dots > div {

 background-color: #c195ed;
 border: 1px solid black;

}

.map-legend .element-shard, .element-shard.dots > div {

 background-color: #E577DF;
 border: 1px solid black;

}

.map-legend .ambergris, .ambergris.dots > div {

 background-color: #dbc981;
 border: 1px solid black;

}

.map-legend .mutagel, .mutagel.dots > div {

 background-color: #6f0db5;
 border: 1px solid black;

}

.map-legend .mutagen-bulb, .mutagen-bulb.dots > div {

 background-color: #5e0c99;
 border: 1px solid black;

}

.map-legend .gem-blue, .gem-blue.dots > div {

 background-color: #5091CD;
 border: 1px solid black;

}

.map-legend .gem-green, .gem-green.dots > div {

 background-color: #60AF33;
 border: 1px solid black;

}

.map-legend .gem-red, .gem-red.dots > div {

 background-color: #E26F78;
 border: 1px solid black;

}

.map-legend .charge-node, .charge-node.dots > div {

 background-color: #77FF97;
 border: 1px solid black;

}

.map-legend .hyper-charge-node, .hyper-charge-node.dots > div {

 background-color: #63D0FF;
 border: 1px solid black;

}

.map-legend .gas-node, .gas-node.dots > div {

 background-color: #FF93E6;
 border: 1px solid black;

}

.map-legend .element-node, .element-node.dots > div {

 width: 14px;
 height: 14px;
 background-color: #99004D;
 border: 1px solid black;

}

.map-legend .geyser, .geyser.dots > div {

 width: 14px;
 height: 14px;
 background-color: #0066FF;
 border: 1px solid black;

}

.map-legend .city-terminal, .city-terminal.dots > div, .map-legend .mission-terminal, .mission-terminal.dots > div {

 background-color: #c0c0c0;
 border: 1px solid black;

}

.map-legend .plant-z, .plant-z.dots > div {

 background-color: #FF2B23;
 border: 1px solid black;

}

.map-legend .wyvern-nest, .wyvern-nest.dots > div {

 background-color: #0094FF;
 border: 1px solid black;

}

.map-legend .ice-wyvern-nest, .ice-wyvern-nest.dots > div {

 background-color: #8bcff7;
 border: 1px solid black;

}

.map-legend .drake-nest, .drake-nest.dots > div {

 background-color: #FFAA00;
 border: 1px solid black;

}

.map-legend .dossier, .dossier.dots > div {

 width: 10px;
 height: 10px;
 background-color: #00cccc;
 border: 1px solid black;

}

.map-legend .note, .note.dots > div {

 width: 10px;
 height: 10px;
 background-color: #cca8cc;
 border: 1px solid black;

}

.map-legend .glitch, .glitch.dots > div {

 width: 12px;
 height: 12px;
 background-color: #bf82bf;
 border: 1px solid black;

}

.map-legend .magmasaur-nest, .magmasaur-nest.dots > div {

 background-color: #fc7f03;
 border: 1px solid black;

}

.map-legend .poison-tree, .poison-tree.dots > div {

 background-color: #c9eb34;
 border: 1px solid black;

}

.map-legend .artifact, .artifact.dots > div {

 width: 12px;
 height: 12px;
 background-color: yellow;
 border: 1px solid black;

}

.map-legend .underwater-dome, .underwater-dome.dots > div {

 width: 24px;
 height: 24px;
 background-color: white;
 border: 1px solid black;

}

.map-legend .cave-entrance, .cave-entrance.dots > div {

 width: 10px;
 height: 10px;
 background-color: white;
 border: 1px solid black;

}

.map-legend .poi, .poi.dots > div {

 width: 14px;
 height: 14px;
 background-color: #dda0dd;
 border: 1px solid black;

}

.map-legend .cave-loot, .cave-loot.dots > div {

 background-color: lime;
 border: 1px solid black;

}

.map-legend .sea-loot, .sea-loot.dots > div {

 width: 10px;
 height: 10px;
 background-color: red;
 border: 1px solid black;

}

.map-legend .deinonychus-nest, .deinonychus-nest.dots > div {

 background-color: #d900ff;
 border: 1px solid black;

}

.map-legend .beaver-dam, .beaver-dam.dots > div {

 background-color: #9e5e03;
 border: 1px solid black;

}

.map-legend .saddlebag, .saddlebag.dots > div {

 background-color: #c7879a;
 border: 1px solid black;

}

.map-legend .anthill, .anthill.dots > div {

 background-color: #9c9694;
 border: 1px solid black;

}

.map-legend .crate, .crate.dots > div, .map-legend .crateCave, .crateCave.dots > div, .map-legend .crateDungeon, .crateDungeon.dots > div, .map-legend .crateSurface, .crateSurface.dots > div {

 width: 15px;
 height: 15px;

}

.map-legend .location-restricted, .location-restricted.dots > div {

 width: 14px;
 height: 14px;
 background-color: yellow;
 border: 1px solid black;

}

.map-legend .location-prohibited, .location-prohibited.dots > div {

 width:14px;
 height:14px; 
 background-color:#f70102;
 border:2px solid #812f1a;

}

div.dot.cave{

 border-width: 2px;

}

.map-legend .crate., .crate..dots > div {

 background-image: url(//ark.gamepedia.com/media/);
 background-size: 100% 100%;
 border-radius: 0;

} .legend.crate {

 background-image: url(//ark.gamepedia.com/media/);
 background-size: 100% 100%;
 border-radius: 0;

}

.map-legend .crateCave., .crateCave..dots > div {

 background-image: url(//ark.gamepedia.com/media/);
 background-size: 100% 100%;
 border-radius: 0;

} .legend.crateCave {

 background-image: url(//ark.gamepedia.com/media/);
 background-size: 100% 100%;
 border-radius: 0;

}

.map-legend .crateDungeon., .crateDungeon..dots > div {

 background-image: url(//ark.gamepedia.com/media/);
 background-size: 100% 100%;
 border-radius: 0;

} .legend.crateDungeon {

 background-image: url(//ark.gamepedia.com/media/);
 background-size: 100% 100%;
 border-radius: 0;

}

.map-legend .crateSurface., .crateSurface..dots > div {

 background-image: url(//ark.gamepedia.com/media/);
 background-size: 100% 100%;
 border-radius: 0;

} .legend.crateSurface {

 background-image: url(//ark.gamepedia.com/media/);
 background-size: 100% 100%;
 border-radius: 0;

}

.map-legend .test, .test.dots > div {

 width: 14px;
 height: 14px;
 background-color: #000080;
 border: 1px solid black;

}

</style>