OCAD Internet Map scripting - Revision history

ANK at 07:58, 20 October 2022

2022-10-20T07:58:13Z

← Older revision		Revision as of 09:58, 20 October 2022
Line 1:		Line 1:
	OCAD Internet Maps can be customized by adapting the html file or with additional JavaScript code.		[[OCAD_Internet_Map\|OCAD Internet Maps]] can be customized by adapting the html file or with additional JavaScript code.

	==Zoom to Midway ==		==Zoom to Midway ==

ANK at 08:26, 18 January 2019

2019-01-18T08:26:04Z

← Older revision		Revision as of 10:26, 18 January 2019
Line 60:		Line 60:
	Please the two lines between the "addControl" commands and "XMLInitPois" command.		Please the two lines between the "addControl" commands and "XMLInitPois" command.

	For the vector styling the options can be seen in the OpenLayers documentation: [~~[http~~://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style style options]]		For the vector styling the options can be seen in the OpenLayers documentation: [https://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style style options]

	==Center Locations with Drop Down List==		==Center Locations with Drop Down List==

KLH at 14:08, 23 May 2017

2017-05-23T14:08:05Z

← Older revision		Revision as of 16:08, 23 May 2017
Line 1:		Line 1:
	OCAD Internet Maps can be customized by adapting the html file or with additional JavaScript code.		OCAD Internet Maps can be customized by adapting the html file or with additional JavaScript code.

	==Zoom to ~~midway~~ ==		==Zoom to Midway ==
	In order to load the web map not in the smallest zoom level you can insert a command in the web map html file directly after the following line:		In order to load the web map not in the smallest zoom level you can insert a command in the web map html file directly after the following line:
	<pre>		<pre>
Line 12:		Line 12:
	With this additional line the map is zoomed to midway of all available zoom levels during the startup instead of zoom level 0.		With this additional line the map is zoomed to midway of all available zoom levels during the startup instead of zoom level 0.

	==Hide/Show ~~layers~~==		==Hide/Show Layers==
	Layers can be shown or hidden with the layer command setVisibility. All Layers are exported in the order they are shown in the _poiLayers array.		Layers can be shown or hidden with the layer command setVisibility. All Layers are exported in the order they are shown in the _poiLayers array.

Line 27:		Line 27:
	The Javascript functions can be called with an external link from the same page.		The Javascript functions can be called with an external link from the same page.

	=Jump to a ~~certain point~~=		==Jump to a Certain Point==
	In order to go to a certain location on the map the following function can be called.		In order to go to a certain location on the map the following function can be called.
	<pre>		<pre>
Line 38:		Line 38:
	The variable map.numZoomLevels needs to be decreased by one to get the maximum zoom level.		The variable map.numZoomLevels needs to be decreased by one to get the maximum zoom level.

	=Add ~~additional vector points~~ for ~~locations~~=		==Add Additional Vector Points for Locations==
	In order to achieve additional vector points this can be done with		In order to achieve additional vector points this can be done with
	<pre>		<pre>
Line 62:		Line 62:
	For the vector styling the options can be seen in the OpenLayers documentation: [[http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style style options]]		For the vector styling the options can be seen in the OpenLayers documentation: [[http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style style options]]

	=Center ~~locations~~ with ~~drop down list~~=		==Center Locations with Drop Down List==
	To center a location with a select list the following code can be introduced:		To center a location with a select list the following code can be introduced:
	<pre>		<pre>

KLH at 13:58, 23 May 2017

2017-05-23T13:58:35Z

← Older revision		Revision as of 15:58, 23 May 2017
Line 1:		Line 1:
	OCAD Internet ~~Map~~ can be ~~custom scripted~~ with ~~addition~~ JavaScript code.		OCAD Internet Maps can be customized by adapting the html file or with additional JavaScript code.

	==Zoom to midway ==		==Zoom to midway ==
	In order to load the ~~webmap~~ not in the ~~smalles~~ zoom level you can ~~add the following~~ command to the html-file ~~direktly~~ after the following line:		In order to load the web map not in the smallest zoom level you can insert a command in the web map html file directly after the following line:
	<pre>		<pre>
	zoomChanged();		zoomChanged();
Line 10:		Line 10:
	map.zoomTo(map.numZoomLevels- Math.floor(map.numZoomLevels/2));		map.zoomTo(map.numZoomLevels- Math.floor(map.numZoomLevels/2));
	</pre>		</pre>
	With this line the map is zoomed to midway of all available zoom levels during the startup instead of zoom level 0.		With this additional line the map is zoomed to midway of all available zoom levels during the startup instead of zoom level 0.

	==Hide/Show layers==		==Hide/Show layers==
	Layers can be shown or hidden with the layer command setVisibility. All Layers are ~~expored~~ in the order they are shown in the _poiLayers array.		Layers can be shown or hidden with the layer command setVisibility. All Layers are exported in the order they are shown in the _poiLayers array.

	Example:		Example:
Line 30:		Line 30:
	In order to go to a certain location on the map the following function can be called.		In order to go to a certain location on the map the following function can be called.
	<pre>		<pre>
	function ~~JupToPointOfInterest~~() {		function JumpToPointOfInterest() {
	var point = new OpenLayers.LonLat(136733, 6667650);		var point = new OpenLayers.LonLat(136733, 6667650);
	map.zoomTo(map.numZoomLevels-1);		map.zoomTo(map.numZoomLevels-1);
Line 36:		Line 36:
	}		}
	</pre>		</pre>
	The variable map.numZoomLevels ~~must always~~ be decreased by one ~~in order~~ to get the maximum zoom level.		The variable map.numZoomLevels needs to be decreased by one to get the maximum zoom level.

	=Add additional vector points for locations=		=Add additional vector points for locations=
Line 51:		Line 51:
	}		}
	</pre>		</pre>
	Therefore an additional layer ~~must~~ be introduced in the init script with the following lines:		Therefore an additional layer needs to be introduced in the init script with the following lines:

	<pre>		<pre>
Line 58:		Line 58:
	</pre>		</pre>

	~~The~~ two lines ~~must be placed~~ between the "addControl" commands and "XMLInitPois" command.		Please the two lines between the "addControl" commands and "XMLInitPois" command.

	For the vector styling the options can be seen in the OpenLayers documentation: [[http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style style options]]		For the vector styling the options can be seen in the OpenLayers documentation: [[http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style style options]]
Line 65:		Line 65:
	To center a location with a select list the following code can be introduced:		To center a location with a select list the following code can be introduced:
	<pre>		<pre>
	function ~~JupToPoint~~(coords) {		function JumpToPoint(coords) {
	if (value = null) {		if (value = null) {
	exit;		exit;
Line 76:		Line 76:
	</pre>		</pre>

	In the HTML file ~~the code can look~~ like ~~as follows~~:		The code in the HTML file may looks like this:
	<pre>		<pre>
	<select id= "dropdown-select" onchange="~~JupToPoint~~(this.value);">		<select id= "dropdown-select" onchange="JumpToPoint(this.value);">
	<option value="null">Select</option>		<option value="null">Select</option>
	<option value="134314,6668774">Location 1</option>		<option value="134314,6668774">Location 1</option>

MergeUser at 08:35, 15 October 2014

2014-10-15T08:35:20Z

← Older revision		Revision as of 10:35, 15 October 2014
Line 1:		Line 1:
	OCAD Internet Map can be custom scripted with addition JavaScript code.		OCAD Internet Map can be custom scripted with addition JavaScript code.

	==Zoom to ~~half~~ ==		==Zoom to midway ==
	In order to load the webmap not in the smalles zoom level you can add the following command to the html-file direktly after the following line:		In order to load the webmap not in the smalles zoom level you can add the following command to the html-file direktly after the following line:
	<pre>		<pre>

MergeUser: /* Zoom to half */

2014-10-15T08:34:43Z

Zoom to half

← Older revision		Revision as of 10:34, 15 October 2014
Line 8:		Line 8:
	Insert:		Insert:
	<pre>		<pre>
	map.zoomTo(map.numZoomLevels- Math.floor(map.numZoomLevels/2));		map.zoomTo(map.numZoomLevels- Math.floor(map.numZoomLevels/2));
	</pre>		</pre>
	With this line the map is zoomed to midway of all available zoom levels during the startup instead of zoom level 0.		With this line the map is zoomed to midway of all available zoom levels during the startup instead of zoom level 0.

MergeUser at 08:34, 15 October 2014

2014-10-15T08:34:25Z

← Older revision		Revision as of 10:34, 15 October 2014
Line 1:		Line 1:
	OCAD Internet Map can be custom scripted with addition JavaScript code.		OCAD Internet Map can be custom scripted with addition JavaScript code.

			==Zoom to half ==
			In order to load the webmap not in the smalles zoom level you can add the following command to the html-file direktly after the following line:
			<pre>
			zoomChanged();
			</pre>
			Insert:
			<pre>
			map.zoomTo(map.numZoomLevels- Math.floor(map.numZoomLevels/2));
			</pre>
			With this line the map is zoomed to midway of all available zoom levels during the startup instead of zoom level 0.

	==Hide/Show layers==		==Hide/Show layers==

MergeUser at 11:42, 6 June 2012

2012-06-06T11:42:31Z

← Older revision		Revision as of 13:42, 6 June 2012
Line 50:		Line 50:

	For the vector styling the options can be seen in the OpenLayers documentation: [[http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style style options]]		For the vector styling the options can be seen in the OpenLayers documentation: [[http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style style options]]

			=Center locations with drop down list=
			To center a location with a select list the following code can be introduced:
			<pre>
			function JupToPoint(coords) {
			if (value = null) {
			exit;
			}
			var cord = coords.split(",");
			var point1 = new OpenLayers.LonLat(cord[0],cord[1]);
			map.zoomTo(map.numZoomLevels-1);
			map.panTo(point1);
			}
			</pre>

			In the HTML file the code can look like as follows:
			<pre>
			<select id= "dropdown-select" onchange="JupToPoint(this.value);">
			<option value="null">Select</option>
			<option value="134314,6668774">Location 1</option>
			<option value="149659,6679976">Location 2</option>
			<option value="140800,6668437">Location 3</option>
			</select>
			</pre>

MergeUser: /* Add additional vector points for locations */

2012-06-06T10:07:30Z

Add additional vector points for locations

← Older revision		Revision as of 12:07, 6 June 2012
Line 49:		Line 49:
	The two lines must be placed between the "addControl" commands and "XMLInitPois" command.		The two lines must be placed between the "addControl" commands and "XMLInitPois" command.

	For the vector styling the options can be seen in the OpenLayers documentation http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style		For the vector styling the options can be seen in the OpenLayers documentation: [[http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style style options]]

MergeUser: Created page with "OCAD Internet Map can be custom scripted with addition JavaScript code. ==Hide/Show layers== Layers can be shown or hidden with the layer command setVisibility. All Layers ar..."

2012-06-06T10:06:13Z

Created page with "OCAD Internet Map can be custom scripted with addition JavaScript code. ==Hide/Show layers== Layers can be shown or hidden with the layer command setVisibility. All Layers ar..."

New page

OCAD Internet Map can be custom scripted with addition JavaScript code.

==Hide/Show layers==
Layers can be shown or hidden with the layer command setVisibility. All Layers are expored in the order they are shown in the _poiLayers array.

Example:
<pre>
function ShowLayer() {
_poiLayers[0].setVisibility(true);
}

function HideLayer() {
_poiLayers[0].setVisibility(false);
}
</pre>
The Javascript functions can be called with an external link from the same page.

=Jump to a certain point=
In order to go to a certain location on the map the following function can be called.
<pre>
function JupToPointOfInterest() {
var point = new OpenLayers.LonLat(136733, 6667650);
map.zoomTo(map.numZoomLevels-1);
map.panTo(point);
}
</pre>
The variable map.numZoomLevels must always be decreased by one in order to get the maximum zoom level.

=Add additional vector points for locations=
In order to achieve additional vector points this can be done with
<pre>
function ShowPointOfInterest() {
var point1 = new OpenLayers.Geometry.Point(149667,6680327);
var point2 = new OpenLayers.Geometry.Point(150386,6678682);

var feature_point = new OpenLayers.Feature.Vector(point1, {},{fillOpacity : 0.4, pointRadius: 45, fillColor: "#ff0000" });
var feature_point2 = new OpenLayers.Feature.Vector(point2, {},{pointRadius: 15, fillColor: "#ff0000"});

highlight_layer.addFeatures([feature_point, feature_point2]);
}
</pre>
Therefore an additional layer must be introduced in the init script with the following lines:

<pre>
highlight_layer = new OpenLayers.Layer.Vector('Highlight Layer');
map.addLayer(highlight_layer);
</pre>

The two lines must be placed between the "addControl" commands and "XMLInitPois" command.

For the vector styling the options can be seen in the OpenLayers documentation http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.style