MediaWiki:Common.js: Difference between revisions

From Fables and Fantasy Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */
try {
importScript('MediaWiki:OpenLayers.js');
importScript('MediaWiki:OpenLayers.js');


const ImageLayer = ol.layer.Image;
const Map = ol.Map;
const Projection = ol.proj.Projection;
const Static = ol.source.ImageStatic;
const View = ol.View;
const getCenter = ol.extent.getCenter;


$(function() {
$(function() {
Line 9: Line 16:
// the image extent in pixels.
// the image extent in pixels.
const extent = [0, 0, 4097, 2926];
const extent = [0, 0, 4097, 2926];
const projection = new ol.Projection({
const projection = new Projection({
   code: 'fables-image',
   code: 'fables-image',
   units: 'pixels',
   units: 'pixels',
Line 15: Line 22:
});
});


const map = new ol.Map({
const map = new Map({
   layers: [
   layers: [
     new ImageLayer({
     new ImageLayer({
Line 35: Line 42:


})
})
} catch (err) {
  console.log(err);
}

Revision as of 19:11, 31 May 2023

/* Any JavaScript here will be loaded for all users on every page load. */
try {
importScript('MediaWiki:OpenLayers.js');

const ImageLayer = ol.layer.Image;
const Map = ol.Map;
const Projection = ol.proj.Projection;
const Static = ol.source.ImageStatic;
const View = ol.View;
const getCenter = ol.extent.getCenter;

$(function() {

// Map views always need a projection.  Here we just want to map image
// coordinates directly to map coordinates, so we create a projection that uses
// the image extent in pixels.
const extent = [0, 0, 4097, 2926];
const projection = new Projection({
  code: 'fables-image',
  units: 'pixels',
  extent: extent,
});

const map = new Map({
  layers: [
    new ImageLayer({
      source: new Static({
        url: 'https://fablesfantasyrp.com/wiki/images/d/d0/Eden1530.jpg',
        projection: projection,
        imageExtent: extent,
      }),
    }),
  ],
  target: 'eden-map',
  view: new View({
    projection: projection,
    center: getCenter(extent),
    zoom: 2,
    maxZoom: 8,
  }),
});

})
} catch (err) {
  console.log(err);
}