Skip to content
This repository has been archived by the owner on Mar 3, 2022. It is now read-only.

Commit

Permalink
Merge pull request #12 from austinmoffa/custom_markers
Browse files Browse the repository at this point in the history
Custom markers
  • Loading branch information
ryanbharvey committed Mar 4, 2016
2 parents 96fdd23 + a086afc commit ac4bc6e
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 7 deletions.
47 changes: 47 additions & 0 deletions assets/CustomMarkers.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
var CustomMarkers = {
marker_array: { //private list of icons, not meant for direct access
default: new L.divIcon({
html: '<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 33" height="33px" width="14px"><path stroke="black" stroke-width="2" stroke-opacity="0.5" transform="scale(0.158866)" fill="#4dea51" d="M44.062,0C19.766,0,0,19.766,0,44.062c0,4.941,0.859,9.824,2.539,14.57c0.059,0.352,0.195,0.703,0.371,1.055 c0.82,2.207,1.836,4.297,2.832,6.094l29.941,63.086c0.059,0.137,0.137,0.273,0.234,0.371c1.367,3.281,4.59,5.469,8.184,5.469 c3.75,0,7.109-2.383,8.32-5.918l29.746-62.715c1.152-2.051,2.188-4.16,3.066-6.367c0.215-0.391,0.352-0.801,0.43-1.23 c1.641-4.688,2.461-9.531,2.461-14.414C88.125,19.766,68.359,0,44.062,0z M44.062,28.594c8.516,0,15.449,6.953,15.449,15.469 c0,8.535-6.934,15.469-15.449,15.469s-15.449-6.934-15.449-15.469C28.613,35.547,35.547,28.594,44.062,28.594z"/></svg>',
iconSize:[14, 34],
iconAnchor: [7, 26],
className: 'leaflet-default-custom-marker',
}),
color: {},
},
getMarker: function(name, color) {
if (name == 'default' || !name) {
if (!color) {
return this.marker_array.default;
} else {
return this.getReplaceDefaultColor(color, '#4dea51');
}
} else {
return this.getCustomMarker(name);
}
},
getReplaceDefaultColor: function(newcolor, defaultcolor) {
if (!this.marker_array.color[newcolor]) { //only do this once for each color each load
var ret = this.marker_array.default.options.html.replace(defaultcolor, newcolor);
this.marker_array.color[newcolor] = new L.divIcon({
html: ret,
iconSize: this.marker_array.default.options.iconSize,
iconAnchor: this.marker_array.default.options.iconAnchor,
className: this.marker_array.default.options.className,
});
}
return this.marker_array.color[newcolor];
},

getCustomMarker: function(name) {
if (!this.marker_array[name]) {
this.marker_array[name] = new L.Icon({
iconUrl: 'assets/images/icons/' + name + '.svg',
iconAnchor: [10, 40], //assuming our icons are set internally as 20x40
className: 'leaflet-' + name + '-custom-marker',
});
}

return this.marker_array[name];
}

};
8 changes: 3 additions & 5 deletions assets/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -1182,11 +1182,9 @@ function create_topojson_layer(dataset) {
if (dataset.type === "regions" || dataset.type === "points") {
newLayer.setStyle(dataset.style);
newLayer.options.pointToLayer = function(feature, latlng) {
var smallIcon = L.VectorMarkers.icon({
icon: 'circle',
markerColor: dataset.style.color
});
return L.marker(latlng, {icon: smallIcon});
var icon_name = dataset.icon ? dataset.icon : 'default';
smallIcon = CustomMarkers.getMarker(icon_name, dataset.style.color);
return L.marker(latlng,{icon: smallIcon});
};
}
newLayer.on("mouseover", function(e) {
Expand Down
4 changes: 2 additions & 2 deletions buildtools/optimize-js.sh
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ touch ./start.js

echo "load_map_data(\"topojson\");" >> ./start.js

uglifyjs --prefix relative --output ${outpath}main.${now}.min.js --screw-ie8 --mangle --compress dead_code,loops,warnings,join_vars --reserved '$,L,map,window,data_obj' --stats --verbose -- ../assets/jquery-1.11.2/jquery.min.js ../assets/spin-2.1.0/spin.min.js ../assets/leaflet-0.7.3/js/leaflet.js ../assets/leaflet-0.7.3/js/Leaflet.vector-markers.js ../assets/leaflet-0.7.3/js/leaflet-providers.js ../assets/leaflet-0.7.3/js/leaflet-pip.min.js ../assets/leaflet-0.7.3/js/leaflet.spin.js ../assets/leaflet-0.7.3/js/leaflet.geojsoncss.min.js ../assets/leaflet-0.7.3/js/l.control.geosearch.js ../assets/leaflet-0.7.3/js/l.geosearch.provider.openstreetmap.js ../assets/leaflet-0.7.3/js/L.Control.Pan.js ../assets/leaflet-0.7.3/js/L.Control.ZoomBox.min.js ../assets/leaflet-0.7.3/js/leaflet.defaultextent.js ../assets/leaflet-0.7.3/js/leaflet.groupedlayercontrol.min.js ../assets/topojson-1.0/topojson.v1.min.js ../assets/leaflet-0.7.3/js/L.TopoJSON.min.js ../assets/main.js ./start.js
uglifyjs --prefix relative --output ${outpath}main.${now}.min.js --screw-ie8 --mangle --compress dead_code,loops,warnings,join_vars --reserved '$,L,map,window,data_obj' --stats --verbose -- ../assets/jquery-1.11.2/jquery.min.js ../assets/spin-2.1.0/spin.min.js ../assets/leaflet-0.7.3/js/leaflet.js ../assets/leaflet-0.7.3/js/Leaflet.vector-markers.js ../assets/leaflet-0.7.3/js/leaflet-providers.js ../assets/leaflet-0.7.3/js/leaflet-pip.min.js ../assets/leaflet-0.7.3/js/leaflet.spin.js ../assets/leaflet-0.7.3/js/leaflet.geojsoncss.min.js ../assets/leaflet-0.7.3/js/l.control.geosearch.js ../assets/leaflet-0.7.3/js/l.geosearch.provider.openstreetmap.js ../assets/leaflet-0.7.3/js/L.Control.Pan.js ../assets/leaflet-0.7.3/js/L.Control.ZoomBox.min.js ../assets/leaflet-0.7.3/js/leaflet.defaultextent.js ../assets/leaflet-0.7.3/js/leaflet.groupedlayercontrol.min.js ../assets/topojson-1.0/topojson.v1.min.js ../assets/leaflet-0.7.3/js/L.TopoJSON.min.js ../assets/main.js ../assets/CustomMarkers.js ./start.js
# --source-map ${outpath}main.${now}.min.js.map --source-map-root http://localhost:8000/assets --source-map-url

# IE 8
Expand All @@ -31,7 +31,7 @@ touch ./start-ie8.js

echo "load_map_data(\"geojson\");" >> ./start-ie8.js

uglifyjs --prefix relative --output ${outpath}main.ie8.${now}.min.js --mangle --compress dead_code,loops,warnings,join_vars --reserved '$,L,map,window,data_obj' --stats --verbose -- ../assets/ie8_polyfills.js ../assets/jquery-1.11.2/jquery.min.js ../assets/spin-2.1.0/spin.min.js ../assets/leaflet-0.7.3/js/leaflet.js ../assets/leaflet-0.7.3/js/Leaflet.vector-markers.js ../assets/leaflet-0.7.3/js/leaflet-providers.js ../assets/leaflet-0.7.3/js/leaflet-pip.min.js ../assets/leaflet-0.7.3/js/leaflet.spin.js ../assets/leaflet-0.7.3/js/leaflet.geojsoncss.min.js ../assets/leaflet-0.7.3/js/l.control.geosearch.js ../assets/leaflet-0.7.3/js/l.geosearch.provider.openstreetmap.js ../assets/leaflet-0.7.3/js/L.Control.Pan.js ../assets/leaflet-0.7.3/js/L.Control.ZoomBox.min.js ../assets/leaflet-0.7.3/js/leaflet.defaultextent.js ../assets/leaflet-0.7.3/js/leaflet.groupedlayercontrol.min.js ../assets/main.js ./start-ie8.js
uglifyjs --prefix relative --output ${outpath}main.ie8.${now}.min.js --mangle --compress dead_code,loops,warnings,join_vars --reserved '$,L,map,window,data_obj' --stats --verbose -- ../assets/ie8_polyfills.js ../assets/jquery-1.11.2/jquery.min.js ../assets/spin-2.1.0/spin.min.js ../assets/leaflet-0.7.3/js/leaflet.js ../assets/leaflet-0.7.3/js/Leaflet.vector-markers.js ../assets/leaflet-0.7.3/js/leaflet-providers.js ../assets/leaflet-0.7.3/js/leaflet-pip.min.js ../assets/leaflet-0.7.3/js/leaflet.spin.js ../assets/leaflet-0.7.3/js/leaflet.geojsoncss.min.js ../assets/leaflet-0.7.3/js/l.control.geosearch.js ../assets/leaflet-0.7.3/js/l.geosearch.provider.openstreetmap.js ../assets/leaflet-0.7.3/js/L.Control.Pan.js ../assets/leaflet-0.7.3/js/L.Control.ZoomBox.min.js ../assets/leaflet-0.7.3/js/leaflet.defaultextent.js ../assets/leaflet-0.7.3/js/leaflet.groupedlayercontrol.min.js ../assets/main.js ../assets/CustomMarkers.js ./start-ie8.js
# --source-map ${outpath}main.ie8.${now}.min.js.map --source-map-root http://localhost:8000/assets --source-map-url

# Datasets Credits
Expand Down
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
<script src="assets/leaflet-0.7.3/js/L.Control.Locate.min.js" charset="utf-8"></script>
-->
<script src="assets/main.js"></script>
<script src="assets/CustomMarkers.js"></script>
<!--[if lt IE 9]>
<script>
// Load data into layers: IE 8
Expand Down

0 comments on commit ac4bc6e

Please sign in to comment.