2006Scape Wiki

2006Scape Wiki:Map: Difference between revisions

Project page Discussion

2006Scape Wiki:Map (view source)

Revision as of 22:33, 6 March 2019

5,702 bytes added ,  6 March 2019
Second part of documentation
scape_>Ralpha
m (Changed filenames)
scape_>Ralpha
(Second part of documentation)
Line 81: Line 81:


=== Loading data ===
=== Loading data ===
To better support different datasets, iconsets and layers most of the data is loaded from JSON files the main file that is loaded is 'dataloader.json'. This file contains the different mapID's, icon sets and layers. The file below gives more info about this format, as json does not support comments we added '//' before a line comment. (Note: This is not a valid json file)
To better support different datasets, iconsets and layers most of the data is loaded from JSON files the main file that is loaded is 'dataloader.json'. This file contains the different mapID's, icon sets and layers.  
 
Loading data follows the following structure: (this might change a little bit)
# load dataloader.json
#* create dataproviders
#** dataprovider -> IconProvider (async)
#*** create iconclasses
#*** create iconlist
#**** icon -> filename (files not downloaded until used)
#* wait for dataproviders to be downloaded and created
#** baseMaps -> BaseLayerBuilder
#** overlayMaps -> IconLayerBuilder
#*** dataSource -> download and parse geojson (async)
#** add baseMaps and overlayMaps added to map controllers
# baseMaps displayed
# overlayMaps displayed when ready
 
The file below gives more info about this format, as json does not support comments we added '//' before a line comment. (Note: This is not a valid json file)
<syntaxhighlight lang="json">
<syntaxhighlight lang="json">
{
{
Line 133: Line 150:
       "dataSource": "data/MainMapIconLoc.json" // relative or absolute path to a GeoJSON formatted file (see below)
       "dataSource": "data/MainMapIconLoc.json" // relative or absolute path to a GeoJSON formatted file (see below)
     }
     }
  ]
}
</syntaxhighlight>
Example of datasources.dataproviders.iconclasses file. Note: because of image been down on canvas things might not work correct, please report them if you find some.
'MainIconClasses.json':
<syntaxhighlight lang="json">
{
  "MapIcon": { // Class name
    "options": { // options as defined by: https://leafletjs.com/reference-1.4.0.html#icon
      // Properties 'iconUrl' and 'iconSize' will be overwritten by datasources.dataproviders.iconlist file
      "iconAnchor": [0,0], // optional, The coordinates of the "tip" of the icon (relative to its top left corner).
      "popupAnchor": [0,0], // optional, The coordinates of the point from which popups will "open", relative to the icon anchor.
      "tooltipAnchor": [0,0], // optional, The coordinates of the point from which tooltips will "open", relative to the icon anchor.
      "shadowUrl": "images/orb.png", // optional, The URL to the icon shadow image. If not specified, no shadow image will be created.
      "shadowSize": [25,25], // optional, Size of the shadow image in pixels.
      "shadowAnchor": [-3.5,28.5], // optional, The coordinates of the "tip" of the shadow (relative to its top left corner) (the same as iconAnchor if not specified).
      "className": '', // optional, A custom class name (CSS) to assign to both icon and shadow images. Empty by default.
      "shadowUrl": null // optional, relative path used as shadow object
    }
    // More properties might be added later for adding styles to markers
  },
  "MapIconOrb":{ // other Classes, classes can be unused
    "options": {
      "shadowUrl": "images/orb.png",
      "shadowSize": [25,25]
    }
  }
}
</syntaxhighlight>
Example of datasources.dataproviders.iconlist file.
'MainIcons.json':
<syntaxhighlight lang="json">
{
  "folder": "icons/", // folder prefix for all image names in this file
  "icons": { // list of all icons
    "general_store":{ // unique name in this data provider used in GeoJSON file to reference this icon
      "filename": "1448-0.png", // filename on in folder where to find the image file
      "name": "General store", // Human readable name for icon, might be displayed later
      "width": 15, // width in pixels of icon on map, if different from actual file, image will be scaled
      "height": 15, // height in pixels of icon on map, if different from actual file, image will be scaled
      "iconClass": "MapIconOrb" // optional, if different iconclass wanted to be used then defaultIconClass
      "wiki-link": "General store", // Not used at the moment, might change
      "category": "others", // Not used at the moment, might change
    }, // other icons
    "sword_shop":{
      "filename": "1449-0.png",
      "name": "Sword shop",
      "width": 15,
      "height": 15,
      "wiki-link": "Sword shop",
      "category": "others"
    },
    "magic_shop":{
      "filename": "1450-0.png",
      "name": "Magic shop",
      "width": 15,
      "height": 15,
      "wiki-link": "Magic shop",
      "category": "others"
    },
    ...
  }
}
</syntaxhighlight>
Example of overlayMaps.dataSource file:
'MainMapIconLoc.json'
Note: these files use the [http://geojson.org/ GeoJSON] file format with added 'properties' fields.
To create these file tools like http://geojson.io could be created to make this easier.
<syntaxhighlight lang="json">
{
  "type": "FeatureCollection", // Start all files with a 'FeatureCollection'
  "features": [ // list of all features on map
    { // draw a marker
      "type": "Feature",
      "properties": {
        "providerID": 1, // Id of icon provider see: datasources.id
        "icon": "general_store", // name as defined in datasources.dataproviders.iconlist
        "mapID": 0, // mapID of when to display icon can be number (0) of array of numbers ([0,1]) to display on multiple maps
        "zoom": [0, 5] // optional, only display this feature between zoom levels, [minZoom, maxZoom]
      },
      "geometry": {
        "type": "Point", // a point is a marker
        "coordinates": [
          3203, // x coordinate
          3208, // y coordinate
          0 // plane
        ]
      }
    },
    { // other points
      "type": "Feature",
      "properties": {
        "providerID": 1,
        "icon": "helmet_shop",
        "mapID": [0,1]
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          3223,
          3262,
          0
        ]
      }
    },
    { // a line on map
      "type": "Feature",
      "properties": {
        "navigation": false // optional, if true, use path-finding tool to draw path, if false, use normal (straight) line
      },
      "geometry": {
        "type": "LineString", // a line in geojson
        "coordinates": [
          [3208,3213,0], // coordinates of all the points in line
          [3211,3246,0],
          [3174,3317,0],
          [3166,3306,0],
          [3177,3306,0],
          [3208,3213,0] // this happens to be a closed path, but doesn't have to be
        ]
      }
    }
    // for more features look in GeoJSON standard, other features include: Polygon, MultiPoint, MultiLineString and MultiPolygon
   ]
   ]
}
}
</syntaxhighlight>
</syntaxhighlight>
Anonymous user
Retrieved from ‘https://wiki.2006scape.org/index.php/Special:MobileDiff/908’