OCAD Internet Map scripting: Difference between revisions
No edit summary |
No edit summary |
||
(One intermediate revision by the same user not shown) | |||
Line 1: | Line 1: | ||
OCAD Internet | OCAD Internet Maps can be customized by adapting the html file or with additional JavaScript code. | ||
==Zoom to | ==Zoom to Midway == | ||
In order to load the | 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 | ==Hide/Show Layers== | ||
Layers can be shown or hidden with the layer command setVisibility. All Layers are | 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 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 | ==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> | ||
function | 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 | The variable map.numZoomLevels needs to be decreased by one to get the maximum zoom level. | ||
=Add | ==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 51: | Line 51: | ||
} | } | ||
</pre> | </pre> | ||
Therefore an additional layer | Therefore an additional layer needs to be introduced in the init script with the following lines: | ||
<pre> | <pre> | ||
Line 58: | Line 58: | ||
</pre> | </pre> | ||
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]] | ||
=Center | ==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> | ||
function | function JumpToPoint(coords) { | ||
if (value = null) { | if (value = null) { | ||
exit; | exit; | ||
Line 76: | Line 76: | ||
</pre> | </pre> | ||
The code in the HTML file may looks like this: | |||
<pre> | <pre> | ||
<select id= "dropdown-select" onchange=" | <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> |
Latest revision as of 16:08, 23 May 2017
OCAD Internet Maps can be customized by adapting the html file or with additional JavaScript code.
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:
zoomChanged();
Insert:
map.zoomTo(map.numZoomLevels- Math.floor(map.numZoomLevels/2));
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
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:
function ShowLayer() { _poiLayers[0].setVisibility(true); } function HideLayer() { _poiLayers[0].setVisibility(false); }
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.
function JumpToPointOfInterest() { var point = new OpenLayers.LonLat(136733, 6667650); map.zoomTo(map.numZoomLevels-1); map.panTo(point); }
The variable map.numZoomLevels needs to be decreased by one to get the maximum zoom level.
Add Additional Vector Points for Locations
In order to achieve additional vector points this can be done with
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]); }
Therefore an additional layer needs to be introduced in the init script with the following lines:
highlight_layer = new OpenLayers.Layer.Vector('Highlight Layer'); map.addLayer(highlight_layer);
Please the two lines between the "addControl" commands and "XMLInitPois" command.
For the vector styling the options can be seen in the OpenLayers documentation: [style options]
Center Locations with Drop Down List
To center a location with a select list the following code can be introduced:
function JumpToPoint(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); }
The code in the HTML file may looks like this:
<select id= "dropdown-select" onchange="JumpToPoint(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>