NAV
JavaScript

Introduction

{
  "resource": "MapJam Documentation",
  "version": "1.0",
  "contact": "support@mapjam.com"
}

Feel free to ping us if you have suggestions!

Welcome to MapJam for Developers! Like you, we are passionate about mapping. Creating beautiful and functional maps should be easy. This is why we’ve simplified the whole map creation experience with emphasis on the end user experience resulting in awesome maps and simple location sharing.

MapJam offers Developers beautiful, styleable robust vector maps that work seamlessly with great Open Source projects from OpenStreetMap, Mapzen, Leaflet, D3, Font Awesome, kolor.js, and others. 

Simple Pricing & Terms — Focus on creating maps, don’t worry about restrictive and hard to understand terms of service. We’ve done away with drawn out annual contract negotiations, confusing credit schemes, MAU pricing, and TOS restrictions on private apps, logistics apps, and maps behind paywalls. Our model is simple: pay for what you use, and feel free to develop internal MVPs using MapJam without concern.

Ability to customize everything — It’s Open Source! Check out some examples of styling abilities. Beautiful maps with complete styling control from the first line of code.

Under the Hood — MapJam’s MaaS infrastructure is rock solid and hosted on AWS and fully redundant Softlayer/IBM bare metal servers.

Open data —  MapJam is committed to collaborative, open data mapping communities, and our goal is to make time, service, and code contributions to help accelerate the democratization of information.

Get your API Auth Token

MapJam access token allows you to access MapJam Library. You can register a new MapJam token at our developer portal.

Map

Create a map

When creating a map, the only required options are the Div Id for the map, centerMap Lat Lng, and your access token.

var map = new MJ.map('map', {
    centerMap: [51.5079313, -0.1280328],
    zoom: 12,
    accessToken: 'ACCESS_TOKEN'
});

Parameters

Parameter Required Default Description
Div ID Yes Null Html div ID for the map.
options Yes Null Map options object.

Options

Option Required Default Description
centerMap Yes [0, 0] Lat Lng position of the map.
zoom Optional 12 Zoom level of the map.
style Optional street-map.json Map style
accessToken Yes Null Your MapJam access token
scrollZoom Optional True Zoom level using mouse wheel

Marker

When creating a marker, the minimal required parameter is the MJ map.

var myMarker = new MJ.marker(map);

Create a Marker

MJ.marker takes the map reference and marker options

var myMarker = new MJ.marker(map,{  
     latLng: [51.5079313, -0.1280328],
     size: 'xl', 
     color: '#ff0000 ',
     backgroundColor: '#ff00ff ',
     locationPointColor: '#00ffff ',
     ring:false,
     ringColor:'#00ff00 ',
     showLocationPoint:true,
     locationPointColor:'#f29b1a',
     iconName: 'fonticon-info-icon',
     iconColor: '#ff0 ',                       
     note: {
         text: 'The River Road House',
         side: 'left',
         autoHide: false,
         color: '#36910f',
         textColor: '#1f60e2',
     }
});

Parameters

Parameter Required Default Description
map Yes Null Map reference in your code.
options Yes Null Marker options object the only required option is LatLng.

Options / Attributes

Option Required Default Description
latLng Yes [0,0] Lat Lng position of the map.
color Optional Null Color of the marker.
size Optional Null Marker size ( xs, s, m, l, xl, xxl )
bevel Optional True false produces a flat marker using the defined color; true produces a marker with a relief effect with right half the defined color and left half a shade lighter
iconName Optional fonticon-move-icon Icon name for the marker. For a complete list of available icons, please refer to https://fortawesome.github.io/Font-Awesome/cheatsheet/ . For example, if you want to use the glass shaped icon, define ‘fa-glass’ in the iconName option.
backgroundColor Optional #ffffff Background color for the center of the marker
iconColor Optional #2cd0ae Color for marker icon
showLocationPoint Optional True Display location point on the marker
locationPointColor Optional #2cd0ae Color of location point
ring Optional True GPS pulsating ring for the marker
ringColor Optional #85d3f6 Color for the GPS pulsating ring
noteText Optional Null Text for the marker tail
noteAutoHide Optional False Display marker tail on mouse hover
noteSide Optional Right Display marker tail on the right or left
noteColor Optional #2cd0ae Background color for the marker tail
noteTextColor Optional #ffffff Text color for marker tail

mjOptions

The MJ marker object contains mjOptions, it holds your customized marker options when using the MJ.updateMarkerAttribute or the MJ.updateMarker functions.

//To get a copy of your customized options:

myMarker = MJ.updateMarkerLatLng(map, myMarker, [51.5279313, -0.1380328]);
console.log(newMarker2.mjOptions.latLng );  //new latLng value from mjOptions

MJ Marker Objects

Here is an example of how to create a single marker, makes some custom changes on one of the markers, and then apply changes to an array of markers using the mjOptions feature, and then hides one of the markers.

var newMarker1 = new MJ.marker(map,{  
  latLng: [51.5379313, -0.1280328],
  ring:true,
  showLocationPoint:false,
  ringColor:'#ff0000',
  note: {
    side: 'left',
    text: 'MapJam Marker 1',
  }
});

var newMarker2 = new MJ.marker(map,{  
  latLng: [51.5279313, -0.1380328],
  ring:true,
  ringColor:'#ff0000',
  note: {
    color:'#ff0000',
    textColor:'#ff0',
    text: 'MapJam Marker 2',
  }
});

