OpenLayers extended clustering example

### Initialize Map and Layers Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/SLDSelect.html Sets up the OpenLayers map, proxy host, and adds several WMS layers. This is the initial setup for the example. ```javascript var map, controls, layers; function init(){ OpenLayers.ProxyHost= "proxy.cgi?url="; map = new OpenLayers.Map('map', { allOverlays: true, controls: [] }); var url = "http://demo.opengeo.org/geoserver/wms"; layers = { states: new OpenLayers.Layer.WMS("State boundary", url, { layers: 'topp:tasmania_state_boundaries', format: 'image/gif', transparent: 'TRUE' }, { singleTile: true }), roads: new OpenLayers.Layer.WMS("Roads", url, { layers: 'topp:tasmania_roads', format: 'image/gif', transparent: 'TRUE' }, { singleTile: true }), waterbodies: new OpenLayers.Layer.WMS("Water bodies", url, { layers: 'topp:tasmania_water_bodies', format: 'image/gif', transparent: 'TRUE' }, { singleTile: true }), cities: new OpenLayers.Layer.WMS("Cities", url, { layers: 'topp:tasmania_cities', format: 'image/gif', transparent: 'TRUE' }, { singleTile: true }) }; for (var key in layers) { map.addLayer(layers[key]); } map.setCenter(new OpenLayers.LonLat(146.65748632815,-42.230763671875), 7); map.addControl(new OpenLayers.Control.LayerSwitcher()); ``` -------------------------------- ### Extended Clustering Example Setup Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/strategy-cluster-extended.html This HTML sets up the basic structure for the extended clustering example, including CSS for layout and placeholders for map elements and strategy controls. ```html OpenLayers extended clustering example

Select the desired clustering strategy:

No strategy
Simple cluster-strategy
Attributive cluster-strategy
Rulebased cluster-strategy

The vectorlayer in this example contains random data with an attribute "clazz" that can take the values 1, 2, 3 and 4. The features with clazz = 4 are considered more important than the others.

The radiobuttons on the right of the map control the cluster strategy to be applied to the features.

No strategy means that all features are rendered, no clustering shall be applied
Simple cluster-strategy applies the cluster strategy with default options to the layer. You should notice that many of the important features with clazz = 4 are getting lost, since clustering happens regardless of feature attributes
Attributive cluster-strategy uses a customized cluster strategy. This strategy is configured to cluster features of the same clazz only. You should be able to see all red points (clazz = 4) even though the data is clustered. A cluster now contains only features of the same clazz.
Rulebased cluster-strategy uses another customized cluster strategy. This strategy is configured to cluster features that follow a certain rule only. In this case only features with a clazz different from 4 are considered as candidates for clustering. That means that usually you have fewer clusters on the map, yet all with clazz = 4 are easily distinguishable

Hover over the features to get a short infomation about the feature or cluster of features.

View the strategy-cluster-extended.js source to see how this is done.

``` -------------------------------- ### Setup for Editing Method Tests Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Handler/Path.html Provides a setup function to initialize a map, vector layer, and Path Handler for testing editing methods. ```javascript function editingMethodsSetup() { var map = new OpenLayers.Map("map", { resolutions: [1] }); var layer = new OpenLayers.Layer.Vector("foo", { maxExtent: new OpenLayers.Bounds(-10, -10, 10, 10), isBaseLayer: true }); map.addLayer(layer); var control = new OpenLayers.Control.DrawFeature( layer, OpenLayers.Handler.Path ); map.addControl(control); map.setCenter(new OpenLayers.LonLat(0, 0), 0); control.activate(); return { handler: control.handler, map: map } } ``` -------------------------------- ### Initialize and Run Tests Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/speed/geometry.html Calls the setup function to prepare test data and then initiates the test execution. ```javascript setup_test() ``` -------------------------------- ### Start Development Server with Docker Compose Source: https://github.com/ccnmtl/mediathread/blob/master/README.markdown Launch the Mediathread development server using Docker Compose. ```bash docker-compose up ``` -------------------------------- ### Sherd.js Initialization with HTML Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/docs/architecture4.txt Example of initializing a Sherd.js component with an HTML configuration object. ```javascript initialize({html:}) ``` -------------------------------- ### Build Virtual Environment Source: https://github.com/ccnmtl/mediathread/blob/master/README.markdown Use 'make' to build the virtual environment for the project, which installs dependencies into the 've/' directory. ```bash make ``` -------------------------------- ### Protovis Visualization Setup Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/protovis/examples/jobs/jobs.html Initializes scales and the main panel for the Protovis visualization. Defines the canvas size and margins. ```javascript var w = 800, h = 480, x = pv.Scale.linear(years).range(0, w), y = pv.Scale.linear(0, sumByYear[2000]).range(0, h), c = pv.Scale.ordinal("men", "women").range("#33f", "#f33") a = pv.Scale.linear(pv.values(sumByJob)).range(.4, .8); var vis = new pv.Panel() .width(w) .height(h) .margin(30); ``` -------------------------------- ### Run Local Development Server Source: https://github.com/ccnmtl/mediathread/blob/master/README.markdown Start the Django development server on a specified host and port for local testing. ```bash ./manage.py runserver myhost.example.com:8000 ``` -------------------------------- ### OpenLayers Map Initialization and Controls Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/select-feature-openpopup.html Initializes the OpenLayers map, adds WMS and Vector layers, and sets up controls for layer switching, mouse position, feature selection, and drawing. This is the core setup for the example. ```javascript var map, drawControls, selectControl, selectedFeature; function onPopupClose(evt) { selectControl.unselect(selectedFeature); } function onFeatureSelect(feature) { selectedFeature = feature; popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), null, "

