Reminder:
This project uses Leafletjs, and as a result all the documented Leaflet methods, properties and event listeners also work for Leaflet objects here.
This project uses Leafletjs, and as a result all the documented Leaflet methods, properties and event listeners also work for Leaflet objects here.
In order to get the best result, make sure you serve your project locally before testing your code.
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:
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:
Similarly, add the scripts below to the bottom of your html document, before closeing the body tag:
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.
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',
},
},
},
});
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.
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:
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
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
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
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