Advanced Search

WordPress Geo Mashup Mapstraction Custom Markers

/ Published in: JavaScript
Save to your folder(s)
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`.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }());

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.