Documentations

$.sMap()

Gets options and returns map object.

Options

var map = $.sMap({
	before: function() {
		console.log('Before');
	},
	after: function() {
		console.log('After');
	},
	mode: 'development',
	element: '#my-map',
	boxZoom: true,
	minZoom: 3,
	maxZoom: 15,
	presets: {
		latlng: {
			lat: 32,
			lng: 52,
		},
		zoom: 8,
	},
	i18n: {
		fa: {
			'custom-site-title': 'نقشه',
		},
		en: {
			'custom-site-title': 'Map',
		},
		ar: {
			'custom-site-title': 'خريطة',
		},
	},
});
									

$.sMap.logo.implement()

Gets options and appends company logo to map view.

Options

$.sMap.logo.implement({
	url: env.url.domain + '/assets/images/site-logo.png',
});
									

$.sMap.fullscreen.implement()

Implements fullscreen button to map view.

$.sMap.fullscreen.implement();
									

$.sMap.menu.implement()

Appends Menu trigger and panel to the map view.

$.sMap.menu.implement();
									

$.sMap.locale.implement()

Gets locale options and adds multi-lingual functionalities for selected languages to app.

Options

$.sMap.menu.implement();

$.sMap.locale.implement({
	locales: ['fa', 'en'],
});
									

$.sMap.layers.static.build()

Gets an object of layers and loads up tiles onto map. Also impliments layer management options to menu automatically if $.sMap.menu.implement is already called.

Options

$.sMap.layers.static.build({
	layers: {
		base: {
			default: {
				server: 'https://map.ir/shiveh',
				layers: 'Shiveh:ShivehGSLD256',
				format: 'image/png',
				i18n: 'custom-baselayer-default',
			},
			satellite: {
				server: 'https://demo.boundlessgeo.com/geoserver/ows?',
				layers: 'ne:ne',
				format: 'image/png',
				i18n: 'custom-baselayer-satellite',
			},
			terrain: {
				server: 'https://demo.boundlessgeo.com/geoserver/ows?',
				layers: 'nasa:bluemarble',
				format: 'image/png',
				i18n: 'custom-baselayer-terrain',
			},
		},
		over: {
			boundries: {
				server: 'https://korona.geog.uni-heidelberg.de/tiles/adminb/x={x}&y={y}&z={z}',
				i18n: 'custom-baselayer-boundries',
			},
			states: {
				server: 'https://{s}.tile.openstreetmap.se/hydda/roads_and_labels/{z}/{x}/{y}.png',
				i18n: 'custom-baselayer-states',
			},
		},
	},
});
									

$.sMap.zoomControl.implement()

Appends the map zoom controller to the map view.

$.sMap.zoomControl.implement();
									

$.sMap.userLocation()

Appends user location trigger button to the map view.

Options

$.sMap.userLocation.implement({
	history: true,
});
									

$.sMap.dynamicLocation()

Provides a handy way of accessing map location with a Copy button to save location to clipboard.

Appends sub-module's enterface to the map view.

Options

$.sMap.dynamicLocation.implement({
	format: 'latlng',
	source: 'mouse',
});
									

$.sMap.dynamicUrl()

Enables hash url that is updated every time user moves the map or zooms in/out.

Options

$.sMap.dynamicUrl({
	marker: true,
});
									

$.sMap.contextmenu.build()

Gets contextmenu options and adds contextmenu functionality to app.

Options

$.sMap.contextmenu.build({
	here: true,
	distance: true,
	area: true,
	copy: true,
	share: true,
	static: true,
});
									

$.sMap.reverseGeocode.show()

Gets a map state and displays location address in a modal.

Options

$.sMap.reverseGeocode.show({
	state: {
		latlng: {
			lat: 32,
			lng: 52,
		},
		zoom: 8,
	},
});
									

$.sMap.reverseGeocode.mark()

Gets options and displays location address in marker popup.

Options

$.sMap.reverseGeocode.mark({
	latlng: {
		lat: 32,
		lng: 52,
	},
	title: {
		html: 'Reverse Geocode',
		i18n: '',
	},
	icon: icons.default.blue,
});
									

