Navigation

← Previous Changeset
Next Changeset →

Changeset 5407

Timestamp:

12/14/07 08:50:45 (1 year ago)

Author:

pgiraud

Message:

instead of loading a symbol catalogue for the whole layer, user can set a symbol using an external reference to a svg file (file.svg#symbol)
follows the miles.togoe proposal

Files:

sandbox/camptocamp/vectorSymbols/examples/svg (added)
sandbox/camptocamp/vectorSymbols/examples/svg/1.svg (added)
sandbox/camptocamp/vectorSymbols/examples/svg/catalog.svg (added)
sandbox/camptocamp/vectorSymbols/examples/svg/symbol_catalog.svg (added)
sandbox/camptocamp/vectorSymbols/examples/svg/symbol_catalog2.svg (added)
sandbox/camptocamp/vectorSymbols/examples/symbol_catalog.svg (deleted)
sandbox/camptocamp/vectorSymbols/examples/symbol_catalog2.svg (deleted)
sandbox/camptocamp/vectorSymbols/examples/vector-symbols.html (modified) (17 diffs)
sandbox/camptocamp/vectorSymbols/lib/OpenLayers/Renderer/SVG.js (modified) (6 diffs)

Legend:

: Unmodified
: Added
: Removed
: Modified
: Copied
: Moved

sandbox/camptocamp/vectorSymbols/examples/vector-symbols.html

r5341	r5407
21	21	map.addLayer(layer);
22	22
23		var options = {
24		rendererOptions: {
25		catalogueUrl: "symbol_catalog.svg"
26		}
27		};
	23	var options = {};
28	24	var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry",options);
29	25
…	…
31	27
32	28	map.setCenter(new OpenLayers.LonLat(0,0), 2);
33
	29	/*
34	30	var styles = [];
35	31	var defs = vectorLayer.renderer.defs.childNodes;
…	…
37	33	var style = {
38	34	pointerEvents: 'visiblePainted',
39		symbol: defs[i].id
	35	symbol: '#' + defs[i].id
40	36	}
41	37	styles.push(style);
…	…
54	50	vectorLayer.addFeatures([pointFeature]);
55	51	}
56
	52	*/
	53
	54	var origin = new OpenLayers.LonLat(-50, -40);
	55	var style_church = {
	56	pointerEvents: "visiblePainted",
	57	symbol: "svg/symbol_catalog.svg#symbol-church",
	58	width: 20,
	59	height: 20
	60	};
	61	var point = new OpenLayers.Geometry.Point(origin.lon, origin.lat);
	62	var pointFeature = new OpenLayers.Feature.Vector(point, null, style_church);
	63	vectorLayer.addFeatures([pointFeature]);
57	64
58	65	var origin = new OpenLayers.LonLat(-50, 30);
59	66	var style_star = {
60	67	pointerEvents: "visiblePainted",
61		symbol: "symbol-star"
	68	symbol: "svg/1.svg#root",
	69	width: 20,
	70	height: 20
62	71	};
63	72	var point = new OpenLayers.Geometry.Point(origin.lon, origin.lat);
…	…
68	77	fillColor: "red",
69	78	pointerEvents: "visiblePainted",
70		symbol: "symbol-star"
	79	symbol: "svg/symbol_catalog.svg#symbol-star"
71	80	};
72	81	var point = new OpenLayers.Geometry.Point(origin.lon, origin.lat + 10);
…	…
78	87	strokeColor: "blue",
79	88	pointerEvents: "visiblePainted",
80		symbol: "symbol-star"
	89	symbol: "svg/symbol_catalog.svg#symbol-star"
81	90	};
82	91	var point = new OpenLayers.Geometry.Point(origin.lon, origin.lat + 20);
…	…
86	95	var style_star2 = {
87	96	pointerEvents: "visiblePainted",
88		symbol: "symbol-star2"
	97	symbol: "svg/symbol_catalog.svg#symbol-star2"
89	98	};
90	99	var point = new OpenLayers.Geometry.Point(origin.lon + 10, origin.lat);
…	…
95	104	fillColor: "red",
96	105	pointerEvents: "visiblePainted",
97		symbol: "symbol-star2"
	106	symbol: "svg/symbol_catalog.svg#symbol-star2"
98	107	};
99	108	var point = new OpenLayers.Geometry.Point(origin.lon + 10, origin.lat + 10);
…	…
105	114	strokeColor: "blue",
106	115	pointerEvents: "visiblePainted",
107		symbol: "symbol-star2"
	116	symbol: "svg/symbol_catalog.svg#symbol-star2"
108	117	};
109	118	var point = new OpenLayers.Geometry.Point(origin.lon + 10, origin.lat + 20);
…	…
113	122	var style_star3 = {
114	123	pointerEvents: "visiblePainted",
115		symbol: "symbol-star3"
	124	symbol: "svg/symbol_catalog.svg#symbol-star3"
116	125	};
117	126	var point = new OpenLayers.Geometry.Point(origin.lon + 20, origin.lat);
…	…
122	131	fillColor: "red",
123	132	pointerEvents: "visiblePainted",
124		symbol: "symbol-star3"
	133	symbol: "svg/symbol_catalog.svg#symbol-star3"
