Widget:MapTest

This widget uses Leaflet.js and Fenyx4's Tile Map Service to display interactive maps on the wiki.

This widget can only be used once per page.

This is a work in progress.

Parameters

 * continentid: The continent to map. Defaults to Novia (1). Other option is Hidden Vale (2).
 * sceneid: The scene to map. Defaults to none. See API for complete list.
 * centerX : Initial X location. Default is 150.
 * centerY : Initial Y location. Default is 150.
 * zoom : Initial zoom level for the map. Default is 1.
 * height / width : Height and width of the map pane, in pixels. Default for both is 800.
 * clear : The type of clear applied around the map container. Choices of left, right or both. Defaults to both.
 * hideAttribution : Hide the attribution. 0 for false. 1 for true. Default is false.
 * hideZoom : Hide the zoom. 0 for false. 1 for true. Default is false.
 * layerGroupQuery1 : The URL to a csv with locations and in-game coordinates to be displayed as markers. Example.
 * layerGroupName1 : The name of the layer group.
 * layerGroupQuery2 : Same as layerGroupQuery1.
 * layerGroupName2 : Same as layerGroupName1.
 * layerGroupQuery3 : Same as layerGroupQuery1.
 * layerGroupName3 : Same as layerGroupName1.
 * markerQuery : Same as above but this just adds markers without them being in a layer.

Thanks to Dr Ishmael.

    var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"); document.getElementsByTagName("head")[0].appendChild(fileref);

$("#map") .css("position","relative") .css("height","px") .css("width","px") ;

var map = L.map('map', {          crs: L.CRS.Simple,           zoom: 6,           minZoom: 1,           maxZoom: 7,           continuousWorld: true,           noWrap: true,           tms: true,           zoomControl: != 1    });

var sceneid = ; var continentid = ; var center = GetTransformedCoordinates(continentid, sceneid, [, 0, ]); map.setView(center, );

if( == 1) {   map.attributionControl.setPrefix(''); }

var mapLoc = 'http://fenyx4.com/sota/map/' + continentid + '/{z}/{x}/{y}.png'; if(sceneid != 0) {   mapLoc = 'http://fenyx4.com/sota/map/' + continentid + '/scenes/' + sceneid + '/{z}/{x}/{y}.png'; }

L.tileLayer(mapLoc, { zoom: 6,           minZoom: 1,            maxZoom: 7, continuousWorld: true, noWrap: true,            tms: true        }).addTo(map);

var cursorIcon = L.icon({           iconUrl: 'http://sotawiki.net/images/2/29/Cursor-down.png',            iconSize: [46, 46], // size of the icon            iconAnchor: [23, 46], // point of the icon which will correspond to marker's location            popupAnchor: [0, -30] // point from which the popup should open relative to the iconAnchor        });

var baseMaps = {}; var overlayMaps = {};

var layerControl = L.control.layers(baseMaps, overlayMaps); var addLayerControl = false;

var query = ""; console.log(query); //var query = "http://wiki.ultimacodex.com/sota/Special:Ask/-5B-5Bhas-20coords::Hidden-20Vale;-3F;-3F-5D-5D/-3FHas-20coords/format%3Dcsv/headers%3Dhide/offset%3D0"; //var queryResult = "Kingsport,\"Hidden Vale; 280; 303.1\"\n\"Owl’s Head\",\"Hidden Vale; 370; 233.9\""; var layerGroupName1 = "";

if(query != "") {   AddToLayerControl(map, layerControl, query, continentid, sceneid, layerGroupName1, cursorIcon); addLayerControl = true; }

var query2 = ""; var layerGroupName2 = ""; if(query2 != "") {   AddToLayerControl(map, layerControl, query2, continentid, sceneid, layerGroupName2, cursorIcon); addLayerControl = true; }

var query3 = ""; var layerGroupName3 = ""; if(query3 != "") {   AddToLayerControl(map, layerControl, query3, continentid, sceneid, layerGroupName3, cursorIcon); addLayerControl = true; }

if(addLayerControl) {   layerControl.addTo(map); }

var markerQuery = "";

if(markerQuery != "") {   $.get( markerQuery, function( queryResult  ) {        var markerArr = GetMarkerArray(queryResult, cursorIcon);        for(var i in markerArr) {          markerArr[i].addTo(map);        }    }); }

function AddToLayerControl(map, layerControl, query, continentid, sceneid, name, cursorIcon) { $.get( query, function( queryResult ) {        var markerArr = GetMarkerArray(queryResult, continentid, sceneid, cursorIcon);        var resultLayerGroup = L.layerGroup(markerArr);        layerControl.addOverlay(resultLayerGroup, name);        resultLayerGroup.addTo(map);    }); }

function GetMarkerArray(queryResult, continentid, sceneid, cursorIcon) { var markerArr = []; var pointArr = $.csv.toArrays(queryResult);

for (var i in pointArr) { console.log(pointArr[i]); var coords = $.csv.toArrays(pointArr[i][1], {           separator:';', // sets a custom field separator character        }); var point; if(sceneid > 0) {        point = [coords[0][3], 0, coords[0][2]] }      else {        point = [coords[0][2], 0, coords[0][1]]; }

var marker = L.marker(GetTransformedCoordinates(continentid, sceneid, point),{               title: pointArr[i][0],                icon: cursorIcon}); marker.bindPopup("" + pointArr[i][0] + "") .on('click', marker.openPopup.bind(marker )); markerArr[markerArr.length] = marker; }   return markerArr; }

function GetTransformedCoordinates(continentid, sceneid, point) { if(sceneid > 0) {   return _(this).mapScene(continentid, sceneid, point); } else {   return _(this).mapContinent(continentid, point); } }