HTML5 216
[Deadmap] DIY Town Deadmap By Silversunset on 4th October 2017 05:10:55 PM
  1. <!DOCTYPE html>
  2. <html>
  3. <!--Instructions
  4.  * Save this file as index.html and upload to somewhere like Bitballoon.com. An example of this default file can be viewed at http://townmap.bitballoon.com/
  5.  * do a find/replace on "Your Town Name" and change it to whatever you'd like this page to be called
  6.  * do a find/replace on "Your Background Image here" to add a map background to the chart
  7.  * To rename a series, look for "series: [{name: 'Misc'," and change the name between the '' to the new name
  8.  * To change the coordinate boundaries of your map (the default goes from 1250,3000 -> 1750,3500) edit the xAxis and yAxis lines "Max" and "Min" numbers to be your corner boundaries
  9.  * Each category has examples for how to set a plot point
  10. -->
  11.  
  12. <title>
  13.     Your Town Name
  14. </title>
  15.  
  16. <head>
  17.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  18.     <script src="https://code.highcharts.com/highcharts.js"></script>
  19.     <script src="https://code.highcharts.com/highcharts-more.js"></script>
  20.     <script src="https://code.highcharts.com/modules/exporting.js"></script>
  21.     <style type="text/css">
  22.       table, th, td {
  23.         text-align: left;
  24.         font-size: 12px;
  25.         width: 200px;
  26.       }
  27.       p {
  28.         position: absolute;
  29.         top: 400px;
  30.         left: 25px;
  31.         width: 150px;
  32.         font-size: 12px;
  33.       }
  34.       footer {
  35.         font-style: italic;
  36.         font-size: 12px;
  37.         color: rgb(0, 0, 0);
  38.         position: absolute;
  39.         top: 700px;
  40.         left: 25px;
  41.         width: 150px;
  42.       }
  43.       #townlist tr:nth-child(even), .spawnerlist tr:nth-child(even) {
  44.         background-color: #e5e5e5;
  45.       }
  46.       #townlist tr:nth-child(odd), .spawnerlist tr:nth-child(odd) {
  47.         background-color: #fcfcfc;
  48.       }
  49.       #townlist th, #townlist td, .spawnerlist th, .spawnerlist td {
  50.         padding-left: 5px;
  51.         padding-right: 5px;
  52.         text-align: left;
  53.         white-space: nowrap;
  54.         font-size: 1.25em;
  55.       }
  56.       #townlist th, .spawnerlist th {
  57.         background-color: #cccccc;
  58.       }
  59.       #townlist {
  60.         position: absolute;
  61.         top: 850px;
  62.         left: 20px;
  63.         margin-bottom: 500px;
  64.         border-collapse: collapse;
  65.       }
  66.       .search {
  67.         width: 350px;
  68.       }
  69.       .chartinfo th, .chartinfo td {
  70.         background-color: white;
  71.         font-size: 12px;
  72.       }
  73.       .chartinfo h3 {
  74.         text-align: center;
  75.         margin-bottom: 0;
  76.         padding: 5px 0;
  77.         font-size: 1.5em;
  78.       }
  79.       #container {
  80.       height: 700px;
  81.       width: 800px;
  82.       text-align: left;
  83.       margin: 100 20 20 20;
  84.       z-index: 20;
  85.       }
  86.       .spawnerlist {
  87.         position: absolute;
  88.         top: 158px;
  89.         left: 850px;
  90.       }
  91.       .spawnerlist th {text-align: center;}
  92.       .spawnerlist table {border-collapse: collapse;}
  93.     </style>
  94. </head>
  95.  
  96. <body>
  97.  
  98. <div id="container"></div>
  99.  
  100. <script>
  101. Highcharts.setOptions({lang: {thousandsSep: "",}});
  102.  
  103. Highcharts.chart('container', {
  104.         chart: {type: 'scatter',plotBorderWidth: 1,zoomType: 'xy', marginLeft: 200,plotBackgroundImage: 'Your Background Image here'},
  105.         legend: {enabled: true, layout: 'vertical',align: 'left',verticalAlign: 'top',floating: true,y:40,x:-20, footer: {text: 'Click and drag to select an area to zoom'},title: {text: 'Categories',style: {fontStyle: 'italic'}},},
  106.         title: {text: 'Your Town Name'},
  107.         xAxis:{gridLineWidth:1,max:1750,min:1250,tickInterval:50,title:{text:''},labels:{format:'{value}'},plotLines:[{color:'gray',dashStyle:'dot',width:2,tickAmount:5,value:0,label:{rotation:0,y:0,style:{fontStyle:'italic'},},zIndex:3}]},
  108.         yAxis:{startOnTick:false,endOnTick:false,reversed:true,tickInterval:50,max:3500,min:3000,title:{text:''},labels:{format:'{value}'},maxPadding:0.2,plotLines:[{color:'gray',dashStyle:'dot',tickAmount:5,width:2,value:0,label:{align:'right',style:{fontStyle:'italic'},x:0},zIndex:3}]},
  109.         plotOptions:{series:{dataLabels:{enabled:true,format:'{point.name}',},stickyTracking:false,},tooltip:{snap:0}},
  110.         credits: {href: "http://nerd.nu", text: "Your Town Name" },
  111.  
  112.  tooltip: {
  113.             useHTML: true,
  114.             headerFormat: '<table class="chartinfo">',
  115.             pointFormat: '<tr><th colspan="2"><h3>{point.name}</h3></th></tr>' +
  116.                 '<tr><th>Coordinates:</th><td>{point.x},{point.y}</td></tr>' +
  117.                 '<tr><th>Notes:</th><td>{point.Notes}</td></tr>' +
  118.                 '<tr><th colspan=2><img src="{point.Img}" style="height:100%;"></th></tr>',
  119.             footerFormat: '</table>',
  120.             followPointer: false,
  121.             hideDelay: 30,
  122.         },
  123.         series: [{
  124.                 name: 'Misc',
  125.             color: 'rgba(0,53,255, 0.5)',
  126.             marker: {symbol: 'circle'},
  127.             data: [
  128.                 //{x: 1425, y: 3275, name: 'Storage/Farms', Img: 'https://i.imgur.com/zWineuQ.png',},     //Example for formatting: Place point with image
  129.                 //{x: 1626, y: 3394, name: 'Guardian Grinder',},                                          ////Example for formatting: Place point without image
  130.             ]
  131.         }, {
  132.             name: 'Roads',
  133.             color: 'rgba(255,165,0, 1)',
  134.             lineWidth:2,
  135.             dataLabels: {enabled: false,},
  136.             enableMouseTracking: false,
  137.             marker: {enabled: false,},
  138.             data: [
  139.                 //[1500,3000],[1500,3250],null,                                 //Example for formatting: roads
  140.             ]
  141.         }, {
  142.             name: 'Rails',
  143.             color: 'rgba(0,0,255, 1)',
  144.             dashStyle: 'ShortDot',
  145.             lineWidth:2,
  146.             dashStyle: 'ShortDot',
  147.             dataLabels: {enabled: false,},
  148.             enableMouseTracking: false,
  149.             marker: {enabled: false,},
  150.             data: [
  151.                 //[1500,3000],[1500,3250],null,                                 //Example for formatting: rails
  152.             ]
  153.         }, {
  154.             name: 'Border',
  155.             color: 'rgba(255,0,0, .8)',
  156.             lineWidth:1,
  157.             dataLabels: {enabled: false,},
  158.             enableMouseTracking: false,
  159.             marker: {enabled: false,},
  160.             data: [
  161.                     //[1250,3000],[1750,3000],[1750,3500],[1250,3500],[1250,3000],null,       //Example for formatting: claim borders
  162.                 ]
  163.       }]
  164. });
  165. </script>
  166.  
  167. </body>
  168. </html>
Raw Paste

Login

Copyright © 2025 Paste. All rights reserved.
Powered by Paste