Submit your widget

lightweight jQuery previous MobilyMap

Created 11 years ago   Views 16182   downloads 3426    Author jscraft
lightweight  jQuery previous MobilyMap
View DemoDownload
Share |

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.


    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){}


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

The article source: