Skip to content

Added L.mapbox.featureLayer for Mapbox.js provider layer #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
katel wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added L.mapbox.featureLayer for Mapbox.js provider layer #13

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 53 additions & 53 deletions src/mapsheet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(function(global) {
"use strict";

function merge_options(obj1, obj2) {
var obj3 = {};
var attrname;
Expand Down Expand Up @@ -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);
Expand All @@ -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();
},

Expand All @@ -75,15 +75,15 @@
this.callback.apply(this.callbackContext || this, [this, this.tabletop]);
}
},

log: function(msg) {
if(this.debug) {
if(typeof console !== "undefined" && typeof console.log !== "undefined") {
Function.prototype.apply.apply(console.log, [console, arguments]);
}
}
},

map: function() {
return (this.passedMap || this.renderer.map);
}
Expand All @@ -100,7 +100,7 @@
this.click = options.click
};

Mapsheet.Point.prototype = {
Mapsheet.Point.prototype = {
coords: function() {
return [ this.latitude(), this.longitude() ];
},
Expand All @@ -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') {
Expand All @@ -147,22 +147,22 @@
return "<div class='mapsheet-popup'>" + html + "</div>"
}
};

/*

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 || {} );
Expand All @@ -180,41 +180,41 @@
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;
};

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),
new google.maps.Point(10, 34));
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());

Expand All @@ -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;
Expand All @@ -260,7 +260,7 @@
});

},

drawPoints: function(points) {
for(var i = 0; i < points.length; i++) {
if(!points[i].isValid()) { continue; }
Expand All @@ -269,19 +269,19 @@
this.bounds.extend(marker.position);
points[i].marker = marker;
};

if(!this.mapOptions.zoom && !this.mapOptions.center) {
this.map.fitBounds(this.bounds);
}
}
}

/*

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 || {});
Expand All @@ -295,7 +295,7 @@
},

// We need custom icons!

drawMarker: function(point) {
var marker = new MQA.Poi( { lat: point.latitude(), lng: point.longitude() } );

Expand Down Expand Up @@ -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();
};

Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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 &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, tiles &copy; <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" />';

var layerDefaults = {
styleId: 998,
attribution: attribution,
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
})(this);