Feature: " + feature.id +"
Area: " + feature.geometry.getArea()+"

", null, true, onPopupClose); feature.popup = popup; map.addPopup(popup); } function onFeatureUnselect(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } function init(){ map = new OpenLayers.Map('map'); var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} ); var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer"); map.addLayers([wmsLayer, polygonLayer]); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition()); selectControl = new OpenLayers.Control.SelectFeature(polygonLayer, { onSelect: onFeatureSelect, onUnselect: onFeatureUnselect }); drawControls = { polygon: new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon), select: selectControl }; for(var key in drawControls) { map.addControl(drawControls[key]); } map.setCenter(new OpenLayers.LonLat(0, 0), 3); } ``` -------------------------------- ### Protovis Partition Layout Example Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/protovis/tests/layout/partition.html Demonstrates how to create and render a partition layout using Protovis. This snippet visualizes hierarchical data from a 'flare' object. ```javascript var vis = new pv.Panel() .width(500) .height(2000) .left(40) .right(120) .top(10) .bottom(10); var layout = vis.add(pv.Layout.Partition) .nodes(pv.dom(flare) .root("flare") .sort(function(a, b) pv.naturalOrder(a.nodeName, b.nodeName)) .nodes()) .orient("left"); layout.link.add(pv.Line); layout.node.add(pv.Dot); layout.label.add(pv.Label); vis.render(); ``` -------------------------------- ### Install Chrome Extension Button Source: https://github.com/ccnmtl/mediathread/blob/master/mediathread/templates/assetmgr/install_chrome_extension.html This JavaScript code handles the click event for the 'Install' button. It uses the chrome.webstore.install API to initiate the extension installation. Upon successful installation, it updates the button's text to 'Installed' and sends a message to the extension to update its settings. ```javascript (function() { var markAsInstalled = function($button) { $button.text('Installed.'); $button.removeClass('btn-primary'); $button.addClass('btn-secondary disabled'); }; jQuery(document).ready(function() { var $button = jQuery('#chrome-install-button'); $button.on('click', function(e) { if (jQuery(this).hasClass('disabled')) { return; } chrome.webstore.install( 'https://chrome.google.com/webstore/detail/gambcgmmppeklfmbahomokogelnaffbi', function() { // Success handler markAsInstalled($button); var extensionId = 'gambcgmmppeklfmbahomokogelnaffbi'; chrome.runtime.sendMessage( extensionId, { command: 'updatesettings' }, function(response) { var $el = jQuery('.update-chrome-extension-feedback'); var defaultResponse = 'Settings Updated.'; var msg = response ? response : defaultResponse; $el.hide(); $el.text(msg); $el.addClass('alert alert-info') $el.fadeIn(); }); } ); }); }); })(); ``` -------------------------------- ### Constructor and Default Options Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Protocol/Script.html Demonstrates the initialization of OpenLayers.Protocol.Script, including setting the URL, parameters, and default format. Shows how options are handled internally. ```javascript function test_constructor(t) { t.plan(11); var a = new OpenLayers.Protocol.Script({ url: "foo" }); // 7 tests t.eq(a.url, "foo", "constructor sets url"); t.eq(a.options.url, a.url, "constructor copies url to options.url"); t.eq(a.params, {}, "constructor sets params"); t.eq(a.options.params, undefined, "constructor does not copy params to options.params"); t.ok(a.format instanceof OpenLayers.Format.GeoJSON, "constructor sets a GeoJSON format by default"); t.eq(a.callbackKey, 'callback', "callbackKey is set to 'callback' by default"); t.eq(a.callbackPrefix, '', "callbackPrefix is set to '' by default"); var params = {hello: "world"}; var b = new OpenLayers.Protocol.Script({ url: "bar", params: params, callbackKey: 'cb_key', callbackPrefix: 'cb_prefix' }); // 6 tests t.eq(b.params, params, "constructor sets params"); t.eq(b.options.params, b.params, "constructor copies params to options.params"); t.eq(b.callbackKey, 'cb_key', "callbackKey is set to 'cb_key'"); t.eq(b.callbackPrefix, 'cb_prefix', "callbackPrefix is set to 'cb_prefix'"); } ``` -------------------------------- ### List Examples Function Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/example-list.html This JavaScript function is responsible for rendering the list of examples on the page. It takes an array of example objects and updates the target DOM element with the processed template. It also updates the count of displayed examples. ```javascript function listExamples(examples) { target.innerHTML = ""; var node = template.process({ context: {examples: examples}, clone: true, parent: target }); document.getElementById("count").innerHTML = "(" + examples.length + ")"; } ``` -------------------------------- ### Show All Examples Function Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/example-list.html This function resets the search input and displays all available examples by calling `listExamples` with the complete list of examples. ```javascript function showAll() { document.getElementById("keywords").value = ""; listExamples(info.examples); } ``` -------------------------------- ### Initialize Map and Layers Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/getfeatureinfo-control.html Sets up the OpenLayers map, base layers, and WMS layers for the example. This includes political boundaries, roads, cities, and bodies of water. ```javascript var map, infocontrols, water, highlightlayer; function load() { map = new OpenLayers.Map('map', { maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573) }); var political = new OpenLayers.Layer.WMS("State Boundaries", "http://demo.opengeo.org/geoserver/wms", {'layers': 'topp:tasmania\_state\_boundaries', transparent: true, format: 'image/gif'}, {isBaseLayer: true} ); var roads = new OpenLayers.Layer.WMS("Roads", "http://demo.opengeo.org/geoserver/wms", {'layers': 'topp:tasmania\_roads', transparent: true, format: 'image/gif'}, {isBaseLayer: false} ); var cities = new OpenLayers.Layer.WMS("Cities", "http://demo.opengeo.org/geoserver/wms", {'layers': 'topp:tasmania\_cities', transparent: true, format: 'image/gif'}, {isBaseLayer: false} ); water = new OpenLayers.Layer.WMS("Bodies of Water", "http://demo.opengeo.org/geoserver/wms", {'layers': 'topp:tasmania\_water\_bodies', transparent: true, format: 'image/gif'}, {isBaseLayer: false} ); highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", { displayInLayerSwitcher: false, isBaseLayer: false }); infoControls = { click: new OpenLayers.Control.WMSGetFeatureInfo({ url: 'http://demo.opengeo.org/geoserver/wms', title: 'Identify features by clicking', layers: [water], queryVisible: true }), hover: new OpenLayers.Control.WMSGetFeatureInfo({ url: 'http://demo.opengeo.org/geoserver/wms', title: 'Identify features by clicking', layers: [water], hover: true, // defining a custom format options here formatOptions: { typeName: 'water\_bodies', featureNS: 'http://www.openplans.org/topp' }, queryVisible: true }) }; map.addLayers([political, roads, cities, water, highlightLayer]); for (var i in infoControls) { infoControls[i].events.register("getfeatureinfo", this, showInfo); map.addControl(infoControls[i]); } map.addControl(new OpenLayers.Control.LayerSwitcher()); infoControls.click.activate(); map.zoomToMaxExtent(); } ``` -------------------------------- ### Tween Start Method Test Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Tween.html Tests the start method of the OpenLayers.Tween class, verifying that the animation ID is set and that the start, done, and eachStep callbacks are invoked correctly. ```javascript function test_Tween_start(t) { t.plan(5); var tween = new OpenLayers.Tween(); var start = {foo: 0, bar: 10}; var finish = {foo: 10, bar: 0}; var _start = false; var _done = false; var _eachStep = false; var callbacks = { start: function() { _start = true; }, done: function() { _done = true; }, eachStep: function() { _eachStep = true; } } tween.start(start, finish, 10, {callbacks: callbacks}); t.ok(tween.animationId != null, "animationId correctly set"); t.delay_call(0.8, function() { t.eq(_start, true, "start callback called"); t.eq(_done, true, "finish callback called"); t.eq(_eachStep, true, "eachStep callback called"); t.eq(tween.time, 11, "Number of steps reached is correct"); }); } ``` -------------------------------- ### Install get-youtube-id with npm Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/get-youtube-id/README.md Install the package using npm for use in your Node.js project. ```bash npm install get-youtube-id ``` -------------------------------- ### Text Data Examples Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Format/Text.html Provides examples of text data formats for OpenLayers features, including points, icon sizes, and custom attributes. ```text point 5,5 point iconSize 5,5 8,8 point icon 5,5 marker.png 10,10 marker2.png point whee 5,5 chicken ``` -------------------------------- ### Protovis Visualization Panel Setup Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/protovis/tests/physics/dorling.html Sets up the main Protovis visualization panel, enabling pan and zoom behaviors. The background is set to white. ```javascript var vis = new pv.Panel() .width(w) .height(h) .event("mousedown", pv.Behavior.pan()) .event("mousewheel", pv.Behavior.zoom()) .fillStyle("white"); ``` -------------------------------- ### Setting up a Protovis Simulation Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/protovis/tests/physics/simulation.html Initializes a Protovis simulation with nodes, applying charge forces and collision constraints. The simulation is then stabilized before rendering. ```javascript Simulation body { margin: 0; background: #222; } var w = window.innerWidth, h = window.innerHeight, nodes = pv.range(200).map(function(i) { return {x: w * Math.random(), y: h * Math.random(), r: 2 + Math.random() * 8}; }); var sim = pv.simulation(nodes) .force(pv.Force.charge(3)) .constraint(pv.Constraint.collision(function(d) d.r)) .stabilize(); ``` -------------------------------- ### Test Mouse Up Event Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Handler/Drag.html Validates the handler's state after a mouseup event when the handler has started. It checks that the started and dragging flags are reset. ```javascript handler.started = true; // mouseup triggers the up and done callbacks testEvents.done = testEvents.up; map.events.triggerEvent("mouseup", testEvents.up); t.ok(!this.started, "mouseup sets the started flag to false"); t.ok(!this.dragging, "mouseup sets the dragging flag to false"); ``` -------------------------------- ### Create and Render a Protovis Panel Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/protovis/tests/mark/property-cast.html Initializes a Protovis panel with various properties and renders it. This serves as a basic setup for demonstrating mark properties. ```javascript var vis = new pv.Panel() .width(200) .height(200) .top(10) .bottom(10) .left(10) .right(10) .lineWidth(10) .strokeStyle("#ccc") .fillStyle(function() this.strokeStyle().darker()); vis.render(); ``` -------------------------------- ### Testing Snapping on Sketch Start Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Control/Snapping.html Tests the snapping events triggered when a sketch is started, specifically focusing on 'beforesnap' and 'snap' events for a node. ```javascript // unsnap & reset drag(-100, -50); control.greedy = true; events = []; // demonstrate snapping on sketchstarted var p = new OpenLayers.Geometry.Point(0, 1); layer1.events.triggerEvent("sketchstarted", { vertex: p, feature: new OpenLayers.Feature.Vector(p) }); t.eq(events.length, 2, "[sketchstarted] 2 events triggered"); t.eq(events[0].type, "beforesnap", "[sketchstarted] beforesnap triggered"); t.eq(events[0].snapType, "node", "[sketchstarted] beforesnap triggered for node"); t.ok(events[0].point === p, "[sketchstarted] beforesnap triggered with vertex"); t.eq(events[0].x, 0, "[sketchstarted] beforesnap triggered correct x"); t.eq(events[0].y, 0, "[sketchstarted] beforesnap triggered with correct y"); t.eq(events[1].type, "snap", "[sketchstarted] snap triggered"); t.eq(events[1].snapType, "node", "[sketchstarted] snap triggered for node"); t.ok(events[1].point === p, "[sketchstarted] snap triggered with point"); t.eq(events[1].distance, 1, "[sketchstarted] snap triggered correct distance"); t.ok(events[1].layer === layer1, "[sketchstarted] snap triggered with correct target layer"); t.eq(p.x, 0, "[sketchstarted] vertex x modified"); t.eq(p.y, 0, "[sketchstarted] vertex y modified"); ``` -------------------------------- ### Toggle Animated Panning Functionality Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/animated_panning.html Controls the start and stop of the random recentering function. When running, it starts the interval; otherwise, it clears the interval. ```javascript function setCenterInterval() { if (!running) { setCenter(); running = setInterval('setCenter()', 500); } else { clearInterval(running); running = false; } } ``` -------------------------------- ### Initialize OpenLayers WFS Protocol Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Protocol/WFS.html Demonstrates initializing the WFS protocol with default and custom WFS versions. ```javascript function test_initialize(t) { t.plan(2); var protocol = new OpenLayers.Protocol.WFS({ url: "http://some.url.org", featureNS: "http://namespace.org", featureType: "type" }); t.ok(protocol instanceof OpenLayers.Protocol.WFS.v1_0_0, "initialize returns instance of default versioned protocol") var protocol = new OpenLayers.Protocol.WFS({ url: "http://some.url.org", featureNS: "http://namespace.org", featureType: "type", version: "1.1.0" }); t.ok(protocol instanceof OpenLayers.Protocol.WFS.v1_1_0, "initialize returns instance of custom versioned protocol") } ``` -------------------------------- ### Get Timestamp for Logging Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/layerLoadMonitoring.html Provides a utility function to get the current time formatted as HH:MM:SS for use in event logs. ```javascript function getTimeStamp() { var date = new Date(); var timeParts = [ date.getHours(), date.getMinutes(), date.getSeconds() ]; var timeStamp = timeParts.join(":"); return timeStamp; } ``` -------------------------------- ### Protovis Mark Rendering Example Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/protovis/tests/mark/render-partial.html This snippet demonstrates partial rendering of Protovis panels. It initializes a visualization, adds two panels with labels, and then calls `render()` on different panels and the main visualization to show how updates can be localized. ```javascript var vis = new pv.Panel() .width(200) .height(200); var panel1 = vis.add(pv.Panel) .top(0) .height(20); panel1.add(pv.Label) .textBaseline("top") .text(function() "render 1: " + (++panel1.count || (panel1.count = 1))); var panel2 = panel1.add(pv.Panel) .top(20) .height(20); panel2.add(pv.Label) .textBaseline("top") .text(function() "render 2: " + (++panel2.count || (panel2.count = 1))); vis.render(); panel1.render(); panel1.render(); panel2.render(); vis.render(); vis.render(); ``` -------------------------------- ### Setup Test Data with Polygons Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/speed/geometry.html Initializes test data by reading and assigning polygon geometries. This setup is required before performing intersection tests. ```javascript var list = f.read("POLYGON((29.8828125, -74.53125 29.1796875, -75.234375 28.4765625, -76.640625 26.3671875, -76.640625 25.6640625, -76.640625 24.9609375, -77.34375 24.2578125, -77.34375 23.5546875, -78.046875 23.5546875, -79.453125 23.5546875, -80.15625 23.5546875, -80.859375 23.5546875, -81.5625 23.5546875, -82.265625 23.5546875, -82.96875 23.5546875, -83.671875 23.5546875, -83.671875 24.2578125, -85.078125 24.2578125, -85.78125 24.9609375, -85.78125 25.6640625, -86.484375 25.6640625, -87.1875 26.3671875, -87.1875 27.7734375, -87.1875 28.4765625, -87.890625 28.4765625, -88.59375 28.4765625, -89.296875 28.4765625, -90 28.4765625, -90.703125 28.4765625, -91.40625 28.4765625, -91.40625 27.7734375, -92.8125 27.7734375, -92.8125 27.0703125, -92.8125 26.3671875, -92.8125 25.6640625, -92.8125 24.9609375, -92.8125 24.2578125, -93.515625 24.2578125, -94.921875 23.5546875, -95.625 23.5546875, -97.03125 23.5546875, -97.734375 23.5546875, -98.4375 23.5546875, -99.140625 23.5546875, -99.84375 24.2578125, -101.25 24.2578125, -104.0625 24.9609375, -106.171875 25.6640625, -106.875 26.3671875, -107.578125 26.3671875, -108.28125 26.3671875, -108.984375 26.3671875, -110.390625 26.3671875, -113.90625 26.3671875, -116.015625 26.3671875, -116.71875 27.0703125, -118.125 27.0703125, -118.828125 27.7734375, -120.234375 27.7734375, -120.234375 28.4765625, -120.9375 28.4765625, -120.9375 29.1796875, -121.640625 29.8828125, -121.640625 30.5859375, -121.640625 31.2890625, -123.046875 31.2890625, -123.75 32.6953125, -124.453125 33.3984375, -125.15625 34.1015625, -126.5625 34.8046875, -127.265625 34.8046875, -127.96875 35.5078125, -125.15625 48.1640625))"); test_data['miss_polygon'] = list.geometry; var list = f.read("POLYGON((-32.34375 13.0078125, -33.046875 13.0078125, -33.75 13.0078125, -34.453125 13.0078125, -35.15625 13.0078125, -35.859375 13.0078125, -36.5625 13.0078125, -37.265625 13.0078125, -37.96875 13.0078125, -37.96875 12.3046875, -38.671875 12.3046875, -39.375 12.3046875, -40.078125 12.3046875, -40.078125 11.6015625, -41.484375 11.6015625, -42.890625 10.8984375, -43.59375 10.8984375, -44.296875 10.1953125, -44.296875 9.4921875, -44.296875 8.7890625, -44.296875 8.0859375, -44.296875 6.6796875, -44.296875 5.9765625, -44.296875 5.2734375, -43.59375 5.2734375, -43.59375 4.5703125, -43.59375 3.8671875, -42.890625 3.1640625, -42.890625 2.4609375, -42.890625 1.7578125, -42.890625 1.0546875, -42.1875 -0.3515625, -41.484375 -1.0546875, -41.484375 -2.4609375, -41.484375 -3.1640625, -42.890625 -3.1640625, -44.296875 -3.8671875, -44.296875 -4.5703125, -45.703125 -5.2734375, -46.40625 -5.2734375, -47.109375 -5.2734375, -47.109375 -5.9765625, -47.109375 -6.6796875, -47.109375 -7.3828125, -47.109375 -8.0859375, -47.109375 -9.4921875, -47.109375 -10.1953125, -47.109375 -10.8984375, -47.109375 -11.6015625, -47.109375 -12.3046875, -47.109375 -13.7109375, -47.109375 -15.1171875, -47.109375 -15.8203125, -47.8125 -15.8203125, -47.8125 -16.5234375, -46.40625 -16.5234375, -45.703125 -16.5234375, -44.296875 -17.2265625, -43.59375 -17.9296875, -42.890625 -18.6328125, -42.1875 -18.6328125, -41.484375 -18.6328125, -40.78125 -18.6328125, -39.375 -18.6328125, -37.265625 -18.6328125, -35.859375 -18.6328125, -34.453125 -17.9296875, -33.75 -17.9296875, -33.046875 -17.9296875, -32.34375 -17.9296875, -32.34375 -18.6328125, -32.34375 -19.3359375, -32.34375 -20.0390625, -32.34375 -21.4453125, -31.640625 -22.1484375, -30.9375 -22.8515625, -28.828125 -22.8515625, -26.71875 -22.8515625, -23.90625 -20.0390625, -23.203125 -19.3359375, -22.5 -19.3359375, -21.796875 -17.2265625, -21.09375 -16.5234375, -21.09375 -15.8203125, -21.09375 -15.1171875, -21.09375 -14.4140625, -19.6875 -10.8984375, -19.6875 -8.0859375, -19.6875 -7.3828125, -19.6875 -5.9765625, -19.6875 -5.2734375, -19.6875 -3.1640625, -19.6875 -1.7578125, -19.6875 -0.3515625, -19.6875 0.3515625, -19.6875 1.0546875, -19.6875 1.7578125, -19.6875 2.4609375, -19.6875 3.1640625, -20.390625 4.5703125, -20.390625 5.9765625, -20.390625 6.6796875, -21.09375 6.6796875, -22.5 8.0859375, -23.90625 8.7890625, -25.3125 8.7890625, -26.015625 9.4921875, -26.71875 9.4921875, -27.421875 9.4921875, -28.125 9.4921875, -32.34375 13.0078125))"); test_data['hit_polygon'] = list.geometry; } ``` -------------------------------- ### Initialize Tiled MapGuide Layer Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/mapguide.html Sets up a tiled MapGuide layer. This is useful for displaying large maps efficiently by loading pre-rendered tiles. Ensure the 'url' variable points to your MapGuide mapagent. ```javascript function initTiled(){ var extent = new OpenLayers.Bounds(-87.764987,43.691398,-87.695522,43.797520); var tempScales = [100000,51794.74679,26826.95795,13894.95494,7196.85673,3727.59372,1930.69773,1000]; var mapOptions = { maxExtent: extent, scales: tempScales }; map = new OpenLayers.Map( 'map', mapOptions ); var params = { mapdefinition: 'Library://Samples/Sheboygan/MapsTiled/Sheboygan.MapDefinition', basemaplayergroupname: "Base Layer Group" }; var options = { singleTile: false }; var layer = new OpenLayers.Layer.MapGuide( "MapGuide OS tiled layer", url, params, options ); map.addLayer(layer); / * The following example shows how to access an MG tile cache directly through HTTP bypassing the MG mapagent. This depends on having a pre-populated tile cache * / /* options.useHttpTile = true; var cacheUrl = "http://localhost:8008/sheboygan"; var httpLayer = new OpenLayers.Layer.MapGuide( "MapGuide HTTP cache tiled layer", cacheUrl, params, options ); map.addLayer(httpLayer); */ map.zoomToMaxExtent(); } ``` -------------------------------- ### WFS Protocol with Filter Example Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/wfs-filter.html This example demonstrates how to use a filter with the WFS protocol to request specific features from a server. The filter is serialized into the GetFeature request. ```javascript var vectorSource = new ol.source.Vector({ format: new ol.format.GeoJSON(), url: function(extent) { return 'https://openlayers.org/en/latest/examples/data/vector.json?bbox=' + extent.join(',') + ',EPSG:4326'; }, overlaps: false }); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0, 0, 0, 0.7)', width: 2 }) }) }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], target: 'map', view: new ol.View({ center: [-11150000, 4815000], zoom: 4 }) }); var filter = new ol.format.filter.or( new ol.format.filter.equalTo('TYPE', 'highway'), new ol.format.filter.equalTo('TYPE', 'road') ); vectorSource.addFeatures(vectorSource.getFeatures()); vectorSource.addFilter(filter); ``` -------------------------------- ### Example OpenLayers Build Script Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/build/README.txt This script demonstrates how to use the build.py script with the 'closure' compression mechanism, a specified config file, and an output file. ```bash python build.py -c closure full OpenLayers-closure.js ``` -------------------------------- ### MapServer GML Shell Start and End Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Format/GML.html Defines the start and end parts of a GML shell structure used for MapServer, with a conditional variation for Opera browser. ```javascript var shell_start = ''; if (OpenLayers.BROWSER_NAME == "opera") { shell_start = ''; } ``` ```javascript var shell_end = ''; ``` -------------------------------- ### Protovis Visualization Setup Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/protovis/examples/slider/slider.html Initializes a Protovis panel with a black fill color and a label displaying the current color. This sets up the visualization that will be controlled by the sliders. ```javascript var color = pv.color("black"); var vis = new pv.Panel() .width(300) .height(300) .fillStyle(color); vis.anchor("center").add(pv.Label) .text(function() color.color); vis.render(); ``` -------------------------------- ### Test Mouse Out Event Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Handler/Drag.html Verifies the handler's behavior on a mouseout event after it has started. It checks that the started and dragging flags are reset and that Util.mouseLeft is called with correct arguments. ```javascript handler.started = true; var oldMouseLeft = OpenLayers.Util.mouseLeft; OpenLayers.Util.mouseLeft = function(evt, element) { t.ok(evt.xy.x == testEvents.done.xy.x && evt.xy.y == testEvents.done.xy.y, "mouseout calls Util.mouseLeft with the correct event"); t.eq(element.id, map.viewPortDiv.id, "mouseout calls Util.mouseLeft with the correct element"); return true; } // mouseup triggers the out and done callbacks // out callback gets no arguments handler.callbacks.out = function() { t.eq(arguments.length, 0, "mouseout calls out callback with no arguments"); } map.events.triggerEvent("mouseout", testEvents.done); t.ok(!handler.started, "mouseout sets started flag to false"); t.ok(!handler.dragging, "mouseout sets dragging flag to false"); OpenLayers.Util.mouseLeft = oldMouseLeft; ``` -------------------------------- ### CacheWrite Control Example Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/examples/cache-write.html This example shows how to use the CacheWrite control to cache tiles. Caching is enabled, and as you pan and zoom, loaded tiles are copied to the browser's Local Storage. ```javascript var options = { displayInLayerSwitcher: true }; var cacheWrite = new OpenLayers.Control.CacheWrite(options); map.addControl(cacheWrite); cacheWrite.activate(); ``` -------------------------------- ### Class Constructor and Instance Properties Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/BaseTypes/Class.html Illustrates how to define a constructor for a class using the 'initialize' method and how to set instance-specific properties. It verifies that the constructor is called with the correct arguments and that instance properties are set correctly. ```javascript function test_Class_constructor(t) { t.plan(7); var MyClass = OpenLayers.Class({ prop: null, classProp: {'bad': 'practice'}, initialize: function(a1, a2) { this.prop = "instance property"; t.ok(true, "initialize is called when a new instance is created"); t.eq(a1, arg1, "initialize is called with the proper first argument"); t.eq(a2, arg2, "initialize is called with the proper second argument"); }, CLASS_NAME: "MyClass" }); var arg1 = "anArg"; var arg2 = {"another": "arg"}; var myObj = new MyClass(arg1, arg2); t.eq(MyClass.prop, null, "creating a new instance doesn't modify the class"); t.eq(myObj.prop, "instance property", "the new instance is assigned a property in the constructor"); t.eq(myObj["CLASS_NAME"], "MyClass", "the new object is an instance of MyClass"); // allow for modification of class properties MyClass.prototype.classProp.bad = "good"; t.eq(myObj.classProp.bad, "good", "modifying a class property modifies properties of the instance"); } ``` -------------------------------- ### Test HTTP Protocol Read (GET) Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Protocol/HTTP.html Tests the read method of OpenLayers.Protocol.HTTP when using the default GET request. It verifies that handleResponse is called correctly and that OpenLayers.Request.GET is invoked with the appropriate parameters. ```javascript function test_read(t) { t.plan(10); var protocol = new OpenLayers.Protocol.HTTP({ 'url': 'foo_url', 'params': {'k': 'foo_param'} }); // fake XHR request object var request = {'status': 200}; // options to pass to read var readOptions = { 'url': 'bar_url', 'params': {'k': 'bar_param'}, 'headers': {'k': 'bar_header'}, 'scope': {'hello': 'world'}, 'callback': function() {} }; var response; protocol.handleResponse = function(resp, opt) { // 4 tests var req = resp.priv; t.ok(this == protocol, 'handleResponse called with correct scope'); t.ok(opt == readOptions, 'handleResponse called with correct options'); t.eq(resp.CLASS_NAME, 'OpenLayers.Protocol.Response', 'handleResponse called with a Response object'); t.eq(req, request, 'handleResponse called with correct request'); response = resp; }; var _get = OpenLayers.Request.GET; OpenLayers.Request.GET = function(options) { // 5 tests t.eq(options.url, readOptions.url, 'GET called with correct url in options'); t.eq(options.params['k'], readOptions.params['k'], 'GET called with correct params in options'); t.eq(options.headers['k'], readOptions.headers['k'], 'GET called with correct headers in options'); t.eq(options.scope, undefined, 'GET called with correct scope in options'); t.ok(typeof options.callback == 'function', 'GET called with a callback in options'); t.delay_call(0.1, function() { options.callback(request); t.ok(resp == response, 'read returns the expected response object'); // cleanup protocol.destroy(); OpenLayers.Request.GET = _get; }); return request; }; var resp = protocol.read(readOptions); OpenLayers.Request.GET = _get; } ``` -------------------------------- ### Building WMS Options Source: https://github.com/ccnmtl/mediathread/blob/master/media/js/lib/sherdjs/lib/openlayers/openlayers/tests/Control/WMSGetFeatureInfo.html Demonstrates the process of building options for a WMS GetFeatureInfo request, considering map projection and layer-specific projections. ```javascript function test_GetFeatureInfo_buildWMSOptions(t) { t.plan(3); var map = new OpenLayers.Map("map", { getExtent: function() {return(new OpenLayers.Bounds(-180,-90,180,90));}, projection: "EPSG:900913" }); var a = new OpenLayers.Layer.WMS("dummy", "http://localhost/wms", { layers: "a" }, {projection: "EPSG:3857"}); var b = new OpenLayers.Layer.WMS("dummy", "http://localhost/wms", { layers: "b" }); var c = new OpenLayers.Layer.WMS("dummy", "http://localhost/wms", { layers: "c" }); ```