$.sMap.measurement()

Gets no options and enables measurement options in contextmenu.

$.sMap.contextmenu.build({
	here: false,
	distance: true,
	area: true,
	copy: false,
	share: false,
	static: false,
});

$.sMap.measurement();
									

$.sMap.staticMap.get()

Gets options and returns static map url.

Options

$.sMap.staticMap.get({
	state: {
		latlng: {
			lat: 32,
			lng: 52,
		},
		zoom: 10,
	},
	width: 800,
	height: 600,
	label: 'My Location',
	color: 'green',
});
									

$.sMap.staticMap.open()

Options

$.sMap.staticMap.open({
	state: {
		latlng: {
			lat: 35.63665,
			lng: 51.45687,
		},
		zoom: 10,
	},
	width: 800,
	height: 600,
	label: 'My Location',
	color: 'green',
});
									

Quick access:

1. Markers
2. Polylines
3. Polygons

$.sMap.features.marker.create()

Gets marker options, returns a marker object, and displays a marker on map view.

Options

$.sMap.features();

$.sMap.features.marker.create({
	before: function() {
		console.log('Before');
	},
	after: function() {
		console.log('After');
	},
	name: 'my-marker',
	popup: {
		title: {
			html: 'Title',
			i18n: '',
		},
		description: {
			html: 'Description',
			i18n: '',
		},
		custom: false,
	},
	class: 'default',
	latlng: {lat: 32, lng: 52},
	icon: icons.default.blue,
	popupOpen: true,
	pan: false,
	draggable: true,
	on: {
		click: function(){
			console.log('click callback');
		},
		contextmenu: function(){
			console.log('contextmenu callback');
		},
	},
});
									

$.sMap.features.marker.remove()

Removes a marker programmatically.

$.sMap.features.marker.remove('my-marker');
									

$.sMap.features.marker.wipe()

Removes all polygons from the map view.

$.sMap.features.marker.wipe();
									

$.sMap.features.polyline.create()

Gets polyline options, returns a polyline object and displays a polyline on map view.

Options

$.sMap.features();

$.sMap.features.polyline.create({
	before: function() {},
	after: function() {},
	name: 'my-polyline',
	popup: {
		title: {
			html: 'Title',
			i18n: '',
		},
		description: {
			html: 'Description',
			i18n: '',
		},
		custom: false,
	},
	class: 'default',
	style: styles.default.polyline,
	coordinates: [
		[30, 50],
		[40, 57],
	],
	popupOpen: false,
	pan: false,
	measurement: false,
	on: {
		click: function(){
			console.log('click callback');
		},
		contextmenu: function(){
			console.log('contextmenu callback');
		},
	},
});
									

$.sMap.features.polyline.remove()

Removes a polyline programmatically.

$.sMap.features.polyline.remove('my-polyline');
									

$.sMap.features.polyline.wipe()

Removes all polygons from the map view.

$.sMap.features.polyline.wipe();
									

$.sMap.features.polygon.create()

Gets polygon options, returns a polygon object and displays a polygon on map view.

Options

$.sMap.features();

$.sMap.features.polygon.create({
	before: function() {},
	after: function() {},
	name: 'my-polygon',
	popup: {
		title: {
			html: 'Title',
			i18n: '',
		},
		description: {
			html: 'Description',
			i18n: '',
		},
		custom: false,
	},
	class: 'default',
	style: styles.default.polygon,
	coordinates: [
		[35, 55],
		[35, 45],
		[30, 55],
	],
	popupOpen: false,
	pan: false,
	measurement: false,
	on: {
		click: function(){
			console.log('click callback');
		},
		contextmenu: function(){
			console.log('contextmenu callback');
		},
	},
});
									

$.sMap.features.polygon.remove()

Removes a polygon programmatically.

$.sMap.features.polygon.remove('my-polygon');
									

$.sMap.features.polygon.wipe()

Removes all polygons from the map view.

$.sMap.features.polygon.wipe();
									

Quick access:

1. Points
2. Polylines
3. Polygons

$.sMap.editor.implement()

This sub-module must be called before using either of $.sMap.editor.points, $.sMap.editor.polylines, $.sMap.editor.polygons sub-modules.

Options

$.sMap.editor.implement();
									

Points:

$.sMap.editor.points.start()

Gets an options object including a geoJSON, displays the set on the map upon start, and returns the points geoJSON.

Options

$.sMap.editor.implement();

var points = {
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"properties": {
				title: 'Test1',
				description: 'Desc1',
				icon: '/assets/images/marker-default-green.svg',
			},
			"geometry": {
				"type": "Point",
				"coordinates": [52, 32]
			}
		},
		{
			"type": "Feature",
			"properties": {
				title: 'Test2',
				description: 'Desc2',
				icon: '/assets/images/marker-default-blue.svg',
			},
			"geometry": {
				"type": "Point",
				"coordinates": [53, 32]
			}
		},
		{
			"type": "Feature",
			"properties": {
				title: 'Test3',
				description: 'Desc3',
				icon: '/assets/images/marker-default-red.svg',
			},
			"geometry": {
				"type": "Point",
				"coordinates": [53, 33]
			}
		}
	]
};

points = $.sMap.editor.points.start({
	geoJson: points,
	modules: {
		create: true,
		drag: true,
		delete: true,
		get: true,
		editText: true,
		editIcon: true,
	},
	on: {
		click: function(feature){
			console.log('click');
			console.log(feature);
		},
		contextmenu: function(feature){
			console.log('contextmenu');
			console.log(feature);
		},
		change: function(){
			console.log($.sMap.editor.points.all());
		},
		create: function(point){
			console.log('create:');
			console.log(point);
		},
		drag: function(point){
			console.log('drag:');
			console.log(point);
		},
		delete: function(point){
			console.log('delete:');
			console.log(point);
		},
		get: function(point){
			console.log('get:');
			console.log(point);
		},
		editText: function(point){
			console.log('editText:');
			console.log(point);
		},
		editIcon: function(point){
			console.log('editIcon:');
			console.log(point);
		},
	},
	icons: [
		{
			title: 'Blue',
			class: 'marker-blue',
			url: '/assets/images/marker-default-blue.svg',
		},
		{
			title: 'Green',
			class: 'marker-green',
			url: '/assets/images/marker-default-green.svg',
		},
		{
			title: 'Red',
			class: 'marker-red',
			url: '/assets/images/marker-default-red.svg',
		},
	],
});
									

$.sMap.editor.points.all()

Gets no options and returns the point set geoJSON.

$.sMap.editor.points.all();
									

$.sMap.editor.points.inView()

Gets no options and returns only the points in set that are in viewport.

$.sMap.editor.points.inView();
									

$.sMap.editor.points.get()

Gets item index and returns the point's geometry.

$.sMap.editor.points.get(index);
									

$.sMap.editor.points.delete()

Gets item index and deletes it from the set.

$.sMap.editor.points.delete(index);
									

$.sMap.editor.points.add()

Gets an item and adds it to the set.

$.sMap.editor.points.add(item);
									

Polylines:

$.sMap.editor.polylines.start()

Gets an options object including a geoJSON, displays the set on the map upon start, and returns the polylines geoJSON.

Options

$.sMap.editor.implement();

var polylines = {
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"properties": {
				title: 'Test1',
				description: 'Desc1',
			},
			"geometry": {
				"type": "LineString",
				"coordinates": [
					[51,35],
					[50,34]
				]
			}
		},
		{
			"type": "Feature",
			"properties": {
				title: 'Test2',
				description: 'Desc2',
			},
			"geometry": {
				"type": "LineString",
				"coordinates": [
					[53,32],
					[51,33]
				]
			}
		}
	]
}

