Installation

Reminder:

This project uses Leafletjs, and as a result all the documented Leaflet methods, properties and event listeners also work for Leaflet objects here.

Warning:

In order to get the best result, make sure you serve your project locally before testing your code.

Downloadable example:

If you're looking for a ready to use downloadable example, you can jump to this section.

Installing Map.ir Web SDK is quite simple and straightforward:

CSS:

Add the following stylesheets to your document's head tag:

If you're planning to create a multi-lingual Single Page App (SPA), then you'll need to make a few modifications:

Tips:

  • All the CSS variables are kept inside vars.css. You can use this file to customize colors and sizes.
  • app.css contains the rest of the styles that Map.ir Web SDK requires.

Javascript:

Similarly, add the scripts below to the bottom of your html document, before closeing the body tag:

Tips:

  • Map.ir Web SDK is jQuery v3.2 dependant.
  • jquery.env.js contains a javascript object of configurations and endpoints that the SDK requires to perform correctly.
  • All the shapes and marker styles are defined in s.map.styles.js. You can change them to customize polygons, polylines and markers if you don't wish to use the default styles.
  • s.map.js is the SDK core.

Getting started

Basic map:

Creating a basic map is pretty easy. You begin with calling the Map.ir Web SDK jQuery plugin:


$(document).ready(function() {
	var map = $.sMap({
		element: '#map',
		presets: {
			latlng: {
				lat: 35.70,
				lng: 51.47,
			},
			zoom: 6,
		},
	});
})
										

The plugin returns a Leaflet-like map object that you can later use in your app.

Tips:

  • The element property holds the CSS selector of the element you'd like to append the map into. You should set the width and height of this element using CSS.
  • The presets property contains the geolocation of your map's center point and your desired zoom level onces it's done loading.

But that is not all. One more little step and our basic map will be all set:


$.sMap.layers.static.build({
	layers: {
		base: {
			default: {
				server: 'https://map.ir/shiveh',
				layers: 'Shiveh:ShivehGSLD256',
				format: 'image/png',
			},
		},
	},
});
										

What just happened?

First we created a map view, then set a static base layer for our map to show.
Don't panic just yet, we'll learn more about this as we move on.

Stand-alone Demo

Calling modules:

Creating a map view was easy, but how about enabling a few extra features?


$.sMap.logo.implement();
$.sMap.zoomControl.implement();
$.sMap.fullscreen.implement();
$.sMap.userLocation.implement();
										

The code is pretty self-explanatory, but here are a few free hints:

Tips:

  • logo, zoomControl, fullscreen and userLocation are the sub-modules you can call if you have the required privillages and have their files added to your document beforehand too.
  • The implement method is a common way to tell sub-modules to append their DOM elements to your map view.
  • Sub-modules might come with their own options, like the static layers sub-module we called earlier. (more on that in the future)
Stand-alone Demo

Adding Features

Adding a marker:

After creating a map, you can create a marker like this:


$.sMap.features();

$.sMap.features.marker.create({
	name: 'test-marker',
	popup: {
		title: {
			html: 'Title',
			i18n: '',
		},
		description: {
			html: 'Description',
			i18n: '',
		},
	},
	latlng: {
		lat: 37.4,
		lng: 49.7,
	},
	popupOpen: true,
});
										
Stand-alone Demo

Adding a polyline:

After creating a map, you can create a polyline like this:


$.sMap.features();

$.sMap.features.polyline.create({
	name: 'test-polyline',
	popup: {
		title: {
			html: 'Title',
			i18n: '',
		},
		description: {
			html: 'Description',
			i18n: '',
		},
	},
	coordinates: [
		[30, 50],
		[40, 57],
	],
	popupOpen: true,
});
										
Stand-alone Demo

Adding a polygon:

After creating a map, you can create a polygon like this:


$.sMap.features();

$.sMap.features.polygon.create({
	name: 'test-polygon',
	popup: {
		title: {
			html: 'Title',
			i18n: '',
		},
		description: {
			html: 'Description',
			i18n: '',
		},
	},
	coordinates: [
		[35, 55],
		[35, 45],
		[30, 55],
	],
	popupOpen: true,
});
										
Stand-alone Demo

End Result

HTML:

app.css:


@charset "utf-8";

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-size: 10px;
}

#map {
	width: 100%;
	height: 100%;
}
										

app.js:


$(document).ready(function() {
    var map = $.sMap({
        element: '#map',
        presets: {
            latlng: {
                lat: 32,
                lng: 52,
            },
            zoom: 6,
        },
    });

    $.sMap.layers.static.build();

    var marker = $.sMap.features.marker.create({
        name: 'demo-marker',
        popup: {
            title: {
                html: 'عنوان',
                i18n: '',
            },
            description: {
                html: 'توضیح',
                i18n: '',
            },
            custom: false,
        },
        latlng: {
            lat: 32,
            lng: 52
        },
        icon: icons.default.blue,
        popupOpen: true,
        pan: true,
        on: {
            click: function() {
                console.log('Click callback.');
            },
            contextmenu: function() {
                console.log('Contextmenu callback.');
            },
        },
		toolbar: [],
    });
});
										
Download