diff --git a/docs/examples/bootstrap.html b/docs/examples/bootstrap.html index 26ddff3..6682b81 100644 --- a/docs/examples/bootstrap.html +++ b/docs/examples/bootstrap.html @@ -66,20 +66,14 @@ diff --git a/docs/examples/cesium.html b/docs/examples/cesium.html index 60f8d08..5935875 100644 --- a/docs/examples/cesium.html +++ b/docs/examples/cesium.html @@ -34,16 +34,9 @@ - diff --git a/docs/examples/explorer.html b/docs/examples/explorer.html index d6ffc97..fd0f2e4 100644 --- a/docs/examples/explorer.html +++ b/docs/examples/explorer.html @@ -42,15 +42,9 @@ diff --git a/docs/examples/js/example.cesium.js b/docs/examples/js/example.cesium.js index 20dd92b..004d801 100644 --- a/docs/examples/js/example.cesium.js +++ b/docs/examples/js/example.cesium.js @@ -1,26 +1,27 @@ - /** * Run explorer cesium example - * @param id Explorer DOM id + * @param {string} id Explorer DOM id + * @return {Explorer} OpenLayers Explorer instance */ -var runExampleCesium = function(id) { - - // ================================================== - // Add explorer - // -------------------------------------------------- +// eslint-disable-next-line no-unused-vars +const runExampleCesium = function(id) { + // ================================================== + // Add explorer + // -------------------------------------------------- - var explorer = new olexp.Explorer(id); - var layerstm = new ol.layer.Tile({ - source: new ol.source.Stamen({layer: 'watercolor'}) - }); - layerstm.set('name','Stamen'); - explorer.map.addLayer(layerstm); + const explorer = new olexp.Explorer(id); + const layerstm = new ol.layer.Tile({ + source: new ol.source.Stamen({layer: 'watercolor'}), + }); + layerstm.set('name', 'Stamen'); + explorer.map.addLayer(layerstm); - // ================================================== - // Add cesium - // -------------------------------------------------- + // ================================================== + // Add cesium + // -------------------------------------------------- - this.ol3d = new olcs.OLCesium({map: explorer.map}); - this.ol3d.setEnabled(true); + explorer.ol3d = new olcs.OLCesium({map: explorer.map}); + explorer.ol3d.setEnabled(true); + return explorer; }; diff --git a/docs/examples/js/example.layers.js b/docs/examples/js/example.layers.js index 4cc9705..11c57e6 100644 --- a/docs/examples/js/example.layers.js +++ b/docs/examples/js/example.layers.js @@ -1,133 +1,132 @@ - -/** - * Run explorer layers example - * @param id Explorer DOM id - * @param exmples Examples directory - */ -var runExampleLayers = function(id, examples) { - - // ================================================== - // Layers Example - // -------------------------------------------------- - - var explorer = new olexp.Explorer(id); - - // ================================================== - // Add OSM map - // -------------------------------------------------- - var layerosm = new ol.layer.Tile({ - source: new ol.source.OSM() - }); - layerosm.set('name','OpenStreetMap'); - - // ================================================== - // Add Stamen map - // -------------------------------------------------- - var layerstm = new ol.layer.Tile({ - source: new ol.source.Stamen({layer: 'watercolor'}) - }); - layerstm.set('name','Stamen'); - - // ================================================== - // Add tiles group - // -------------------------------------------------- - - var tiles = new ol.layer.Group({ - layers: [layerosm, layerstm] - }); - tiles.set('name','Tiles'); - explorer.map.addLayer(tiles); - - // ================================================== - // Add overlay marker and label - // -------------------------------------------------- - var position = ol.proj.transform([-77.016389, 38.904722], - 'EPSG:4326', - 'EPSG:3857'); - - var marker = new ol.Overlay({ - position: position, - positioning: 'center-center', - element: document.getElementById('marker'), - stopEvent: false - }); - marker.set('name','Washington D.C. Marker'); - explorer.map.addOverlay(marker); - - var label = new ol.Overlay({ - position: position, - element: document.getElementById('label') - }); - label.set('name','Washington D.C. Label'); - explorer.map.addOverlay(label); - - // set center to marker - explorer.map.getView().setCenter(position); - - // ================================================== - // Add image vector - // -------------------------------------------------- - var image = new ol.layer.Image({ - source: new ol.source.ImageVector({ - source: new ol.source.Vector({ - format: new ol.format.GeoJSON(), - url: examples + '/data/geojson/world_cities.json', - }) - }) - }); - image.set('name','World Cities'); - explorer.map.addLayer(image); - - // ================================================== - // Add heatmap - // -------------------------------------------------- - var heatMap = new ol.layer.Heatmap({ - source: new ol.source.Vector({ - url: examples + '/data/kml/2012_Earthquakes_Mag5.kml', - format: new ol.format.KML({extractStyles: false}) - }), - blur: 10, - radius: 10 - }); - heatMap.set('name','Heat Map'); - - // ================================================== - // Add heatmap source - // -------------------------------------------------- - var heatSource = new ol.layer.Vector({ - source: new ol.source.Cluster({ - source: new ol.source.Vector({ - url: examples + '/data/kml/2012_Earthquakes_Mag5.kml', - format: new ol.format.KML() - })}), - style: function(feature, resolution) { - var size = feature.get('features').length; - var style = [new ol.style.Style({ - image: new ol.style.Circle({ - radius: 10, - stroke: new ol.style.Stroke({color: '#ffffff'}), - fill: new ol.style.Fill({color: '#3399CC'}) - }), - text: new ol.style.Text({ - text: size.toString(), - fill: new ol.style.Fill({color: '#ffffff'}) - }) - })]; - return style; - } - }); - heatSource.set('name','Heat Map Source'); - - // ================================================== - // Add heatmap group - // -------------------------------------------------- - - var heatGroup = new ol.layer.Group({ - layers: [heatMap, heatSource] - }); - heatGroup.set('name','Heat Map Group'); - explorer.map.addLayer(heatGroup); - - return explorer; - -}; +/** + * Run explorer layers example + * @param {string} id Explorer DOM id + * @param {string} examples Examples directory + * @return {Explorer} OpenLayer Explorer instance + */ +// eslint-disable-next-line no-unused-vars +const runExampleLayers = function(id, examples) { + // ================================================== + // Layers Example + // -------------------------------------------------- + + const explorer = new olexp.Explorer(id); + + // ================================================== + // Add OSM map + // -------------------------------------------------- + const layerosm = new ol.layer.Tile({ + source: new ol.source.OSM(), + }); + layerosm.set('name', 'OpenStreetMap'); + + // ================================================== + // Add Stamen map + // -------------------------------------------------- + const layerstm = new ol.layer.Tile({ + source: new ol.source.Stamen({layer: 'watercolor'}), + }); + layerstm.set('name', 'Stamen'); + + // ================================================== + // Add tiles group + // -------------------------------------------------- + + const tiles = new ol.layer.Group({ + layers: [layerosm, layerstm], + }); + tiles.set('name', 'Tiles'); + explorer.map.addLayer(tiles); + + // ================================================== + // Add overlay marker and label + // -------------------------------------------------- + const position = ol.proj.transform([-77.016389, 38.904722], + 'EPSG:4326', + 'EPSG:3857'); + + const marker = new ol.Overlay({ + position: position, + positioning: 'center-center', + element: document.getElementById('marker'), + stopEvent: false, + }); + marker.set('name', 'Washington D.C. Marker'); + explorer.map.addOverlay(marker); + + const label = new ol.Overlay({ + position: position, + element: document.getElementById('label'), + }); + label.set('name', 'Washington D.C. Label'); + explorer.map.addOverlay(label); + + // set center to marker + explorer.map.getView().setCenter(position); + + // ================================================== + // Add image vector + // -------------------------------------------------- + const image = new ol.layer.Image({ + source: new ol.source.ImageVector({ + source: new ol.source.Vector({ + format: new ol.format.GeoJSON(), + url: examples + '/data/geojson/world_cities.json', + }), + }), + }); + image.set('name', 'World Cities'); + explorer.map.addLayer(image); + + // ================================================== + // Add heatmap + // -------------------------------------------------- + const heatMap = new ol.layer.Heatmap({ + source: new ol.source.Vector({ + url: examples + '/data/kml/2012_Earthquakes_Mag5.kml', + format: new ol.format.KML({extractStyles: false}), + }), + blur: 10, + radius: 10, + }); + heatMap.set('name', 'Heat Map'); + + // ================================================== + // Add heatmap source + // -------------------------------------------------- + const heatSource = new ol.layer.Vector({ + source: new ol.source.Cluster({ + source: new ol.source.Vector({ + url: examples + '/data/kml/2012_Earthquakes_Mag5.kml', + format: new ol.format.KML(), + })}), + style: function(feature, resolution) { + const size = feature.get('features').length; + const style = [new ol.style.Style({ + image: new ol.style.Circle({ + radius: 10, + stroke: new ol.style.Stroke({color: '#ffffff'}), + fill: new ol.style.Fill({color: '#3399CC'}), + }), + text: new ol.style.Text({ + text: size.toString(), + fill: new ol.style.Fill({color: '#ffffff'}), + }), + })]; + return style; + }, + }); + heatSource.set('name', 'Heat Map Source'); + + // ================================================== + // Add heatmap group + // -------------------------------------------------- + + const heatGroup = new ol.layer.Group({ + layers: [heatMap, heatSource], + }); + heatGroup.set('name', 'Heat Map Group'); + explorer.map.addLayer(heatGroup); + + return explorer; +}; diff --git a/docs/examples/js/example.options.js b/docs/examples/js/example.options.js index d06e35f..486f661 100644 --- a/docs/examples/js/example.options.js +++ b/docs/examples/js/example.options.js @@ -1,171 +1,171 @@ - /** * Run explorer options example - * @param id Explorer DOM id - * @param exmples Examples directory + * @param {string} id Explorer DOM id + * @param {string} examples Examples directory + * @return {Explorer} OpenLayer Explorer instance */ -var runExampleOptions = function(id, examples) { - - // ================================================== - // Use constructor options to move the location of - // the navigation and toolbar panels, disable - // a control, hide the overlays node, and change - // various settings. - // -------------------------------------------------- - - var explorer = new olexp.Explorer(id, { - controls : { - toolbarhide : false +// eslint-disable-next-line no-unused-vars +const runExampleOptions = function(id, examples) { + // ================================================== + // Use constructor options to change several defaults: + // - Move the location of the navigation panel + // - Move the location of the toolbar panel + // - Disable a control + // - Hide the overlays node + // - Change various settings. + // -------------------------------------------------- + + const explorer = new olexp.Explorer(id, { + controls: { + toolbarhide: false, + }, + navigation: { + type: 'right', + }, + overlays: { + group: false, + hidden: true, + }, + settings: { + control: { + EditSettings: {hint: 'Modify Controls'}, + ExportMap: {hint: 'Export map to image'}, + Graticule: { + enable: true, + hint: 'Modify Grid Lines', + options: { + color: '00ff00', + }, }, - navigation : { - type : 'right' + LayerControlTile: {hint: 'Load a tile layer'}, + LayerControlVector: {hint: 'Load a vector layer'}, + LayerManager: { + hintMoveDown: 'Move selected item down', + hintMoveUp: 'Move selected item up', }, - overlays : { - group : false, - hidden : true + Measurement: { + hintArea: 'Create area measurement', + hintLength: 'Create length measurement', }, - settings : { - control : { - EditSettings : {hint : 'Modify Controls'}, - ExportMap : {hint : 'Export map to image'}, - Graticule : { - enable : true, - hint : 'Modify Grid Lines', - options : { - color : '00ff00' - } - }, - LayerControlTile : {hint : 'Load a tile layer'}, - LayerControlVector : {hint : 'Load a vector layer'}, - LayerManager : { - hintMoveDown : 'Move selected item down', - hintMoveUp : 'Move selected item up', - }, - Measurement : { - hintArea : 'Create area measurement', - hintLength : 'Create length measurement' - }, - ToolbarHide : {hint : 'Hide the toolbar'} - }, - measure : { - Tool: { - measuredStyle : new ol.style.Style({ - fill: new ol.style.Fill({ - color: 'rgba(255, 0, 0, 0.2)' - }), - stroke: new ol.style.Stroke({ - color: '#0000ff', - width: 2 - }) - }) - } - }, - menu : { - Properties : {text : 'Layer Properties'}, - Remove : {text : 'Delete Layer'}, - Zoom : {text : 'Zoom To Layer'} - }, - ol : { - ToolbarShow : { - title : 'Display toolbar' - } - } + ToolbarHide: {hint: 'Hide the toolbar'}, + }, + measure: { + Tool: { + measuredStyle: new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255, 0, 0, 0.2)', + }), + stroke: new ol.style.Stroke({ + color: '#0000ff', + width: 2, + }), + }), }, - toolbar : { - type : 'bottom' - } - }); - - // ================================================== - // Add new context menu - // -------------------------------------------------- - - // Add new context menu item - explorer.outline.menu.push({id : 'new-menu', - text : 'Show Details', - img : 'icon-page' }); - - // Add new context menu item callback - (function() { - - // Store old callbacks - var old = explorer.outline.onMenuClick; - - explorer.outline.onMenuClick = function(event) { - - // Run existing callbacks - old.apply(this, arguments); - - // Run new callback which popups item details - if (event.menuItem.id === 'new-menu') - { - var item = explorer.manager.getById(event.target); - var records = explorer.manager.getDetails(event.target); - w2popup.open({ - body : '
', - onClose : function (event) { - event.onComplete = function () { - w2ui['details-grid'].destroy(); - }; - }, - onOpen : function (event) { - event.onComplete = function () { - $('#details-popup').w2grid({ - name : 'details-grid', - columns : explorer.details.columns, - records : records - }); - }; - }, - title : item.name() - }); - } - - return this; - } - })(); - - // ================================================== - // Add OSM map - // -------------------------------------------------- - - var layerosm = new ol.layer.Tile({ - source: new ol.source.OSM() - }); - layerosm.set('name','OpenStreetMap'); - - explorer.map.addLayer(layerosm); - - // ================================================== - // Add vector layer - // -------------------------------------------------- - - var vector = new ol.layer.Vector({ - source: new ol.source.Cluster({ - source: new ol.source.Vector({ - url: examples + '/data/kml/2012_Earthquakes_Mag5.kml', - format: new ol.format.KML() - })}), - style: function(feature, resolution) { - var size = feature.get('features').length; - var style = [new ol.style.Style({ - image: new ol.style.Circle({ - radius: 10, - stroke: new ol.style.Stroke({color: '#ffffff'}), - fill: new ol.style.Fill({color: '#3399CC'}) - }), - text: new ol.style.Text({ - text: size.toString(), - fill: new ol.style.Fill({color: '#ffffff'}) - }) - })]; - return style; - } - }); - vector.set('name','Earthquakes'); - - explorer.map.addLayer(vector); - - return explorer; - + }, + menu: { + Properties: {text: 'Layer Properties'}, + Remove: {text: 'Delete Layer'}, + Zoom: {text: 'Zoom To Layer'}, + }, + ol: { + ToolbarShow: { + title: 'Display toolbar', + }, + }, + }, + toolbar: { + type: 'bottom', + }, + }); + + // ================================================== + // Add new context menu + // -------------------------------------------------- + + // Add new context menu item + explorer.outline.menu.push({id: 'new-menu', + text: 'Show Details', + img: 'icon-page'}); + + // Add new context menu item callback + (function() { + // Store old callbacks + const old = explorer.outline.onMenuClick; + + explorer.outline.onMenuClick = function(...args) { + // Run existing callbacks + old.apply(this, args); + + const event = args[0]; + // Run new callback which popups item details + if (event.menuItem.id === 'new-menu') { + const item = explorer.manager.getById(event.target); + const records = explorer.manager.getDetails(event.target); + w2popup.open({ + body: '
' + + '
', + onClose: function(event) { + event.onComplete = function() { + w2ui['details-grid'].destroy(); + }; + }, + onOpen: function(event) { + event.onComplete = function() { + $('#details-popup').w2grid({ + name: 'details-grid', + columns: explorer.details.columns, + records: records, + }); + }; + }, + title: item.name(), + }); + } + + return this; + }; + })(); + + // ================================================== + // Add OSM map + // -------------------------------------------------- + + const layerosm = new ol.layer.Tile({ + source: new ol.source.OSM(), + }); + layerosm.set('name', 'OpenStreetMap'); + + explorer.map.addLayer(layerosm); + + // ================================================== + // Add vector layer + // -------------------------------------------------- + + const vector = new ol.layer.Vector({ + source: new ol.source.Cluster({ + source: new ol.source.Vector({ + url: examples + '/data/kml/2012_Earthquakes_Mag5.kml', + format: new ol.format.KML(), + })}), + style: function(feature, resolution) { + const size = feature.get('features').length; + const style = [new ol.style.Style({ + image: new ol.style.Circle({ + radius: 10, + stroke: new ol.style.Stroke({color: '#ffffff'}), + fill: new ol.style.Fill({color: '#3399CC'}), + }), + text: new ol.style.Text({ + text: size.toString(), + fill: new ol.style.Fill({color: '#ffffff'}), + }), + })]; + return style; + }, + }); + vector.set('name', 'Earthquakes'); + + explorer.map.addLayer(vector); + + return explorer; }; diff --git a/docs/examples/js/example.proj4.js b/docs/examples/js/example.proj4.js new file mode 100644 index 0000000..f8e6005 --- /dev/null +++ b/docs/examples/js/example.proj4.js @@ -0,0 +1,39 @@ +window.onload = function() { + window.explorer = runExampleLayers('explorer', '.'); + + // Read GeoJSON and parse CRS name + const title = 'Maryland - UTM'; + const url = './data/geojson/gz_2010_us_040_00_500k.maryland.utm.geojson'; + $.getJSON(url, function(data) { + // Query epsg.io for projection definition of CRS + const urn = data.crs.properties.name; + const split = urn.split(':'); + const code = split[split.length-1]; + const query = 'http://epsg.io/?format=json&q=' + code; + + fetch(query).then(function(response) { + return response.json(); + }).then(function(json) { + if (json.results.length > 0) { + // Add proj4 definition for CRS + proj4.defs(urn, json.results[0].proj4); + + // Add layer + const format = new ol.format.GeoJSON(); + const source = new ol.source.Vector({ + url: url, + format: format, + }); + const layer = new ol.layer.Vector({source: source}); + layer.set('name', title); + window.explorer.map.addLayer(layer); + } else { + w2alert('Computing epsg.io projection failed for URL:
' + url); + } + }).catch(function(err) { + w2alert('Fetching proj4 projection failed for URL:
' + url); + }); + }).fail(function() { + w2alert('Parsing GeoJSON failed for URL:
' + url); + }); +}; diff --git a/docs/examples/js/example.simple.js b/docs/examples/js/example.simple.js index 9552a15..02fd8a3 100644 --- a/docs/examples/js/example.simple.js +++ b/docs/examples/js/example.simple.js @@ -1,9 +1,10 @@ - /** * Run explorer simple example - * @param id Explorer DOM id - * @param exmples Examples directory + * @param {string} id Explorer DOM id + * @param {string} examples Examples directory + * @return {Explorer} OpenLayers Explorer instance */ -var runExampleSimple = function(id){ - return new olexp.Explorer(id); +// eslint-disable-next-line no-unused-vars +const runExampleSimple = function(id) { + return new olexp.Explorer(id); }; diff --git a/docs/examples/options.html b/docs/examples/options.html index bfbc039..a32948e 100644 --- a/docs/examples/options.html +++ b/docs/examples/options.html @@ -32,15 +32,9 @@ diff --git a/docs/examples/proj4.html b/docs/examples/proj4.html index 787c3aa..efec48f 100644 --- a/docs/examples/proj4.html +++ b/docs/examples/proj4.html @@ -42,58 +42,7 @@ - + diff --git a/docs/examples/simple.html b/docs/examples/simple.html index 30ba828..751f86e 100644 --- a/docs/examples/simple.html +++ b/docs/examples/simple.html @@ -28,15 +28,9 @@ diff --git a/package.json b/package.json index 088bc5b..b0dc0a6 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "docs:mkdir": "shx mkdir -p docs/api/docs/web/img/", "lint": "run-s lint:css lint:js", "lint:css": "stylelint 'src/css/*.css'", - "lint:js": "eslint *.js 'src/js/*.js'", + "lint:js": "eslint '*.js' 'docs/examples/js/example.*.js' 'src/js/*.js'", "prepare": "npm run build", "test": "jest" },