var newMarker3 = new MJ.marker(map,{  
  latLng: [51.4979313, -0.1480328],
  ring:true,
  showLocationPoint:false,
  ringColor:'#ff0000',
  iconName: 'fa-glass fa-spin',
  note: {
    text: 'MapJam Marker 3',
  }
});

setTimeout(function(){ 
    var markers = [];
    markers.push(newMarker1);
    markers.push(newMarker2);
    markers.push(newMarker3); 

    newMarker2 = MJ.updateMarker(newMarker2,{
         size: 'xxl',  
         color: '#5bd3ff ',
         backgroundColor: '#ff00ff ',
         locationPointColor: '#00ffff ',
         ring:false,
         ringColor:'#00ff00 ',
         showLocationPoint:true,
         locationPointColor:'#f29b1a',
         iconName: 'fa-glass fa-spin',
         iconColor: '#ff0 ',                    
         note: {
             text: 'TWINKLE TWINKLE',
             side: 'right',
             autoHide: false,
             color: '#36910f',
             textColor: '#1f60e2',
         }
     });     

    setTimeout(function(){ 

      MJ.updateMarkerAttribute(markers, 'noteText', newMarker2.mjOptions.note.text);

      MJ.hideMarker(newMarker1);

    }, 3000);
}, 3000);  

Update Marker(s)

Update Marker(s) Attribute

MJ.updateMarkerAttribute takes a single marker or marker array, attribute name, and value. It returns the updated options (mjOptions) back for a single marker.

myMarker = MJ.updateMarkerAttribute(myMarker, 'size', 'xl');

MJ.updateMarkerAttribute(markers, 'size', 'xl');

Update Marker(s) Lat Lng Position

MJ.updateMarkerLatLng takes the map reference, a single marker or marker array, and the Lat Lng value. It returns the updated options (mjOptions) back for a single marker.

myMarker = MJ.updateMarkerLatLng(map, myMarker, [51.5279313, -0.1380328]);

MJ.updateMarkerLatLng(map, markers, [51.5279313, -0.1380328]);

Update Marker(s) Options Object

MJ.updateMarker takes a single marker or marker array, and options object. It returns the updated options (mjOptions) back for a single marker.

myMarker = MJ.updateMarker(myMarker,{
     size: 'xl', 
     color: '#ff0000 ',
     backgroundColor: '#ff00ff ',
     locationPointColor: '#00ffff ',
     ring:false,
     ringColor:'#00ff00 ',
     showLocationPoint:true,
     locationPointColor:'#f29b1a',
     iconName: 'fonticon-info-icon',
     iconColor: '#ff0 ',                       
     note: {
         text: 'Sunnybrook Farm',
         side: 'left',
         autoHide: false,
         color: '#36910f',
         textColor: '#1f60e2',
     }
 });

 MJ.updateMarker(markers,{
     size: 'xl', 
     color: '#ff0000 ',
     backgroundColor: '#ff00ff ',
     locationPointColor: '#00ffff ',
     ring:false,
     ringColor:'#00ff00 ',
     showLocationPoint:true,
     locationPointColor:'#f29b1a',
     iconName: 'fonticon-info-icon',
     iconColor: '#ff0 ',                       
     note: {
         text: 'Melrose Public School',
         side: 'left',
         autoHide: false,
         color: '#36910f',
         textColor: '#1f60e2',
     }
 });  

Hide Marker(s)

MJ.hideMarker takes a single marker or marker array.

MJ.hideMarker(myMarker);

MJ.hideMarker(markers);

Show Marker(s)

MJ.showMarker takes a single marker or marker array.

MJ.showMarker(myMarker);

MJ.showMarker(markers);

Delete Marker(s)

MJ.deleteMarker takes the map reference, a single marker or marker array.

MJ.deleteMarker(map, myMarker);

MJ.deleteMarker(map, markers);

Geocode Providers

Mapjam Geolocation Library

Simple Node Geolocation library based on Esri/Arcgis, Mapzen, Nokia/HERE, and google maps API technology.

var geo = require('mapjam-geo-providers');

var latlng = ['37.750629', '-122.439880'];

var mapzen_options = {"api_key":"YOUR_KEY", "lat":"37.7983366", "lng":"-122.4006509"};
var HERE_options = {"app_id":"YOUR_APP_ID", "app_code":"YOUR_APP_CODE", "lat":"37.7983366", "lng":"-122.4006509"};

//reverse geocode
geo.geocode('mapzen',latlng, mapzen_options, function(err,resp){
  if(err) {
    console.log(err);
  } else {
    console.log('Reverse GEO RESULT==>', resp);
  }
});

//geocode
geo.geocode('mapzen','814 mission st san francisco', mapzen_options, function(err,resp){
  if(err) {
    console.log(err);
  } else {
    console.log('Geo RESULT==>', resp);
  }
});

Installation

npm install mapjam-geo-providers

Parameters

Parameter Required Default Description
Provider Name Yes Null Geocode provider name. Choices are 'google’, 'esri’, 'esri-suggest’, 'arcgis’, 'arcgis-suggest’, 'mapzen’, 'HERE’.
LatLng/Address Yes Null An array of lat lng for reverse geocode. A partial or complete address for geocode.
Options Optional Null The App Id, App Code, or API Key for the appropriate geolocation providers.
If lat and lng are provided, it will be used as user’s current location to get closer results.

Usage

If the second parameter is location coordinates, reverse geocode will be used.
If the second parameter is an address or partial address, geocode will be used.

If provider name 'esri’ or 'arcgis’ is passed, the ArcGIS 'find’ API will be used.
If provider name 'esri’ or 'arcgis-suggest’ is passed, the ArcGIS 'suggest’ API will be used.