polylines = $.sMap.editor.polylines.start({
	geoJson: polylines,
	modules: {
		create: true,
		edit: true,
		delete: true,
		get: true,
		editText: true,
	},
	on: {
		click: function(feature){
			console.log('click');
			console.log(feature);
		},
		contextmenu: function(feature){
			console.log('contextmenu');
			console.log(feature);
		},
		change: function(){
			console.log($.sMap.editor.polylines.all());
		},
		create: function(polyline){
			console.log('create:');
			console.log(polyline);
		},
		drag: function(polyline){
			console.log('drag:');
			console.log(polyline);
		},
		delete: function(polyline){
			console.log('delete:');
			console.log(polyline);
		},
		get: function(polyline){
			console.log('get:');
			console.log(polyline);
		},
		editText: function(point){
			console.log('editText:');
			console.log(point);
		},
		edit: function(polyline){
			console.log('editText:');
			console.log(polyline);
		},
	},
});
									

$.sMap.editor.polylines.all()

Gets no options and returns the polyline set geoJSON.

$.sMap.editor.polylines.all();
									

$.sMap.editor.polylines.get()

Gets item index and returns the polyline's geometry.

$.sMap.editor.polylines.get(index);
									

$.sMap.editor.polylines.delete()

Gets item index and deletes it from the set.

$.sMap.editor.polylines.delete(index);
									

$.sMap.editor.polylines.add()

Gets an item and adds it to the set.

$.sMap.editor.polylines.add(item);
									

Polygons:

$.sMap.editor.polygons.start()

Gets an options object including a geoJSON, displays the set on the map upon start, and returns the polygons geoJSON.

Options

$.sMap.editor.implement();

var polygons = {
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"properties": {
				title: 'Test1',
				description: 'Desc1',
			},
			"geometry": {
				"type": "Polygon",
				"coordinates": [
					[
						[55,35],
						[52,34],
						[52,36],
						[55,35]
					]
				]
			}
		},
		{
			"type": "Feature",
			"properties": {
				title: 'Test2',
				description: 'Desc2',
			},
			"geometry": {
				"type": "Polygon",
				"coordinates": [
					[
						[50,32],
						[57,34],
						[53,30],
						[50,32]
					]
				]
			}
		}
	]
}

polygons = $.sMap.editor.polygons.start({
	geoJson: polygons,
	modules: {
		create: true,
		edit: true,
		delete: true,
		get: true,
		editText: true,
	},
	on: {
		click: function(feature){
			console.log('click');
			console.log(feature);
		},
		contextmenu: function(feature){
			console.log('contextmenu');
			console.log(feature);
		},
		change: function(){
			console.log($.sMap.editor.polygons.all());
		},
		create: function(polygon){
			console.log('create:');
			console.log(polygon);
		},
		drag: function(polygon){
			console.log('drag:');
			console.log(polygon);
		},
		delete: function(polygon){
			console.log('delete:');
			console.log(polygon);
		},
		get: function(polygon){
			console.log('get:');
			console.log(polygon);
		},
		editText: function(point){
			console.log('editText:');
			console.log(point);
		},
		edit: function(polygon){
			console.log('editText:');
			console.log(polygon);
		},
	},
});
									

$.sMap.editor.polygons.all()

Gets no options and returns the polygon set geoJSON.

$.sMap.editor.polygons.all();
									

$.sMap.editor.polygons.get()

Gets item index and returns the polygon's geometry.

$.sMap.editor.polygons.get(index);
									

$.sMap.editor.polygons.delete()

Gets item index and deletes it from the set.

$.sMap.editor.polygons.delete(index);
									

$.sMap.editor.polygons.add()

Gets an item and adds it to the set.

$.sMap.editor.polygons.add(item);
									

$.sMap.search.implement()

Gets Search options and appends Search element to map view.

Options

$.sMap.search.implement({
	types: {
		address: true,
		poi: true,
	},
	counts: {
		geocode: 10,
		poi: 10,
	},
	history: {
		status: true,
	},
});
									

$.sMap.search.type.look()

Gets Search options and resolves search programmatically.

Options

$.sMap.search.look({
	query: 'restaurants',
	type: 'poi',
	icon: icons.default.blue,
});
									

$.sMap.search.set()

Gets Search Type options and sets Search Type programmatically.

Options

$.sMap.search.set({
	value: 'poi',
});
									

$.sMap.search.get()

Gets no options and returns current Search Type.

$.sMap.search.get();