Widget:Map

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).
 * 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.
 * 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.

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 }).setView([150, 150], ); L.tileLayer('http://fenyx4.com/sota/map//{z}/{x}/{y}.png', { 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); layerControl.addTo(map);

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, layerGroupName1, cursorIcon); }

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

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

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

function GetMarkerArray(queryResult, 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 marker = L.marker(_(this).mapContinent(1, [coords[0][2], 0, coords[0][1]]),{           icon: cursorIcon}); marker.bindPopup(pointArr[i][0]) .on('mouseover', marker.openPopup.bind(marker )); markerArr[markerArr.length] = marker; }   return markerArr; }