Help:Extension:Kartographer/Developer guide

Kartographer for developers


Creating a map frame



mw.loader.using( [ '' ], function () {

	var kartoBox = mw.loader.require( '' ),

	map = {
		container: $( '#bodyContent' ).empty().css( { height: 400 } )[ 0 ],
		center: [ 37.7868, -122.3995 ],
		zoom: 11,
		allowFullScreen: true,
		data: [ {
			"type": "Feature",
			"properties": {
				"marker-color": "#3366cc",
				"marker-size": "medium",
				"marker-symbol": ""
			"geometry": {
				"type": "Point",
				"coordinates": [
		} ]
	} );
} );

Developer documentation


Wikivoyage customization


How it works


The Wikivoyage projects have use cases that do not apply to all projects and require to customize Kartographer. This extension of the Kartographer code is contained within the ResourceLoader module ext.kartographer.wv. Wikivoyage projects, such as the English one, may load the module and configure it by creating a MediaWiki:Kartographer.js script file (see English MediaWiki:Kartographer.js). A custom CSS, MediaWiki:Kartographer.css, also gets loaded to allow styling customizations. These two files, grouped in the ResourceLoader module ext.kartographer.wv, are loaded on each page that contain a <maplink> or a <mapframe>.

What it does


Typically, MediaWiki:Kartographer.js will define an additional list of tile layers and overlays for Kartographer. The code listens to a Kartographer extension hook wikipage.maps and adds a few features onto the map:

  • Adds a control (top right) to select a different tile layer and toggle overlays
  • Adds a control (top left) to show the Nearby Articles from Wikivoyage.

You can see a live example at California#See.

List of Kartographer modules


These are the list of ResourceLoader modules implemented by the extension. See the online API documentation for more details.

Client-side modules

Resource name JS CSS i18n Description Public APIs x x Kartographer's extension of Leaflet/Mapbox

Use this module to create maps in your projects.


  • OpenFullScreenControl
  • CloseFullScreenControl
  • ScaleControl
  • Map
  • Link
  • link( options )
  • map( options )
ext.kartographer.dialog x x Module managing the dialog required to open a map in full screen mode.


  • Dialog
  • render( map )
  • close
ext.kartographer.frame x Once the page is loaded and ready, turn all <mapframe> tags into embed interactive maps.
ext.kartographer.staticframe x Once the page is loaded and ready, turn all <mapframe> tags into links that open a full screen map. x Once the page is loaded and ready, turn all <maplink> tags into a link that opens the map in full screen mode.
ext.kartographer.editing x Methods useful when editing a map:
  • getKartographerLayer gets (or creates) the "editable" GeoJSON layer on the map.
  • updateKartographerLayer updates the "editable" GeoJSON layer once sanitized.
  • getKartographerLayer
  • updateKartographerLayer
ext.kartographer.editor Modules required for the map editor within ext.kartographer.visualEditor:
  • leaflet.draw
ext.kartographer.preview x Module listening to wikipage.maps hook and adding a right-click handler to the map to show the corresponding coordinates.
ext.kartographer.settings x Module configuring mapbox. x x Loads:
  • {your_wiki}/Mediawiki:Kartographer.js
  • {your_wiki}/Mediawiki:Kartographer.css x Client-side stylesheets for Kartographer
ext.kartographer.visualEditor x x x VisualEditor implementation:
  • Resize a <mapframe> tag inline.
  • Edit a <mapframe> tag in a dialog.
  • Edit a <maplink> tag in a dialog.
ext.kartographer.wv x x x Client-side module containing Wikivoyage customizations.
  • wikivoyage: A set of utility methods.
  • WVMap: The Wikivoyage Map class to customize an interactive MWMap map.

Note: This may move to its own extension.

  • wikivoyage
  • WVMap

Server-side modules

Resource name PHP CSS i18n Description
ext.kartographer x Server-side module providing extra data to the client.

External libraries


Note: Do not use. You should require our client-side modules rather than the original libraries. These are made available as single resources for performance and caching reasons.

Resource name JS CSS i18n Description
mapbox x x x Mapbox.js

Mapbox JavaScript API, a Leaflet Plugin.

leaflet.draw x x x Leaflet.Draw

Vector drawing and editing plugin for Leaflet.

ext.kartographer.lib.topojson TopoJSON

TopoJSON is an extension of GeoJSON that encodes topology.