jHERE - jQuery Interactive Map Plugin

File Size: 397 KB
Views Total: 3216
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jHERE - jQuery Interactive Map Plugin

jHERE is a  simple (1.95KB Gzipped) jQuery plugin offering a powerful map API which can be used to easily add interactive HERE maps to your website. 

With jHERE, you will get a powerful map API, highly customizable markers, event handling and info bubbles. Bonus features are KML support and data visualization via heatmaps.

jHERE is built on top of the awesome and very solid HERE Maps API. For advanced users, the native API is exposed by jHERE, thus offering unlimited possibilities of customization.

Basic Usage:

1. Include jQuery library and the jHERE.js script on the page.

<script src="jquery.min.js"></script>
<script src="js/jhere.js"></script>

2. Create a container element to hold the map.

<div id="map"></div>

3. Make sure the container element contain the map has the appropriate size via CSS, e.g. by setting width and height.

#map {
  height: 400px;
  max-width: 100%;
}

4. Make a map with the following options.

$('#map').jHERE({

  // gets your own from the HERE developer website
  appId: '69Dgg78qt4obQKxVbRA8',
  authToken: 'Nz7ilIB_v1CRwPXxgPdvuA',

  // a positive integer
  zoom: 12,

  // An object of type {latitude: Number, longitude: Number}
  // or array [latitude, longitude]
  center: [52.49, 13.37],

  /*
    'behavior': enables map interaction (drag to pan, scroll-wheel to zoom)
    'zoombar': shows a zoom control
    'scalebar': shows a scalebar on the map
    'typeselector': shows a dropdown where the user can select map, satellite, terrain
    'overview': shows a button to activate the overview panel
    'traffic': shows a button to enable the traffic layer
    'publictransport': shows a button to enable the public transport view
    'positioning': shows a button that triggers detection of the user's position
    'rightclick': shows a contextual menu on right click to zoom in and out
    'contextmenu': shows an enriched contextual menu with: current address, zoom in/out, directions
  */
  enable: ['behavior', 'zoombar', 'scalebar', 'typeselector'],

  /*
    'map': the normal map type. This is the default.
    'smart': a map with most of the colors grayed out. Useful for data visualization.
    'pt': a smart map where the tiles also contain the public transport lines.
    'satellite': satellite view.
    'terrain': terrain view.
    'community': HERE Maps community layer.
    'satcommunity': HERE Maps community layer with satellite imagery.
    'traffic': traffic layer.
  */
  type: 'map',
  
  // marker options
  marker: {
    text: '',
    textColor: '#333333',
    fill: '#ff6347',
    stroke: '#333333',
    shape: 'balloon',
    icon: undefined
  },

  // bubble options
  bubble: {
    content: '',
    closable: true,
    onclose: $.noop
  },

  // heatmaps options
  heatmap: {
    max: 20,
    opacity: 0.8,
    coarseness: 2
  }

})

5. API methods available.

// CENTER THE MAP
$('#map').jHERE('center', centerObject);

// ZOOM THE MAP
$('#map').jHERE('zoom', zoomLevel);

// SET THE MAP TYPE
$('#map').jHERE('type', mapType);

// ADD MARKERS TO THE MAP
$('#map').jHERE('marker', positionObject, markerOptions);

// REMOVE ALL THE MARKERS FROM THE MAP
$('#map').jHERE('nomarkers');

// ADD BUBBLES TO THE MAP
$('#map').jHERE('bubble', positionObject, bubbleOptions);

// DISPLAY KMLS ON THE MAP
$('#map').jHERE('kml', KMLfile, zoomToKML, ondone);

// ADD HEATMAP LAYERS TO THE MAP
$('#map').jHERE('heatmap', data, type, options);

// ACCESS THE UNDERLYING HERE JAVASCRIPT API FRAMEWORK
$('#map').jHERE('originalMap', closure);

6. It is possible to listen for events on the map in the usual jQuery way (on, off). All the event names start with map. The event passed to the callback function always has a geo (data.geo for Tire users) property that contains latitude and longitude of the point where the event originated. Supported events are: mapclick, mapmouseup, mapmousedown, mapmousemove, mapmouseover, mapmouseout, mapmouseenter, mapmouseleave, maplongpress, mapdragstart, mapdrag, mapdragend, mapresize, maptouchstart, maptouchend, maptouchmove.

$('#map').on('mapclick', function(e){ console.log (e.geo)});

7. In order to keep jHERE as small as possible, the plugin contains only a subset of all the functionalities that are available via the HERE Maps API. Checkout the 'extensions' folder for more details.

Changelog:

2018-07-16

  • DOC & DEMO update.

v0.9.0 (2014-6-14)

  • Update to latest version

v0.7.2 (2013-7-23)

  • Update to latest version

This awesome jQuery plugin is developed by mmarcon. For more Advanced Usages, please check the demo page or visit the official website.