125	134	};
126	135	var point = new OpenLayers.Geometry.Point(origin.lon + 20, origin.lat + 10);
…	…
132	141	strokeColor: "blue",
133	142	pointerEvents: "visiblePainted",
134		symbol: "symbol-star3"
	143	symbol: "svg/symbol_catalog.svg#symbol-star3"
135	144	};
136	145	var point = new OpenLayers.Geometry.Point(origin.lon + 20 , origin.lat + 20);
…	…
140	149	var style_star4 = {
141	150	pointerEvents: "visiblePainted",
142		symbol: "symbol-star4"
	151	symbol: "svg/symbol_catalog.svg#symbol-star4"
143	152	};
144	153	var point = new OpenLayers.Geometry.Point(origin.lon + 30, origin.lat);
…	…
149	158	fillColor: "red",
150	159	pointerEvents: "visiblePainted",
151		symbol: "symbol-star4"
	160	symbol: "svg/symbol_catalog.svg#symbol-star4"
152	161	};
153	162	var point = new OpenLayers.Geometry.Point(origin.lon + 30 , origin.lat + 10);
…	…
159	168	strokeColor: "blue",
160	169	pointerEvents: "visiblePainted",
161		symbol: "symbol-star4"
	170	symbol: "svg/symbol_catalog.svg#symbol-star4"
162	171	};
163	172	var point = new OpenLayers.Geometry.Point(origin.lon + 30, origin.lat + 20);
…	…
168	177	var style_parking = {
169	178	pointerEvents: "visiblePainted",
170		symbol: "symbol-parking"
	179	symbol: "svg/symbol_catalog.svg#symbol-parking"
171	180	};
172	181	var point = new OpenLayers.Geometry.Point(origin.lon + 40, origin.lat);
…	…
177	186	fillColor: "red",
178	187	pointerEvents: "visiblePainted",
179		symbol: "symbol-parking"
	188	symbol: "svg/symbol_catalog.svg#symbol-parking"
180	189	};
181	190	var point = new OpenLayers.Geometry.Point(origin.lon + 40, origin.lat + 10);

sandbox/camptocamp/vectorSymbols/lib/OpenLayers/Renderer/SVG.js

r5337	r5407
236	236	var _geometryClass = node._geometryClass;
237	237	var _style = node._style;
238
	238	var _symbolId = node._style.symbol;
	239	// svg external reference
	240	if (node._style.symbol.indexOf("#") > 1) {
	241	_symbolId = '#' + this.importSymbolFromExternalReference(node._style.symbol);
	242	}
239	243	// create new use node
240	244	node = this.createNode("use", id);
…	…
242	246	node._geometryClass = _geometryClass;
243	247	node._style = _style;
244		node.setAttributeNS(this.xlink, "href", ~~"#" + node._style.symbol~~);
	248	node.setAttributeNS(this.xlink, "href", _symbolId);
245	249
246	250	var width = node._style.width ? node._style.width : 20 ;
…	…
600	604	* Method: addSymbolCatalogue
601	605	* load the symbol catalogue
	606	* TODO deprecated
602	607	*
603	608	* Parameters:
…	…
615	620	onComplete: OpenLayers.Function.bind(this.parseSymbols, this)
616	621	}
617		);
	622	);
618	623	},
619	624
…	…
621	626	* Method: parseSymbols
622	627	* add symbol definitions to the renderer root
	628	* TODO deprecated
623	629	*/
624	630	parseSymbols: function (request) {
625
626	631	var format = new OpenLayers.Format.XML();
627		doc = format.read(request.responseText);
	632	var doc = format.read(request.responseText);
628	633
629	634	var symbolsDef = doc.getElementsByTagName('symbol');
…	…
634	639	}
635	640	},
	641
	642	/**
	643	* Method: importSymbolFromExternalReference
	644	* add a new symbol definition from an external file
	645	* The reference should look like file.svg#symbol
	646	*
	647	* Returns:
	648	* {String} - id of the imported symbol
	649	*/
	650	importSymbolFromExternalReference: function (symbol) {
	651	if (!this.defs) {
	652	// create svg defs tag
	653	this.defs = this.createDefs();
	654	}
	655	var ref = symbol.split('#');
	656	var id = ref[0] + '_' + ref[1]
	657
	658	// check if symbol already exists in the defs
	659	if (document.getElementById(id) != null) {
	660	return id;
	661	}
	662
	663	// TODO: maybe we also want to check if file (ref[0])
	664	// has already been loaded
	665	// if not we would store the doc for later use
	666
	667	var request = new OpenLayers.Ajax.Request(ref[0],
	668	{ method: 'get',
	669	asynchronous: false,
	670	onComplete: function(request){ }
	671	}
	672	);
	673	var format = new OpenLayers.Format.XML();
	674	var doc = format.read(request.transport.responseText);
	675
	676	var node = document.importNode(doc.getElementById(ref[1]), true);
	677	node.id = id;
	678
	679	if (node.tagName != 'symbol') {
	680	OpenLayers.Console.error(node.tagName + 'not yet supported for external references');
	681	}
	682
	683	this.defs.appendChild(node);
	684	return node.id;
	685	},
636	686
637	687	/** @final @type String */

Navigation

Changeset 5407

Legend:

sandbox/camptocamp/vectorSymbols/examples/vector-symbols.html

sandbox/camptocamp/vectorSymbols/lib/OpenLayers/Renderer/SVG.js

Download in other formats: