diff --git a/src/mapsheet.js b/src/mapsheet.js index c470c5e..7191e54 100644 --- a/src/mapsheet.js +++ b/src/mapsheet.js @@ -1,6 +1,6 @@ (function(global) { "use strict"; - + function merge_options(obj1, obj2) { var obj3 = {}; var attrname; @@ -28,13 +28,13 @@ this.popupTemplate = options.popupTemplate; this.callbackContext = options.callbackContext; this.callback = options.callback; - + // Let's automatically engage simpleSheet mode, // which allows for easier using of data later on // if you have multiple sheets, you'll want to // disable this var simpleSheet = true; - + if(typeof(this.popupTemplate) === 'string') { var source = document.getElementById(this.popupTemplate).innerHTML; this.popupTemplate = Handlebars.compile(source); @@ -59,12 +59,12 @@ } var elements = tabletop.sheets(this.sheetName).elements; - + for(var i = 0; i < elements.length; i++) { var point = new Mapsheet.Point( { model: elements[i], fields: this.fields, popupContent: this.popupContent, popupTemplate: this.popupTemplate, markerOptions: this.markerOptions, titleColumn: this.titleColumn, click: this.click } ); this.points.push(point); }; - + this.draw(); }, @@ -75,7 +75,7 @@ this.callback.apply(this.callbackContext || this, [this, this.tabletop]); } }, - + log: function(msg) { if(this.debug) { if(typeof console !== "undefined" && typeof console.log !== "undefined") { @@ -83,7 +83,7 @@ } } }, - + map: function() { return (this.passedMap || this.renderer.map); } @@ -100,7 +100,7 @@ this.click = options.click }; - Mapsheet.Point.prototype = { + Mapsheet.Point.prototype = { coords: function() { return [ this.latitude(), this.longitude() ]; }, @@ -112,22 +112,22 @@ longitude: function() { return parseFloat( this.model["longitude"] || this.model["lng"] || this.model["long"] ); }, - + get: function(fieldName) { if(typeof(fieldName) === 'undefined') { return; } return this.model[fieldName.toLowerCase().replace(/ +/,'')]; }, - + title: function() { return this.get(this.titleColumn); }, - + isValid: function() { return !isNaN( this.latitude() ) && !isNaN( this.longitude() ) }, - + content: function() { var html = ""; if(typeof(this.popupContent) !== 'undefined') { @@ -147,22 +147,22 @@ return "
" + html + "
" } }; - + /* - + Providers only need respond to initialize and drawPoints - + */ Mapsheet.Providers = {}; /* - + Google Maps - + */ - + Mapsheet.Providers.Google = function(options) { this.map = options.map; this.mapOptions = merge_options( { mapTypeId: google.maps.MapTypeId.ROADMAP }, options.mapOptions || {} ); @@ -180,21 +180,21 @@ this.bounds = new google.maps.LatLngBounds(); this.infowindow = new google.maps.InfoWindow({ content: "loading...", maxWidth: '300' }); }, - - /* + + /* Google Maps only colors markers #FE7569, but turns out you can use the Google Charts API to make markers any hex color! Amazing. - + This code was pulled from http://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker/7686977#7686977 */ - + setMarkerIcon: function(marker) { if(typeof(marker.point.get('icon url')) !== 'undefined' && marker.point.get('icon url') !== '') { marker.setIcon(marker.point.get('icon url')); return; }; - + if(typeof(marker.point.markerOptions['iconUrl']) !== 'undefined' && marker.point.markerOptions['iconUrl'] !== '') { marker.setIcon( marker.point.markerOptions['iconUrl']); return; @@ -202,7 +202,7 @@ var pinColor = marker.point.get('hexcolor') || "FE7569"; pinColor = pinColor.replace('#',''); - + var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|" + pinColor, new google.maps.Size(21, 34), new google.maps.Point(0,0), @@ -210,11 +210,11 @@ var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow", new google.maps.Size(40, 37), new google.maps.Point(0, 0), - new google.maps.Point(12, 35)); + new google.maps.Point(12, 35)); marker.setShadow(pinShadow); marker.setIcon(pinImage); }, - + drawMarker: function(point) { var latLng = new google.maps.LatLng(point.latitude(), point.longitude()); @@ -235,20 +235,20 @@ return marker; }, - + /* Google only lets you draw one InfoWindow on the page, so you end up having to re-write to the original one each time. */ - + initInfoWindow: function(marker) { var infowindow = this.infowindow; var clickedOpen = false; - + // All of the extra blah blahs are for making sure to not repopulate - // the infowindow when it's already opened and populated with the + // the infowindow when it's already opened and populated with the // right content - + google.maps.event.addListener(marker, 'click', function() { if(infowindow.getAnchor() === marker && infowindow.opened) { return; @@ -260,7 +260,7 @@ }); }, - + drawPoints: function(points) { for(var i = 0; i < points.length; i++) { if(!points[i].isValid()) { continue; } @@ -269,7 +269,7 @@ this.bounds.extend(marker.position); points[i].marker = marker; }; - + if(!this.mapOptions.zoom && !this.mapOptions.center) { this.map.fitBounds(this.bounds); } @@ -277,11 +277,11 @@ } /* - + MapQuest (OpenStreetMaps & free) - + */ - + Mapsheet.Providers.MapQuest = function(options) { this.map = options.map; this.mapOptions = merge_options({ mapTypeId: 'osm', zoom: 13, bestFitMargin: 0, zoomOnDoubleClick: true, latLng:{lat:40.735383, lng:-73.984655} }, options.mapOptions || {}); @@ -295,7 +295,7 @@ }, // We need custom icons! - + drawMarker: function(point) { var marker = new MQA.Poi( { lat: point.latitude(), lng: point.longitude() } ); @@ -323,15 +323,15 @@ } /* - + MapBox - + */ - + Mapsheet.Providers.MapBox = function(options) { this.map = options.map; this.mapOptions = merge_options({ mapId: 'examples.map-vyofok3q'}, options.mapOptions || {}); - this.markerLayer = options.markerLayer || L.mapbox.markerLayer(); + this.markerLayer = options.markerLayer || L.mapbox.markerLayer() || L.mapbox.featureLayer; this.bounds = new L.LatLngBounds(); }; @@ -344,11 +344,11 @@ // this.map.ui.zoombox.add(); } }, - + drawMarker: function(point) { var marker = L.marker(point.coords()) .bindPopup(point.content()) - + if(typeof(point.get('icon url')) !== 'undefined' && point.get('icon url') !== '') { var options = merge_options( point.markerOptions, { iconUrl: point.get('icon url') } ); var icon = L.icon(options); @@ -357,7 +357,7 @@ var icon = L.icon(point.markerOptions); marker.setIcon(icon); } - + if(point.click) { marker.on('click', function(e) { point.click.call(this, e, point); @@ -387,17 +387,17 @@ } /* - + Did you know you can pass in your own map? Check out https://gist.github.com/1804938 for some tips on using different tile providers */ - + Mapsheet.Providers.Leaflet = function(options) { this.map = options.map; - + var attribution = 'Map data © OpenStreetMap contributors, CC-BY-SA, tiles © MapQuest '; - + var layerDefaults = { styleId: 998, attribution: attribution, @@ -424,11 +424,11 @@ this.tileLayer = new L.TileLayer(this.layerOptions['tilePath'], this.layerOptions).addTo(this.map); } }, - + drawMarker: function(point) { var marker = L.marker(point.coords()) .bindPopup(point.content()) - + if(typeof(point.get('icon url')) !== 'undefined' && point.get('icon url') !== '') { var options = merge_options( point.markerOptions, { iconUrl: point.get('icon url') } ); var icon = L.icon(options); @@ -437,7 +437,7 @@ var icon = L.icon(point.markerOptions); marker.setIcon(icon); } - + if(point.click) { marker.on('click', function(e) { point.click.call(this, e, point); @@ -461,9 +461,9 @@ this.markerLayer.addTo(this.map); if(!this.mapOptions.zoom && !this.mapOptions.center) { - this.map.fitBounds(this.bounds); + this.map.fitBounds(this.bounds); } } } -})(this); \ No newline at end of file +})(this);