diff options
Diffstat (limited to 'site/media/js/natparks.js')
| -rw-r--r-- | site/media/js/natparks.js | 569 |
1 files changed, 496 insertions, 73 deletions
diff --git a/site/media/js/natparks.js b/site/media/js/natparks.js index 4b1d4c9..aba074d 100644 --- a/site/media/js/natparks.js +++ b/site/media/js/natparks.js @@ -1,91 +1,518 @@ +(function () { + 'use strict'; + + L.TileLayer.Provider = L.TileLayer.extend({ + initialize: function (arg, options) { + var providers = L.TileLayer.Provider.providers; + + var parts = arg.split('.'); + + var providerName = parts[0]; + var variantName = parts[1]; + + if (!providers[providerName]) { + throw 'No such provider (' + providerName + ')'; + } + + var provider = { + url: providers[providerName].url, + options: providers[providerName].options + }; + + // overwrite values in provider from variant. + if (variantName && 'variants' in providers[providerName]) { + if (!(variantName in providers[providerName].variants)) { + throw 'No such variant of ' + providerName + ' (' + variantName + ')'; + } + var variant = providers[providerName].variants[variantName]; + var variantOptions; + if (typeof variant === 'string') { + variantOptions = { + variant: variant + }; + } else { + variantOptions = variant.options; + } + provider = { + url: variant.url || provider.url, + options: L.Util.extend({}, provider.options, variantOptions) + }; + } else if (typeof provider.url === 'function') { + provider.url = provider.url(parts.splice(1, parts.length - 1).join('.')); + } + + // replace attribution placeholders with their values from toplevel provider attribution, + // recursively + var attributionReplacer = function (attr) { + if (attr.indexOf('{attribution.') === -1) { + return attr; + } + return attr.replace(/\{attribution.(\w*)\}/, + function (match, attributionName) { + return attributionReplacer(providers[attributionName].options.attribution); + } + ); + }; + provider.options.attribution = attributionReplacer(provider.options.attribution); + + // Compute final options combining provider options with any user overrides + var layerOpts = L.Util.extend({}, provider.options, options); + L.TileLayer.prototype.initialize.call(this, provider.url, layerOpts); + } + }); + + /** + * Definition of providers. + * see http://leafletjs.com/reference.html#tilelayer for options in the options map. + */ + + //jshint maxlen:220 + L.TileLayer.Provider.providers = { + OpenStreetMap: { + url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + options: { + attribution: + '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' + }, + variants: { + Mapnik: {}, + BlackAndWhite: { + url: 'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png' + }, + DE: { + url: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png' + }, + HOT: { + url: 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', + options: { + attribution: '{attribution.OpenStreetMap}, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>' + } + } + } + }, + OpenSeaMap: { + url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', + options: { + attribution: 'Map data: © <a href="http://www.openseamap.org">OpenSeaMap</a> contributors' + } + }, + Thunderforest: { + url: 'http://{s}.tile.thunderforest.com/{variant}/{z}/{x}/{y}.png', + options: { + attribution: + '© <a href="http://www.opencyclemap.org">OpenCycleMap</a>, {attribution.OpenStreetMap}', + variant: 'cycle' + }, + variants: { + OpenCycleMap: 'cycle', + Transport: 'transport', + Landscape: 'landscape', + Outdoors: 'outdoors' + } + }, + OpenMapSurfer: { + url: 'http://openmapsurfer.uni-hd.de/tiles/{variant}/x={x}&y={y}&z={z}', + options: { + minZoom: 0, + maxZoom: 20, + variant: 'roads', + attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> — Map data {attribution.OpenStreetMap}' + }, + variants: { + Roads: 'roads', + AdminBounds: { + options: { + variant: 'adminb', + maxZoom: 19 + } + }, + Grayscale: { + options: { + variant: 'roadsg', + maxZoom: 19 + } + } + } + }, + MapQuestOpen: { + url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', + options: { + attribution: + 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — ' + + 'Map data {attribution.OpenStreetMap}', + subdomains: '1234' + }, + variants: { + OSM: {}, + Aerial: { + url: 'http://oatile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg', + options: { + attribution: + 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — ' + + 'Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency' + } + } + } + }, + MapBox: { + url: function (id) { + return 'http://{s}.tiles.mapbox.com/v3/' + id + '/{z}/{x}/{y}.png'; + }, + options: { + attribution: + 'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> — ' + + 'Map data {attribution.OpenStreetMap}', + subdomains: 'abcd' + } + }, + Stamen: { + url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', + options: { + attribution: + 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' + + '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — ' + + 'Map data {attribution.OpenStreetMap}', + subdomains: 'abcd', + minZoom: 0, + maxZoom: 20, + variant: 'toner' + }, + variants: { + Toner: 'toner', + TonerBackground: 'toner-background', + TonerHybrid: 'toner-hybrid', + TonerLines: 'toner-lines', + TonerLabels: 'toner-labels', + TonerLite: 'toner-lite', + Terrain: { + options: { + variant: 'terrain', + minZoom: 4, + maxZoom: 18 + } + }, + TerrainBackground: { + options: { + variant: 'terrain-background', + minZoom: 4, + maxZoom: 18 + } + }, + Watercolor: { + options: { + variant: 'watercolor', + minZoom: 3, + maxZoom: 16 + } + } + } + }, + Esri: { + url: 'https://server.arcgisonline.com/ArcGIS/rest/services/{variant}/MapServer/tile/{z}/{y}/{x}', + options: { + variant: 'World_Street_Map', + attribution: 'Tiles © Esri' + }, + variants: { + WorldStreetMap: { + options: { + attribution: + '{attribution.Esri} — ' + + 'Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012' + } + }, + DeLorme: { + options: { + variant: 'Specialty/DeLorme_World_Base_Map', + minZoom: 1, + maxZoom: 11, + attribution: '{attribution.Esri} — Copyright: ©2012 DeLorme' + } + }, + WorldTopoMap: { + options: { + variant: 'World_Topo_Map', + attribution: + '{attribution.Esri} — ' + + 'Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community' + } + }, + WorldImagery: { + options: { + variant: 'World_Imagery', + attribution: + '{attribution.Esri} — ' + + 'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' + } + }, + WorldTerrain: { + options: { + variant: 'World_Terrain_Base', + maxZoom: 13, + attribution: + '{attribution.Esri} — ' + + 'Source: USGS, Esri, TANA, DeLorme, and NPS' + } + }, + WorldShadedRelief: { + options: { + variant: 'World_Shaded_Relief', + maxZoom: 13, + attribution: '{attribution.Esri} — Source: Esri' + } + }, + WorldPhysical: { + options: { + variant: 'World_Physical_Map', + maxZoom: 8, + attribution: '{attribution.Esri} — Source: US National Park Service' + } + }, + OceanBasemap: { + options: { + variant: 'Ocean_Basemap', + maxZoom: 13, + attribution: '{attribution.Esri} — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri' + } + }, + NatGeoWorldMap: { + options: { + variant: 'NatGeo_World_Map', + maxZoom: 16, + attribution: '{attribution.Esri} — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC' + } + }, + WorldGrayCanvas: { + options: { + variant: 'Canvas/World_Light_Gray_Base', + maxZoom: 16, + attribution: '{attribution.Esri} — Esri, DeLorme, NAVTEQ' + } + } + } + }, + OpenWeatherMap: { + url: 'http://{s}.tile.openweathermap.org/map/{variant}/{z}/{x}/{y}.png', + options: { + attribution: 'Map data © <a href="http://openweathermap.org">OpenWeatherMap</a>', + opacity: 0.5 + }, + variants: { + Clouds: 'clouds', + CloudsClassic: 'clouds_cls', + Precipitation: 'precipitation', + PrecipitationClassic: 'precipitation_cls', + Rain: 'rain', + RainClassic: 'rain_cls', + Pressure: 'pressure', + PressureContour: 'pressure_cntr', + Wind: 'wind', + Temperature: 'temp', + Snow: 'snow' + } + }, + HERE: { + /* + * HERE maps, formerly Nokia maps. + * These basemaps are free, but you need an API key. Please sign up at + * http://developer.here.com/getting-started + * + * Note that the base urls contain '.cit' whichs is HERE's + * 'Customer Integration Testing' environment. Please remove for production + * envirionments. + */ + url: + 'http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/' + + 'maptile/{mapID}/{variant}/{z}/{x}/{y}/256/png8?' + + 'app_id={app_id}&app_code={app_code}', + options: { + attribution: + 'Map © 1987-2014 <a href="http://developer.here.com">HERE</a>', + subdomains: '1234', + mapID: 'newest', + 'app_id': '<insert your app_id here>', + 'app_code': '<insert your app_code here>', + base: 'base', + variant: 'normal.day', + minZoom: 0, + maxZoom: 20 + }, + variants: { + normalDay: 'normal.day', + normalDayCustom: 'normal.day.custom', + normalDayGrey: 'normal.day.grey', + normalDayMobile: 'normal.day.mobile', + normalDayGreyMobile: 'normal.day.grey.mobile', + normalDayTransit: 'normal.day.transit', + normalDayTransitMobile: 'normal.day.transit.mobile', + normalNight: 'normal.night', + normalNightMobile: 'normal.night.mobile', + normalNightGrey: 'normal.night.grey', + normalNightGreyMobile: 'normal.night.grey.mobile', + + carnavDayGrey: 'carnav.day.grey', + hybridDay: { + options: { + base: 'aerial', + variant: 'hybrid.day' + } + }, + hybridDayMobile: { + options: { + base: 'aerial', + variant: 'hybrid.day.mobile' + } + }, + pedestrianDay: 'pedestrian.day', + pedestrianNight: 'pedestrian.night', + satelliteDay: { + options: { + base: 'aerial', + variant: 'satellite.day' + } + }, + terrainDay: { + options: { + base: 'aerial', + variant: 'terrain.day' + } + }, + terrainDayMobile: { + options: { + base: 'aerial', + variant: 'terrain.day.mobile' + } + } + } + }, + Acetate: { + url: 'http://a{s}.acetate.geoiq.com/tiles/{variant}/{z}/{x}/{y}.png', + options: { + attribution: + '©2012 Esri & Stamen, Data from OSM and Natural Earth', + subdomains: '0123', + minZoom: 2, + maxZoom: 18, + variant: 'acetate-base' + }, + variants: { + basemap: 'acetate-base', + terrain: 'terrain', + all: 'acetate-hillshading', + foreground: 'acetate-fg', + roads: 'acetate-roads', + labels: 'acetate-labels', + hillshading: 'hillshading' + } + } + }; + + L.tileLayer.provider = function (provider, options) { + return new L.TileLayer.Provider(provider, options); + }; + + L.Control.Layers.Provided = L.Control.Layers.extend({ + initialize: function (base, overlay, options) { + var first; + + var labelFormatter = function (label) { + return label.replace(/\./g, ': ').replace(/([a-z])([A-Z])/g, '$1 $2'); + }; + + if (base.length) { + (function () { + var out = {}, + len = base.length, + i = 0; + + while (i < len) { + if (typeof base[i] === 'string') { + if (i === 0) { + first = L.tileLayer.provider(base[0]); + out[labelFormatter(base[i])] = first; + } else { + out[labelFormatter(base[i])] = L.tileLayer.provider(base[i]); + } + } + i++; + } + base = out; + }()); + this._first = first; + } + + if (overlay && overlay.length) { + (function () { + var out = {}, + len = overlay.length, + i = 0; + + while (i < len) { + if (typeof overlay[i] === 'string') { + out[labelFormatter(overlay[i])] = L.tileLayer.provider(overlay[i]); + } + i++; + } + overlay = out; + }()); + } + L.Control.Layers.prototype.initialize.call(this, base, overlay, options); + }, + onAdd: function (map) { + this._first.addTo(map); + return L.Control.Layers.prototype.onAdd.call(this, map); + } + }); + + L.control.layers.provided = function (baseLayers, overlays, options) { + return new L.Control.Layers.Provided(baseLayers, overlays, options); + }; +}()); + //Utility functions for map info window function mapit(lat,lon,zoom,id) { - var map; - //create a new map - var centerCoord = new google.maps.LatLng(lat, lon); - var mapOptions = { - zoom: zoom, - center: centerCoord, - mapTypeId: google.maps.MapTypeId.TERRAIN, - disableDefaultUI: true, - navigationControl: true, - navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL} - }; - map = new google.maps.Map(document.getElementById('map-wrapper-'+id), mapOptions); - //get the geojson for this map + map = L.map(document.getElementById("map-wrapper-"+id)); + centerCoord = new L.LatLng(lat, lon); + zoom = zoom; + L.tileLayer.provider('Esri.WorldTopoMap', {maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Tiles © Esri and the GIS User Community'}).addTo(map); + map.setView(centerCoord, zoom); + ////get the geojson for this map $.ajax({ url: "/projects/data/natparks/"+id+".json", dataType: "json", - success: function(data, text, request) { draw_poly(data); } + success: function(data, text, request) { draw_poly(data, map); } //complete: function(xhr, status) {console.log(status); return false; }, }); //draw the polygon - function draw_poly(data) { - var poly = createPolygons(data.features[0].geometry); - for (i=0;i<=poly.length-1;i++) { - poly[i].setMap(map); - } - + function draw_poly(data, map) { + var myStyle = { + "color": "#201a11", + "weight": 2, + "opacity": 0.65 + }; + L.geoJson(data, { + style: myStyle + }).addTo(map); } } // utility functions to create/remove map container function create_map(obj) { - //break up the variable passed from the map link's title element - var lat = parseFloat(obj.title.split(',')[0]); - var lon = parseFloat(obj.title.split(',')[1]); - var zoom= parseInt(obj.title.split(',')[2]); - var id= obj.title.split(',')[3]; + var lat = parseFloat(obj.attr('data-latitude')); + var lon = parseFloat(obj.attr('data-longitude')); + var zoom= parseInt(obj.attr('data-zoom')); + var id= obj.attr('data-id'); //create container divs $(obj).parents().eq(3).append('<div class="map-container" id="map-container-'+id+'">'); $('#map-container-'+id).append('<div class="map-wrapper" id="map-wrapper-'+id+'">'); - - - //deal with the variable height of div.legend - //$('#map-container').css({ - // bottom: function(index, value) { - // return parseFloat($(obj).parent().parent().css("height"))-2; - // } - // }); - mapit(lat,lon,zoom,id); } function remove_map(id) { $(id).remove(); } -//function to parse and render polygons for GMaps -//# taken from http://friism.com/drawing-geojson-based-polygons-on-google-maps -function createPolygons(areajson, bounds){ - var coords = areajson.coordinates; - var polygons = _(coords).reduce([], function(memo_n, n) { - var polygonpaths = _(n).reduce(new google.maps.MVCArray(), function(memo_o, o) { - var polygoncords = _(o).reduce(new google.maps.MVCArray(), function(memo_p, p) { - var mylatlng = new google.maps.LatLng(p[1], p[0]); - if(bounds){ - bounds.extend(mylatlng); - } - memo_p.push(mylatlng); - return memo_p; - }); - memo_o.push(polygoncords); - return memo_o; - }); - var polygon = new google.maps.Polygon({ - paths: polygonpaths, - strokeColor: "#201a11", - strokeOpacity: 0.8, - strokeWeight: 2, - fillColor: "#201a11", - fillOpacity: 0.35 - }); - memo_n.push(polygon); - return memo_n; - }); - return polygons; -} - //functions to handle the "more" link // utility functions to create/remove camera info container function get_exif(obj,id) { @@ -104,22 +531,18 @@ function get_exif(obj,id) { function remove_exif(id) { $('#'+id).remove(); } - - - - $(document).ready(function(){ //set up click events for map button $('.map-link').click( function() { var more_id = 'more-container-'+$(this).parent().next().children('.more-link').attr('id').split('-')[1]; - var id = '#map-container-'+this.title.split(',')[3]; + var id = '#map-container-'+$(this).attr('data-id'); if ($('#'+more_id).is(":visible")){ remove_exif(more_id); } if ($(id).is(":visible")) { remove_map(id); } else { - create_map(this); + create_map($(this)); } return false; @@ -127,7 +550,7 @@ $(document).ready(function(){ //set up click events for more info button $('.more-link').click( function() { - var map_id = '#map-container-'+$(this).parent().prev().children('.map-link').attr('title').split(',')[3]; + var map_id = '#map-container-'+$(this).parent().prev().children('.map-link').attr('data-id'); var id = 'more-container-'+this.id.split('-')[1]; if ($(map_id).is(":visible")){ remove_map(map_id); @@ -140,4 +563,4 @@ $(document).ready(function(){ return false; }); -});
\ No newline at end of file +}); |