Help:Extension:Kartographer/Developer guide

Kartographer for developers

Creating a map frame

Example:

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

	var kartoBox = mw.loader.require( 'ext.kartographer.box' ),
		map;

	map = kartoBox.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": [
					-122.39951848983763,
					37.78687738310861
				]
			}
		} ]
	} );
} );

Creating a map link

Developer documentation

Links to API 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
ext.kartographer.box	x		x	Kartographer's extension of Leaflet/Mapbox Use this module to create maps in your projects. Classes: `OpenFullScreenControl` `CloseFullScreenControl` `ScaleControl` `Map` `Link`	Constructors: `link( options )` `map( options )`
ext.kartographer.dialog	x		x	Module managing the dialog required to open a map in full screen mode. Classes: `Dialog`	Methods `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.
ext.kartographer.link	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.	Methods `getKartographerLayer` `updateKartographerLayer`
ext.kartographer.editor				Modules required for the map editor within `ext.kartographer.visualEditor`: `leaflet.draw` `ext.kartographer.live`
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.
ext.kartographer.site	x	x		Loads: {your_wiki}/Mediawiki:Kartographer.js {your_wiki}/Mediawiki:Kartographer.css
ext.kartographer.style		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. http://mapbox.com/mapbox.js/
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.