jHERE jQuery Map API Plugin - Download jHERE - jQuery Interactive Map Plugin

Download jHERE – jQuery Interactive Map Plugin

By Posted on

This time I will share jQuery Plugin and tutorial about jHERE – jQuery Interactive Map Plugin, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <script src="jquery.min.js"></script>
2 <script src="js/jhere.js"></script>

2. Create a container element to hold the map.

view source
1 <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.

view source
1 #map {
2   height: 400px;
3   max-width: 100%;
4 }

4. Make a map with the following options.

view source
01 $('#map').jHERE({
02  
03   // gets your own from the HERE developer website
04   appId: '69Dgg78qt4obQKxVbRA8',
05   authToken: 'Nz7ilIB_v1CRwPXxgPdvuA',
06  
07   // a positive integer
08   zoom: 12,
09  
10   // An object of type {latitude: Number, longitude: Number}
11   // or array [latitude, longitude]
12   center: [52.49, 13.37],
13  
14   /*
15     'behavior': enables map interaction (drag to pan, scroll-wheel to zoom)
16     'zoombar': shows a zoom control
17     'scalebar': shows a scalebar on the map
18     'typeselector': shows a dropdown where the user can select map, satellite, terrain
19     'overview': shows a button to activate the overview panel
20     'traffic': shows a button to enable the traffic layer
21     'publictransport': shows a button to enable the public transport view
22     'positioning': shows a button that triggers detection of the user's position
23     'rightclick': shows a contextual menu on right click to zoom in and out
24     'contextmenu': shows an enriched contextual menu with: current address, zoom in/out, directions
25   */
26   enable: ['behavior', 'zoombar', 'scalebar', 'typeselector'],
27  
28   /*
29     'map': the normal map type. This is the default.
30     'smart': a map with most of the colors grayed out. Useful for data visualization.
31     'pt': a smart map where the tiles also contain the public transport lines.
32     'satellite': satellite view.
33     'terrain': terrain view.
34     'community': HERE Maps community layer.
35     'satcommunity': HERE Maps community layer with satellite imagery.
36     'traffic': traffic layer.
37   */
38   type: 'map',
39    
40   // marker options
41   marker: {
42     text: '',
43     textColor: '#333333',
44     fill: '#ff6347',
45     stroke: '#333333',
46     shape: 'balloon',
47     icon: undefined
48   },
49  
50   // bubble options
51   bubble: {
52     content: '',
53     closable: true,
54     onclose: $.noop
55   },
56  
57   // heatmaps options
58   heatmap: {
59     max: 20,
60     opacity: 0.8,
61     coarseness: 2
62   }
63  
64 })

5. API methods available.

view source
01 // CENTER THE MAP
02 $('#map').jHERE('center', centerObject);
03  
04 // ZOOM THE MAP
05 $('#map').jHERE('zoom', zoomLevel);
06  
07 // SET THE MAP TYPE
08 $('#map').jHERE('type', mapType);
09  
10 // ADD MARKERS TO THE MAP
11 $('#map').jHERE('marker', positionObject, markerOptions);
12  
13 // REMOVE ALL THE MARKERS FROM THE MAP
14 $('#map').jHERE('nomarkers');
15  
16 // ADD BUBBLES TO THE MAP
17 $('#map').jHERE('bubble', positionObject, bubbleOptions);
18  
19 // DISPLAY KMLS ON THE MAP
20 $('#map').jHERE('kml', KMLfile, zoomToKML, ondone);
21  
22 // ADD HEATMAP LAYERS TO THE MAP
23 $('#map').jHERE('heatmap', data, type, options);
24  
25 // ACCESS THE UNDERLYING HERE JAVASCRIPT API FRAMEWORK
26 $('#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.

view source
1 $('#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.

source : jquery.net

Related posts: