Merge pull request #234 from MapBBCode/master

MapBBCode 1.2.0

files/mapbbcode/1.2.0/Handler.Length.js

@@ -0,0 +1,178 @@
+/*
+ * Distance plugin for MapBBCode
+ */
+
+if( !('mapBBCodeHandlers' in window) )
+	window.mapBBCodeHandlers = [];
+
+window.mapBBCodeHandlers.push({
+	applicableTo: function( layer ) {
+		return layer instanceof L.Polyline && !(layer instanceof L.Polygon);
+	},
+
+	_updateLength: function( map, layer, newLayer, removing ) {
+		// The hook is stateful. Since there may be multiple maps per ui,
+		// we add measurement control reference to a map.
+		if( map && map._measureControl )
+			map._measureControl.updateLength(layer, newLayer, removing);
+	},
+
+	_bindMeasurement: function( layer ) {
+		layer.options.clickable = true;
+		layer.on('mouseover click', function(e) {
+			// display polyline length
+			this._updateLength(layer._map, layer);
+		}, this);
+		layer.on('mouseout edit', function(e) {
+			// display total length
+			this._updateLength(layer._map);
+		}, this);
+		layer.on('remove', function(e) {
+			// display total length minus polyline length
+			this._updateLength(layer._map, null, layer, true);
+		}, this);
+	},
+
+	initDrawControl: function( draw ) {
+		draw.options.draw.polyline.showLength = true;
+	},
+
+	createEditorPanel: function( layer ) {
+		this._bindMeasurement(layer);
+	},
+
+	objectToLayer: function( layer ) {
+		this._bindMeasurement(layer);
+		// this may mean control.updateBBCode() was called, so update displayed length
+		// though this won't work, because layer._map is null
+		this._updateLength(layer._map, null, layer);
+	},
+
+	// add measuring control
+	panelHook: function( control, ui ) {
+		var MC = L.Control.extend({
+			options: {
+				position: 'bottomleft',
+				button: false,
+				metric: true,
+				prefixTotal: 'Total length',
+				prefixSingle: 'Length of that line'
+			},
+
+			initialize: function(control, options) {
+				L.setOptions(this, options);
+				this._control = control;
+			},
+
+			onAdd: function(map) {
+				var container = this._container = document.createElement('div');
+				if( this.options.button ) {
+					container.className = 'leaflet-bar';
+					container.style.background = 'white';
+					container.style.padding = '0px 5px';
+				} else {
+					try {
+						container.style.background = 'rgba(255, 255, 255, 0.8)';
+					} catch( err ) { // invalid value in IE8
+						container.style.background = 'white';
+					}
+					container.style.padding = '0px 5px';
+					container.style.margin = 0;
+					container.style.fontSize = '11px';
+				}
+				var stop = L.DomEvent.stopPropagation;
+				L.DomEvent
+					.on(container, 'click', stop)
+					.on(container, 'mousedown', stop)
+					.on(container, 'dblclick', stop);
+				container.style.visibility = 'hidden';
+				return container;
+			},
+
+			updateLength: function( layer, newLayer, removing ) {
+				var len = layer ? this._getLength(layer) : this._getTotalLength(newLayer, removing);
+				if( len < 0.001 )
+					this._container.style.visibility = 'hidden';
+				else {
+					this._container.style.visibility = 'visible';
+					if( this.options.button )
+						this._container.style.fontWeight = layer ? 'bold' : 'normal';
+
+					var prefix = this.options.button ? '' : this.options[layer ? 'prefixSingle' : 'prefixTotal'] + ': ';
+					this._container.innerHTML = prefix + this._readableDistance(len);
+				}
+			},
+
+			_getLength: function( layer ) {
+				if( layer instanceof L.Polygon || !(layer instanceof L.Polyline) )
+					return 0;
+				var i, d = 0, latlngs = layer.getLatLngs();
+				for( i = 1; i < latlngs.length; i++ ) {
+					d += latlngs[i-1].distanceTo(latlngs[i]);
+				}
+				return d;
+			},
+
+			_getTotalLength: function( newLayer, removing ) {
+				var d = 0;
+				this._control.eachLayer(function(layer) {
+					if( !removing || layer != newLayer ) {
+						d += this._getLength(layer);
+					}
+				}, this);
+				if( newLayer && !removing )
+					d += this._getLength(newLayer);
+				return d;
+			},
+
+			_readableDistance: function( distance ) {
+				var precision, suffix, divide = 1;
+
+				if (this.options.metric) {
+					if (distance > 1100) {
+						divide = 1000;
+						suffix = 'km';
+					} else {
+						suffix = 'm';
+					}
+				} else {
+					distance *= 0.3048;
+
+					if (distance > 2000) {
+						divide = 5280;
+						suffix = 'mi';
+					} else {
+						suffix = 'ft';
+					}
+				}
+
+				distance /= divide;
+				if( divide < 100 )
+					precision = distance < 10 ? 1 : 0;
+				else
+					precision = distance < 3 ? 3 : distance < 110 ? 2 : distance < 1100 ? 1 : 0;
+
+				var pow = Math.pow(10, precision);
+				return (Math.round(distance * pow) / pow) + ' ' + suffix;
+			}
+		});
+
+		var metric = ui && 'metric' in ui.options ? ui.options.metric : true;
+		var map = control.map;
+		var mc = map._measureControl = new MC(control, { metric: metric });
+		if( ui.strings.totalLength && ui.strings.singleLength ) {
+			mc.options.prefixTotal = ui.strings.totalLength;
+			mc.options.prefixSingle = ui.strings.singleLength;
+		}
+		if( ui.options.measureButton ) {
+			mc.options.button = true;
+			mc.options.position = 'topleft';
+		}
+		map.addControl(mc);
+		map.on('draw:created', function(e) {
+			// by this moment e.layer is not added to the drawing
+			mc.updateLength(null, e.layer);
+		});
+		mc.updateLength();
+	}
+});

files/mapbbcode/1.2.0/LayerList.js

@@ -0,0 +1,132 @@
+/*
+ * List of public-use layers.
+ */
+window._tempLL = window.layerList;
+
+window.layerList = {
+	// some entries in this list were adapted from the https://github.com/leaflet-extras/leaflet-providers list (it has BSD 2-clause license)
+	list: {
+		"OpenStreetMap": "L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a>', minZoom: 0, maxZoom: 19 })",
+		"OpenStreetMap DE": "L.tileLayer('http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a>', minZoom: 0, maxZoom: 18 })",
+		"OpenStreetMap FR": "L.tileLayer('http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { subdomains: 'abc', attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> | Tiles &copy <a href=\"http://tile.openstreetmap.fr/\">OSM France</a>', minZoom: 0, maxZoom: 20 })",
+		"Hike & Bike": "L.layerGroup([ L.tileLayer('http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://hikebikemap.de/\">Colin Marquardt</a>' } ), L.tileLayer('http://toolserver.org/~cmarqu/hill/{z}/{x}/{y}.png', { minZoom: 0, maxZoom: 17 }) ])",
+		"CycleMap": "L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://www.opencyclemap.org\">Andy Allan</a>', minZoom: 0, maxZoom: 18 })",
+		"OpenMapSurfer": "L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roads/x={x}&y={y}&z={z}', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://giscience.uni-hd.de/\">GIScience Heidelberg</a>', minZoom: 0, maxZoom: 19 })",
+		"OpenMapSurfer Contour": "L.layerGroup([ L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roads/x={x}&y={y}&z={z}', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://giscience.uni-hd.de/\">GIScience Heidelberg</a>', minZoom: 0, maxZoom: 19 }), L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/asterc/x={x}&y={y}&z={z}') ])",
+		"OpenMapSurfer Grayscale": "L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://giscience.uni-hd.de/\">GIScience Heidelberg</a>', minZoom: 0, maxZoom: 19 })",
+		"Humanitarian": "L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> | Tiles &copy; <a href=\"http://hot.openstreetmap.org\">Humanitarian OSM Team</a>', minZoom: 0, maxZoom: 19 })",
+		"Transport": "L.tileLayer('http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://www.opencyclemap.org\">Andy Allan</a>', minZoom: 0, maxZoom: 18 })",
+		"Landscape": "L.tileLayer('http://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://www.opencyclemap.org\">Andy Allan</a>', minZoom: 0, maxZoom: 18 })",
+		"Outdoors": "L.tileLayer('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://www.opencyclemap.org\">Andy Allan</a>', minZoom: 0, maxZoom: 18 })",
+		"MapQuest Open": "L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://www.mapquest.com/\">MapQuest</a>', subdomains: '1234', minZoom: 0, maxZoom: 18 })",
+		"Stamen Toner": "L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://stamen.com\">Stamen Design</a>', minZoom: 0, maxZoom: 20 })",
+		"Stamen Toner Lite": "L.tileLayer('http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://stamen.com\">Stamen Design</a>', minZoom: 0, maxZoom: 20 })",
+		"Stamen Watercolor": "L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://stamen.com\">Stamen Design</a>', minZoom: 3, maxZoom: 16 })",
+		"Cloudmade": "L.tileLayer('http://{s}.tile.cloudmade.com/{apiKey}/{styleID}/256/{z}/{x}/{y}.png', { attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OSM</a> | Tiles &copy; <a href=\"http://cloudmade.com\">CloudMade</a>', apiKey: '{key:http://account.cloudmade.com/register}', styleID: '1', minZoom: 0, maxZoom: 18 })",
+		"MapBox": "L.tileLayer('http://{s}.tiles.mapbox.com/v3/{key:https://www.mapbox.com/#signup}/{z}/{x}/{y}.png', { subdomains: 'abcd', attribution: 'Map &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a>' })"
+	},
+
+	getSortedKeys: function() {
+		var result = [], k;
+		for( k in this.list )
+			if( this.list.hasOwnProperty(k) )
+				result.push(k);
+		result.sort();
+		return result;
+	},
+
+	requiresKey: function( layer ) {
+		var reKeyC = /{key(?::[^}]+)?}/,
+			l = this.list[layer];
+		return l && reKeyC.test(l);
+	},
+
+	getKeyLink: function( layer ) {
+		var reKeyC = /{key:([^}]+)}/,
+			l = this.list[layer],
+			m = l && l.match(reKeyC);
+		return m && m.length > 1 && m[1] ? m[1] : '';
+	},
+
+	getLayerName: function( layer ) {
+		if( typeof layer !== 'string' )
+			return '';
+		var p1 = layer.indexOf(':'),
+			p2 = layer.indexOf('|'),
+			p = p1 > p2 && p2 > 0 ? p2 : p1;
+		return p > 0 ? layer.substring(0, p) : layer;
+	},
+
+	getLeafletLayer: function( layerId, LL ) {
+		/* jshint unused: false */
+		var L = LL || window.L,
+			reKeyC = /{key(?::[^}]+)?}/,
+			m = layerId.match(/^(.+?\|)?(.+?)(?::([^'"]+))?$/);
+		var idx = m && m.length > 2 && m[2] ? m[2] : '',
+			title = m && m.length > 1 && m[1] && m[1].length > 0 ? m[1] : idx,
+			keys = m && m.length > 3 && m[3] ? m[3].split(':') : [];
+		if( this.list[idx] ) {
+			var layer = this.list[idx], keyPos = 0;
+			while( reKeyC.test(layer) && keyPos < keys.length ) {
+				layer = layer.replace(reKeyC, keys[keyPos++]);
+			}
+			if( !reKeyC.test(layer) ) {
+				try {
+					var done = eval(layer);
+					if( done ) {
+						if( !done.options )
+							done.options = {};
+						done.options.name = title;
+						return done;
+					}
+				} catch(e) {}
+			}
+		}
+		return null;
+	},
+
+	getLeafletLayers: function( layers, LL ) {
+		var l = typeof layers === 'string' ? layers.split(',') : layers,
+			result = [], i, osmidx = -1;
+
+		for( i = 0; i < l.length; i++ ) {
+			var layer = this.getLeafletLayer(l[i], LL);
+			if( layer ) {
+				result.push(layer);
+				if( osmidx < 0 && this.isOpenStreetMapLayer(layer) )
+					osmidx = result.length - 1;
+			}
+		}
+
+		if( osmidx > 0 ) {
+			var tmp = result[osmidx];
+			result[osmidx] = result[0];
+			result[0] = tmp;
+		} else if( osmidx < 0 && result.length > 0 ) {
+			result.unshift(this.getLeafletLayer('OpenStreetMap', LL));
+		}
+
+		return result;
+	},
+
+	isOpenStreetMapLayer: function( layer ) {
+		if( typeof layer === 'string' || layer.substring )
+			return layer.indexOf('openstreetmap.org') > 0;
+		var l = layer.options && layer._url ? layer : (layer.getLayers ? layer.getLayers()[0] : {});
+		if( l.options && l._url )
+			return (l.options.attribution && l.options.attribution.indexOf('openstreetmap.org') > 0) || l._url.indexOf('tile.openstreetmap.') > 0 || l._url.indexOf('opencyclemap.org') > 0 || l._url.indexOf('stamen.com') > 0 || l._url.indexOf('server.arcgisonline.com') > 0;
+		return false;
+	}
+};
+
+// merge layerList entries that were added before this script was loaded
+if( window._tempLL ) {
+	if( window._tempLL.list ) {
+		var i;
+		for( i in window._tempLL.list ) {
+			if( window._tempLL.list.hasOwnProperty(i) )
+				window.layerList.list[i] = window._tempLL.list[i];
+		}
+	}
+	delete window._tempLL;
+}

files/mapbbcode/1.2.0/lang/en.config.js

@@ -0,0 +1,22 @@
+window.MapBBCodeConfig.include({ strings: {
+    "view": "View",
+    "editor": "Editor",
+    "editInWindow": "Window",
+    "editInPanel": "Panel",
+    "viewNormal": "Normal",
+    "viewFull": "Full width only",
+    "viewTitle": "Adjusting browsing panel",
+    "editorTitle": "Adjusting editor panel or window",
+    "editInWindowTitle": "Editor will be opened in a popup window",
+    "editInPanelTitle": "Editor will appear inside a page",
+    "viewNormalTitle": "Map panel will have \"fullscreen\" button",
+    "viewFullTitle": "Map panel will always have maximum size",
+    "growTitle": "Click to grow the panel",
+    "shrinkTitle": "Click to shrink the panel",
+    "zoomInTitle": "Zoom in",
+    "zoomOutTitle": "Zoom out",
+    "selectLayer": "Select layer",
+    "addLayer": "Add layer",
+    "keyNeeded": "This layer needs a developer key (<a href=\"%s\" target=\"devkey\">how to get it</a>)",
+    "keyNeededAlert": "This layer needs a developer key"
+}});

files/mapbbcode/1.2.0/lang/en.js

@@ -0,0 +1,47 @@
+window.MapBBCode.include({ strings: {
+    "close": "Close",
+    "remove": "Delete",
+    "apply": "Apply",
+    "cancel": "Cancel",
+    "title": "Title",
+    "zoomInTitle": "Zoom in",
+    "zoomOutTitle": "Zoom out",
+    "applyTitle": "Apply changes",
+    "cancelTitle": "Cancel changes",
+    "fullScreenTitle": "Enlarge or shrink map panel",
+    "searchTitle": "Search for a location",
+    "helpTitle": "Open help window",
+    "outerTitle": "Show this place on an external map",
+    "mapbbcodeTitle": "A library for parsing, editing and displaying [map] bbcode",
+    "submitWarning": "You will lose changes to the map. Proceed?",
+    "exportName": "Export",
+    "exportTitle": "Download this map",
+    "upload": "Upload",
+    "uploadTitle": "Upload this map to an external server",
+    "uploading": "Uploading",
+    "uploadError": "Error while uploading the map",
+    "uploadSuccess": "Upload was successful. Bookmark this link to be able to edit the map",
+    "sharedFormHeader": "There are no objects to upload. Enter a MapBBCode Share map URL",
+    "sharedFormError": "This map panel has incorrect endpoint set.<br>Please contact an administrator.",
+    "sharedFormInvalidCode": "Map code is invalid",
+    "sharedCodeLoading": "Downloading <a href=\"{url}\" target=\"mapbbcode_outer\">a map</a>...",
+    "sharedCodeError": "Failed to download an external map<br><br><a href=\"{url}\" target=\"mapbbcode_outer\">Open map in a new window</a>",
+    "polylineTitle": "Draw a path",
+    "polygonTitle": "Draw a polygon",
+    "markerTitle": "Add a marker",
+    "drawCancelTitle": "Cancel drawing",
+    "undoPoint": "Delete last point",
+    "undoPointTitle": "Delete last point drawn",
+    "markerTooltip": "Click map to place marker",
+    "polylineStartTooltip": "Click to start drawing a line",
+    "polylineContinueTooltip": "Click to continue drawing line",
+    "polylineEndTooltip": "Click the last point to finish line",
+    "polygonStartTooltip": "Click to start drawing a polygon",
+    "polygonContinueTooltip": "Click to continue drawing polygon",
+    "polygonEndTooltip": "Click the last point to close this polygon",
+    "deleteLastPoint": "Delete last point",
+    "deleteLastPointTooltip": "Delete last point drawn",
+    "singleLength": "Length of this line",
+    "totalLength": "Total length",
+    "helpContents": "Map BBCode Editor\n\nSince you have already activated the editor, you know the drill. There are buttons for markers and geometry, you click the map and objects appear, they have popups activated by clicking, from which you can change some properties, like color. To save the drawing click \"Apply\", otherwise there is a \"Cancel\" button.\nWhat you should know is that you are editing not the map, but the underlying bbcode, with all restrictions it imposes. Map BBCode is a text string, which you can copy and paste to different services, and edit directly. <a href=\"http://mapbbcode.org/bbcode.html\" target=\"mapbb\">The syntax</a> of it is quite simple: <tt>[map]...[/map]</tt> tags with a list of objects as coordinate sequences and attributes. When a cursor is inside bbcode, the editor is opened with a drawing it represents, otherwise it will be empty.\nFor a complete manual see <a href=\"http://mapbbcode.org/guide.html\" target=\"mapbb\">User's Guide</a> on the official MapBBCode site.\n\n# Navigating the map\nHere are some hints for using map panels. Keyboard arrows work when a map is in focus. Shift+drag with a mouse to quickly zoom into an area, shift+zoom buttons to change zoom 3 steps at a time. Use the layer switcher at the top right corner to see the drawing on a different map. Mouse wheel is disabled in the viewer, but can be used in the editor to quickly zoom in or out. Use the button with a magnifier to navigate to a named place or a road.\n\n# External maps\nIf the feature is not disabled by an administrator, you can upload your maps to a server, <a href=\"http://share.mapbbcode.org\" target=\"mapbb\">share.mapbbcode.org</a> by default, with an \"Upload\" button. If you click it not having drawn anything, it will ask for a map URL or identifier. Those are converted to <tt>[mapid]id[/mapid]</tt> bbcode, which looks like a regular map, but with an export button: users can download a drawing as GPX or CSV or in any other format. If you share an edit link for a map, others can join in, and changes will be reflected in embedded maps.\n\n# Plugin\n<a href=\"http://mapbbcode.org/\" target=\"mapbb\">MapBBCode</a> is an open source javascript library with plugins around it available for some forum and blog engines. Its goal is to make sharing maps easier. This is version {version}.\n"
+}});