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

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

21.01.201233656

Плагин «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>



Сохраните в социальную сеть
Комментарии (6)
Отличная идея!
2
Качественное исполнение
3
Гость 10.02.2012 в 14:07Спам
Чётко мне пригодится переделаю для себя.))
1
Гость 30.04.2012 в 14:34Спам
This shows real expretise. Thanks for the answer.
0
Гость 06.09.2012 в 16:32Спам
Есть ли возможность маркеры сделать разными? Т.е. допустим чтобы в диве где подсказка указывать путь к картинке-маркеру?
0
Вам следует покопаться в JQuery коде, ведь именно там присутствует код маркера. Автор не подумал о разных маркерах.
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт