CraftMap

December 12, 2011 by Marcin Dziewulski

Introduction

CraftMap (previous MobilyMap) is a lightweight (6KB only), fully configurable jQuery plugin that converts a simple image into a functional map by overlaying dynamic elements on it such as markers. Like Google Maps, you can place your own marker icons and add location information to specific markers with a draggable image interface.

Demo Download Buy commercial license for $49 Read more about licensing

JavaScript

$('.map').craftmap({
	cookies: false, // (bool) remember position 
	fullscreen: false, // (bool) fullscreen
	container: {
		name: 'imgContent' // (string) class name for an image container
	},
	image: {
		width: 1475, // (int) image width
		height: 1200, // (int) image height
		name: 'imgMap' // (string) class name for an image
	},
	map: {
		position: 'center'  // (string) map position after loading - 'X Y', 'center', 'top_left', 'top_right', 'bottom_left', 'bottom_right'
	},
	marker: {
		name: 'marker', // (string) class name for a marker
		center: true, // (bool) set true to pan the map to the center 
		popup: true, // (bool) set true to show a popup
		popup_name: 'popup', // (string) class name for popup
		onClick: function(marker, popup){},
		onClose: function(marker, popup){}
	},
	controls: {
		init: true, // (bool) set true to control a map from any place on the page
		name: 'controls', // (string) class name for controls container
		onClick: function(marker){}
	},
	preloader: {
		init: true, // (bool) set true to preload an image
		name: 'preloader', // (string) class name for a preload container
		onLoad: function(img, dimensions){}
	}
});

HTML

<div class="map">
	<img src="path_to_the_image.jpg" class="imgMap" />
	<div class="marker" id="ID" data-coords="x, y">
		<!-- HTML CONTENT -->	
	</div>
	<!-- etc. -->
</div>

<div class="controls">
	<a href="#" rel="ID">text</a>
	<!-- etc. -->
</div>

Author

Marcin Dziewulski

Experienced and creative web developer from Poland, addicted to jQuery and CSS. Follow him on Twitter: @marcinmobily

Comments (9)

hello6470

December 19, 2011 - 20:33

Fantastic work.
A zoom feature would make it perfect.

thanks

Ilya

December 27, 2011 - 21:03

Is it possible to use two or more maps on the same page?

mobily

December 27, 2011 - 21:07

Yes, it is possible.

Christian

December 29, 2011 - 16:41

Can you add a zoom option this will be very great !

Sators

January 02, 2012 - 23:10

Sweet stuff here - any way to dynamically add markers once the map has been generated?
Also, any way to trigger a marker being active via JS?

Jana

January 10, 2012 - 21:03

Great plugin!!!
Just wondering if there is anyway to have the map image remain static? I want to be able to remove the pan option, as I plan on only using this over Canada.
Also, the map moves up when i click on the pin location, and the box content opens. Is there anyway to keep that from moving? Any help or suggestions are greatly appreciated!

Thank you!

Green

February 01, 2012 - 18:17

Hi, very good plugin!
Is it possible to use words enstead of markers?
For example names of cities.
And when you click on word(city) you get more information - as is now.

Thanks