Карта мира на JQuery

Карта мира на JQuery

92012-01-2141946Денис Абдуллин

Плагин «CraftMap» - это и есть составная часть карты мира. Плагин является полностью настраиваемым. Он преобразует простое изображение в функциональную карту с метками, эти маркеры можно добавлять и удалять на HTML страничке. Карта такая же удобная, как и карты Google Maps. Передвижение из одной части карты в другую осуществляется за счет перетаскивания. Карта мира на JQuery также имеет список некоторых стран, на которые установлены маркеры, настраивается это отдельно. Посмотрите демонстрацию, чтобы увидеть карту в действии.

Код JavaScript



Code

('.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



Code

<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>

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (6)
Гость 2012-09-06 в 16:32 / МатериалСпам
Есть ли возможность маркеры сделать разными? Т.е. допустим чтобы в диве где подсказка указывать путь к картинке-маркеру?
0
Денис Абдуллин 2012-09-06 в 17:09 / МатериалСпам
Вам следует покопаться в JQuery коде, ведь именно там присутствует код маркера. Автор не подумал о разных маркерах.
0
Гость 2012-04-30 в 14:34 / МатериалСпам
This shows real expretise. Thanks for the answer.
0
Гость 2012-02-10 в 14:07 / МатериалСпам
Чётко мне пригодится переделаю для себя.))
1
Оксана Чудина 2012-01-25 в 18:18 / МатериалСпам
Качественное исполнение
3
Александр Ильин 2012-01-23 в 21:14 / МатериалСпам
Отличная идея!
2
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.