MediaWiki:Common.js: Difference between revisions
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. */ | ||
importScript('MediaWiki:OpenLayers.js'); | importScript('MediaWiki:OpenLayers.js'); | ||
const ImageLayer = ol.layer.Image; | const ImageLayer = ol.layer.Image; | ||
const Map = ol.Map; | const Map = ol.Map; | ||
Line 8: | Line 8: | ||
const View = ol.View; | const View = ol.View; | ||
const getCenter = ol.extent.getCenter; | const getCenter = ol.extent.getCenter; | ||
console.log(ol); | |||
$(function() { | $(function() { | ||
console.log(ol); | |||
// Map views always need a projection. Here we just want to map image | // 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 | // coordinates directly to map coordinates, so we create a projection that uses | ||
Line 41: | Line 43: | ||
}) | }) | ||
Revision as of 19:15, 31 May 2023
/* Any JavaScript here will be loaded for all users on every page load. */ 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; console.log(ol); $(function() { console.log(ol); // 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, }), }); })