Posted By

cyberhobo on 04/20/12


Tagged

wordpress-geo-mashup custom-js markers


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

hurcy


WordPress Geo Mashup Mapstraction Custom Markers


 / Published in: JavaScript
 

URL: https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Javascript-API

Some common custom javascript for customizing geo mashup map markers for any map provider. The marker images used are 24 x 24 pixels, anchored at the bottom center, with no shadow. You'd put images in wp_content/plugins/geo-mashup-custom/images to use your own images with this snippet. The example images are the old small markers and are still in the distributed plugin, you can use them by replacing custom_url_path with just url_path.

  1. (function() {
  2.  
  3. GeoMashup.addAction( 'colorIcon', function( properties, icon, color_name ) {
  4. // For single category icons use the Geo Mashup color icon names,
  5. // but the 24x24 ones in the custom image directory
  6. icon.image = properties.custom_url_path + '/images/mm_20_' + color_name + '.png';
  7. icon.iconShadow = '';
  8. icon.iconSize = [ 24, 24 ];
  9. icon.iconAnchor = [ 12, 24 ];
  10. icon.iconInfoWindowAnchor = [ 12, 1 ];
  11. } );
  12.  
  13. GeoMashup.addAction( 'objectIcon', function( properties, obj ) {
  14.  
  15. if ( obj.terms.category.length == 0 ) {
  16.  
  17. // When there are no categories - mm_20_uncategorised.png
  18. obj.icon.image = properties.custom_url_path + '/images/mm_20_uncategorised.png';
  19. obj.icon.iconShadow = '';
  20. obj.icon.iconSize = [ 24, 24 ];
  21. obj.icon.iconAnchor = [ 12, 24 ];
  22. obj.icon.iconInfoWindowAnchor = [ 12, 1 ];
  23.  
  24. } else if ( obj.terms.category.length > 1 ) {
  25.  
  26. // When there is more than one category - mm_20_mixed.png
  27. obj.icon.image = properties.custom_url_path + '/images/mm_20_mixed.png';
  28. obj.icon.iconShadow = '';
  29. obj.icon.iconSize = [ 24, 24 ];
  30. obj.icon.iconAnchor = [ 12, 24 ];
  31. obj.icon.iconInfoWindowAnchor = [ 12, 1 ];
  32.  
  33. }
  34. } );
  35.  
  36. GeoMashup.addAction( 'multiObjectMarker', function( properties, marker ) {
  37.  
  38. // When there is more than one marker assigned to the same location - mm_20_plus.png
  39. marker.setIcon( properties.custom_url_path + '/images/mm_20_plus.png' );
  40.  
  41. } );
  42.  
  43. GeoMashup.addAction( 'singleMarkerOptions', function ( properties, options ) {
  44.  
  45. // When the map is a single object map with just one marker
  46. options.icon.image = properties.custom_url_path + '/images/mm_20_uncategorised.png';
  47. options.icon.iconShadow = '';
  48. options.icon.iconSize = [ 24, 24 ];
  49. options.icon.iconAnchor = [ 12, 24 ];
  50. options.icon.iconInfoWindowAnchor = [ 12, 1 ];
  51.  
  52. } );
  53.  
  54. GeoMashup.addAction( 'glowMarkerIcon', function( properties, glow_options ) {
  55. glow_options.icon = properties.custom_url_path + '/images/mm_20_glow.png';
  56. glow_options.iconSize = [ 22, 30 ];
  57. glow_options.iconAnchor = [ 11, 27 ];
  58. } );
  59. }());

Report this snippet  

You need to login to post a comment.