Addons by Reinos

Appearance

Javascript API ​

With the Javascript API, you are able to modify the data without any EE tags. You can add markers, cirlces etc but also you`re able to modify the Map style etc.

In the methods where you work with the markers, you have to enter a key that belongs to the marker. This key is the latlng or the address you entered or a self chosen key

Maps ready function ​

This will execute after the (all) Maps is fully loaded (the maps.ready event)

REINOS_MAPS.ready(function(){
//your logic code
});

refresh ​

mapID : the ID of the map (eg reinos_map_1)

Refresh the map, so its update all data

REINOS_MAPS.api('refresh', {
  mapID : '', 
});

setZoom ​

mapID : the ID of the map (eg reinos_map_1)
zoom : zoom level between 0-21 depending on the tile settings

Set the zoom level of the map

REINOS_MAPS.api('setZoom', {
  mapID : '' , 
  zoom : ''
});

zoomOut ​

mapID : the ID of the map (eg reinos_map_1)

REINOS_MAPS.api('zoomOut', {
  mapID : '' , 
});

zoomIn ​

mapID : the ID of the map (eg reinos_map_1)

REINOS_MAPS.api('zoomIn', {
  mapID : '' , 
});

fitMap ​

mapID : the ID of the map (eg reinos_map_1)
type : markers circles rectangles polygons polylines routes

Fit the map based on the markers, circles, rectangles, polygons or polylines (routes are polylines)

omit the type, will result in fit the map based on all types

REINOS_MAPS.api('fitMap', {
  mapID : '', 
  type : '' 
});

center ​

mapID : the ID of the map (eg reinos_map_1)
lat : the lat coordinate
lng: the lng coordinate

Center the map based on coordinates

REINOS_MAPS.api('center', {
  mapID : '', 
  lat : '',
  lng: '' 
});

getMap ​

mapID : the ID of the map (eg reinos_map_1)

Get a map instance. The Leaflet map object is available as .map on the returned object.

REINOS_MAPS.api('getMap', {
  mapID : ''
});

removeMap ​

mapID : the ID of the map (eg reinos_map_1)

Remove a map instance

REINOS_MAPS.api('removeMap', {
  mapID : ''
});

updateMap ​

mapID : the ID of the map (eg reinos_map_1)
width / height : the new size of the map
center : the new center as a base64 encoded <lat>,<lng> string (e.g. btoa('52.37,4.89'))
zoom / max_zoom : the (max) zoom level
scroll_wheel / zoom_control / scale_control : true or false
zoom_control_position / scale_control_position : topleft, topright, bottomleft or bottomright
overlay_html / overlay_position : the overlay and its position (left or right)
tiles : replace the tiles of the map

Update a map, only the given options are updated

REINOS_MAPS.api('updateMap', {
  mapID : '',
  width: '200px',
  height: '400px',
  center: btoa('<lat>,<lng>'),
  zoom: 10,
  scroll_wheel: true,
  zoom_control: true,
  zoom_control_position: 'topleft',
  scale_control: true,
  scale_control_position: 'topleft',
  overlay_html: '',
  overlay_position: 'left'
});

addMarker ​

mapID : the ID of the map (eg reinos_map_1)
lat : latitude coordinate
lng : longitude coordinate
keys : the key(s) of the marker, use a colon : for multiple keys
tooltip : tooltip object
popup : popup object
assign : an object with extra data that is saved in marker.extra

Other Leaflet marker options like title, draggable or opacity can also be used.

Add a new marker to a map, the marker is returned

REINOS_MAPS.api('addMarker', {
  mapID : '',
  lat : '',
  lng : '',
  keys : '',
  tooltip : {
  	content: ''
  },
  popup : {
    popupContent : ''
  }
});

updateMarker ​

mapID : the ID of the map (eg reinos_map_1)
key : the key of the marker
icon : icon object, e.g. {iconUrl: ''}. An empty iconUrl sets the default icon back
tooltip : tooltip object
popup : popup object

Update a marker

REINOS_MAPS.api('updateMarker', {
  mapID : '',
  key : '',
  icon : {
    iconUrl : ''
  },
  tooltip : {
  	content: ''
  },
  popup : {
    popupContent : ''
  }
});

removeMarker ​

mapID : the ID of the map (eg reinos_map_1)
key : the key of the marker

Remove Marker

REINOS_MAPS.api('removeMarker', {
  mapID : '',
  key: ''
});

removeMarkers ​

mapID : the ID of the map (eg reinos_map_1)

Remove all Marker

REINOS_MAPS.api('removeMarkers', {
  mapID : ''
});

hideMarker ​

mapID : the ID of the map (eg reinos_map_1)
key : the key of the marker

Hide Marker

REINOS_MAPS.api('hideMarker', {
  mapID : '',
  key: ''
});

hideMarkers ​

mapID : the ID of the map (eg reinos_map_1)

Hide all Marker

REINOS_MAPS.api('hideMarkers', {
  mapID : ''
});

showMarker ​

mapID : the ID of the map (eg reinos_map_1)
key : the key of the marker

This method will show a marker which is removed or hided from the map.

REINOS_MAPS.api('showMarker', {
  mapID : '',
  key: ''
});

showMarkers ​

mapID : the ID of the map (eg reinos_map_1)

This method will show all marker which is removed or hided from the map.

REINOS_MAPS.api('showMarkers', {
  mapID : ''
});

getMarker ​

mapID : the ID of the map (eg reinos_map_1)
key: The marker key
multiple: true to get all markers with that key instead of the first one

Get a marker

REINOS_MAPS.api('getMarker', {
  mapID : '',
  key: '',
  multiple: false
});

getMarkers ​

mapID : the ID of the map (eg reinos_map_1)

Get all the markers for a specific map

REINOS_MAPS.api('getMarkers', {
  mapID : ''
});

getAllMarkers ​

Get all map markers

REINOS_MAPS.api('getAllMarkers');

markerClick ​

mapID : the ID of the map (eg reinos_map_1)
key : the key of the marker
callback : a callback function, called with the Leaflet map and the marker

Trigger an onClick event on a marker

REINOS_MAPS.api('markerClick', {
  mapID : '', 
  key : '',
  callback: function(map, marker){} 
});

openMarkerPopup ​

mapID : the ID of the map (eg reinos_map_1)
key : the key of the marker

Open a marker popup

REINOS_MAPS.api('openMarkerPopup', {
   mapID : '',
   key : ''
});

closeMarkerPopup ​

mapID : the ID of the map (eg reinos_map_1)
key : the key of the marker

Close a marker popup

REINOS_MAPS.api('closeMarkerPopup', {
   mapID : '',
   key : ''
});

toggleMarkerPopup ​

mapID : the ID of the map (eg reinos_map_1)
key : the key of the marker

Toggle a marker popup

REINOS_MAPS.api('toggleMarkerPopup', {
   mapID : '',
   key : ''
});

addCircle ​

mapID : the ID of the map (eg reinos_map_1)
lat: Lat coordinate
lng: lng coordinate
color: The stroke color
weight: Weight of the stroke
opacity: Stroke opacity
fillColor: the fill color
fillOpacity: the opacity of the fill
radius: Radius in meters
keys: the key(s) of the circle, use a colon : for multiple keys
tooltip : tooltip object
popup : popup object

Add a circle

REINOS_MAPS.api('addCircle', {
   mapID : '',
   lat: '',
   lng: '',
   color: '',
   weight: '',
   opacity: '',
   fillColor: '',
   fillOpacity: '',
   radius: '',
   keys: ''
});

updateCircle ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the circle
radius: Radius in meters
tooltip : tooltip object
popup : popup object

All other options (e.g. color, fillColor) are used to update the style of the circle.

Update a circle

REINOS_MAPS.api('updateCircle', {
   mapID : '',
   key: '',
   radius: '',
   color: ''
});

getCircle ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the circle

Get a circle

REINOS_MAPS.api('getCircle', {
   mapID : '',
   key: ''
});

removeCircle ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the circle

Remove a circle

REINOS_MAPS.api('removeCircle', {
   mapID : '',
   key: ''
});

addRectangle ​

mapID : the ID of the map (eg reinos_map_1)
bounds: an array with 2 latlng arrays, e.g. [[52.37, 4.89], [50.85, 5.69]]
color: The stroke color
weight: Weight of the stroke
opacity: Stroke opacity
fillColor: the fill color
fillOpacity: the opacity of the fill
keys: the key(s) of the rectangle, use a colon : for multiple keys

Add a Rectangle

REINOS_MAPS.api('addRectangle', {
   mapID : '',
   bounds: [],
   color: '',
   weight: '',
   opacity: '',
   fillColor: '',
   fillOpacity: '',
   keys: ''
});

updateRectangle ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the Rectangle
latlngs: the new bounds
tooltip : tooltip object
popup : popup object

All other options (e.g. color, fillColor) are used to update the style of the rectangle.

Update a rectangle

REINOS_MAPS.api('updateRectangle', {
   mapID : '',
   key: '',
   color: ''
});

getRectangle ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the Rectangle

Get a rectangle

REINOS_MAPS.api('getRectangle', {
   mapID : '',
   key: ''
});

removeRectangle ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the Rectangle

Remove a Rectangle

REINOS_MAPS.api('removeRectangle', {
   mapID : '',
   key: ''
});

addPolygon ​

mapID : the ID of the map (eg reinos_map_1)
latlngs: array of latLng array color: The stroke color
weight: Weight of the stroke
opacity: Stroke opacity
fillColor: the fill color
fillOpacity: the opacity of the fill
keys: the key(s) of the polygon, use a colon : for multiple keys

Add a Polygon

REINOS_MAPS.api('addPolygon', {
   mapID : '',
   latlngs: [],
   color: '',
   weight: '',
   opacity: '',
   fillColor: '',
   fillOpacity: '',
   keys: ''
});

updatePolygon ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the Polygon
latlngs: array of latLng array to redraw the polygon
tooltip : tooltip object
popup : popup object

All other options (e.g. color, fillColor) are used to update the style of the polygon.

Update a Polygon

REINOS_MAPS.api('updatePolygon', {
   mapID : '',
   key: '',
   latlngs: [],
   color: ''
});

getPolygon ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the Polygon

Get a Polygon

REINOS_MAPS.api('getPolygon', {
   mapID : '',
   key: ''
});

removePolygon ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the Polygon

Remove a Polygon

REINOS_MAPS.api('removePolygon', {
   mapID : '',
   key: ''
});

addPolyline ​

mapID : the ID of the map (eg reinos_map_1)
latlngs: array of latLng array color: The stroke color
weight: Weight of the stroke
opacity: Stroke opacity
keys: the key(s) of the polyline, use a colon : for multiple keys

Add a Polyline

REINOS_MAPS.api('addPolyline', {
   mapID : '',
   latlngs: [],
   color: '',
   weight: '',
   opacity: '',
   keys: ''
});

updatePolyline ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the Polyline
latlngs: array of latLng array to redraw the polyline
tooltip : tooltip object
popup : popup object

All other options (e.g. color, weight) are used to update the style of the polyline.

Update a Polyline

REINOS_MAPS.api('updatePolyline', {
   mapID : '',
   key: '',
   latlngs: [],
   color: ''
});

getPolyline ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the Polyline

Get a Polyline

REINOS_MAPS.api('getPolyline', {
   mapID : '',
   key: ''
});

removePolyline ​

mapID : the ID of the map (eg reinos_map_1)
key: the key of the Polyline

Remove a Polyline

REINOS_MAPS.api('removePolyline', {
   mapID : '',
   key: ''
});

addGeojson ​

mapID : the ID of the map (eg reinos_map_1)
json: the GeoJSON data
style: a Leaflet path style object, or set it with REINOS_MAPS.setGeoJsonStyle() (see Map GeoJSON)

Add GeoJSON data

REINOS_MAPS.api('addGeojson', {
   mapID : '',
   json: {},
   style: {}
});

addKml ​

mapID : the ID of the map (eg reinos_map_1)
url: the url of the KML file

Add a KML file, the map is fitted to the bounds of the KML data

REINOS_MAPS.api('addKml', {
   mapID : '',
   url: ''
});

geolocation ​

callback : a callback function

Geolocate to the current location

REINOS_MAPS.api('geolocation', {
   callback : function(position){}
});

geocode ​

address : addres to geocode, multiple addresses seperated by a pipline '|'
latlng : latlng to reverse geocode, multiple latlngs seperated by a pipline '|'
ip : ip to geocode, multiple ips seperated by a pipline '|'
callback : function that will be triggered when the results are loaded

Geocode (using the caching function of Maps)

REINOS_MAPS.api('geocode', {
  address: '',
  latlng : '',
  ip : '',
  callback : function(result, type){} 
});

geocode result ​

in the callback the result of your request looks like

{
   "success":true,
   "objects":[
      {
         "latitude":52.21115700000001,
         "lat":52.21115700000001,
         "longitude":5.9699231,
         "lng":5.9699231,
         "latlng":"52.211157,5.9699231",
         "bounds":[
            {
               "south":52.172528,
               "west":5.8925689,
               "north":52.25032119999999,
               "east":6.0582248
            }
         ],
         "street_name":null,
         "street_number":null,
         "city":"Apeldoorn",
         "locality":"Apeldoorn",
         "zipcode":null,
         "admin_levels":[
            {
               "level":1,
               "name":"Gelderland",
               "code":"GE"
            },
            {
               "level":2,
               "name":"Apeldoorn",
               "code":"Apeldoorn"
            }
         ],
         "city_district":null,
         "sub_locality":null,
         "country":"Netherlands",
         "country_code":"NL",
         "timezone":null,
         "default_title":"Apeldoorn, Netherlands",
         "address":"Apeldoorn, Netherlands"
      }
   ]
}

Default callback ​

As third param you can specify a callback. this is for every method the same.

REINOS_MAPS.trigger() and REINOS_MAPS.triggerEvent() are aliases of REINOS_MAPS.api().

REINOS_MAPS.api('addMarker', {
  lat: 40.7127,
  lng: -74.0059,
  mapID: 'reinos_map_1'
}, function(){
	//this is the default callback function
});

Events ​

For the following methods {maps:add_circle} {maps:add_geojson} {maps:add_kml} {maps:add_marker}{maps:add_polygon} {maps:add_polyline} {maps:add_rectangle} there are 2 events that would be called and where you can hook into.

The [type] is one of markers circles rectangles polygons polylines geojson kml (routes are polylines).

[type].ready ​

This event is called when all data is loaded and placed on the map.

<script>
 REINOS_MAPS.on('markers.ready', function(){
    //your logic
 });
</script>

[type].beforeReady ​

This event is called when before the data is loaded and placed on the map.

<script>
 REINOS_MAPS.on('markers.beforeReady', function(){
    //your logic
 });
</script>